/* Contantonio · Antonio Moreno Fisioterapia
   Paleta sacada del logo (azul #5db8d3 y blanco) con un azul marino para el texto.
   Los colores de los gráficos están comprobados para daltonismo (claro y oscuro). */

:root {
  color-scheme: light;
  --fondo: #f1f7f9;
  --fondo-brillo: #dff1f7;
  --superficie: #ffffff;
  --superficie-2: #f6fafb;
  --texto: #10303d;
  --suave: #48636f;
  --apagado: #57727e;
  --borde: #e0eaee;
  --borde-fuerte: #c9dbe2;
  --marca: #5db8d3;
  --marca-tinte: #e2f2f7;
  --marca-tinte-2: #cfe9f2;
  --primario: #1a7299;
  --primario-hover: #155f80;
  --primario-texto: #ffffff;
  --positivo: #12775a;
  --negativo: #b23f2c;
  --ok-fondo: #e3f4ee;   --ok-texto: #12573f;
  --error-fondo: #fbe7e3; --error-texto: #8e2f20;
  --aviso-fondo: #fff4dc; --aviso-texto: #6b4b00;
  --info-fondo: #e5f2f8;  --info-texto: #1a5c7a;
  /* Series de los gráficos (orden fijo) y gris de contexto. */
  --s1: #2a8dba; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --gris: #c5d3d9;
  --rejilla: #e6eef1;
  --eje: #c9dbe2;
  /* Tarjeta destacada (fondo del logo). */
  --destacada-fondo: radial-gradient(130% 150% at 100% 0%, #8fd2e6 0%, #5db8d3 45%, #4aa8c6 100%);
  --destacada-texto: #0c2733;
  --medidor-pista: rgba(255, 255, 255, .5);
  --medidor-relleno: #0c2733;
  --medidor-previsto: rgba(12, 39, 51, .28);
  --sombra: 0 1px 2px rgba(16, 48, 61, .04), 0 8px 24px rgba(16, 48, 61, .06);
  --sombra-alta: 0 2px 6px rgba(16, 48, 61, .08), 0 14px 32px rgba(16, 48, 61, .12);
  --radio: 20px;
  --radio-sm: 12px;
  --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fuente-cifras: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fuente-marca: "Century Gothic", "Montserrat", "Avenir Next", "Futura", "Segoe UI Variable Display", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fondo: #0b1a21;
    --fondo-brillo: #10303b;
    --superficie: #13262f;
    --superficie-2: #0f2029;
    --texto: #e6f0f3;
    --suave: #a7bec8;
    --apagado: #7e98a3;
    --borde: #22404c;
    --borde-fuerte: #2d5060;
    --marca-tinte: #173846;
    --marca-tinte-2: #1d4555;
    --primario: #72c6e2;
    --primario-hover: #8fd3ea;
    --primario-texto: #06202a;
    --positivo: #4fcf9f;
    --negativo: #f39282;
    --ok-fondo: #12352b;   --ok-texto: #9fe3c6;
    --error-fondo: #3d1d18; --error-texto: #f7b8ac;
    --aviso-fondo: #36290f; --aviso-texto: #f0d38f;
    --info-fondo: #14323f; --info-texto: #a9d8ec;
    --s1: #3a9cc8; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
    --gris: #3a525c;
    --rejilla: #1d3540;
    --eje: #2d5060;
    --destacada-fondo: radial-gradient(130% 150% at 100% 0%, #2a7d99 0%, #1d6380 45%, #164f66 100%);
    --destacada-texto: #eaf7fb;
    --medidor-pista: rgba(255, 255, 255, .16);
    --medidor-relleno: #bfeaf6;
    --medidor-previsto: rgba(191, 234, 246, .35);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-alta: 0 10px 30px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  background-image: radial-gradient(900px 420px at 85% -120px, var(--fondo-brillo), transparent 70%);
  background-repeat: no-repeat;
}

a { color: var(--primario); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primario-hover); }
img { max-width: 100%; }
code { font-size: 13px; overflow-wrap: anywhere; }
small { font-size: 12px; }

.icono { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.tenue { color: var(--apagado); font-weight: 400; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.vacio { margin: 4px 0; color: var(--apagado); }
.fuerte { font-weight: 650; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }

/* --- Estructura: barra lateral + contenido -------------------------------------- */

.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  padding: 24px 18px;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  border-right: 1px solid var(--borde);
  backdrop-filter: blur(8px);
}

.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; padding: 0 6px; }
.marca:hover { color: var(--texto); }
.marca-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--marca);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 14px rgba(93, 184, 211, .35);
}
.marca-icono img { width: 34px; height: auto; display: block; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--fuente-marca); }
.marca-texto strong { font-size: 15px; font-weight: 400; letter-spacing: .02em; }
.marca-texto small { margin-top: 3px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--apagado); }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radio-sm);
  color: var(--suave);
  font-weight: 550;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.menu a:hover { background: var(--marca-tinte); color: var(--texto); }
