/*
 * styles.css — Rediseño neutro (claro/oscuro), layout de 3 columnas y estilos de tarjetas, juegos y carrusel.
 * Cómo modificarlo:
 *  - Colores: cambia las variables de :root (tema claro) y de las dos secciones oscuras (preferencia del sistema y toggle).
 *  - Ancho del sitio: .max-w-7xl (80rem). Columnas: .dash-grid (1 → 2 en ≥768px → 3 en ≥1024px).
 *  - La grilla se define aquí (clases w2/w3/w4/w6 sobre 6 columnas en escritorio), así funciona aunque el CDN de Tailwind no cargue.
 */

/* ------------------------------------------------------------ Temas (6 colores) */
/* Temas: blanco (por defecto), negro, rosado, verde, rojo y purpura. Se eligen con data-theme en <html>.
   --bg = fondo de la página · --on-bg = texto sobre ese fondo (cabecera y pie) · el resto son colores de las tarjetas.
   Para agregar un tema: copia un bloque, cambia el nombre en data-theme y añade un botón .swatch en index.html. */
:root, :root[data-theme="blanco"] {
  --bg: #fafaf9; --on-bg: #1c1917;
  --surface: #ffffff; --surface-2: #f5f5f4; --line: #e7e5e4;
  --text: #1c1917; --muted: #78716c;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #e0f2ef;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 6px 20px rgba(28, 25, 23, .04);
  --radius: 16px;
  color-scheme: light;
}

:root[data-theme="negro"] {
  --bg: #0c0a09; --on-bg: #fafaf9;
  --surface: #1c1917; --surface-2: #292524; --line: #3a3532;
  --text: #fafaf9; --muted: #a8a29e;
  --accent: #2dd4bf; --accent-ink: #042f2e; --accent-soft: #123532;
  --green: #4ade80; --green-soft: rgba(74, 222, 128, .15); --red: #f87171; --red-soft: rgba(248, 113, 113, .15);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* Sin elección guardada: se respeta la preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0c0a09; --on-bg: #fafaf9;
    --surface: #1c1917; --surface-2: #292524; --line: #3a3532;
    --text: #fafaf9; --muted: #a8a29e;
    --accent: #2dd4bf; --accent-ink: #042f2e; --accent-soft: #123532;
    --green: #4ade80; --green-soft: rgba(74, 222, 128, .15); --red: #f87171; --red-soft: rgba(248, 113, 113, .15);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

:root[data-theme="rosado"] {
  --bg: #f9a8d4; --on-bg: #3b0a24;
  --surface: #fffafc; --surface-2: #fdf2f8; --line: #f3bfdc;
  --text: #2d0a1c; --muted: #8a4a69;
  --accent: #be185d; --accent-ink: #ffffff; --accent-soft: #fce7f3;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(80, 10, 50, .10), 0 8px 24px rgba(80, 10, 50, .10);
  color-scheme: light;
}

:root[data-theme="verde"] {
  --bg: #86efac; --on-bg: #052e16;
  --surface: #fafffb; --surface-2: #f0fdf4; --line: #b3e8c6;
  --text: #052e16; --muted: #3f6b52;
  --accent: #047857; --accent-ink: #ffffff; --accent-soft: #dcfce7;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(5, 46, 22, .10), 0 8px 24px rgba(5, 46, 22, .10);
  color-scheme: light;
}

:root[data-theme="rojo"] {
  --bg: #f87171; --on-bg: #2b0707;
  --surface: #fffafa; --surface-2: #fef2f2; --line: #f9c4c4;
  --text: #2b0707; --muted: #8a3a3a;
  --accent: #b91c1c; --accent-ink: #ffffff; --accent-soft: #fee2e2;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(60, 5, 5, .12), 0 8px 24px rgba(60, 5, 5, .12);
  color-scheme: light;
}

:root[data-theme="purpura"] {
  --bg: #a78bfa; --on-bg: #1e1042;
  --surface: #fdfcff; --surface-2: #f5f3ff; --line: #d9d0fb;
  --text: #1e1042; --muted: #5b4b8a;
  --accent: #6d28d9; --accent-ink: #ffffff; --accent-soft: #ede9fe;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(30, 16, 66, .12), 0 8px 24px rgba(30, 16, 66, .12);
  color-scheme: light;
}

/* ------------------------------------------------------------------- Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body.app-body { overflow-x: clip; } }   /* nada puede generar scroll horizontal (carrusel, tablas); clip no rompe position: sticky */
body.app-body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  line-height: 1.5; padding-bottom: env(safe-area-inset-bottom);
}
body.modal-open { overflow: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.container-app { width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.app-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--on-bg) 18%, transparent); }
.header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.header-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.app-brand { margin: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--on-bg); }
main { padding-top: 16px; padding-bottom: 8px; }

