/* NODO Metro — tiles estilo Windows Phone 8 (se carga DESPUÉS de metro.css y lo sobrescribe)
   Geometría WP8: 4 columnas de tiles chicos; chico = 1x1, mediano = 2x2, ancho = 4x2; separación pequeña.
   Todos los tiles usan el mismo acento (el del tema), como en el Start de WP. */

:root { --m-fs-hero: 56px; --m-tile-gap: 6px; }

.m-view { container-type: inline-size; perspective: 900px; padding-bottom: 104px; }
.m-tiles {
  gap: var(--m-tile-gap);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc((100cqw - 3 * var(--m-tile-gap)) / 4);   /* alto = ancho de un tile chico */
  grid-auto-flow: dense;
}

/* ---------- Tile ---------- */
.m-tile { grid-column: span 2; grid-row: span 2; padding: 0; display: block; transform-origin: center; }
.m-tile.s1 { grid-column: span 1; grid-row: span 1; }
.m-tile.w4 { grid-column: span 4; grid-row: span 2; }
.m-tile[hidden] { display: none; }
.m-tile:active { transform: none; }                       /* el efecto de presión es el tilt 3D */
.m-tile.pressed { transform: perspective(500px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) scale(.97); transition-duration: 60ms; }

/* Ícono: centrado en el tile, ~40% del ancho (guía iconic tile de WP8); trazo grueso tipo glifo */
.m-tile__icon { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.m-tile__icon .m-ico { width: 40%; height: auto; aspect-ratio: 1; stroke-width: 1.5; }
.m-tile.s1 .m-tile__icon .m-ico { width: 54%; }
.m-tile.w4 .m-tile__icon { place-items: center start; padding-left: 14%; }
.m-tile.w4 .m-tile__icon .m-ico { width: 17%; }

/* Título abajo-izquierda, número (badge) abajo-derecha en grande, como el tile Calendario */
.m-tile__label { position: absolute; left: 8px; bottom: 6px; font-size: var(--m-fs-micro); font-weight: 400; }
.m-tile__badge { position: absolute; right: 8px; bottom: 0; top: auto; font-size: var(--m-fs-hero); font-weight: 300; line-height: 1; }
.m-tile.s1 .m-tile__badge { top: 4px; bottom: auto; font-size: var(--m-fs-body); font-weight: 600; }
.m-tile.s1 .m-tile__label { display: none; }               /* los chicos van sin texto, como en WP */
.m-tile__value { font-size: var(--m-fs-hero); font-weight: 300; line-height: 1; letter-spacing: -1px; }

/* ---------- Live tile: giro 3D sobre el eje horizontal ---------- */
.m-tile.live > .face { position: absolute; inset: 0; padding: 8px 8px 6px; display: flex; flex-direction: column; justify-content: space-between;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 700ms var(--m-ease);
  transform: perspective(700px) rotateX(0deg); }
.m-tile.live > .face.back { background: color-mix(in srgb, var(--m-accent) 78%, #000); transform: perspective(700px) rotateX(180deg); color: var(--m-accent-ink); }
.m-tile.live.flipped > .face.front { transform: perspective(700px) rotateX(-180deg); }
.m-tile.live.flipped > .face.back  { transform: perspective(700px) rotateX(0deg); }
.m-tile.live > .face .m-tile__label { position: static; }

/* ---------- Entrada / salida del Start ("turnstile feather") ---------- */
@keyframes m-tile-in  { from { opacity: 0; transform: perspective(700px) rotateY(-90deg); } to { opacity: 1; transform: none; } }
@keyframes m-tile-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(700px) rotateY(90deg); } }
.m-tiles.entering .m-tile { transform-origin: left center; animation: m-tile-in 340ms var(--m-ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.m-tiles.leaving  .m-tile { transform-origin: left center; animation: m-tile-out 200ms ease-in forwards; animation-delay: calc(var(--i, 0) * 20ms); }

/* ---------- Turnstile entre páginas ---------- */
@keyframes m-turn-in  { from { opacity: 0; transform: perspective(900px) rotateY(-70deg); } to { opacity: 1; transform: none; } }
@keyframes m-turn-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(900px) rotateY(55deg); } }
.m-turn-in  { transform-origin: left center; animation: m-turn-in 280ms var(--m-ease) both; }
.m-turn-out { transform-origin: left center; animation: m-turn-out 180ms ease-in both; }

/* ---------- Modo edición ---------- */
.m-tiles.editing .m-tile { touch-action: none; user-select: none; transform: scale(.9); opacity: .72; }
.m-tiles.editing .m-tile.selected { transform: scale(1.03); opacity: 1; z-index: 2; }
.m-tiles.editing .m-tile:active { transform: scale(.9); }
.m-tiles.editing .m-tile.selected:active { transform: scale(1.03); }
.m-tiles .m-tile.dragging { z-index: 5; opacity: .95; }
.m-tile__ctl { position: absolute; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.m-tile__ctl.un { top: 0; right: 0; }
.m-tile__ctl.rs { bottom: 0; right: 0; }
.m-tile__ctl i { width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; }
.m-tile__ctl i svg { width: 16px; height: 16px; }
.m-editbar { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; font-size: var(--m-fs-micro); color: var(--m-muted); }
.m-editbar span { flex: 1; }
.m-editbar .m-btn { min-height: 44px; padding: 8px 16px; flex: none; }

/* ---------- Barra inferior (app bar WP: botones circulares) ---------- */
.m-appbar { height: 80px; }
.m-appbar .ico { width: 48px; height: 48px; }
.m-appbar .ico .m-ico { width: 24px; height: 24px; }

.m-view .m-page { animation: none; }