/* ============================================================================
   Sport Calendar · sistema visual
   Azul · cristal líquido · oscuro por defecto
   ========================================================================== */

:root {
  --azul: #0a4bff;
  --azul-claro: #4d7cff;
  --azul-brillo: #6ea8ff;

  /* Paleta de marca ARBIFY (manual de marca) */
  --abismo: #080c1a;
  --marino: #21325e;
  --acero: #9aa4bc;
  --hielo: #f4f7ff;
  --verde-arbify: #2fb784;
  --verde-arbify-2: #5fe0ad;

  --fondo: #080c1a;
  --fondo-2: #0a1024;
  --panel: rgba(255, 255, 255, 0.038);
  --panel-alto: rgba(255, 255, 255, 0.07);
  --borde: rgba(255, 255, 255, 0.075);
  --borde-alto: rgba(255, 255, 255, 0.16);
  --brillo: rgba(255, 255, 255, 0.1);

  --texto: #eef2fb;
  --texto-2: #9aa5bd;
  --texto-3: #626d85;

  --futbol: #22c55e;
  --basket: #f97316;
  --beisbol: #eab308;
  --voley: #06b6d4;
  --tenis: #a3e635;
  --nfl: #ef4444;
  --hockey: #8b5cf6;
  --esports: #d946ef;

  --ok: #22c55e;
  --vivo: #ef4444;
  --radio: 18px;
  --radio-s: 12px;
  --resorte: cubic-bezier(0.34, 1.3, 0.4, 1);
  --suave: cubic-bezier(0.32, 0.72, 0, 1);
  --tipo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
          "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --sidebar: 248px;
}

:root[data-tema="claro"] {
  --fondo: #eef2fa;
  --fondo-2: #e3e9f5;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-alto: rgba(255, 255, 255, 0.9);
  --borde: rgba(10, 30, 80, 0.09);
  --borde-alto: rgba(10, 30, 80, 0.18);
  --brillo: rgba(255, 255, 255, 0.9);
  --texto: #0a1830;
  --texto-2: #4a5878;
  --texto-3: #77839c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--tipo);
  /* Fondo con la paleta ARBIFY: abismo + destellos marino, como el hero. */
  background:
    radial-gradient(90% 60% at 80% 4%, rgba(45,68,128,.30) 0%, rgba(8,12,26,0) 55%),
    radial-gradient(80% 55% at 4% 98%, rgba(33,50,94,.28) 0%, rgba(8,12,26,0) 60%),
    var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  letter-spacing: -0.011em;
  transition: background .4s var(--suave), color .4s var(--suave);
}

/* ------------------------------------------------------------- ambiente */

