/* Resumen diario · Conecta IA
   «El parte del día» de una consulta: porcelana con un velo del color de la clínica, su logo en una banda,
   rojo solo para lo urgente y lo que espera más de 24 h. Una sola familia muy legible. */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fuentes/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --brand: #452A5D;                 /* lo sobrescribe la app con el color de cada clínica */
  --brand-ink: #FFFFFF;
  --bg: color-mix(in oklab, var(--brand) 5%, #FFFFFF);
  --paper: #FFFFFF;
  --ink: color-mix(in oklab, var(--brand) 35%, #111111);
  --muted: color-mix(in oklab, var(--brand) 25%, #5E5E5E);
  --line: color-mix(in oklab, var(--brand) 14%, #E2E2E2);
  --accent: color-mix(in oklab, var(--brand) 88%, #FFFFFF);
  --accent-soft: color-mix(in oklab, var(--brand) 11%, #FFFFFF);
  --c-done: color-mix(in oklab, var(--brand) 70%, #9F7FE0);
  --c-wait: #B87300;
  --urg: #B3261E; --urg-soft: #FBE9E7;
  --warn: #8F5400; --warn-soft: #FBF0DC;
  --ok: #2E7040;
  --f: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-alto: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: color-mix(in oklab, var(--brand) 22%, #0E0C12);
    --paper: color-mix(in oklab, var(--brand) 26%, #17141D);
    --ink: #EDE8F4;
    --muted: color-mix(in oklab, var(--brand) 20%, #A9A3B4);
    --line: color-mix(in oklab, var(--brand) 30%, #2E2A36);
    --accent: color-mix(in oklab, var(--brand) 30%, #E6DCF5);
    --accent-soft: color-mix(in oklab, var(--brand) 45%, #1E1A26);
    --c-done: color-mix(in oklab, var(--brand) 40%, #B39BE6);
    --c-wait: #C5851A;
    --urg: #FF8B7E; --urg-soft: #3A1A17;
    --warn: #F0B45A; --warn-soft: #33260F;
    --ok: #7FCB8F;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4, p { margin: 0; }
.sprite { display: none; }
.cargando { padding: 40vh 24px 0; text-align: center; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.pantalla { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.banda {
  position: sticky; top: 0; z-index: 5;
  background: var(--brand); color: var(--brand-ink);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.banda img { height: 40px; width: auto; display: block; }
.banda .titulo { text-align: right; line-height: 1.2; }
.banda .titulo b { display: block; font-size: 15px; }
.banda .titulo span { font-size: 12px; opacity: .8; }
.contenido {
  flex: 1;
  padding: 16px max(14px, env(safe-area-inset-right, 0px)) calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 24px) max(14px, env(safe-area-inset-left, 0px));
  display: grid; gap: 14px; align-content: start;
}
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 8px) max(8px, env(safe-area-inset-left, 0px));
}
.nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; grid-template-columns: repeat(4, 1fr); }
.nav button {
  width: 100%; min-height: 50px; border: 0; background: none; border-radius: 12px;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
}
.nav button .ic { width: 22px; height: 22px; }
.nav button[aria-current="page"] { color: var(--accent); }

/* ---------- Bloques comunes ---------- */
.contenido-dia { display: grid; gap: 14px; }
.dia { display: grid; gap: 2px; padding: 0 2px; }
.dia h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.dia p { font-size: 14px; color: var(--muted); }
.tarjeta { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.tarjeta > h2 { font-size: 18px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.nota { font-size: 13px; color: var(--muted); line-height: 1.45; }
.aviso-banda { border-left: 4px solid var(--warn); background: var(--warn-soft); padding: 10px 12px; border-radius: 0 12px 12px 0; font-size: 14px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 14px; border: 0;
  background: var(--accent); color: var(--paper); font-weight: 800; font-size: 15px; text-decoration: none;
}
.boton.secundario { background: none; color: var(--accent); border: 1.5px solid var(--accent); }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: .5; cursor: default; }
.enlace { background: none; border: 0; padding: 8px 0; color: var(--accent); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* ---------- Cifras del día ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cifra { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 9px; display: grid; }
.cifra b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { font-size: 12px; color: var(--muted); line-height: 1.25; }
.cifra.doble { grid-column: span 2; }
.cifra.urgente { background: var(--urg); border-color: var(--urg); color: var(--paper); }
.cifra.urgente span { color: inherit; opacity: .9; }
.cifra.urgente.cero { background: var(--paper); border-color: var(--line); color: var(--ink); }
.cifra.urgente.cero span { color: var(--muted); opacity: 1; }

/* ---------- Grupos y correos ---------- */
.grupo { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.grupo > h2 { font-size: 15px; font-weight: 800; padding: 12px 14px 10px; display: flex; justify-content: space-between; align-items: center; }
.grupo > h2 .et { display: inline-flex; align-items: center; gap: 8px; }
.grupo > h2 .et .ic { color: var(--accent); }
.grupo > h2 .total { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.grupo.urgente { border: 2px solid var(--urg); }
.grupo.urgente > h2, .grupo.urgente > h2 .et .ic { color: var(--urg); }
.correo { border-top: 1px solid var(--line); }
.correo > summary {
  list-style: none; cursor: pointer; min-height: 56px;
  padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
}
.correo > summary::-webkit-details-marker { display: none; }
.correo[open] > summary { background: var(--accent-soft); }
.correo .quien { font-weight: 700; font-size: 15px; min-width: 0; }
.correo .que { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.35; }
.correo .detalle { padding: 4px 14px 14px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.correo .detalle div { display: grid; gap: 1px; }
.correo .detalle em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.area { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--accent); margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.area .ic { width: 13px; height: 13px; stroke-width: 2; }
.pastilla { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastilla.tarde { background: var(--urg-soft); color: var(--urg); }
.pastilla.espera { background: var(--warn-soft); color: var(--warn); }
.pastilla.hecho { background: var(--accent-soft); color: var(--accent); }
.leer {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-size: 14px; font-weight: 800; color: var(--accent); background: none;
  border: 1.5px solid var(--accent); border-radius: 12px; padding: 6px 12px;
}
.antiguos > summary { color: var(--muted); font-size: 14px; }
.antiguos > summary .quien { font-weight: 700; color: var(--ink); }
.antiguos .correo:first-child { border-top: 1px solid var(--line); }
.resto-cat { border-top: 1px solid var(--line); }
.resto-cat > summary {
  list-style: none; cursor: pointer; min-height: 48px; padding: 11px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px;
}
.resto-cat > summary::-webkit-details-marker { display: none; }
.resto-cat > summary .et { display: inline-flex; align-items: center; gap: 10px; }
.resto-cat > summary .et .ic { color: var(--muted); }
.resto-cat > summary .cuenta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.resto-cat > summary .cuenta .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.resto-cat[open] > summary { background: var(--accent-soft); }
.resto-cat[open] > summary .cuenta .ic { transform: rotate(90deg); }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.linea > span:first-child { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.linea .ic { color: var(--muted); }
.linea > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.linea.apagada { color: var(--muted); }

/* ---------- Antes de las 20:00 ---------- */
.espera-ilus { position: relative; width: 72px; height: 72px; border-radius: 22px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.espera-ilus .ic { width: 38px; height: 38px; stroke-width: 1.5; }
.espera-ilus .destello { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* ---------- Correo completo ---------- */
.correo-completo .cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.correo-completo .asunto { font-size: 16px; font-weight: 800; }
.correo-completo .pie { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Gráfico ---------- */
.grafico h2 { font-size: 15px; font-weight: 800; }
.kpi { display: grid; }
.kpi b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi .mejor { color: var(--ok); font-weight: 700; }
.kpi .peor { color: var(--warn); font-weight: 700; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.leyenda .contestados { background: var(--c-done); }
.leyenda .pendientes { background: var(--c-wait); }
.leyenda .urgentes { background: var(--urg); border-radius: 50%; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-rejilla { stroke: var(--line); stroke-width: 1; }
.g-texto { fill: var(--muted); font-size: 9px; font-family: var(--f); font-variant-numeric: tabular-nums; }
.g-contestados { fill: var(--c-done); pointer-events: none; }
.g-pendientes { fill: var(--c-wait); pointer-events: none; }
.g-urgente { fill: var(--urg); stroke: var(--paper); stroke-width: 1.5; pointer-events: none; }
.g-zona { fill: transparent; cursor: pointer; }
.g-zona.activa { fill: var(--accent-soft); }
.g-lectura { font-size: 14px; line-height: 1.4; min-height: 2.8em; border-top: 1px solid var(--line); padding-top: 8px; }
.g-lectura .urg { color: var(--urg); font-weight: 800; }

/* ---------- Calendario ---------- */
.calendario { padding: 12px; }
.cal-cab { display: flex; justify-content: space-between; align-items: center; }
.cal-cab h2 { font-size: 16px; font-weight: 800; }
.cal-cab button { width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; color: var(--accent); }
.cal-cab button:disabled { color: var(--line); }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-rejilla .sem { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-rejilla button, .cal-rejilla span.vacio, .cal-rejilla span.sin {
  height: 42px; border-radius: 10px; display: grid; place-items: center; position: relative; font-size: 14px; border: 0; background: none;
}
.cal-rejilla span.sin { color: var(--muted); opacity: .55; }
.cal-rejilla button::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.cal-rejilla button.urg::after { background: var(--urg); }
.cal-rejilla button[aria-pressed="true"] { background: var(--accent); color: var(--paper); font-weight: 800; }
.cal-rejilla button[aria-pressed="true"]::after { background: var(--paper); }
.cal-leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding-top: 8px; }
.cal-leyenda i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; background: var(--muted); }
.cal-leyenda i.urg { background: var(--urg); }

/* ---------- Recordatorios ---------- */
.nuevo-rec { display: grid; gap: 10px; }
.nuevo-rec label { font-weight: 800; }
.nuevo-rec textarea {
  width: 100%; min-height: 76px; resize: vertical; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); padding: 10px 12px; font-size: 16px; line-height: 1.4;
}
.nuevo-rec textarea:focus { border-color: var(--accent); outline: none; }
.nuevo-rec .fila { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.nuevo-rec .dictar { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.error-formulario { font-size: 14px; color: var(--urg); font-weight: 700; }
.error-formulario:empty { display: none; }
.lista-rec { list-style: none; margin: 0; padding: 0; }
.lista-rec li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--line); }
.lista-rec input[type="checkbox"] { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent); }
.lista-rec label { display: grid; gap: 2px; font-size: 15.5px; overflow-wrap: anywhere; }
.lista-rec label small { font-size: 12.5px; color: var(--muted); }
.lista-rec li.hecho label span { text-decoration: line-through; color: var(--muted); }
.lista-rec .borrar { width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }

/* ---------- Ayuda ---------- */
.ayuda ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 15px; }
.ayuda h2 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.estado-avisos { font-size: 14px; color: var(--muted); }
.estado-avisos.si { color: var(--ok); font-weight: 700; }

/* ---------- Acceso con PIN ---------- */
.acceso { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px); text-align: center; max-width: 420px; margin: 0 auto; }
.acceso .marca { width: 170px; height: 33px; color: var(--ink); }
.acceso h1 { font-size: 20px; font-weight: 800; }
.acceso .clinica { font-size: 14px; color: var(--muted); }
.puntos { display: flex; gap: 12px; margin: 6px 0 2px; }
.puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); }
.puntos i.lleno { background: var(--accent); }
.teclado { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.teclado button { height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.teclado button:active { background: var(--accent-soft); }
.teclado button.texto { border: 0; background: none; font-size: 14px; color: var(--muted); }
.mensaje-acceso { min-height: 2.6em; font-size: 14px; color: var(--muted); max-width: 30ch; line-height: 1.4; }
.mensaje-acceso.error { color: var(--urg); font-weight: 700; }
.agita { animation: agita .35s; }
@keyframes agita { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .agita { animation: none; }
  .resto-cat > summary .cuenta .ic { transition: none; }
}
@media (max-width: 360px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .teclado { grid-template-columns: repeat(3, 64px); }
}