/* Portal del paciente — estilos.
 *
 * Adaptado del mockup (mockup_portal_paciente_mvp.html), no reescrito: las
 * reglas de las tiles, el banner y los recordatorios son las de ahí. Lo que
 * cambió es solo lo que era andamiaje del mockup:
 *
 *   · `.frame` de 360px y `.addressbar` — eran el dibujo de un teléfono
 *     alrededor de la pantalla. Acá la pantalla ES el teléfono.
 *   · el fondo gris oscuro del escritorio del mockup, por la misma razón.
 *
 * Los tokens son los de `base.html` de la app de la clínica, tal cual: el
 * paciente y el staff tienen que ver el mismo producto, no dos azules
 * parecidos. Se copian y no se importan porque son dos servicios separados a
 * propósito — la alternativa sería que el portal dependa de un archivo del otro
 * repo, que es exactamente el acoplamiento que la separación evita.
 */

:root{
  --navy:#1B5FA8;
  --banner:#1868C7;
  --green:#3F9E8F;
  --green-dark:#357F73;
  --bg:#F3F5F7;
  --surface:#FFFFFF;
  --ink:#1C2733;
  --ink-soft:#5B6675;
  --ink-faint:#9AA5AF;
  --border:#E1E5EA;
  --danger:#C24444;
  --danger-soft:#FDF0EF;
  --radius:10px;
  --shadow:0 1px 3px rgba(28,39,51,0.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  /* Mobile-first: en el teléfono ocupa todo. En una pantalla grande se limita
     y se centra en vez de estirar líneas de texto a 1400px. */
  max-width:480px;
  margin-inline:auto;
  min-height:100vh;
}

.pantalla{ display:none; }
/* Cada pantalla ocupa como mínimo el alto real de la ventana, no solo lo que
   ocupe su contenido: si no, el fondo de la página se asoma debajo de una
   pantalla corta —el login, o una lista con dos filas—.

   El fondo es el gris de la app y no blanco: las pantallas SIN banner (agendar,
   encuentros, antecedentes) son gris de punta a punta, y las que sí lo tienen
   pintan su propia franja azul arriba. Con blanco acá quedaba una banda blanca
   al pie de las primeras, justo del alto del banner que no tienen. El login y
   la bienvenida declaran su propio fondo. */
.pantalla.activa{ display:block; min-height:100vh; background:var(--bg); }

/* ── Iconos ────────────────────────────────────────────────────────────────
   Monocromáticos y SVG en línea, no emoji. Un emoji lo dibuja el sistema
   operativo: cambia de forma y de color entre iOS, Android y Windows, y no
   hereda el color del texto — así que no hay forma de que combine con la
   paleta. En línea y no <img> porque `stroke:currentColor` es lo que los hace
   tomar el color de donde estén: el azul de la tile, el gris del chevron. */
.icono{
  width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em;
}

/* ── Bienvenida ───────────────────────────────────────────────────────────
   Pantalla propia entre el login y el inicio. El color de fondo lo pone el JS
   según la hora: ámbar, azul o morado.

   Esos tres NO salen de los tokens de la app (--navy/--banner/--green) a
   propósito: no existían tokens para mañana y noche, y esta es una pantalla de
   marca y de ánimo, no de datos. Los tokens siguen mandando en todo lo demás.

   Flex column con el saludo en flex:1 y el logo como hermano siguiente. NO
   position:fixed: fixed se ancla al viewport del navegador y no a esta
   pantalla, así que en cualquier ventana de escritorio más baja que el
   contenido el logo queda flotando en el lugar equivocado. */
.pantalla-bienvenida.activa{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; padding:2rem 2rem 3rem;
}
.bienvenida-centro{ flex:1; display:flex; align-items:center; justify-content:center; }
.bienvenida-texto{
  color:#fff; font-size:34px; font-weight:800; line-height:1.25; margin:0;
  text-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.bienvenida-logo{
  display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;
}
.bienvenida-logo svg{ width:44px; height:44px; }
.bienvenida-marca{ color:#fff; font-size:17px; font-weight:600; letter-spacing:.01em; }

/* ── Login ─────────────────────────────────────────────────────────────── */
/* Pantalla completa y blanca, con el formulario centrado verticalmente.
   OJO CON LA ESPECIFICIDAD: va en `#login.activa` y no en `#login` a secas. Un
   selector por id le gana a `.pantalla{display:none}`, así que un `#login{
   display:flex }` dejaría el login visible SIEMPRE, encima de cualquier otra
   pantalla. Es el mismo error que ya apareció una vez en el mockup. */
#login.activa{
  display:flex; flex-direction:column; justify-content:center;
  background:#fff; padding:1.5rem;
}
/* El cuadrado y su redondeo vienen dentro del SVG del handoff (rx 24 sobre un
   viewBox de 100), así que acá no se vuelven a dibujar: solo se apila. */
.login-logo{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto 18px;
}
/* "Admi" oscuro y "Med" teal, los dos colores del wordmark del handoff.
   <b> e <i> son solo ganchos de estilo acá —el navegador no les da énfasis
   semántico dentro de un aria-hidden— y evitan dos spans con clase. */
.login-marca{ font-size:26px; font-weight:700; letter-spacing:-.01em; }
.login-marca b{ color:#2B3B39; font-weight:700; }
.login-marca i{ color:#3F9E8F; font-style:normal; font-weight:700; }
#login h1{ text-align:center; font-size:17px; margin:0 0 4px; color:var(--ink); }
#login p.sub{ text-align:center; font-size:13px; color:var(--ink-soft); margin:0 0 1.75rem; }

label{ font-size:12px; color:var(--ink-soft); display:block; margin:0 0 4px; }
input, select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:16px; /* 16px y no 14: por debajo de eso, iOS hace zoom al enfocar el campo. */
  margin-bottom:14px; color:var(--ink); background:var(--surface); font-family:inherit;
}
/* Día / mes / año en una fila. El del medio se lleva más espacio porque su
   opción es una palabra ('septiembre') y no dos dígitos. Con 1fr / 1.4fr / 1fr
   los tres entran incluso en una pantalla de 320px. */
.fecha-partes{
  display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:8px; margin-bottom:14px;
}
/* El aire de abajo lo pone el contenedor. Sin esto los select suman el suyo y
   queda el doble de separación antes del campo siguiente. */
.fecha-partes select{ margin-bottom:0; }

.btn-primario{
  width:100%; background:var(--green); color:#fff; border:none; padding:12px;
  border-radius:var(--radius); font-size:14px; font-weight:600; cursor:pointer;
}
.btn-primario:disabled{ background:var(--ink-faint); cursor:default; }
.link-chico{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:1rem; }
.link-chico a{ color:var(--navy); text-decoration:none; }

/* El error del login y el de cualquier formulario. Oculto hasta que haya algo
   que decir: un hueco vacío reservado corre el botón cuando aparece el texto. */
.error{
  display:none; background:var(--danger-soft); color:var(--danger); border:1px solid #F3D4D1;
  border-radius:var(--radius); padding:10px 12px; font-size:13px; margin-bottom:14px;
}
.error.visible{ display:block; }

/* ── Banner ────────────────────────────────────────────────────────────── */
.banner{
  background:var(--banner); color:#fff; padding:16px; display:flex; align-items:center; gap:12px;
}
.banner-isotipo{ width:30px; height:30px; flex-shrink:0; display:block; }
.banner .nombre{ flex:1; font-size:15px; font-weight:600; }
.banner .salir{
  background:none; border:1px solid rgba(255,255,255,.45); color:#fff; font:inherit;
  font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer;
}
/* Sin min-height: el gris ya lo pone .pantalla.activa, así que este bloque solo
   aporta el padding. Calcularlo restando el alto del banner era lo que dejaba
   la banda blanca en las pantallas que no tienen banner. */
.contenido{ padding:18px 16px 24px; background:var(--bg); }

/* ── Tiles ─────────────────────────────────────────────────────────────── */
.tile{
  display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; padding:0; margin-bottom:10px;
  font:inherit; color:inherit;
}
.tile-cuadrada{
  height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.tiles-fila{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.tiles-fila .tile{ margin-bottom:0; }
.tile-icono{ font-size:20px; }
.tile-label{ font-size:12.5px; font-weight:600; color:var(--ink); }

.tile-ancha{
  display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:1.5rem;
}
.tile-ancha .tile-icono{ font-size:22px; color:var(--navy); }
.tile-ancha .texto{ flex:1; }
.tile-ancha .titulo{ font-size:13.5px; font-weight:600; color:var(--ink); display:block; }
.tile-ancha .subtitulo{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; display:block; }
.tile-ancha .chevron{ color:var(--ink-soft); font-size:16px; }

/* ── Listas tipo "recordatorios" ───────────────────────────────────────── */
h2.seccion{ font-size:13px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.recordatorio{
  background:var(--surface); border:1px solid var(--border); border-bottom:none; padding:10px 12px;
}
.recordatorio:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); }
.recordatorio:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
.recordatorio:only-child{ border-radius:var(--radius); }
.recordatorio .titulo{ font-size:13px; color:var(--ink); margin:0; }
.recordatorio .detalle{ font-size:11.5px; color:var(--ink-soft); margin:2px 0 0; }

/* Es el único camino de salida de cada pantalla, así que se comporta como un
   botón de verdad y no como un enlace: borde visible y área de toque cómoda.
   Sin borde y a 13px se leía como texto decorativo, y en el teléfono había que
   apuntarle. 44px de alto es el mínimo que Apple recomienda para un objetivo
   táctil, y acá se llega con el padding. */
.volver{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1.5px solid var(--navy); border-radius:999px;
  color:var(--navy); font-weight:600; font-size:14px; font-family:inherit;
  padding:10px 16px 10px 12px; margin-bottom:16px; cursor:pointer;
}
.volver:active{ background:var(--sidebar-active-bg, #D9EAFB); }
/* El chevron acompaña al texto: a 1em queda chico dentro de un botón con
   borde, y descentrado respecto de la línea de base. */
.volver .icono{ width:1.15em; height:1.15em; vertical-align:0; }

/* Estado de carga y vacío. Existen porque el mockup no los tenía y la realidad
   sí: la base es serverless y el primer request del día puede tardar. */
.cargando, .vacio{
  font-size:13px; color:var(--ink-soft); text-align:center; padding:1.5rem 0;
}

/* ── Encuentros ────────────────────────────────────────────────────────── */
/* Misma caja que .recordatorio —es la misma idea, una lista de filas— pero
   clickeable, así que es <button> y necesita resetear lo que el navegador le
   pone encima. */
.fila{
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-bottom:none;
  padding:12px; display:flex; align-items:center; gap:10px;
}
.fila:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
.fila:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); }
.fila:only-child{ border-radius:var(--radius); }
.fila .texto{ flex:1; min-width:0; }
/* display:block en los dos: el JS los crea como <span> —que es inline— y sin
   esto la fecha y el detalle salen pegados en la misma línea
   ("19 de agosto de 2026prueba · Doctor"). En .recordatorio no pasaba porque
   ahí son <p>, que ya es bloque. */
.fila .titulo{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.fila .detalle{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.fila .chevron{ color:var(--ink-soft); font-size:16px; }

/* El detalle de una consulta. Cada campo de la nota clínica es una tarjeta con
   su título, para que se lea como un documento y no como un volcado. */
.encabezado-encuentro{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; margin-bottom:14px;
}
.encabezado-encuentro .fecha{ font-size:15px; font-weight:600; color:var(--ink); }
.encabezado-encuentro .meta{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

.campo-nota{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px;
}
.campo-nota h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy);
  margin:0 0 6px; font-weight:700;
}
/* pre-wrap: la nota viene con los saltos de línea que escribió el médico y
   perderlos convierte una lista de indicaciones en un párrafo ilegible. */
.campo-nota p{ font-size:13.5px; line-height:1.5; color:var(--ink); margin:0; white-space:pre-wrap; }

/* El botón de reintentar, dentro del cartel de error. */
.error .reintentar{
  margin-top:8px; background:none; border:1px solid var(--danger); color:var(--danger);
  font:inherit; font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius);
  cursor:pointer;
}

/* ── Antecedentes ──────────────────────────────────────────────────────── */
.ayuda{ font-size:12px; color:var(--ink-soft); margin:0 0 14px; line-height:1.45; }

/* El vacío DENTRO de un grupo va apretado: con las seis secciones sin cargar
   —que es como arranca todo paciente nuevo— el padding de página entero las
   convertía en una pantalla de puro aire con seis frases sueltas. */
.grupo .vacio{ padding:6px 0 2px; text-align:left; font-size:12px; }

.grupo{ margin-bottom:18px; }
.grupo-encabezado{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.grupo-encabezado h3{ flex:1; font-size:13px; font-weight:700; color:var(--ink); margin:0; }
/* Mismo criterio que .volver: es una acción, no una etiqueta, así que necesita
   área de toque. A 12px y con 4px de padding había que apuntarle con el dedo, y
   es el botón que el paciente usa seis veces seguidas si viene a completar sus
   antecedentes — que es justamente lo que la app le pide desde el inicio. */
.btn-agregar{
  background:none; border:1.5px solid var(--green); color:var(--green-dark); font:inherit;
  font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; cursor:pointer;
  white-space:nowrap;
}
.btn-agregar:active{ background:var(--green-soft); }

.item{
  background:var(--surface); border:1px solid var(--border); border-bottom:none;
  padding:10px 12px; display:flex; align-items:flex-start; gap:8px;
}
.item:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
.item:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); }
.item:only-child{ border-radius:var(--radius); }
.item .texto{ flex:1; min-width:0; }
.item .titulo{ font-size:13px; color:var(--ink); }
.item .detalle{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

/* El candado de lo que cargó el médico. Es un estado, no un botón: sin borde
   ni fondo, para que no invite a tocarlo. */
.candado{ font-size:13px; color:var(--ink-faint); line-height:1.4; }
.acciones-item{ display:flex; gap:6px; }
.btn-item{
  background:none; border:none; padding:2px 4px; font-size:14px; cursor:pointer; color:var(--ink-soft);
}
.btn-item.borrar{ color:var(--danger); }

/* El formulario de alta/edición, desplegado bajo su grupo. */
.form-item{
  background:var(--surface); border:1px solid var(--navy); border-radius:var(--radius);
  padding:12px; margin-top:8px;
}
.form-item input{ margin-bottom:10px; }
.form-item .botones{ display:flex; gap:8px; }
.form-item .botones button{ flex:1; padding:9px; font-size:13px; border-radius:var(--radius);
  font-weight:600; cursor:pointer; font-family:inherit; }
.form-item .guardar{ background:var(--green); color:#fff; border:none; }
.form-item .cancelar{ background:none; border:1px solid var(--border); color:var(--ink-soft); }

/* ── Citas ─────────────────────────────────────────────────────────────── */
.cita{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px;
}
.cita .cuando{ font-size:14px; font-weight:600; color:var(--ink); }
.cita .donde{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.cita .acciones{ display:flex; gap:8px; margin-top:10px; }
.cita .acciones button{
  flex:1; font:inherit; font-size:12.5px; font-weight:600; padding:7px; cursor:pointer;
  border-radius:var(--radius); background:none;
}
.cita .mover{ border:1px solid var(--navy); color:var(--navy); }
.cita .cancelar{ border:1px solid var(--danger); color:var(--danger); }

/* Estado de la cita. Los colores son los mismos que usa la agenda del staff,
   para que una cita "cancelada" se lea igual en las dos aplicaciones. */
.chip-estado{
  display:inline-block; border-radius:999px; padding:.1rem .5rem; font-size:11px;
  font-weight:700; margin-bottom:6px;
}
.chip-agendada{ background:var(--sidebar-active-bg, #D9EAFB); color:var(--navy); }
.chip-cancelada{ background:var(--bg); color:var(--ink-faint); text-decoration:line-through; }
.chip-atendida{ background:var(--bg); color:var(--ink-soft); }
.chip-otro{ background:#FDF3E2; color:#B7791F; }

/* ── Horarios ──────────────────────────────────────────────────────────── */
/* Grilla de chips en vez de un <select>: son 20 o 30 horas y un desplegable
   en el teléfono las esconde detrás de un scroll de sistema, cuando lo que el
   paciente quiere es barrerlas de un vistazo. */
#horas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; margin-bottom:14px; }
/* El mensaje de "no hay horarios" es un hijo más de la grilla, así que sin esto
   entra en una columna de 76px y se lee una palabra por renglón. Ocupa el ancho
   completo, que es lo que hace falta justo cuando hay algo que explicar. */
#horas .vacio, #horas .cargando{ grid-column:1 / -1; text-align:left; padding:.5rem 0; }
.hora{
  font:inherit; font-size:13px; font-weight:600; padding:10px 4px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--ink);
}
.hora.elegida{ background:var(--green); border-color:var(--green); color:#fff; }

.resumen{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.6; color:var(--ink);
}
.resumen b{ font-weight:600; }

/* ── Canje ─────────────────────────────────────────────────────────────── */
/* Mismo tratamiento que el login: pantalla completa y blanca, centrada. Son
   las dos pantallas de "todavía no entraste", y tienen que leerse igual. */
#canje.activa{ background:#fff; }
.contenido-canje{
  min-height:100vh; padding:1.5rem;
  display:flex; flex-direction:column; justify-content:center;
}
.contenido-canje h1{ text-align:center; font-size:17px; margin:0 0 4px; color:var(--ink); }
.contenido-canje p.sub{ text-align:center; font-size:13px; color:var(--ink-soft); margin:0 0 1.75rem; }

/* ── Exámenes ───────────────────────────────────────────────────────────────
   Reusa .fila / .texto / .titulo / .detalle de la lista de encuentros; lo único
   propio es el chip de estado y la fila que no se puede abrir. */

/* Tres estados y no dos: para el paciente "pendiente", "listo" y "el resultado
   está en la clínica" son tres respuestas distintas. El color los separa sin
   que haya que leer. */
.chip-examen{
  flex-shrink:0; align-self:center; margin-left:8px;
  font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px;
  white-space:nowrap;
}
.chip-listo{      background:#E3F3E8; color:#1E6B3A; }
.chip-pendiente{  background:#FDF3E2; color:#7B5A12; }
.chip-en-clinica{ background:var(--bg); color:var(--ink-soft); }

/* Un examen sin resultado en el portal no lleva a ninguna parte: se apaga el
   chevron y el gesto de "tocable", en vez de abrir una pantalla que solo dice
   que no hay nada. */
.fila-inerte{ cursor:default; opacity:.85; }