.ambiente { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.foco { position: absolute; border-radius: 50%; filter: blur(120px); }
.foco-1 {
  width: 640px; height: 640px; top: -240px; left: -120px;
  background: radial-gradient(circle, var(--marino), transparent 70%);
  opacity: .5; animation: deriva1 30s var(--suave) infinite alternate;
}
.foco-2 {
  width: 480px; height: 480px; bottom: -180px; right: -80px;
  background: radial-gradient(circle, var(--verde-arbify), transparent 70%);
  opacity: .12; animation: deriva2 36s var(--suave) infinite alternate;
}
@keyframes deriva1 { to { transform: translate(160px, 120px) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(-120px, -100px) scale(1.1); } }
:root[data-tema="claro"] .foco-1 { opacity: .16; }
:root[data-tema="claro"] .foco-2 { opacity: .1; }

/* Triángulos ARBIFY flotando de fondo (isotipo de marca), como el hero. */
.tri { position: absolute; pointer-events: none; }
.tri svg, .tri use, .tri path { width: 100%; height: 100%; fill: currentColor; }
.tri-1 { width: 180px; height: 180px; top: 5%;  left: 8%;  color: var(--marino);       opacity: .26; --r: 18deg;  animation: flota 22s ease-in-out infinite; }
.tri-2 { width: 120px; height: 120px; top: 24%; right: 12%; color: var(--verde-arbify); opacity: .13; --r: -24deg; animation: flota 27s ease-in-out infinite reverse; }
.tri-3 { width: 90px;  height: 90px;  top: 64%; right: 8%;  color: var(--acero);        opacity: .1;  --r: 30deg;  animation: flota 19s ease-in-out infinite; }
.tri-4 { width: 140px; height: 140px; bottom: 6%; left: 34%; color: var(--marino);      opacity: .2;  --r: -12deg; animation: flota 31s ease-in-out infinite reverse; }
.tri-5 { width: 66px;  height: 66px;  top: 46%; left: 46%; color: var(--verde-arbify);  opacity: .09; --r: 8deg;   animation: flota 24s ease-in-out infinite; }
.tri { transform: rotate(var(--r, 0deg)); }
:root[data-tema="claro"] .tri { opacity: .08 !important; }
@keyframes flota {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-26px) rotate(var(--r, 0deg)); }
}
@media (prefers-reduced-motion: reduce) { .tri { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .foco { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------- cristal */

.vidrio {
  background: var(--panel);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 32px rgba(0,0,0,.32), inset 0 1px 0 var(--brillo);
}
:root[data-tema="claro"] .vidrio { box-shadow: 0 8px 30px rgba(10,40,100,.08), inset 0 1px 0 #fff; }

/* ----------------------------------------------------------- estructura */

.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr var(--panel-der, 300px);
  grid-template-rows: 64px 1fr;
  grid-template-areas: "marca header header" "lateral principal resumen";
  height: 100vh;
  transition: grid-template-columns .35s var(--suave);
}
.app.colapsada { --sidebar: 72px; }
/* Por debajo de 1200px el panel derecho fijo se retira (la pantalla no da). */
@media (max-width: 1200px) {
  .app { grid-template-columns: var(--sidebar) 1fr; grid-template-areas: "marca header" "lateral principal"; }
  .lateral-der { display: none; }
}

/* --------------------------------------------------------------- header */

.marca-zona {
  grid-area: marca;
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px;
  border-bottom: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
}
.logo {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--azul-claro), var(--azul));
  color: #fff;
  box-shadow: 0 4px 16px rgba(10,75,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.logo svg { width: 21px; height: 21px; }
.marca-txt { line-height: 1.15; overflow: hidden; white-space: nowrap; }
.marca-txt strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.marca-txt span { font-size: 10px; color: var(--texto-3); letter-spacing: .08em; }
.app.colapsada .marca-txt { display: none; }

.header {
  grid-area: header;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--borde);
}

.buscador {
  flex: 1; max-width: 460px; position: relative;
}
.buscador svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--texto-3); }
.buscador input {
  width: 100%; height: 38px;
  padding: 0 14px 0 38px;
  font: inherit; font-size: 13px; color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; outline: none;
  transition: border-color .2s, background .2s;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { border-color: var(--azul); background: var(--panel-alto); }

.header-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icono-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); color: var(--texto-2);
  cursor: pointer; position: relative;
  transition: all .18s var(--suave);
}
.icono-btn:hover { background: var(--panel-alto); color: var(--texto); border-color: var(--borde-alto); transform: translateY(-1px); }
.icono-btn svg { width: 16px; height: 16px; }
.icono-btn .punto {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vivo); box-shadow: 0 0 6px var(--vivo);
}

.perfil {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--panel); cursor: pointer;
  transition: all .18s;
}
.perfil:hover { background: var(--panel-alto); }
.perfil-av {
  width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(145deg, var(--azul-claro), var(--azul));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.perfil-txt { line-height: 1.2; }
.perfil-txt strong { display: block; font-size: 11.5px; font-weight: 600; }
.perfil-txt span { font-size: 9.5px; color: var(--texto-3); }

/* -------------------------------------------------------------- lateral */

.lateral {
  grid-area: lateral;
  display: flex; flex-direction: column;
  padding: 12px 10px;
  border-right: 1px solid var(--borde);
  overflow-y: auto; overflow-x: hidden;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  height: 40px; padding: 0 11px;
  font: inherit; font-size: 13px; color: var(--texto-2);
  background: transparent; border: 0; border-radius: 10px;
  cursor: pointer; text-align: left; white-space: nowrap;
  transition: background .18s, color .18s;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: var(--panel); color: var(--texto); }
.nav-item.activo {
  background: linear-gradient(90deg, rgba(10,75,255,.22), rgba(10,75,255,.06));
  color: var(--texto); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--azul-claro);
}
.app.colapsada .nav-item span, .app.colapsada .nav-globo { display: none; }
.app.colapsada .nav-item { justify-content: center; padding: 0; }
.nav-globo {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; border-radius: 6px;
  background: rgba(10,75,255,.25); color: var(--azul-brillo);
  font-variant-numeric: tabular-nums;
}
.nav-globo:empty { display: none; }
.nav-sep { height: 1px; background: var(--borde); margin: 10px 6px; }

