/* 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; }


/* ---------- Color propio por mosaico ---------- */
[data-accent="cobalto"]   { --m-accent: #0050ef; }
[data-accent="indigo"]    { --m-accent: #6a00ff; }
[data-accent="rosa"]      { --m-accent: #e05fb8; }
[data-accent="carmesi"]   { --m-accent: #a20025; }
[data-accent="ambar"]     { --m-accent: #f0a30a; --m-accent-ink: #1e1e1e; }
[data-accent="turquesa"]  { --m-accent: #00aba9; }
[data-accent="marron"]    { --m-accent: #825a2c; }
[data-accent="acero"]     { --m-accent: #647687; }
[data-accent="negro"]     { --m-accent: #1b1b1b; }
.m-tiles .m-tile.m-tile--color { background: var(--m-accent); color: var(--m-accent-ink); }
.m-tiles .m-tile.m-tile--color .m-ico { color: var(--m-accent-ink); }
.m-swatches { padding: 0 0 12px; }
.m-swatches__t { display: block; font-size: var(--m-fs-micro); color: var(--m-muted); margin-bottom: 8px; }
.m-swatches__fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.m-swatch { aspect-ratio: 1; min-height: 32px; border: 2px solid transparent; background: var(--m-accent); cursor: pointer; padding: 0; border-radius: 0; }
.m-swatch[aria-pressed="true"] { border-color: var(--m-ink); outline: 2px solid var(--m-bg); outline-offset: -4px; }
.m-swatch--auto { background: var(--m-surface-2); color: var(--m-ink); font-size: 10px; text-transform: lowercase; }


/* ---------- Swivel: diálogos y selectores giran al abrir y cerrar ---------- */
@keyframes m-swivel-in  { from { opacity: 0; transform: perspective(900px) rotateX(-70deg); } to { opacity: 1; transform: none; } }
@keyframes m-swivel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(900px) rotateX(60deg); } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
.m-dialog { transform-origin: 50% 0; animation: m-swivel-in 280ms var(--m-ease) both; }
.m-dialog-bg { animation: m-fade 150ms; }
.m-dialog-bg.saliendo { opacity: 0; transition: opacity 180ms; }
.m-dialog-bg.saliendo .m-dialog { animation: m-swivel-out 180ms ease-in forwards; }

/* barra de edición: texto arriba y botones en una fila */
.m-editbar { flex-wrap: wrap; }
.m-editbar > span { flex: 1 0 100%; }
.m-editbar__b { display: flex; gap: 6px; width: 100%; }
.m-editbar__b .m-btn { flex: 1; min-width: 0; padding: 8px 4px; font-size: var(--m-fs-micro); }
.m-editbar__b .m-btn[disabled] { opacity: .4; }