/* ------------------------------------------- Texto neón + selector de color */
/* El texto neón va sobre una cápsula oscura para que se lea sobre cualquiera de los 6 fondos. */
.neon-hint {
  display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  background: #0a0a14; border: 1px solid rgba(57, 255, 20, .32);
  color: #ecfbe9; font-weight: 800; font-size: .85rem; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 0 2px rgba(255, 255, 255, .8), 0 0 6px rgba(57, 255, 20, .75), 0 0 12px rgba(57, 255, 20, .5), 0 0 22px rgba(0, 255, 156, .3);
  box-shadow: 0 0 7px rgba(57, 255, 20, .26), inset 0 0 6px rgba(57, 255, 20, .12);
  animation: neon-pulse 6s ease-in-out infinite alternate;     /* parpadeo muy lento (sube y baja el brillo cada ~6 s) */
  user-select: none;
}
@keyframes neon-pulse {
  from { text-shadow: 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(57, 255, 20, .5), 0 0 8px rgba(57, 255, 20, .3), 0 0 14px rgba(0, 255, 156, .15); box-shadow: 0 0 3px rgba(57, 255, 20, .15), inset 0 0 3px rgba(57, 255, 20, .06); border-color: rgba(57, 255, 20, .2); }
  to { text-shadow: 0 0 2px rgba(255, 255, 255, .85), 0 0 7px rgba(57, 255, 20, .8), 0 0 14px rgba(57, 255, 20, .55), 0 0 26px rgba(0, 255, 156, .35); box-shadow: 0 0 9px rgba(57, 255, 20, .32), inset 0 0 7px rgba(57, 255, 20, .14); border-color: rgba(57, 255, 20, .38); }
}
.theme-switch { display: flex; align-items: center; gap: 8px; }
.swatch { position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); cursor: pointer; transition: transform .15s; }
.swatch::after { content: ''; position: absolute; inset: -6px; } /* área táctil más grande */
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--on-bg); outline-offset: 2px; }
.sw-blanco { background: #ffffff; }
.sw-negro { background: #0c0a09; border-color: rgba(255, 255, 255, .45); }
.sw-rosado { background: #f472b6; }
.sw-verde { background: #4ade80; }
.sw-rojo { background: #ef4444; }
.sw-purpura { background: #8b5cf6; }

/* ----------------------------------------------------- Grilla arrastrable (1 / 2 / 6 col)
   Cada tarjeta es hija directa de .dash-grid y trae su ancho en una clase: w2 = 1/3, w3 = 1/2, w4 = 2/3, w6 = todo el ancho.
   Móvil: 1 columna. Tablet (≥768px): 2 columnas (w2 = media fila, el resto fila completa). Escritorio (≥1024px): 6 columnas.
   grid-auto-flow: dense rellena los huecos al reordenar. rs2 = ocupa 2 filas (Beneficios junto a Restricción + Efemérides). */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; grid-auto-flow: dense; }
@media (min-width: 768px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid > .w3, .dash-grid > .w4, .dash-grid > .w6 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dash-grid > .w2 { grid-column: span 2 / span 2; }
  .dash-grid > .w3 { grid-column: span 3 / span 3; }
  .dash-grid > .w4 { grid-column: span 4 / span 4; }
  .dash-grid > .w6 { grid-column: span 6 / span 6; }
  .dash-grid > .rs2 { grid-row: span 2 / span 2; }
}

/* ----------------------------------------------------------------- Tarjetas */
.card { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head .card-title { margin-bottom: 0; }
.card-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.label { margin: 0 0 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.muted { color: var(--muted); margin: 0; }
.small { font-size: .8rem; }
.capitalize { text-transform: capitalize; }
.accent { color: var(--accent); }
.attrib { margin-top: 12px; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.link-sm { color: var(--accent); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.link-sm:hover { text-decoration: underline; }

.clock { margin: 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.big { margin: 0; font-size: 1.6rem; font-weight: 800; }
.big-xl { margin: 0; font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.weather-desc { margin: 2px 0 4px; font-weight: 600; }
.weather-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.holiday-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.holiday-name { margin: 0; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-gray { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ------------------------------------------------------------- Controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2; cursor: pointer; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-sm { padding: 7px 12px; font-size: .82rem; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 1.1rem; cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); }

.input { flex: 1; min-width: 0; width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .95rem; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
select.input { flex: 0 0 auto; width: auto; }
.input-sm { padding: 7px 10px; font-size: .85rem; flex: 0 0 auto; width: auto; }

/* --------------------------------------------------------------- Economía */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.stat-val { margin: 0; font-weight: 800; font-size: .98rem; }
.converter { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.conv-row { display: flex; gap: 8px; align-items: center; }
.conv-tag { min-width: 64px; text-align: center; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .9rem; }

/* ------------------------------------------------------------ Restricción */
.res { margin: 10px 0 6px; display: grid; gap: 6px; }
.res p { margin: 0; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: .9rem; }
.res-ok { background: var(--green-soft); color: var(--green); }
.res-bad { background: var(--red-soft); color: var(--red); }

/* ------------------------------------------------------------- Efemérides */
.efe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.efe-item { display: flex; gap: 12px; }
.efe-anio { flex: 0 0 48px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.efe-titulo { margin: 0; font-weight: 700; font-size: .95rem; }
.efe-detalle { font-size: .85rem; margin: 2px 0 0; }

/* ----------------------------------------------------------------- Enlaces de tarjetas (Beneficios) */
.oferta-link { color: var(--accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.oferta-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Noticias */
.card-fill { display: flex; flex-direction: column; }
.card-fill .news-grid { flex: 1; grid-auto-rows: 1fr; }
.card-fill .news-thumb { height: 100%; min-height: 78px; }
.news-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
.news-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.news-item:hover { border-color: var(--accent); background: var(--surface-2); }
.news-thumb { flex: 0 0 104px; height: 78px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-ph { font-size: 1.6rem; }
.news-body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.news-title { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------- Horóscopo */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .68rem; cursor: pointer; min-width: 0; }
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-sym { font-size: 1.15rem; line-height: 1.1; }
.chip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.horo-detail { margin-top: 14px; display: grid; gap: 10px; }
.horo-head { display: flex; align-items: center; gap: 12px; }
.horo-symbol { font-size: 2rem; line-height: 1; color: var(--accent); }
.horo-name { margin: 0; font-weight: 800; font-size: 1.1rem; }
.horo-cat { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.horo-text { margin: 2px 0 0; font-size: .92rem; }
.horo-lucky { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------ Minijuegos (embebidos) */
.game-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.game-btn { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--text); padding: 16px 6px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; display: grid; gap: 4px; place-items: center; }
.game-btn:hover { border-color: var(--accent); }
.game-ico { font-size: 1.7rem; line-height: 1; }
.game-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.game-title { font-weight: 700; }
.game-stage { outline: none; text-align: center; }
.game-status { margin: 0 0 10px; font-weight: 700; font-size: .95rem; }
.game-hint { margin: 8px 0 0; }

.expand-btn { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.expand-btn:hover { border-color: var(--accent); }

.game-card.is-expanded { position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; }
.game-card:fullscreen { width: 100%; height: 100%; overflow: auto; border-radius: 0; padding: 16px; display: flex; flex-direction: column; }
.is-expanded .game-stage, .game-card:fullscreen .game-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.is-expanded .expand-btn { top: 14px; right: 14px; }

/* Ajedrez */
.chess-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto 10px; border: 2px solid var(--text); border-radius: 8px; overflow: hidden; }
.chess-sq { border: 0; padding: 0; font: inherit; font-size: clamp(1.5rem, 8vw, 2.7rem); line-height: 1; display: grid; place-items: center; cursor: pointer; }
.chess-sq.light { background: #f0d9b5; }
.chess-sq.dark { background: #b58863; }
.chess-sq.pw { color: #ffffff; -webkit-text-stroke: 1px #2b2b2b; }
.chess-sq.pb { color: #1d1d1d; }
.chess-sq.sel { background: #f6e05e !important; }
.chess-sq.dest { box-shadow: inset 0 0 0 4px rgba(21, 128, 61, .85); }

/* Buscaminas */
.mines-board { display: grid; gap: 3px; width: min(100%, 420px); margin: 0 auto 10px; touch-action: manipulation; }
.mine-cell { aspect-ratio: 1; border: 0; border-radius: 5px; background: var(--line); color: var(--text); font: inherit; font-weight: 800; font-size: clamp(.9rem, 4.5vw, 1.2rem); display: grid; place-items: center; padding: 0; cursor: pointer; }
.mine-cell.open { background: var(--surface-2); cursor: default; }
.mine-cell.boom { background: var(--red-soft); }
.mine-cell.n1 { color: #2563eb; } .mine-cell.n2 { color: #15803d; } .mine-cell.n3 { color: #dc2626; } .mine-cell.n4 { color: #7c3aed; }
.mine-cell.n5 { color: #ea580c; } .mine-cell.n6 { color: #0891b2; } .mine-cell.n7 { color: var(--text); } .mine-cell.n8 { color: var(--muted); }

/* Sudoku */
.sudoku-board { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto 10px; border: 2px solid var(--text); border-radius: 8px; overflow: hidden; }
.sd-cell { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--accent); font: inherit; font-weight: 600; font-size: clamp(.95rem, 4vw, 1.4rem); padding: 0; cursor: pointer; display: grid; place-items: center; }
.sd-cell.fixed { color: var(--text); font-weight: 800; background: var(--surface-2); }
.sd-cell.br { border-right: 2px solid var(--text); }
.sd-cell.bb { border-bottom: 2px solid var(--text); }
.sd-cell.same { background: var(--accent-soft); }
.sd-cell.sel { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.sd-cell.bad { color: var(--red); background: var(--red-soft); }
.sudoku-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 460px); margin: 0 auto 4px; }
.pad-btn { height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.pad-btn:active { background: var(--accent-soft); }

/* Snake / Pong (canvas) */
.game-canvas { display: block; width: 100%; max-width: min(100%, 520px); aspect-ratio: var(--ratio, 1); margin: 0 auto 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); touch-action: none; cursor: pointer; }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-areas: ". up ." "left . right" ". down ."; gap: 6px; justify-content: center; margin-top: 10px; }
.dpad .pad-btn { height: 52px; }
.dp-up { grid-area: up; } .dp-left { grid-area: left; } .dp-right { grid-area: right; } .dp-down { grid-area: down; }
@media (hover: hover) and (pointer: fine) { .dpad { display: none; } }

.is-expanded .chess-board, .game-card:fullscreen .chess-board { width: min(100%, 74vh); width: min(100%, 74dvh); }
.is-expanded .sudoku-board, .game-card:fullscreen .sudoku-board { width: min(100%, 68vh); width: min(100%, 68dvh); }
.is-expanded .mines-board, .game-card:fullscreen .mines-board { width: min(100%, 70vh); width: min(100%, 70dvh); }
.is-expanded .game-canvas, .game-card:fullscreen .game-canvas { max-width: min(100%, calc(70vh * var(--ratio, 1))); max-width: min(100%, calc(70dvh * var(--ratio, 1))); }

/* ---------------------------------------------------- Carrusel de mascotas */
.carousel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -8px; outline-offset: 4px; }
.carousel-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0 8px; min-width: 0; }
@media (min-width: 768px) { .slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .slide { flex-basis: 33.3333%; } }
.slide-card { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.slide-figure { position: relative; display: grid; place-items: center; height: 210px; overflow: hidden; background: var(--surface-2); }
.slide-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.slide-card:hover .slide-img { transform: scale(1.04); }
.slide-paw { width: 72px; height: 72px; fill: var(--muted); opacity: .5; }
.slide-credit { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .68rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(4px); }
.slide-credit:hover { background: rgba(0, 0, 0, .8); }
.slide-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
.slide-title { margin: 0; font-size: 1.02rem; font-weight: 700; }
.slide-text { margin: 0; font-size: .9rem; }
.slide-link { margin-top: auto; }
.dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dot { position: relative; width: 10px; height: 10px; border: 0; border-radius: 999px; background: var(--line); padding: 0; cursor: pointer; transition: width .2s, background .2s; }
.dot::after { content: ''; position: absolute; inset: -8px; }
.dot[aria-current="true"] { width: 24px; background: var(--accent); }

/* ------------------------------------------------------------------ Varios */
.ad-slot { min-height: 100px; border-radius: var(--radius); overflow: hidden; text-align: center; min-width: 0; }
.app-footer { padding-top: 14px; padding-bottom: 32px; text-align: center; }
.app-footer .muted { color: var(--on-bg); opacity: .85; }
.app-footer p + p { margin-top: 4px; }

@media (max-width: 400px) {
  .big-xl { font-size: 2.5rem; }
  .clock { font-size: 1.9rem; }
  .card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  /* El neón del botón (parpadeo muy lento y suave), el brillo de los módulos, la galleta (módulo, fortuna al centro y chip del header), sus brillos, el confeti y el carrusel se animan siempre: son parte central de la experiencia. */
  *:not(.neon-hint):not(.destello):not(.galleta-hero):not(.galleta-hero *):not(.galleta-chip):not(.galleta-chip *):not(.galleta-msg):not(.galleta-msg *):not(.carrusel):not(.carrusel *):not(.confeti-canvas):not(.aviso-ola):not(.aviso-ola *):not(.chungi):not(.chungi *) { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Aviso de datos de ejemplo / notas */
.note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); border: 1px solid var(--line); font-size: .8rem; }

/* ------------------------------------------ Beneficios (Ventanilla Única Social) */
.social-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.social-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.social-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.social-title { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.3; }
.social-desc { font-size: .88rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.social-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding-top: 4px; }
.social-date { font-size: .8rem; font-weight: 600; color: var(--text); }

/* Móvil: la cabecera (marca + selector de color) ocupa varias filas, así que no se queda fija */
@media (max-width: 640px) {
  .app-header { position: static; }
  .swatch { width: 26px; height: 26px; }
  .header-tools { gap: 8px 10px; }
}
.game-menu { grid-template-columns: repeat(auto-fit, minmax(110px, 160px)); justify-content: center; }

/* ===== Ronda 4 ===== */
/* Carrusel: durante la animación propia (rAF) se desactiva el snap para que no pelee con el desplazamiento */
.carousel-track.no-snap { scroll-snap-type: none; }


/* Chips de filtro (Películas, Deportes) */
.store-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.store-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.store-chip:hover { background: var(--surface-2); }
.store-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.store-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--muted); }

/* Películas en estreno */
.cine-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .cine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cine-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cine-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); min-width: 0; }
.cine-poster { position: relative; aspect-ratio: 2 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.cine-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cine-ph { font-size: 2.2rem; opacity: .5; }
.cine-body { padding: 10px; display: grid; gap: 6px; align-content: start; flex: 1; }
.cine-title { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cine-genre { margin: 0; font-size: .75rem; color: var(--muted); }
.cine-cadenas { display: flex; flex-wrap: wrap; gap: 4px; }
.cine-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cine-actions .btn { flex: 1 1 auto; padding: 6px 8px; font-size: .75rem; }

/* YouTube Chile */
.yt-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .yt-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.yt-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.yt-player iframe, .yt-player .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster { display: block; padding: 0; border: 0; background: #000 center / cover no-repeat; cursor: pointer; }
.yt-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: #f00; display: grid; place-items: center; color: #fff; font-size: 1.4rem; pointer-events: none; }
.yt-now { margin: 8px 0 0; font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* alto fijo (2 líneas): el cuadro del video no cambia de tamaño al rotar */
.yt-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.yt-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.yt-chan { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.yt-chan:hover { background: var(--surface-2); }
.yt-chan[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.yt-video { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.yt-video:hover, .yt-video[aria-current="true"] { border-color: var(--accent); background: var(--surface-2); }
.yt-thumb { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-vtitle { font-size: .8rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.yt-vdate { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* Ajustes finos ronda 4 */
.dash-grid > .card-grow { display: flex; flex-direction: column; }
.dash-grid > .card-grow .efe-list { flex: 1 1 auto; align-content: space-evenly; }
.cine-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }

/* Ronda 5 */
.cine-ph-title { padding: 12px; text-align: center; font-weight: 800; font-size: .95rem; line-height: 1.25; color: var(--accent-ink); background: linear-gradient(160deg, var(--accent), #44403c); width: 100%; height: 100%; display: grid; place-items: center; }
.ig-post { background: var(--surface); }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; padding: 2px; display: grid; place-items: center; }
.ig-avatar-in { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--text); display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.ig-who { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.ig-handle { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-sub { font-size: .75rem; color: var(--muted); }
.ig-dots { color: var(--muted); letter-spacing: 1px; font-size: .8rem; }
.ig-photo { height: auto; aspect-ratio: 1 / 1; }
.ig-foot { display: grid; gap: 8px; padding: 10px 12px 12px; align-content: start; flex: 1; }
.ig-actions { display: flex; gap: 12px; font-size: 1.15rem; line-height: 1; }
.ig-caption { margin: 0; font-size: .85rem; line-height: 1.4; }
.ig-credit { position: static; background: none; padding: 0; color: var(--muted); font-size: .7rem; }
.ig-foot .slide-link { justify-self: start; }

/* ===== Películas: scroll interno en escritorio ===== */
[data-mod="peliculas"] .cine-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; max-height: 640px; overflow-y: auto; padding-right: 2px; }
@media (max-width: 1023px) { [data-mod="peliculas"] .cine-grid { max-height: none; } }

/* ===== Mis pendientes: post-it amarillo 2D ===== */
.postit { background: #fff2a8; border: 1px solid #e6d36a; color: #3b3200; box-shadow: none; border-radius: 6px; padding: 12px 14px 14px; --pi-line: rgba(59, 50, 0, .18); }
.postit, .postit * { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.postit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.postit-title { margin: 0; font-size: 1rem; font-weight: 800; color: #3b3200; }
.postit-pin { border: 1px solid rgba(59, 50, 0, .35); background: rgba(255, 255, 255, .55); color: #3b3200; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.postit-pin:hover { background: rgba(255, 255, 255, .9); }
.postit-form { display: flex; gap: 6px; }
.postit-input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .6); border: 0; border-bottom: 2px solid var(--pi-line); border-radius: 4px 4px 0 0; padding: 8px 10px; font: inherit; font-size: .92rem; color: #3b3200; }
.postit-input::placeholder { color: #8a8466; opacity: 1; }
.postit-input:focus::placeholder { color: transparent; } /* el aviso desaparece al hacer clic */
.postit-input:focus { outline: 2px solid #3b3200; outline-offset: 1px; background: #fff; }
.postit-input:disabled { opacity: .6; }
.postit-add { width: 38px; border: 0; border-radius: 6px; background: #3b3200; color: #fff2a8; font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; }
.postit-add:disabled { opacity: .4; cursor: default; }
.postit-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.postit-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed var(--pi-line); }
.postit-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #3b3200; flex: none; cursor: pointer; }
.postit-text { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.postit-item.done .postit-text { text-decoration: line-through; opacity: .55; }
.postit-del { border: 0; background: transparent; color: #3b3200; font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; opacity: .7; }
.postit-del:hover { opacity: 1; background: rgba(59, 50, 0, .12); }
.postit-count { margin: 8px 0 0; font-size: .75rem; color: #5c5224; }
.postit :focus-visible { outline: 2px solid #3b3200; outline-offset: 2px; }

/* Estado desacoplado: widget flotante arrastrable */
.postit.floating { position: fixed; z-index: 60; width: min(290px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transform: rotate(-.6deg); }
.postit.floating .postit-head { cursor: grab; touch-action: none; user-select: none; }
.postit.floating.dragging { cursor: grabbing; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.postit.floating.dragging .postit-head { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .postit.floating { transform: none; } }

/* Ronda 7: búsqueda sin resultados */

/* Radios chilenas */
.radio-now { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; }
.radio-info { flex: 1; min-width: 0; }
.radio-name { margin: 0; font-weight: 800; font-size: 1.05rem; overflow-wrap: anywhere; }
.radio-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; flex: none; }
.radio-eq i { width: 4px; height: 6px; background: var(--muted); border-radius: 2px; }
.radio-eq.on i { background: var(--accent); animation: eq 0.9s ease-in-out infinite; }
.radio-eq.on i:nth-child(2) { animation-delay: .15s; } .radio-eq.on i:nth-child(3) { animation-delay: .3s; } .radio-eq.on i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 6px; } 50% { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .radio-eq.on i { animation: none; height: 18px; } }
.radio-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.radio-play { min-width: 150px; }
#radio-select { margin-bottom: 8px; }
.radio-live { border-color: var(--accent); }

/* ===== Ronda 8: categorías de radio + mini reproductor flotante ===== */
.radio-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.radio-tab { flex: 1 1 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.radio-tab:hover { background: var(--surface-2); }
.radio-tab.active, .radio-tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.radio-mini { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 8px; max-width: min(360px, calc(100vw - 32px)); padding: 8px 8px 8px 12px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--accent); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); animation: miniIn .25s ease-out; }
.radio-mini.on { box-shadow: 0 6px 20px rgba(0, 0, 0, .25), 0 0 0 3px var(--accent-soft); }
.radio-mini-ico { font-size: 1.1rem; }
.radio-mini-name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-mini-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; display: grid; place-items: center; }
.radio-mini-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@keyframes miniIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .radio-mini { animation: none; } }

/* ===== Trámites del día ===== */
.tip { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 8px; justify-items: start; min-height: 150px; align-content: start; }
.tip-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.tip-title::before { content: '¿Sabías que…? '; display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 2px; }
.tip-text { margin: 0; line-height: 1.5; max-width: 78ch; }
.tip-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.tramites-label { margin-bottom: 8px; }
.tramites-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tramite-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
.tramite-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.tramite-ico { font-size: 1.5rem; flex: none; }
.tramite-txt { display: grid; min-width: 0; line-height: 1.25; }
.tramite-txt strong { font-size: .88rem; }
.tramite-txt small { color: var(--muted); font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .tramite-pill { transition: none; } .tramite-pill:hover { transform: none; } }

/* ===== Ronda 9 ===== */
/* Espacios publicitarios: sin anuncio no ocupan lugar (antes dejaban un hueco de 100 px + gaps entre filas).
   Se muestran solo cuando AdSense marca el bloque como cargado (data-ad-status="filled"). */
.ad-slot { display: none; min-height: 0; }
.ad-slot:has(ins[data-ad-status="filled"]) { display: block; min-height: 100px; }

/* Gap parejo (16 px) entre todas las filas; ninguna tarjeta fuerza altura ni margen inferior extra */
.dash-grid { gap: 16px; }
.dash-grid > .card { margin: 0; }

/* Mis pendientes en escritorio: la tarjeta toma la altura de su fila (Hora/Economía) y la lista hace scroll
   dentro, así nunca estira la fila ni deja huecos en las otras tarjetas */
@media (min-width: 1024px) {
  .postit:not(.floating) { contain: size; min-height: 280px; display: flex; flex-direction: column; }
  .postit:not(.floating) .postit-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
  .postit:not(.floating) .postit-count { margin-top: 6px; }
}

/* Mini radio plegado: pestaña con ▲ */
.radio-mini-tab { position: fixed; right: 16px; bottom: 0; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 4px; border: 1px solid var(--accent); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface); color: var(--text); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 -3px 12px rgba(0, 0, 0, .18); animation: miniIn .25s ease-out; }
.radio-mini-tab:hover { background: var(--accent); color: var(--accent-ink); }
.radio-mini-tab.on { box-shadow: 0 -3px 12px rgba(0, 0, 0, .18), 0 0 0 3px var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .radio-mini-tab { animation: none; } }

/* Deportes */
.dep-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
@media (max-width: 640px) { .dep-grid { grid-template-columns: minmax(0, 1fr); } }
.dep-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); min-width: 0; }
.dep-foto { aspect-ratio: 16 / 9; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.dep-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dep-ph { font-size: 2rem; opacity: .5; }
.dep-body { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; }
.dep-titulo { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.dep-titulo:hover { color: var(--accent); text-decoration: underline; }
.dep-resumen { line-height: 1.35; }
.dep-body .badge { justify-self: start; }

/* ===== Ronda 10 ===== */

/* --- Reordenar tarjetas (Drag & Drop). El asa ⠿ la agrega main.js a cada tarjeta con data-mod. --- */
.drag-grip {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 46px; height: 16px; padding: 0; border: 0; border-radius: 0 0 10px 10px;
  background: transparent; color: var(--muted); font: inherit; font-size: .8rem; line-height: 16px; letter-spacing: 2px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; opacity: .35;
  transition: opacity .15s, background .15s, color .15s;
}
.drag-grip::after { content: ''; position: absolute; inset: -6px -10px -10px; } /* área táctil más grande */
.card:hover > .drag-grip, .drag-grip:focus-visible { opacity: 1; background: var(--surface-2); color: var(--text); }
.drag-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .drag-grip { opacity: .7; } } /* en pantallas táctiles se ve siempre */
.postit.floating > .drag-grip { display: none; }      /* el post-it flotante se mueve por su cabecera, no por la grilla */

/* Estados de arrastre */
body.dnd-activo { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dnd-activo .drag-grip { cursor: grabbing; }
body.dnd-activo iframe { pointer-events: none; } /* los iframes (YouTube) no deben tragarse los eventos del puntero mientras se arrastra */
.card.is-dragging { opacity: .45; outline: 2px dashed var(--accent); outline-offset: -2px; box-shadow: none; }
.card.is-dragging * { pointer-events: none; }
body.dnd-activo .dash-grid > .card:not(.is-dragging) { transition: transform .15s; }
.drag-ghost {
  position: fixed; z-index: 200; left: 0; top: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  max-width: min(320px, calc(100vw - 24px)); padding: 10px 16px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .95rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transform: translate(-50%, -120%) rotate(-2deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layout-reset { white-space: nowrap; }
.layout-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* región aria-live para lectores de pantalla */

/* --- Mini reproductor de radio con ⏭ y 🔊/🔇 --- */
.radio-mini { max-width: min(440px, calc(100vw - 24px)); gap: 6px; }
.radio-mini-btn[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); }
.radio-mini.muted .radio-mini-name { opacity: .6; }
@media (max-width: 420px) { .radio-mini-ico { display: none; } .radio-mini { padding-left: 10px; } }

/* --- Pronóstico extendido (3 a 5 días) bajo el clima de hoy --- */
.forecast { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fc-day { display: grid; grid-template-columns: 3.2rem 2rem 1fr; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: var(--surface-2); }
.fc-name { font-weight: 700; font-size: .88rem; }
.fc-ico { font-size: 1.3rem; line-height: 1; text-align: center; }
.fc-temps { justify-self: end; font-variant-numeric: tabular-nums; font-size: .9rem; display: inline-flex; gap: 4px; }
.fc-min { color: var(--muted); }
.fc-max { font-weight: 800; }
.fc-sep { color: var(--muted); }
.forecast-wrap.hidden { display: none; }

/* ===== Ronda 11 ===== */

/* --- Ventana modal de lectura --- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 20, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.modal-dialog {
  position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .25s ease, transform .25s ease;
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-dialog { opacity: 1; transform: none; }
.modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .6); color: #fff; font: inherit; font-size: 1.05rem; cursor: pointer; display: grid; place-items: center;
}
.modal-close:hover { background: var(--accent); color: var(--accent-ink); }
.modal-close:focus-visible, .modal-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.modal-media { width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; border-radius: 18px 18px 0 0; }
.modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-media.sin-imagen { aspect-ratio: auto; height: 120px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); }
.modal-ph { font-size: 3rem; }
.modal-content { padding: 18px 22px 24px; display: grid; gap: 12px; }
.modal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.modal-title { margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.modal-body { display: grid; gap: 10px; line-height: 1.6; font-size: .98rem; overflow-wrap: anywhere; }
.modal-body p { margin: 0; }
.modal-link { justify-self: start; text-decoration: none; margin-top: 4px; }
.modal-link[hidden] { display: none; }
body.modal-abierto { overflow: hidden; }
@media (max-width: 480px) { .modal { padding: 8px; align-items: end; } .modal-dialog { max-height: calc(100dvh - 16px); } .modal-content { padding: 16px; } .modal-title { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-dialog { transition: none; transform: none; } }

/* Tarjetas que abren el modal */
.abre-modal { cursor: pointer; }
.abre-modal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.abre-modal:hover { border-color: var(--accent); }

/* --- Scroll interno personalizado (Películas, Deportes) --- */
.cine-grid, .dep-grid { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.cine-grid::-webkit-scrollbar, .dep-grid::-webkit-scrollbar { width: 8px; }
.cine-grid::-webkit-scrollbar-track, .dep-grid::-webkit-scrollbar-track { background: transparent; }
.cine-grid::-webkit-scrollbar-thumb, .dep-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 2px solid var(--surface); }

/* --- Deportes: 10 noticias, solo 4 visibles (2 filas de 2) y el resto con scroll interno. deportes.js ajusta max-height al alto exacto de 4 tarjetas --- */
.dep-grid { max-height: 32rem; overflow-y: auto; padding-right: 4px; align-content: start; }
.dep-card.abre-modal:hover { transform: translateY(-1px); }
.dep-titulo { margin: 0; }

/* ===== Ronda 12 ===== */

/* --- Scroll suave hacia las tarjetas (carrusel) y resaltado breve del destino --- */
[data-mod] { scroll-margin-top: 76px; }
/* Brillo del módulo al que llega el scroll del carrusel (se enciende cuando termina de llegar): halo dorado + un destello que cruza la tarjeta */
@keyframes destello { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 80, 0), 0 0 0 0 rgba(255, 200, 60, 0); } 22% { box-shadow: 0 0 0 2px rgba(255, 214, 90, .95), 0 0 26px 5px rgba(255, 200, 60, .6); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 80, 0), 0 0 0 0 rgba(255, 200, 60, 0); } }
@keyframes destello-barrido { from { background-position: 160% 0; opacity: 1; } to { background-position: -60% 0; opacity: 1; } }
.card.destello { animation: destello 2s ease-out; }
.card.destello::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat; opacity: 0; animation: destello-barrido 1.1s ease-out .1s 1 forwards; mix-blend-mode: soft-light; }
@media (prefers-reduced-motion: reduce) { .card.destello { animation: destello 2s ease-out !important; } }

/* --- Carrusel superior infinito (marquesina) — Ronda 15: UNA sola imagen panorámica, sin cortes visibles entre tarjetas --- */
.carrusel { position: relative; margin-top: 14px; padding-top: 0; padding-bottom: 0; }
.carrusel[hidden] { display: none; }
.carrusel-marco { position: relative; overflow: hidden; height: 220px; border-radius: 22px; box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .45); scrollbar-width: none; background: #1e293b; }
.carrusel-marco::-webkit-scrollbar { display: none; }
.carrusel-marco::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 38%); }   /* brillo fijo: une todo en una sola pieza */
.carrusel-pista { display: flex; height: 100%; width: max-content; will-change: transform; animation: cr-marquee var(--cr-dur, 35s) linear infinite; }
.cr-grupo { display: flex; flex: none; height: 100%; }
@keyframes cr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* -50% = un grupo completo: reinicio sin salto */
/* Pausa al pasar el cursor, al enfocar con el teclado o al tocar */
@media (hover: hover) { .carrusel:hover .carrusel-pista { animation-play-state: paused; } }       /* solo con mouse real (en táctil el "hover" queda pegado) */
.carrusel:has(.cr-card:focus-visible) .carrusel-pista, .carrusel.cr-pausa .carrusel-pista { animation-play-state: paused; }   /* foco de TECLADO (no el que deja un clic) o toque */
.dato-viejo { color: #b45309; font-weight: 600; }
.cr-set { display: flex; height: 100%; }                                  /* sin huecos entre tarjetas */
.cr-card {
  --c1: hsl(215 72% 44%); --c2: hsl(275 72% 44%);                      /* JS: el degradado de cada tarjeta termina en el tono de la siguiente */
  flex: none; position: relative; width: 341px; height: 100%; display: block; padding: 0; margin: 0 -1px 0 0;   /* 1 px de solape: tapa las líneas finas entre tarjetas */
  text-align: left; text-decoration: none; cursor: pointer; overflow: hidden;
  border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 62%), var(--grad, linear-gradient(90deg, var(--c1), var(--c2))); color: #fff;   /* sombra inferior integrada al fondo (no se duplica en el solape) */ font: inherit;
  transition: filter .25s;
}
.cr-card:hover { filter: brightness(1.1) saturate(1.1); }
.cr-card:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.cr-portada { position: absolute; inset: 0; display: grid; place-items: start end; padding: 22px 30px 0 0; pointer-events: none; }
.cr-portada.con-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 62%); }   /* con foto: sombra inferior para leer el texto */
.cr-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-ico { position: relative; z-index: 1; font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.cr-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 3px; padding: 0 76px 18px 24px; line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.cr-cuerpo strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.cr-cuerpo small { color: rgba(255, 255, 255, .94); font-size: .9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cr-anuncio::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 14px, transparent 14px 28px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }   /* las rayas se desvanecen hacia los bordes: no se nota el corte */
.cr-tag { position: absolute; top: 14px; left: 22px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .4); }

/* --- Galleta de la suerte --- */
.galleta-hero {
  --s: .55; position: relative; margin: 16px auto; max-width: 560px; padding: 18px 18px 20px; text-align: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
}
.galleta-title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.galleta-escena { position: relative; display: grid; place-items: center; height: calc(340px * var(--s) + 40px); }
.galleta-btn { position: relative; z-index: 1; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 24px; -webkit-tap-highlight-color: transparent; }
.galleta-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.galleta-btn:disabled { cursor: not-allowed; }
.galleta-sprite { position: relative; display: block; width: calc(420px * var(--s)); height: calc(340px * var(--s)); transition: transform .2s, filter 1.2s ease, opacity 1.2s ease; }
.gs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; background-repeat: no-repeat; }
/* Idle: galleta_idle.png = 6 fotogramas de 160×138; se escala x1.79 para que la galleta mida lo mismo que en la hoja de ruptura */
.gs-idle {
  --iw: calc(160px * var(--s) * 1.79); --ih: calc(138px * var(--s) * 1.79);
  width: var(--iw); height: var(--ih); background-image: url('../img/galleta_idle.png'); background-size: calc(var(--iw) * 6) var(--ih);
  animation: galleta-idle 1.5s steps(6) infinite, galleta-giro 6s linear infinite;   /* fotogramas + giro continuo de 360° */
}
@keyframes galleta-giro { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes galleta-idle { from { background-position: 0 0; } to { background-position: calc(var(--iw) * -6) 0; } }
/* Crunch: galleta_crunch.png = 5 fotogramas de 420×340; galleta.js cambia --frame de 0 a 4 */
.gs-crunch {
  width: calc(420px * var(--s)); height: calc(340px * var(--s)); background-image: url('../img/galleta_crunch.png'); background-size: calc(420px * var(--s) * 5) calc(340px * var(--s));
  background-position: calc(var(--frame, 0) * -420px * var(--s)) 0;
}
.galleta-sprite:not(.crunch) .gs-crunch, .galleta-sprite.crunch .gs-idle { display: none; }
.galleta-lista .galleta-btn:hover .galleta-sprite { transform: scale(1.06); }
.galleta-abriendo .galleta-sprite { animation: galleta-sacudida .17s linear infinite; }
@keyframes galleta-sacudida { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-1.5deg); } 75% { transform: translateX(3px) rotate(1.5deg); } }
/* Bloqueada (ya abrió hoy): grises, sin giro, sin clics */
.galleta-bloqueada .galleta-sprite { filter: grayscale(100%); opacity: .8; }
.galleta-bloqueada .gs-idle { animation: none; background-position: 0 0; }
.galleta-aviso { margin: 10px 0 0; font-size: .9rem; font-weight: 600; color: var(--muted); }
.galleta-bloqueada .galleta-aviso { color: var(--text); }
@media (max-width: 480px) { .galleta-hero { --s: .46; margin-top: 12px; } .cr-card { width: 270px; } .carrusel-marco { height: 180px; border-radius: 18px; } .cr-ico { font-size: 3.4rem; } .cr-cuerpo strong { font-size: 1.1rem; } .cr-cuerpo { padding-right: 20px; } }

/* ===== Ronda 13 ===== */
/* --- Galleta: globo al pasar el cursor, golpe por clic, salida y fortuna en el header --- */
.galleta-hero[hidden], .galleta-chip[hidden] { display: none; }
.galleta-tip {
  position: absolute; left: 50%; top: 4px; transform: translate(-50%, 6px); z-index: 3; padding: 7px 14px; white-space: nowrap; pointer-events: none;
  font-size: .85rem; font-weight: 700; color: #fff; background: #1f2937; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.galleta-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.galleta-lista:not(.galleta-iniciada) .galleta-btn:hover ~ .galleta-tip,
.galleta-lista:not(.galleta-iniciada) .galleta-btn:focus-visible ~ .galleta-tip { opacity: 1; transform: translate(-50%, 0); }
.galleta-abriendo .galleta-sprite { animation: none; }
.galleta-sprite.golpe { animation: galleta-golpe .28s ease-out; }
@keyframes galleta-golpe { 0% { transform: scale(1); } 30% { transform: scale(.88) rotate(-3deg); } 60% { transform: scale(1.07) rotate(2deg); } 100% { transform: scale(1); } }
.galleta-lista.galleta-iniciada .galleta-btn:hover .galleta-sprite { transform: scale(1.03); }
.galleta-hero { transition: opacity .6s ease, max-height .6s ease, margin .6s ease, padding .6s ease; max-height: 700px; }
.galleta-hero.galleta-saliendo { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; }

/* Fortuna fija en el header (a la derecha de "Reiniciar") */
.galleta-chip {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: 340px; padding: 4px 12px 4px 8px; cursor: help;
  background: #fffdf5; color: #3b3200; border: 1px solid #e6d9a8; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  animation: galleta-chip-entra .6s ease-out, galleta-chip-colores 8s linear infinite;   /* contorno que cambia de color, sutil */
}
.galleta-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc-ico { flex: none; width: 28px; height: 24px; background: url('../img/galleta_idle.png') 0 0 / auto 24px no-repeat; background-size: 168px 24px; image-rendering: pixelated; }
.gc-frase { font-size: .74rem; font-weight: 700; font-style: italic; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gc-tip {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: 260px; padding: 6px 12px; pointer-events: none;
  font-size: .8rem; font-style: normal; font-weight: 700; color: #fff; background: #1f2937; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.galleta-chip:hover .gc-tip, .galleta-chip:focus .gc-tip { opacity: 1; transform: none; }
.galleta-chip.sin-entrada { animation: galleta-chip-colores 8s linear infinite; }
.galleta-chip.llegada { animation: galleta-chip-colores 8s linear infinite, galleta-chip-llegada 1.1s ease-out; }
/* Contorno del chip: pasa lentamente por varios colores con un halo muy leve */
@keyframes galleta-chip-colores {
  0%, 100% { border-color: #ffd84d; box-shadow: 0 0 6px rgba(255, 216, 77, .45), 0 2px 8px rgba(0, 0, 0, .1); }
  16% { border-color: #ff8fc6; box-shadow: 0 0 6px rgba(255, 143, 198, .45), 0 2px 8px rgba(0, 0, 0, .1); }
  33% { border-color: #6ccfff; box-shadow: 0 0 6px rgba(108, 207, 255, .45), 0 2px 8px rgba(0, 0, 0, .1); }
  50% { border-color: #7dffb0; box-shadow: 0 0 6px rgba(125, 255, 176, .45), 0 2px 8px rgba(0, 0, 0, .1); }
  66% { border-color: #c58bff; box-shadow: 0 0 6px rgba(197, 139, 255, .45), 0 2px 8px rgba(0, 0, 0, .1); }
  83% { border-color: #ffa45c; box-shadow: 0 0 6px rgba(255, 164, 92, .45), 0 2px 8px rgba(0, 0, 0, .1); }
}
@keyframes galleta-chip-llegada { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(255, 200, 60, 0); } 30% { transform: scale(1.07); box-shadow: 0 0 0 3px rgba(255, 214, 90, .9), 0 0 20px 4px rgba(255, 200, 60, .6); } 100% { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } }
@keyframes galleta-chip-entra { from { opacity: 0; transform: translateX(16px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .galleta-chip { max-width: 100%; order: 9; flex: 1 1 100%; } .gc-tip { left: 0; right: auto; } }

/* ===== Ronda 15 ===== */
/* --- Brillitos sutiles (antes de abrir la galleta) --- */
.brillo { --c: #ffe27a; position: absolute; z-index: 2; pointer-events: none; transform-origin: center; opacity: 0; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 1px var(--c)); animation: galleta-brillo 2.8s ease-in-out infinite; }
.brillo.negro { --c: #111; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95)) drop-shadow(0 0 1px #fff); }   /* negros: halo claro para verse sobre cualquier fondo */
.brillo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 25%, var(--c) 70%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes galleta-brillo { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: .9; transform: scale(1) rotate(45deg); } }
.galleta-hero.galleta-revelada .brillo, .galleta-hero.galleta-saliendo .brillo { display: none; }
/* Tras el primer clic los brillos siguen y la galleta con sus brillos TIRITA (temblor rápido con la propiedad `translate`, independiente del resto de animaciones) */
/* Los brillos tiritan con margin (funciona en todos los navegadores y no choca con el transform de su animación); en cada clic tiemblan más fuerte (.tiembla, ~0,5 s). */
@keyframes galleta-tiritar { 0% { margin: 0 0 0 0; } 20% { margin: 3px 0 0 -4px; } 40% { margin: -3px 0 0 4px; } 60% { margin: -4px 0 0 -3px; } 80% { margin: 4px 0 0 3px; } 100% { margin: 0 0 0 0; } }
@keyframes galleta-tiritar-fuerte { 0% { margin: 0; } 12% { margin: 12px 0 0 -16px; } 25% { margin: -14px 0 0 15px; } 37% { margin: -16px 0 0 -12px; } 50% { margin: 15px 0 0 14px; } 62% { margin: -10px 0 0 16px; } 75% { margin: 12px 0 0 -10px; } 100% { margin: 0; } }
.galleta-hero.galleta-iniciada .brillo { animation: galleta-brillo 2.8s ease-in-out infinite, galleta-tiritar .12s linear infinite; }
.galleta-hero.galleta-iniciada.tiembla .brillo { opacity: 1; animation: galleta-brillo-fijo 1s ease-in-out infinite, galleta-tiritar-fuerte .07s linear infinite; }
@keyframes galleta-brillo-fijo { 0%, 100% { opacity: .95; transform: scale(1.25) rotate(20deg); } 50% { opacity: 1; transform: scale(1.5) rotate(45deg); } }
.galleta-hero.galleta-iniciada .galleta-btn { animation: galleta-tiritar .16s linear infinite; }
/* Texto «¡Sigue! Clic n de 5»: pastilla oscura con neón; vibra leve en cada clic */
.galleta-aviso.aviso-neon { display: inline-block; padding: 5px 16px; border-radius: 999px; background: #0a0a14; border: 1px solid rgba(57, 255, 20, .38); color: #ecfbe9; font-weight: 800;
  text-shadow: 0 0 2px rgba(255, 255, 255, .85), 0 0 7px rgba(57, 255, 20, .8), 0 0 14px rgba(57, 255, 20, .55), 0 0 26px rgba(0, 255, 156, .35);
  box-shadow: 0 0 9px rgba(57, 255, 20, .32), inset 0 0 7px rgba(57, 255, 20, .14); animation: neon-pulse 4s ease-in-out infinite alternate; }
.galleta-aviso.aviso-neon.vibra { animation: aviso-vibra .38s linear, neon-pulse 4s ease-in-out infinite alternate; }
@keyframes aviso-vibra { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-2px, 1px) rotate(-.5deg); } 30% { transform: translate(2px, -1px) rotate(.5deg); } 45% { transform: translate(-2px, -1px); } 60% { transform: translate(2px, 1px) rotate(-.4deg); } 80% { transform: translate(-1px, 0); } }

/* --- Fortuna al centro de la pantalla (se queda hasta que el usuario hace clic) --- */
.galleta-msg { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; cursor: pointer; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; outline: none; }
.galleta-msg[hidden] { display: none; }
.galleta-msg.abierto { opacity: 1; }
.gm-papel { width: min(560px, 100%); padding: 30px 28px 22px; text-align: center; background: #fffdf5; color: #3b3200; border: 1px solid #e6d9a8; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transform: scale(.85) rotate(-1deg); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.galleta-msg.abierto .gm-papel { transform: scale(1) rotate(-.6deg); }
.gm-titulo { margin: 0 0 12px; font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6d00; }
.gm-frase { margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 800; font-style: italic; line-height: 1.35; }
.gm-pista { margin: 18px 0 0; font-size: .82rem; color: #8a7a3a; animation: gm-pista 1.6s ease-in-out infinite; }
@keyframes gm-pista { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* --- Vuelo de la fortuna hacia el header (texto + estela) --- */
.gm-vuelo-texto { position: fixed; margin: 0; z-index: 9500; pointer-events: none; transform-origin: center; text-align: center; font-style: italic; will-change: transform; text-shadow: 0 0 12px rgba(255, 200, 60, .95), 0 0 3px rgba(255, 255, 255, .9); }
.gm-estela { position: fixed; z-index: 9499; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 30%, #ffd84d 65%, rgba(255, 200, 60, 0) 100%); }

/* Control de volumen de la radio (tarjeta y mini) */
.radio-vol { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.vol-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.vol-ico:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vol-ico[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); }
.radio-vol output { min-width: 3ch; text-align: right; }
.vol-range { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.vol-mini { flex: none; width: 74px; }
@media (max-width: 420px) { .vol-mini { width: 52px; } }

/* Mascotas: embed oficial de Instagram */
.ig-embed { background: #fff; height: 470px; }
.ig-embed iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ig-post .ig-foot { padding: 8px 12px 12px; }

/* Lo-Fi: el audio viene de un reproductor de YouTube que se mantiene FUERA de la pantalla (no se ve el video, solo se escucha) */
.radio-yt { position: fixed; left: -10000px; top: 0; width: 220px; height: 124px; overflow: hidden; pointer-events: none; }
.radio-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

.news-src { font-weight: 800; color: var(--accent); }
/* Cada medio con su propio color (se leen bien en tema claro y oscuro) */
.news-src.src-elciudadano { color: var(--accent); }
.news-src.src-ciper { color: #e0801f; }
.news-src.src-biobio { color: #2f8fd8; }
.news-src.src-latercera { color: #d6455d; }

.tramites-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.tramites-pager[hidden] { display: none; }
.tramites-links { align-content: start; }


/* Ronda 28: aviso de la galleta — ola de letras antes del primer clic y texto que crece con cada clic */
.galleta-aviso { font-size: 1.1rem; }
.galleta-aviso.aviso-ola { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.galleta-aviso.aviso-ola > span { display: inline-block; white-space: pre; animation: aviso-ola 3.6s ease-in-out infinite; }
/* Cada letra solo sube en un instante breve (≈0,2 s) de un ciclo de 3,6 s y las demás esperan su turno: la ola pasa letra por letra */
@keyframes aviso-ola { 0%, 6%, 100% { transform: translateY(0); } 3% { transform: translateY(-.3em); } }
.galleta-aviso.aviso-neon { font-size: var(--aviso-tam, 1.1rem); transition: font-size .25s ease; }





/* YouTube de nuevo en media fila (junto a «Juegos creados en Chile»): reproductor arriba y canales abajo */
[data-mod="youtube"] .yt-layout { grid-template-columns: minmax(0, 1fr) !important; }

/* ===== Juegos creados en Chile ===== */
.jc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jc-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.jc-tab:hover { background: var(--surface-2); }
.jc-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Los dos paneles comparten la misma celda: el alto del módulo es el del más alto y no salta al cambiar de pestaña */
.jc-paneles { display: grid; }
.jc-panel { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; visibility: hidden; pointer-events: none; }
.jc-panel.activo { visibility: visible; pointer-events: auto; }
.jc-card { position: relative; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.jc-destacado { border: 2px solid #d4a017; background: color-mix(in srgb, #d4a017 9%, var(--surface-2)); box-shadow: 0 0 0 1px color-mix(in srgb, #d4a017 35%, transparent), 0 2px 10px color-mix(in srgb, #d4a017 22%, transparent); }
.jc-badge { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #d4a017; color: #2b1d00; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.jc-nombre { margin: 0; font-size: 1rem; font-weight: 800; }
.jc-estudio { margin: 0; font-size: .8rem; color: var(--muted); font-weight: 600; }
.jc-genero { justify-self: start; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: .72rem; font-weight: 700; }
.jc-desc { margin: 2px 0 4px; font-size: .86rem; line-height: 1.35; }
.jc-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-btn { text-decoration: none; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.jc-btn:hover { filter: brightness(1.08); }

/* Juegos: visor de 3 tarjetas con deslizamiento de una en una */
.jc-paneles { height: var(--jc-alto, auto); }
.jc-panel { overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.jc-panel.midiendo { visibility: hidden; overflow: visible; }
.jc-panel .jc-card { scroll-snap-align: start; min-height: var(--jc-card, 0); box-sizing: border-box; align-content: start; }
.jc-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.jc-panel::-webkit-scrollbar { width: 8px; }
.jc-panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }
.jc-panel::-webkit-scrollbar-track { background: transparent; }


/* ===== Chungi (avatar junto a la fortuna del header) ===== */
.chungi { position: relative; display: inline-flex; align-items: flex-end; flex: 0 0 auto; }
.chungi[hidden] { display: none; }
.chungi-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 12px; }
.chungi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chungi-img { width: 48px; height: 60px; object-fit: contain; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: chungi-idle 3.2s ease-in-out infinite; transition: transform .15s; }
.chungi-btn:hover .chungi-img { transform: scale(1.08); }
.chungi.aparece .chungi-img { animation: chungi-pop .5s cubic-bezier(.3,1.6,.5,1) 1, chungi-idle 3.2s ease-in-out .5s infinite; }
.chungi.audifonos .chungi-img { animation: chungi-bob .55s ease-in-out infinite; }
@keyframes chungi-idle { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2px) scaleY(1.02); } }
@keyframes chungi-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes chungi-pop { 0% { transform: scale(.2) translateY(14px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
/* Globo de diálogo estilo cómic */
.chungi-bubble { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: max-content; max-width: min(240px, 80vw); padding: 10px 14px; background: #fff; color: #111; border: 3px solid #111; border-radius: 18px; font: 700 .85rem/1.3 "Comic Sans MS","Chalkboard SE","Comic Neue",system-ui,sans-serif; box-shadow: 4px 4px 0 rgba(0,0,0,.35); text-align: center; animation: chungi-bubble-in .25s cubic-bezier(.3,1.6,.5,1); }
.chungi-bubble[hidden] { display: none; }
.chungi-bubble::before, .chungi-bubble::after { content: ""; position: absolute; right: 18px; border: solid transparent; }
.chungi-bubble::before { bottom: 100%; border-width: 0 10px 14px 10px; border-bottom-color: #111; margin-right: -3px; }
.chungi-bubble::after { bottom: calc(100% - 3px); border-width: 0 8px 11px 8px; border-bottom-color: #fff; margin-right: -1px; }
@keyframes chungi-bubble-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 520px) { .chungi-img { width: 40px; height: 50px; } }


/* ===== Estado de degradación (API caída y sin copia guardada) ===== */
.degradado { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); }
.degradado p { margin: 0; }
.degradado-btn { opacity: .85; }
[hidden] { display: none !important; }
.stat-val.dato-guardado { opacity: .75; }
.card, .card * { overflow-wrap: anywhere; }
table { max-width: 100%; }