.lateral-pie { margin-top: auto; padding-top: 10px; }
.estado-api {
  display: flex; align-items: center; gap: 9px;
  padding: 10px; border-radius: var(--radio-s);
  background: var(--panel); border: 1px solid var(--borde);
  font-size: 10.5px; color: var(--texto-3);
}
.app.colapsada .estado-api-txt { display: none; }
.pulso {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .3; } }

/* ------------------------------------------------------------ principal */

.principal { grid-area: principal; overflow-y: auto; padding: 18px; }
.principal::-webkit-scrollbar { width: 9px; }
.principal::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.09); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}

/* Columna derecha fija: el resumen de la semana, persistente como la izquierda. */
.lateral-der {
  grid-area: resumen; overflow-y: auto;
  padding: 18px 14px 18px 4px;
  border-left: 1px solid var(--borde);
}
.lateral-der::-webkit-scrollbar { width: 9px; }
.lateral-der::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.09); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}

.vista-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vista-cab h1 { font-size: 25px; font-weight: 660; letter-spacing: -.03em; }
.vista-cab p { font-size: 12.5px; color: var(--texto-3); margin-top: 3px; }

/* --------------------------------------------------- barra de deportes */

/* Carrusel con flechas: en ventana pequeña la barra se desplaza y así se
   alcanzan hockey y esports (antes quedaban cortados). */
.deportes-wrap { display: flex; align-items: center; gap: 4px; position: relative; }
.dep-flecha {
  flex: none; width: 30px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--panel);
  color: var(--texto-2); cursor: pointer; transition: all .18s var(--resorte);
}
.dep-flecha svg { width: 16px; height: 16px; }
.dep-flecha:hover { color: var(--hielo); border-color: var(--verde-arbify); background: color-mix(in srgb, var(--verde-arbify) 14%, transparent); }
.dep-flecha:active { transform: scale(.92); }

.deportes {
  flex: 1; min-width: 0;
  display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.deportes::-webkit-scrollbar { display: none; }
/* Sin circulo: solo el simbolo del deporte y su contador. Barra mas limpia,
   como pidio Moises. El activo se marca con el color del deporte, no con una
   pildora. */
.deporte {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 2px 8px; flex-shrink: 0;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--texto-2);
  font: inherit; font-weight: 600;
  cursor: pointer; position: relative;
  transition: all .22s var(--resorte);
}
.deporte .emo {
  font-size: 27px; line-height: 1;
  filter: grayscale(.35) opacity(.72);
  transition: transform .3s var(--resorte), filter .22s ease;
}
.deporte:hover .emo { transform: scale(1.16) rotate(-6deg); filter: none; }
.deporte.activo { color: var(--c); border-bottom-color: var(--c); }
.deporte.activo .emo { filter: none; transform: scale(1.06); }
.deporte .cuenta {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  background: rgba(255,255,255,.09); color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.deporte.activo .cuenta { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); }
.deporte.vacio { opacity: .34; }

/* ------------------------------------------------------------- mascota */

