/* Media Medic · Recordatorios — prototipo. Tokens: DESIGN.md (medidos del logo). */
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --marino: #0A3A6E; --azul: #0A6FC8; --azul-claro: #C8DEF2; --azul-tenue: #E6EFFA;
  --turquesa: #2398AE; --turquesa-texto: #13707F; --turquesa-tenue: #E1F3F6;
  --naranja: #F58A1F; --naranja-texto: #A8500A; --naranja-tenue: #FEF0E1;
  --rojo: #B42318; --rojo-tenue: #FDECEA;
  --fondo: #F4F7FC; --superficie: #FDFEFF; --linea: #D8E3F0;
  --tinta: #0E2442; --tinta-2: #3D5071; --tinta-3: #5B6B85;
  --r: 14px; --r-ch: 9px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --sombra: 0 1px 2px rgb(10 58 110 / .06), 0 4px 14px rgb(10 58 110 / .06);
  --suave: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 470 1rem/1.5 "Figtree", "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--fondo); }
h1, h2, h3 { color: var(--marino); line-height: 1.15; margin: 0; font-weight: 780; letter-spacing: -.01em; }
h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem); }
h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
h3 { font-size: 1.02rem; }
p { margin: 0; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--s2); top: -3rem; background: var(--marino); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-ch); z-index: 50; }
.saltar:focus { top: var(--s2); }

/* Cinta de prototipo (EST-PRT-001 R2) */
.cinta { background: var(--marino); color: #EAF2FC; font-size: .82rem; padding: .4rem var(--s4); text-align: left; }
.cinta strong { color: #FFD9B0; font-weight: 700; }

/* Encabezado */
.barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; }
.marca img { display: block; height: 60px; width: auto; }
.selector-consultorio select { min-height: 44px; max-width: 58vw; border: 1px solid var(--linea); border-radius: var(--r-ch); background: var(--fondo); padding: 0 2rem 0 .75rem; font-weight: 620; color: var(--marino); }

/* Marco y menú: abajo en el teléfono, a la izquierda en escritorio */
.marco { display: block; }
main { padding: var(--s5) var(--s4) 6.5rem; max-width: 1080px; margin: 0 auto; outline: none; }
.menu { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--superficie); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.menu a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; text-decoration: none; color: var(--tinta-3); font-size: .74rem; font-weight: 620; }
.menu svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu a[aria-current="page"] { color: var(--marino); }
.menu a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--azul); }
.globo { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--naranja); color: var(--tinta); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
@media (min-width: 900px) {
  .marco { display: grid; grid-template-columns: 220px 1fr; }
  .menu { position: sticky; top: 69px; inset: auto; align-self: start; height: calc(100vh - 69px); display: flex; flex-direction: column; gap: 2px; padding: var(--s4) var(--s3); border-top: 0; border-right: 1px solid var(--linea); }
  .menu a { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 46px; padding: 0 var(--s3); border-radius: var(--r-ch); font-size: .95rem; }
  .menu a:hover { background: var(--azul-tenue); }
  .menu a[aria-current="page"] { background: var(--azul-tenue); }
  .menu a[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; border-radius: 3px; }
  .globo { position: static; margin-left: auto; }
  main { padding: var(--s6) var(--s6) var(--s7); }
}