.menu a.activo { background: var(--marca-tinte); color: var(--texto); }
.menu a.activo .icono { color: var(--primario); }
.menu a.activo::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--marca);
}

.lateral-pie { display: flex; align-items: center; gap: 8px; margin: auto 6px 0; font-size: 13px; color: var(--apagado); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--s3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s3) 25%, transparent); }
.lateral-pie.abierto .punto { background: var(--s4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s4) 25%, transparent); }
.salir { margin: -16px 0 0; }
.salir .btn-texto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.salir .icono { width: 17px; height: 17px; }

.contenido { width: 100%; max-width: 1260px; padding: 30px 40px 48px; }
.pie { margin: 40px 0 0; font-size: 12px; color: var(--apagado); }

.menu-movil { display: none; }

.aviso-global {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  font-weight: 550;
}

/* --- Mensajes ---------------------------------------------------------------- */

.mensajes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.mensaje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 11px 16px 11px 14px;
  border-radius: 14px;
  border-left: 4px solid currentColor;
  font-weight: 500;
  animation: entrar .25s ease-out;
}
.mensaje.ok { background: var(--ok-fondo); color: var(--ok-texto); }
.mensaje.error { background: var(--error-fondo); color: var(--error-texto); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.mensaje.info, .mensaje.deshacer { background: var(--info-fondo); color: var(--info-texto); }
.mensaje.deshacer span { flex: 1 1 260px; }
@keyframes entrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- Cabecera de página -------------------------------------------------------- */

.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.cabecera-texto { min-width: 0; }
.antetitulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 6px;
  font-family: var(--fuente-marca);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primario);
}
.antetitulo .tenue { letter-spacing: .08em; text-transform: none; font-family: var(--fuente); }
h1 { margin: 0; font-family: var(--fuente-marca); font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.intro { margin: -8px 0 20px; color: var(--suave); max-width: 70ch; }
.tarjeta .intro { margin: 0 0 16px; }

.vertebras { display: inline-flex; align-items: center; gap: 4px; }
.vertebras i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--marca-tinte-2); }
.vertebras i.actual { width: 10px; height: 10px; background: var(--marca); box-shadow: 0 0 0 3px var(--marca-tinte); }

/* --- Rejillas ------------------------------------------------------------------ */