/* Tarjeta del Funko en la barra lateral (como la referencia). */
.funko-card {
  position: relative;
  height: 190px; margin-bottom: 10px;
  border-radius: var(--radio);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(10,75,255,.28), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--borde);
  box-shadow: inset 0 1px 0 var(--brillo);
}
.app.colapsada .funko-card { display: none; }
.funko-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transition: opacity .18s ease;
}
.funko-burbuja {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 11px 11px 11px 3px;
  background: rgba(10,75,255,.9); color: #fff;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(10,75,255,.5);
}
.funko-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(4,6,15,.82));
  pointer-events: none;
}
.funko-nombre {
  position: absolute; bottom: 9px; left: 0; right: 0; z-index: 2; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
}
.mascota .cabeza { transform-origin: 50% 62%; animation: saludo-cabeza 4s ease-in-out infinite; }
@keyframes saludo-cabeza { 0%,72%,100% { transform: rotate(0); } 80% { transform: rotate(-7deg); } 90% { transform: rotate(5deg); } }
.mascota .brazo-saludo { transform-origin: 78% 42%; animation: saludo-brazo 4s ease-in-out infinite; }
@keyframes saludo-brazo { 0%,68%,100% { transform: rotate(0); } 76%,92% { transform: rotate(-26deg); } 84% { transform: rotate(-6deg); } }
.mascota .ojo { animation: parpadeo 4.6s infinite; transform-origin: center; }
@keyframes parpadeo { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.mascota-burbuja {
  position: absolute; top: 4px; left: -18px;
  padding: 6px 11px; border-radius: 11px 11px 11px 3px;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  backdrop-filter: blur(18px);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: all .4s var(--resorte) .5s;
}
.mascota.visible .mascota-burbuja { opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------- ligas */

.rejilla-ligas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 11px;
}
.liga-card {
  padding: 14px; cursor: pointer; position: relative; overflow: hidden;
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform .25s var(--resorte), border-color .25s, background .25s;
}
.liga-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--c); opacity: .8;
}
.liga-card:hover { transform: translateY(-3px); border-color: var(--borde-alto); background: var(--panel-alto); }
.liga-card.fijada { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.liga-escudo {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 10px;
  display: grid; place-items: center; font-size: 19px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  overflow: hidden;
}
.liga-escudo img { width: 30px; height: 30px; object-fit: contain; }
.liga-nombre { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.liga-pais { font-size: 10.5px; color: var(--texto-3); display: flex; align-items: center; gap: 5px; }
.liga-pie { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
.liga-fav {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--borde);
  color: var(--texto-3); transition: all .2s var(--resorte);
}
.liga-fav svg { width: 13px; height: 13px; }
.liga-fav:hover { transform: scale(1.14); border-color: var(--borde-alto); }
.liga-fav.on { color: #ff4d6d; border-color: rgba(255,77,109,.4); background: rgba(255,77,109,.12); }
.liga-fav.on svg { fill: currentColor; }

/* ---------------------------------------------------------- calendario */

.semana-nav { display: flex; align-items: center; gap: 8px; }
.semana-btn {
  height: 34px; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--texto-2);
  background: var(--panel); border: 1px solid var(--borde); border-radius: 9px;
  cursor: pointer; transition: all .18s;
}
.semana-btn:hover { background: var(--panel-alto); color: var(--texto); }
.semana-btn.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.semana-btn svg { width: 14px; height: 14px; }

.calendario {
  display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr));
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: var(--panel);
  backdrop-filter: blur(30px) saturate(180%);
}

/* -------- panel derecho: resumen de la semana -------- */
.resumen { display: flex; flex-direction: column; gap: 12px; }
.rs-bloque {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px; backdrop-filter: blur(30px) saturate(180%);
}
.rs-bloque h3 { font-size: 14px; font-weight: 700; color: var(--texto); margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px; }
.rs-bloque h3 small { font-size: 11px; font-weight: 500; color: var(--texto-3); }
.rs-fecha { font-size: 11.5px; color: var(--texto-3); margin: 0 0 14px; }
.rs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-stat { display: flex; align-items: center; gap: 9px; }
.rs-emo { font-size: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); flex-shrink: 0; }
.rs-stat b { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rs-stat small { font-size: 10.5px; color: var(--texto-3); }

.rs-picos { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.rs-pico { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; }
.rs-pico-h { font-size: 12px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rs-pico-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.rs-pico-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul-claro), var(--azul)); }
.rs-pico-n { font-size: 11.5px; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.rs-vacio { font-size: 12px; color: var(--texto-3); margin: 10px 0 0; }

.rs-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin-top: 12px; }
.rs-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); }
.rs-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.rs-leg.off { opacity: .32; }