/* Piezas comunes */
.encabezado { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.sub { color: var(--tinta-2); margin-top: var(--s1); }
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra); }
.seccion { margin-top: var(--s6); }
.seccion > h2 { margin-bottom: var(--s3); }
.vacio { padding: var(--s5); color: var(--tinta-2); text-align: left; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-ch); border: 1px solid transparent; font-weight: 680; cursor: pointer; text-decoration: none; transition: transform .15s var(--suave), background-color .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--marino); color: #F4F8FD; }
.btn-primario:hover { background: #0D4A8B; }
.btn-secundario { background: var(--superficie); border-color: var(--linea); color: var(--marino); }
.btn-secundario:hover { background: var(--azul-tenue); }
.btn-peligro { background: var(--superficie); border-color: #F2C4BF; color: var(--rojo); }
.btn-peligro:hover { background: var(--rojo-tenue); }
.btn-texto { background: none; color: var(--azul); padding: 0 .5rem; }
.fila-botones { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Estados: palabra + color (nunca sólo color) */
.estado { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.e-confirmada { background: var(--turquesa-tenue); color: var(--turquesa-texto); }
.e-sin-respuesta, .e-programado { background: var(--azul-tenue); color: #1D4F86; }
.e-cambio, .e-revisar { background: var(--naranja-tenue); color: var(--naranja-texto); }
.e-cancela { background: var(--rojo-tenue); color: var(--rojo); }
.e-neutro { background: #EDF1F6; color: var(--tinta-2); }

/* Hoy */
.resumen { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s4) var(--s5); }
.resumen div { display: flex; align-items: baseline; gap: .4rem; }
.resumen b { font-size: 1.6rem; color: var(--marino); font-weight: 800; }
.resumen span { color: var(--tinta-2); }
.alerta-fila { border-left: 4px solid var(--naranja); }

/* Listas de citas y mensajes */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li + li { border-top: 1px solid var(--linea); }
.cita { display: grid; grid-template-columns: 5.4rem 1fr; gap: var(--s1) var(--s3); align-items: start; padding: var(--s3) var(--s4); width: 100%; background: none; border: 0; text-align: left; cursor: pointer; min-height: 64px; }
.cita:hover { background: var(--azul-tenue); }
.hora { font-weight: 800; color: var(--marino); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: .1rem; }
.cita > .estado { grid-column: 2; justify-self: start; white-space: normal; }
@media (min-width: 640px) { .cita { grid-template-columns: 5.6rem 1fr auto; align-items: center; } .cita > .estado { grid-column: auto; justify-self: end; max-width: 16rem; text-align: right; } }
.quien { font-weight: 650; }
.detalle { color: var(--tinta-2); font-size: .88rem; }
.tarea { padding: var(--s4); display: grid; gap: var(--s2); }
.burbuja { background: var(--azul-tenue); border-radius: 4px var(--r) var(--r) var(--r); padding: var(--s3) var(--s4); max-width: 46ch; }
.burbuja.nuestra { background: var(--turquesa-tenue); border-radius: var(--r) 4px var(--r) var(--r); margin-left: auto; }
.meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; color: var(--tinta-2); font-size: .86rem; }
.vence { font-weight: 700; color: var(--naranja-texto); }
.vencida { color: var(--rojo); }

/* Agenda: tira de días */
.dias { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x mandatory; }
.dias button { flex: 0 0 auto; scroll-snap-align: start; min-width: 4.4rem; min-height: 64px; border: 1px solid var(--linea); border-radius: var(--r-ch); background: var(--superficie); cursor: pointer; display: grid; place-items: center; gap: 0; padding: .3rem .5rem; }
.dias button small { color: var(--tinta-2); font-size: .74rem; text-transform: capitalize; }
.dias button b { font-size: 1.15rem; color: var(--marino); }
.dias button[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); }
.dias button[aria-pressed="true"] small, .dias button[aria-pressed="true"] b { color: #F4F8FD; }
.dias button:hover { border-color: var(--azul); }

/* Pestañas */
.pestanas { display: flex; gap: var(--s1); border-bottom: 1px solid var(--linea); margin-bottom: var(--s4); }
.pestanas button { border: 0; background: none; padding: var(--s3) var(--s4); min-height: 44px; font-weight: 680; color: var(--tinta-2); border-bottom: 3px solid transparent; cursor: pointer; }
.pestanas button[aria-selected="true"] { color: var(--marino); border-bottom-color: var(--azul); }

/* Formularios */
.campo { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.campo > span { font-weight: 650; color: var(--marino); font-size: .92rem; }
.campo small { color: var(--tinta-2); }
input[type="text"], input[type="date"], input[type="time"], select, textarea { width: 100%; min-height: 44px; border: 1px solid #B9CBE0; border-radius: var(--r-ch); background: var(--superficie); padding: .55rem .75rem; }
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.dos { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.interruptor { display: flex; gap: var(--s2); }
.interruptor label { flex: 1; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--linea); border-radius: var(--r-ch); font-weight: 680; cursor: pointer; background: var(--superficie); }
.interruptor input:checked + span { background: var(--marino); color: #F4F8FD; border-color: var(--marino); }
.interruptor input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Hoja de detalle (dialog) */
dialog { border: 0; padding: 0; border-radius: var(--r) var(--r) 0 0; width: 100%; max-width: 560px; max-height: 92vh; margin: auto auto 0; background: var(--superficie); color: var(--tinta); box-shadow: 0 -10px 40px rgb(10 58 110 / .25); }
dialog::backdrop { background: rgb(14 36 66 / .45); }
@media (min-width: 640px) { dialog { margin: auto; border-radius: var(--r); } }
.hoja-cab { position: sticky; top: 0; background: var(--superficie); display: flex; justify-content: space-between; align-items: start; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--linea); }
.hoja-cuerpo { padding: var(--s4) var(--s5) var(--s5); display: grid; gap: var(--s4); }
.cerrar { min-width: 44px; min-height: 44px; border: 0; background: var(--fondo); border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--marino); }
.historia { list-style: none; margin: 0; padding: 0 0 0 var(--s4); border-left: 2px solid var(--azul-claro); display: grid; gap: var(--s3); }
.historia li { position: relative; font-size: .92rem; }
.historia li::before { content: ""; position: absolute; left: calc(-1 * var(--s4) - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); }
.datos dt { color: var(--tinta-2); }
.datos dd { margin: 0; font-weight: 600; }
.nota { background: var(--azul-tenue); border-radius: var(--r-ch); padding: var(--s3) var(--s4); font-size: .9rem; color: var(--tinta-2); }

/* Plantillas */
.plantilla { padding: var(--s4); display: grid; gap: var(--s2); }
.plantilla pre { margin: 0; white-space: pre-wrap; font: inherit; background: var(--fondo); border-radius: var(--r-ch); padding: var(--s3); color: var(--tinta); }

/* Aviso flotante */
.aviso { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 20px); opacity: 0; background: var(--marino); color: #F4F8FD; padding: .75rem 1.1rem; border-radius: var(--r-ch); box-shadow: var(--sombra); transition: opacity .2s, transform .25s var(--suave); z-index: 60; max-width: calc(100vw - 2rem); pointer-events: none; }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .aviso { bottom: var(--s6); } }

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