.rejilla-dia { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.columna-principal, .columna-lateral { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 20px; }
.columna-principal .rejilla-2, .columna-lateral .rejilla-2 { margin-bottom: 0; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.bento .ancha { grid-column: span 2; grid-row: span 2; }

/* --- Tarjetas ------------------------------------------------------------------ */

.tarjeta {
  position: relative;
  min-width: 0;
  padding: 22px 24px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
main > .tarjeta, main > details.tarjeta { margin-bottom: 20px; }
.tarjeta-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.tarjeta-cabecera h2 { display: flex; align-items: center; gap: 8px; }
.tarjeta-cabecera h2 .icono { width: 18px; height: 18px; color: var(--primario); vertical-align: 0; }
.tarjeta-cabecera .tenue { font-size: 13px; }

details.desplegable > summary { margin-bottom: 0; cursor: pointer; list-style: none; }
details.desplegable > summary::-webkit-details-marker { display: none; }
details.desplegable > summary h2::after { content: "+"; margin-left: 4px; font-size: 16px; color: var(--apagado); }
details.desplegable[open] > summary { margin-bottom: 16px; }
details.desplegable[open] > summary h2::after { content: "–"; }

.destacada {
  overflow: hidden;
  color: var(--destacada-texto);
  background: var(--destacada-fondo);
  border: 0;
  box-shadow: 0 10px 30px rgba(42, 141, 186, .25);
}
.destacada-marca { position: absolute; right: -18px; top: -8px; width: 170px; opacity: .22; pointer-events: none; }
.destacada-etiqueta { position: relative; margin: 0; font-family: var(--fuente-marca); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.destacada-valor { position: relative; margin: 6px 0 2px; font-family: var(--fuente-cifras); font-size: 52px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.destacada-detalle { position: relative; margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.destacada .positivo, .destacada .negativo { color: inherit; font-weight: 700; }
.destacada .medidor { margin-top: 16px; }

.medidor { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: var(--medidor-pista); }
.medidor-relleno, .medidor-previsto { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.medidor-relleno { background: var(--medidor-relleno); }
.medidor-previsto { background: var(--medidor-previsto); }
.tarjeta:not(.destacada) .medidor { --medidor-pista: var(--marca-tinte); --medidor-relleno: var(--s1); --medidor-previsto: color-mix(in srgb, var(--s1) 35%, transparent); }

/* --- Cifras -------------------------------------------------------------------- */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cifra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.tarjeta .cifra { background: var(--superficie-2); box-shadow: none; }
.cifra-etiqueta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.cifra-valor { font-family: var(--fuente-cifras); font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cifra-detalle { font-size: 12.5px; color: var(--apagado); }
.cifra-detalle.positivo { color: var(--positivo); }
.cifra-detalle.negativo { color: var(--negativo); }

/* --- Formularios ------------------------------------------------------------------ */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 550; color: var(--suave); }
.campo input, .campo select { width: 100%; }
.fila-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.fila-jornada { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fila-campos > *, .fila-jornada > * { min-width: 0; }
.fila-jornada .ancho { grid-column: 1 / -1; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

input[type=text], input[type=password], input[type=number], input[type=date], select {
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 400;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input:hover, select:hover { border-color: color-mix(in srgb, var(--primario) 45%, var(--borde-fuerte)); }
input:focus, select:focus { outline: none; border-color: var(--primario); background: var(--superficie); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 18%, transparent); }
input::placeholder { color: var(--apagado); }
#importe-ingreso { font-family: var(--fuente-cifras); font-size: 20px; font-weight: 600; }
.importe-corto { width: 8em; text-align: right; }
.celda-check input { width: 18px; height: 18px; accent-color: var(--primario); }

.pastillas { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.pastillas legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 550; color: var(--suave); }
.pastillas-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pastillas input { position: absolute; opacity: 0; pointer-events: none; }
.pastillas label {
  padding: 8px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pastillas label:hover { border-color: var(--primario); }
.pastillas input:checked + label { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: 600; }
.pastillas input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.chips:empty { display: none; }
.chip {
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  background: var(--marca-tinte);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--primario); }

.btn, .btn-sec, .btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-weight: 650;
  border-radius: var(--radio-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn { color: var(--primario-texto); background: var(--primario); border: 1px solid var(--primario); }
.btn:hover { color: var(--primario-texto); background: var(--primario-hover); border-color: var(--primario-hover); box-shadow: 0 6px 16px color-mix(in srgb, var(--primario) 30%, transparent); }
.btn-sec, .btn-icono { color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); }
.btn-sec:hover, .btn-icono:hover { color: var(--texto); border-color: var(--primario); }
.btn-icono { width: 44px; padding: 0; }
.btn:active, .btn-sec:active, .btn-icono:active { transform: scale(.97); }
.btn.pequeno, .btn-sec.pequeno { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn-icono.pequeno { width: 34px; min-height: 34px; border-color: transparent; background: transparent; color: var(--apagado); }
.btn-icono.pequeno:hover { background: var(--marca-tinte); color: var(--texto); border-color: transparent; }
.btn-icono.pequeno.peligro:hover { background: var(--error-fondo); color: var(--negativo); }
.btn-icono.pequeno .icono { width: 18px; height: 18px; vertical-align: 0; }
.btn:disabled, .btn-sec:disabled, .btn-icono:disabled, .favorito:disabled { opacity: .6; cursor: progress; }
.btn-texto { padding: 6px 10px; font: inherit; color: var(--suave); background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn-texto:hover { background: var(--marca-tinte); color: var(--texto); }
.btn-texto.peligro { color: var(--negativo); }
.btn-texto.peligro:hover { background: var(--error-fondo); }
.selector-fecha { width: 160px; }

.nota-pie, .enlace-pie { margin: 14px 0 0; font-size: 14px; color: var(--apagado); }
.nota-pie a, .enlace-pie a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.nota-pie .icono, .enlace-pie .icono { width: 16px; height: 16px; vertical-align: 0; }
.enlace-pie { margin: -4px 4px 0; }
.formulario-estrecho { max-width: 560px; }

/* --- Cobro rápido ------------------------------------------------------------------ */

.favoritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.favoritos form { margin: 0; display: flex; }
.favorito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s, background-color .15s;
}
.favorito:hover { border-color: var(--primario); background: var(--superficie); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.favorito:active { transform: scale(.98); }
.favorito-servicio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.favorito-importe { font-family: var(--fuente-cifras); font-size: 22px; font-weight: 600; line-height: 1.2; }
.favorito-pago { font-size: 12px; color: var(--apagado); }

.clave { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 3px; vertical-align: 0; background: var(--gris); }
th .clave { margin-right: 6px; }
.s1 { --serie: var(--s1); } .s2 { --serie: var(--s2); } .s3 { --serie: var(--s3); } .s4 { --serie: var(--s4); } .s5 { --serie: var(--s5); }
.gris { --serie: var(--gris); }
.clave.s1, .clave.s2, .clave.s3, .clave.s4, .clave.s5, .clave.gris { background: var(--serie); }

/* --- Movimientos del día ---------------------------------------------------------------- */

.movimientos { margin: 0; padding: 0; list-style: none; }
.movimientos li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.movimientos li:first-child { padding-top: 0; }
.mov-marca { align-self: stretch; min-height: 32px; border-radius: 4px; background: var(--serie, var(--gris)); }
.mov-marca.gasto { background: var(--negativo); opacity: .55; }
.mov-texto { display: flex; flex-direction: column; min-width: 0; }
.mov-texto strong { font-weight: 600; }
.mov-texto small { color: var(--apagado); overflow-wrap: anywhere; }
.mov-importe { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.es-gasto .mov-importe { color: var(--negativo); }
.mov-acciones { display: flex; gap: 2px; }
.mov-acciones form { margin: 0; }
@media (hover: hover) {
  .movimientos .mov-acciones { opacity: .35; transition: opacity .15s; }
  .movimientos li:hover .mov-acciones, .movimientos li:focus-within .mov-acciones { opacity: 1; }
}
.totales { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; }
.totales div { display: flex; justify-content: space-between; gap: 12px; }
.totales dt { color: var(--suave); }
.totales dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Barras de reparto (un solo color) ---------------------------------------------------- */

.ranking { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ranking li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5em; align-items: baseline; gap: 4px 12px; }
.ranking-nombre { font-weight: 550; }
.ranking-valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.ranking-cuota { font-size: 13px; color: var(--apagado); text-align: right; font-variant-numeric: tabular-nums; }
.ranking-barra { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--marca-tinte); overflow: hidden; }
.ranking-barra span { display: block; height: 100%; border-radius: 999px; background: var(--s1); }

.lista-importes { margin: 0; padding: 0; list-style: none; }
.lista-importes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.lista-importes li:last-child { border-bottom: 0; }
.lista-importes .num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Gráficos de columnas ------------------------------------------------------------- */

.grafico { margin: 0 0 22px; }
.grafico-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.grafico-titulo { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--suave); }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.plot { position: relative; height: 210px; margin-left: 48px; }
.marca-y { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--rejilla); }
.marca-y.base { border-top-color: var(--eje); }
.marca-y span { position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%); font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; white-space: nowrap; }
.columnas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); }
.columna { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; border-radius: 8px 8px 0 0; cursor: default; outline-offset: -2px; }
.columna:hover, .columna:focus-visible { background: color-mix(in srgb, var(--marca) 9%, transparent); }
.barra { display: block; width: min(16px, 34%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--serie); transition: filter .15s; }
.columna:hover .barra, .columna:focus-visible .barra, .columna:hover .segmento, .columna:focus-visible .segmento { filter: brightness(1.1) saturate(1.05); }
.pila { display: flex; flex-direction: column-reverse; gap: 2px; width: min(28px, 52%); }
.segmento { display: block; flex-basis: 0; min-height: 0; background: var(--serie); }
.pila .segmento:last-child { border-radius: 4px 4px 0 0; }
.eje-x { display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); margin: 8px 0 0 48px; font-size: 12px; color: var(--apagado); text-align: center; }
.eje-x span { display: flex; flex-direction: column; line-height: 1.3; }
.eje-x small { font-size: 11px; }

.tooltip {
  position: fixed;
  z-index: 50;
  min-width: 150px;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #10303d;
  color: #f1f8fa;
  box-shadow: var(--sombra-alta);
  font-size: 13px;
  pointer-events: none;
}
.tooltip-titulo { margin: 0 0 6px; font-weight: 700; }
.tooltip-fila { display: flex; align-items: center; gap: 8px; }
.tooltip-fila b { font-variant-numeric: tabular-nums; }
.tooltip-fila span { color: #b9cfd8; }
.tooltip-linea { width: 12px; height: 3px; border-radius: 2px; background: var(--serie); }
.tooltip-nota { margin: 6px 0 0; color: #b9cfd8; }
@media (prefers-color-scheme: dark) { .tooltip { background: #e6f0f3; color: #10303d; } .tooltip-fila span, .tooltip-nota { color: #48636f; } }

/* --- Tablas ------------------------------------------------------------------------- */

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; }
.tabla th a { color: inherit; text-decoration: none; }
.tabla th a:hover { color: var(--primario); }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--marca) 6%, transparent); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--borde-fuerte); }
.tabla tfoot tr.secundaria td { font-weight: 400; color: var(--suave); font-size: 13px; border-top: 0; }
.tabla-anual { min-width: 840px; font-size: 13.5px; }
.tabla-anual th, .tabla-anual td { padding: 8px 6px; }
.tabla-anual td:first-child { min-width: 9.5em; }
.tabla .elegido { background: color-mix(in srgb, var(--marca) 10%, transparent); }
.separador td { padding-top: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primario); }
.ficha { display: flex; flex-direction: column; margin: 0; }
.ficha div { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; min-width: 0; }

.bloques { display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; list-style: none; }
.bloques li { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }

/* --- Avisos ------------------------------------------------------------------------- */

details.avisos { margin-top: 0; }
main > details.avisos { margin-top: 20px; }
details.avisos summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--aviso-texto); }
details.avisos summary .icono { width: 18px; height: 18px; vertical-align: 0; }
details.avisos ul { margin: 12px 0 0; padding-left: 20px; color: var(--suave); }
details.avisos li { margin-bottom: 6px; }

/* --- Resumen ------------------------------------------------------------------------ */

.anio { margin-bottom: 24px; }
.anio-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.anio-titulo { font-family: var(--fuente-marca); font-size: 30px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto); }
.anio .cifras { margin-bottom: 18px; }
.objetivo-anual { margin-bottom: 24px; }
.objetivo-anual p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-weight: 600; }
.objetivo-anual p > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.objetivo-anual .icono { color: var(--primario); width: 18px; height: 18px; vertical-align: 0; }
.subtitulo { margin: 4px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.trimestres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.trimestre { padding: 14px 16px; border-radius: 16px; background: var(--superficie-2); border: 1px solid var(--borde); }
.trimestre.vacio { opacity: .65; }
.trimestre-nombre { margin: 0 0 8px; font-weight: 700; }
.trimestre dl { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; font-size: 13.5px; }
.trimestre dl div { display: flex; justify-content: space-between; gap: 8px; }
.trimestre dt { color: var(--suave); }
.trimestre dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.trimestre .tenue { margin: 0; }
.enlace-discreto { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; }
.enlace-discreto .icono { width: 15px; height: 15px; vertical-align: 0; }
.desplegable-tabla summary { cursor: pointer; font-weight: 600; color: var(--primario); margin-bottom: 8px; }

/* --- Sin Excel ---------------------------------------------------------------------- */

.bienvenida { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; padding: 0; overflow: hidden; }
.bienvenida-marca { display: grid; place-items: center; padding: 32px; background: var(--destacada-fondo); }
.bienvenida-marca img { width: 100%; max-width: 240px; }
.bienvenida-texto { padding: 28px 28px 28px 0; }
.bienvenida-texto h1 { margin-bottom: 10px; }
.pasos { padding-left: 20px; color: var(--suave); }
.pasos li { margin-bottom: 8px; }

/* --- Entrar (cuando la aplicación está abierta a la red) ------------------------------- */

.entrar { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.entrar-tarjeta { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 360px); padding: 0; overflow: hidden; }
.entrar-marca { display: grid; place-items: center; padding: 32px; background: var(--destacada-fondo); }
.entrar-marca img { width: 100%; max-width: 200px; }
.entrar-form { padding: 32px 30px; }
.entrar-form h1 { margin-bottom: 6px; }
.entrar-form > .tenue { margin: 0 0 20px; }
.entrar-form .mensaje { margin: 0 0 14px; }
.entrar-form .btn { width: 100%; }
.recordar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13.5px; color: var(--suave); cursor: pointer; }
.recordar input { width: 18px; height: 18px; margin: 0; accent-color: var(--primario); }