.rs-pro {
  position: relative; overflow: hidden; border-radius: var(--radio); padding: 16px;
  background: linear-gradient(160deg, #4c1d95, #6d28d9 55%, #4c1d95);
  border: 1px solid rgba(167,139,250,.4);
}
.rs-pro-cab { display: flex; align-items: center; gap: 10px; }
.rs-corona { font-size: 20px; }
.rs-pro-tit b { display: block; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em; line-height: 1.1; }
.rs-pro-tit span { font-size: 11px; font-weight: 700; color: #ddd6fe; letter-spacing: .16em; }
.rs-pro-lema { font-size: 12.5px; color: #ede9fe; margin: 12px 0; font-weight: 600; }
.rs-pro-lista { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; max-width: 78%; }
.rs-pro-lista li { position: relative; padding-left: 22px; font-size: 12px; color: #f5f3ff; line-height: 1.3; }
.rs-pro-lista li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; width: 15px; height: 15px;
  display: grid; place-items: center; border-radius: 99px; background: rgba(255,255,255,.18);
  color: #fff; font-size: 9px; font-weight: 900;
}
.rs-pro-btn {
  width: 100%; padding: 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff; color: #5b21b6; font: inherit; font-weight: 700; font-size: 13px;
  transition: transform .18s var(--resorte), box-shadow .18s;
}
.rs-pro-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.rs-pro-precio { display: block; text-align: center; font-size: 10.5px; color: #ddd6fe; margin-top: 8px; }
.rs-pro-funko { position: absolute; right: -14px; bottom: -10px; width: 92px; height: 92px; object-fit: contain; object-position: bottom; opacity: .92; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.cal-esquina { border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); }
.cal-dia-cab {
  padding: 10px 6px; text-align: center;
  border-bottom: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
}
.cal-dia-cab:last-child { border-right: 0; }
.cal-dia-cab.hoy { background: rgba(10,75,255,.14); }
.cal-dia-nom { font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--texto-3); text-transform: uppercase; }
.cal-dia-num { font-size: 17px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cal-dia-cab.hoy .cal-dia-num { color: var(--azul-brillo); }
.cal-dia-cuenta { font-size: 9.5px; color: var(--texto-3); margin-top: 1px; }

.cal-horas { border-right: 1px solid var(--borde); }
.cal-hora {
  height: 46px; padding-right: 6px; text-align: right;
  font-size: 9.5px; color: var(--texto-3); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 2px;
}
.cal-col { border-right: 1px solid var(--borde); position: relative; }
.cal-col:last-child { border-right: 0; }
.cal-col.hoy { background: rgba(10,75,255,.045); }
.cal-celda { height: 46px; border-bottom: 1px solid var(--borde); }

.cal-evento {
  position: absolute; left: 2px; right: 2px;
  padding: 3px 5px; border-radius: 5px;
  font-size: 9.5px; line-height: 1.25; overflow: hidden;
  cursor: pointer; z-index: 2;
  background: color-mix(in srgb, var(--c) 22%, var(--fondo-2));
  border-left: 2px solid var(--c);
  transition: transform .16s var(--resorte), z-index 0s;
}
.cal-evento:hover { transform: scale(1.03); z-index: 5; background: color-mix(in srgb, var(--c) 34%, var(--fondo-2)); }
.cal-evento b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-evento .eq { display: block; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento.vivo { animation: pulso-vivo 2s ease-in-out infinite; }
@keyframes pulso-vivo { 50% { box-shadow: 0 0 0 2px rgba(239,68,68,.35); } }

/* -------------------------------------------------------- escudos */

/* Los escudos vienen de media.api-sports.io. Si uno falla (red caida, equipo
   sin logo), el onerror del <img> lo esconde y queda el hueco con el color
   del deporte: nunca un icono roto. */
.escudo {
  width: 26px; height: 26px; flex-shrink: 0;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  padding: 2px;
}
.escudo.g { width: 34px; height: 34px; border-radius: 8px; }
.escudo.xs { width: 17px; height: 17px; border-radius: 4px; padding: 1px; }
:root[data-tema="claro"] .escudo { background: rgba(10,30,80,.05); }

/* --------------------------------------------------------- destacado */

.destacado {
  position: relative; overflow: hidden;
  padding: 22px 24px;
  border-radius: var(--radio);
  background:
    radial-gradient(120% 140% at 90% 10%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%),
    var(--panel);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--borde);
}
.destacado::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
}
.dest-liga { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.dest-liga span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.dest-vs { display: flex; align-items: center; justify-content: center; gap: 22px; }
.dest-eq { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; max-width: 170px; }
.dest-eq img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.dest-eq b { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }
.dest-mid { text-align: center; }
.dest-hora { font-size: 27px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dest-vs-txt { font-size: 10px; color: var(--texto-3); letter-spacing: .14em; margin-top: 2px; }

.cuenta-atras { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.ca-caja {
  min-width: 52px; padding: 7px 4px; text-align: center;
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--borde);
}
.ca-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ca-lbl { font-size: 8.5px; color: var(--texto-3); letter-spacing: .07em; margin-top: 3px; text-transform: uppercase; }

/* ------------------------------------------------------------ timeline */

.timeline { display: flex; flex-direction: column; gap: 1px; }
.tl-evento {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--radio-s);
  transition: background .16s;
  cursor: pointer;
}
.tl-evento:hover { background: var(--panel-alto); }
.tl-hora {
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 44px; color: var(--texto-2);
}
.tl-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 8px var(--c); }
.tl-liga { font-size: 10.5px; color: var(--texto-3); min-width: 150px; }
.tl-equipos { font-size: 12.5px; flex: 1; }
.tl-equipos b { font-weight: 500; }
.tl-estado {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.tl-estado.scheduled { background: rgba(255,255,255,.07); color: var(--texto-3); }
.tl-estado.live { background: rgba(239,68,68,.18); color: #ff6b6b; animation: latido 1.6s infinite; }
.tl-estado.finished { background: rgba(34,197,94,.14); color: #4ade80; }

/* ----------------------------------------------------------- analytics */

.rejilla { display: grid; gap: 12px; }
.c2 { grid-template-columns: repeat(2, 1fr); }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1240px) { .c4 { grid-template-columns: repeat(2, 1fr); } .c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .c2, .c3, .c4 { grid-template-columns: 1fr; } }

.tarjeta { padding: 16px; }
.t-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 12px;
}
.cifra { font-size: 29px; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.cifra small { font-size: 14px; font-weight: 500; color: var(--texto-3); }
.cifra-pie { font-size: 11px; color: var(--texto-3); margin-top: 6px; }

/* Grafico "¿a que hora se juega mas?": barras reales con altura resuelta
   contra un track de alto fijo (el bug anterior era height:% sin padre alto). */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 20px; }
.barra-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.barra-v {
  position: relative; width: 74%; max-width: 20px; min-height: 4px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--azul-claro), var(--azul));
  transition: height .7s var(--resorte), filter .2s;
}
.barra-col:hover .barra-v { filter: brightness(1.18); }
.barra-col.pico .barra-v { background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 0 16px rgba(245,158,11,.45); }
.barra-val {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.barra-col.pico .barra-val { color: #fbbf24; }
.barras-eje { display: flex; gap: 4px; margin-top: 7px; }
.barras-eje span { flex: 1; text-align: center; font-size: 9px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.barras-nota { margin-top: 13px; font-size: 12px; line-height: 1.55; color: var(--texto-2); }
.barras-nota b { color: var(--texto); font-weight: 700; }

/* Mapa volteado: dias en horizontal (cabecera), horarios en vertical (filas). */
.heat { display: grid; grid-template-columns: 56px repeat(7, 1fr); gap: 2px 3px; }
.heat-esq { border-right: 1px solid var(--borde); }
.heat-dia {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; font-weight: 700; color: var(--texto); text-transform: uppercase;
  letter-spacing: .04em; padding-bottom: 6px; border-bottom: 1px solid var(--borde-alto);
}
.heat-dia small { font-size: 9.5px; font-weight: 600; color: var(--texto-3); }
.heat-hora {
  font-size: 10px; font-weight: 600; color: var(--texto-2);
  display: flex; align-items: center; padding-right: 8px; justify-content: flex-end;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  border-right: 1px solid var(--borde);
}
/* Líneas guía cada 3 horas para leer el horario de un vistazo. */
.heat-hora.hh-marca { color: var(--texto); font-weight: 700; border-top: 1px solid rgba(255,255,255,.14); }
.heat-celda {
  min-height: 24px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.96); text-shadow: 0 1px 2px rgba(0,0,0,.55);
  /* La zona ARBIFY llega en --tc; --op es cuánto se rellena (intensidad IOA). */
  background: color-mix(in srgb, var(--tc) var(--op, 78%), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent),
              inset 0 0 0 100px transparent;
  outline: 1px solid rgba(255,255,255,.045); outline-offset: -1px;
  transition: transform .12s, box-shadow .12s;
  cursor: default;
}
.heat-celda.hh-marca { border-top: 1px solid rgba(255,255,255,.14); }
.heat-celda:not([style*="--tc"]),
.heat-celda[style*="transparent"] { color: transparent; }
.heat-celda:hover { transform: scale(1.14); z-index: 2; box-shadow: 0 3px 12px rgba(0,0,0,.5); }

.heat-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.heat-leyenda { display: flex; align-items: center; gap: 13px; font-size: 11px; color: var(--texto-2); flex-wrap: wrap; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 13px; height: 13px; border-radius: 4px; }
.heat-analisis { font-size: 11.5px; color: var(--texto-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.heat-analisis .franja {
  color: var(--azul-brillo); font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(10,75,255,.14); padding: 2px 9px; border-radius: 6px;
}

.rank { display: flex; flex-direction: column; gap: 7px; }
.rank-fila { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.rank-nom { min-width: 132px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-barra { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.rank-barra i { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width .7s var(--resorte); }
.rank-val { font-size: 11px; font-weight: 700; color: var(--texto-2); min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- otros */

.vacio { text-align: center; padding: 50px 20px; color: var(--texto-3); font-size: 13px; }
.seccion { margin-bottom: 22px; }
.seccion > h2 {
  font-size: 14px; font-weight: 600; margin-bottom: 11px;
  display: flex; align-items: center; gap: 9px;
}
.seccion > h2 small { font-size: 11.5px; font-weight: 400; color: var(--texto-3); }

.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; margin-bottom: 16px;
  border-radius: var(--radio-s);
  background: rgba(234,179,8,.07);
  border: 1px solid rgba(234,179,8,.24);
  font-size: 12.5px; color: var(--texto-2); line-height: 1.55;
}
.aviso svg { width: 16px; height: 16px; color: #eab308; flex-shrink: 0; margin-top: 1px; }
.aviso b { color: var(--texto); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,.06); color: var(--texto-2);
}

/* ============================================ marca ARBIFY + inicio + modal HOA */

.marca-sub { display: inline-flex; align-items: center; gap: 5px; }
.arbify-mark { width: 12px; height: 12px; color: var(--verde-arbify); flex: none; }
.arbify-mark use, .arbify-mark path { fill: currentColor; }
.marca-sub b { color: var(--verde-arbify); font-weight: 700; letter-spacing: .1em; }

.inicio-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel); color: var(--texto-2);
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all .2s var(--resorte);
}
.inicio-btn svg { width: 17px; height: 17px; }
.inicio-btn:hover {
  color: var(--hielo); border-color: var(--verde-arbify);
  background: color-mix(in srgb, var(--verde-arbify) 14%, transparent);
  transform: translateY(-1px);
}

/* Celdas del heatmap: clickeables cuando tienen eventos */
.heat-celda[data-dia] { cursor: pointer; }
.heat-celda[data-dia]:hover { outline: 2px solid var(--hielo); outline-offset: -2px; }

.modal-fondo {
  position: fixed; inset: 0; z-index: 200; padding: 24px;
  background: rgba(4,6,15,.74); backdrop-filter: blur(7px);
  display: grid; place-items: center; animation: modalFade .18s ease;
}
@keyframes modalFade { from { opacity: 0; } }
.modal-hoa {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #101a3a, var(--fondo));
  border: 1px solid var(--borde-alto); border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6); padding: 22px 22px 26px;
  animation: modalSube .28s var(--resorte);
}
@keyframes modalSube { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.modal-hoa::-webkit-scrollbar { width: 8px; }
.modal-hoa::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 5px; }

.mh-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mh-hora { font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mh-fecha { font-size: 12.5px; color: var(--texto-3); margin-top: 5px; text-transform: capitalize; }
.mh-cerrar {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); color: var(--texto-2); cursor: pointer; font-size: 16px;
  display: grid; place-items: center; transition: all .18s;
}
.mh-cerrar:hover { color: var(--hielo); border-color: var(--borde-alto); background: var(--panel-alto); }

.mh-zona {
  padding: 13px 16px 13px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
  color: var(--hielo); margin-bottom: 14px;
  background: color-mix(in srgb, var(--zc) 24%, #0d1730);
  border-left: 4px solid var(--zc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zc) 35%, transparent);
}

.mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mh-stat { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; text-align: center; }
.mh-stat span { display: block; font-size: 10.5px; letter-spacing: .06em; color: var(--texto-3); text-transform: uppercase; margin-bottom: 6px; }
.mh-stat b { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mh-stat.ioa b { color: var(--verde-arbify-2); }

.mh-tit { font-size: 11px; letter-spacing: .08em; color: var(--texto-3); text-transform: uppercase; font-weight: 700; margin: 0 0 10px; }
.mh-bloque { margin-bottom: 20px; }

.mh-torneos { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mh-torneos th { text-align: left; font-size: 10px; letter-spacing: .05em; color: var(--texto-3); text-transform: uppercase; font-weight: 600; padding: 0 0 8px; }
.mh-torneos th:not(:first-child), .mh-torneos td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mh-torneos td { padding: 7px 0; border-top: 1px solid var(--borde); color: var(--texto-2); }
.mh-torneos td:first-child { color: var(--texto); }
.mh-torneos .ioa-c { color: var(--verde-arbify-2); font-weight: 700; }

.mh-partido { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 11px; margin-bottom: 8px; }
.mh-p-hora { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; line-height: 1.3; }
.mh-p-eq { font-size: 13px; font-weight: 600; }
.mh-p-eq small { display: block; font-size: 10.5px; font-weight: 500; color: var(--texto-3); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.mh-p-ioa { font-size: 15px; font-weight: 750; color: var(--verde-arbify-2); font-variant-numeric: tabular-nums; }

/* ============================================ detalle de evento (columna derecha) */

.cal-evento { cursor: pointer; }
.ev-detalle { border-left: 3px solid var(--c, var(--verde-arbify)); }
.ev-eqs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 12px; }
.ev-eq { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ev-eq img, .ev-emo { width: 42px; height: 42px; object-fit: contain; }
.ev-emo { font-size: 32px; display: grid; place-items: center; }
.ev-eq span { font-size: 12px; font-weight: 600; line-height: 1.2; }
.ev-vs { flex: none; font-size: 11px; font-weight: 800; color: var(--texto-3); letter-spacing: .05em; }
.ev-meta { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--texto-2); margin-bottom: 12px; padding-top: 11px; border-top: 1px solid var(--borde); }
.ev-hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-liga { color: var(--texto-3); }
.ev-ioa { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--verde-arbify) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-arbify) 30%, transparent); }
.ev-ioa b { font-size: 17px; color: var(--verde-arbify-2); font-variant-numeric: tabular-nums; flex: none; }
.ev-ioa span { font-size: 11px; color: var(--texto-2); line-height: 1.3; }

/* Scroll horizontal para calendario/heatmap en pantallas chicas */
.cal-scroll, .heat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================ móvil / tablet (≤1024): apilar todo */

@media (max-width: 1024px) {
  html, body { height: auto; overflow: auto; }
  body { overflow-x: hidden; }
  .app {
    display: flex; flex-direction: column;
    height: auto; min-height: 100vh;
  }
  .app.colapsada { --sidebar: 248px; }
  .app.colapsada .marca-txt, .app.colapsada .nav-item span { display: revert; }

  .marca-zona { height: 56px; border-right: 0; }
  .header { flex-wrap: wrap; height: auto; min-height: 54px; padding: 8px 12px; gap: 8px; }
  .buscador { order: 9; flex: 1 1 100%; max-width: none; }
  .inicio-btn span { display: none; }
  .perfil-txt { display: none; }
  .header-der { flex-wrap: wrap; gap: 8px; }

  /* La barra lateral pasa a nav horizontal arriba del contenido. */
  .lateral {
    flex-direction: row; overflow-x: auto; align-items: center; gap: 6px;
    border-right: 0; border-bottom: 1px solid var(--borde);
    padding: 8px 10px; scrollbar-width: none;
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--fondo) 90%, transparent); backdrop-filter: blur(14px);
  }
  .lateral::-webkit-scrollbar { display: none; }
  .lateral .nav { flex-direction: row; gap: 6px; width: max-content; }
  .nav-item { flex-direction: column; gap: 3px; padding: 7px 11px; white-space: nowrap; flex: none; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item span:not(.nav-globo) { font-size: 10px; }
  .nav-globo { position: static; margin: 0; }
  .nav-sep, .lateral-pie { display: none; }

  .principal { overflow: visible; padding: 12px; }
  /* El panel de resumen ya no se oculta: baja al final, a lo ancho. */
  .lateral-der { display: block; border-left: 0; border-top: 1px solid var(--borde); padding: 14px 12px; }
  .resumen { position: static; }

  .cal-scroll .calendario { min-width: 660px; }
  .heat-scroll .heat { min-width: 620px; }
}

@media (max-width: 560px) {
  .header-der .semana-nav { order: -1; }
  .vista-cab h1 { font-size: 22px; }
  .modal-fondo { padding: 12px; }
}

/* ============================================ navegador de día (Eventos) */

.dia-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dia-btn {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--panel);
  color: var(--texto-2); cursor: pointer; transition: all .18s var(--resorte);
}
.dia-btn svg { width: 20px; height: 20px; }
.dia-btn:hover { color: var(--hielo); border-color: var(--verde-arbify); background: color-mix(in srgb, var(--verde-arbify) 14%, transparent); }
.dia-btn:active { transform: scale(.94); }
.dia-actual { flex: 1; text-align: center; }
.dia-et { font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.dia-hoy { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--verde-arbify-2);
  background: color-mix(in srgb, var(--verde-arbify) 18%, transparent); padding: 2px 7px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.dia-actual small { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 3px; }
.dia-fin { font-size: 12px; color: var(--texto-2); background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 14px; }