/* --- Pantallas medianas y móviles ------------------------------------------------------- */

@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .ancha { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 1080px) {
  .rejilla-dia { grid-template-columns: minmax(0, 1fr); }
  .trimestres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app { display: block; }
  .lateral {
    position: sticky;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }
  .marca-icono { width: 38px; height: 38px; border-radius: 12px; }
  .marca-icono img { width: 28px; }
  .lateral .menu { display: none; }
  .lateral-pie { margin: 0 0 0 auto; }
  .contenido { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .menu-movil {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    border-top: 1px solid var(--borde);
    backdrop-filter: blur(10px);
  }
  .menu-movil a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--apagado); text-decoration: none; }
  .menu-movil a .icono { width: 22px; height: 22px; }
  .menu-movil a.activo { color: var(--primario); background: var(--marca-tinte); }
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 26px; }
  .destacada-valor { font-size: 44px; }
  .bienvenida { grid-template-columns: minmax(0, 1fr); }
  .bienvenida-texto { padding: 0 22px 24px; }
  .salir { margin: 0 0 0 4px; }
  .entrar-tarjeta { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 420px; }
  .entrar-marca { padding: 24px; }
  .entrar-marca img { max-width: 160px; }
  .entrar-form { padding: 24px 22px 26px; }
}

@media (max-width: 560px) {
  .tarjeta { padding: 18px 16px; border-radius: 18px; }
  .bienvenida, .entrar-tarjeta { padding: 0; }
  .lateral-pie { font-size: 0; gap: 0; }
  .salir .btn-texto span { display: none; }
  .cabecera { align-items: flex-start; }
  .cabecera-acciones { width: 100%; }
  .selector-fecha { flex: 1; width: auto; }
  .fila-campos { grid-template-columns: minmax(0, 1fr) 7.5em; }
  .favoritos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { gap: 12px; }
  .cifra { padding: 14px; }
  .cifra-valor { font-size: 22px; }
  .plot { height: 180px; margin-left: 40px; }
  .eje-x { margin-left: 40px; font-size: 11px; }
  .eje-x small { display: none; }
  .trimestres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .bloques li { grid-template-columns: 1fr; gap: 2px; }
  .ficha div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

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

@media print {
  .lateral, .menu-movil, .cabecera-acciones, .mov-acciones, form button { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
}