/* ═══════════════════════════════════════════════════════════════════════════
   Identidad AMSA — manual de marca, mayo 2024.
   Grises corporativos + taupe de acento. Montserrat para titulares y marca,
   Work Sans para la interfaz.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --gris-9:#76777b; --gris-7:#98989a; --gris-1:#D9D9D6;
  --taupe:#B7A99A; --taupe-claro:#C5B9AC;

  --gris-oscuro:#4b4c50; --gris-noche:#3a3b3e;
  --taupe-hover:#a89887; --taupe-suave:#f0ebe5; --taupe-borde:#ddd2c6;

  --bg:#f5f4f2; --surface:#ffffff; --surface-2:#faf9f7; --surface-3:#efeeeb;
  --border:#e3e1dd; --border-strong:#cfccc6;
  --text:#2f3033; --text-muted:#6c6d71; --text-faint:#93949a;
  --side-bg:#4b4c50; --side-text:#ffffff; --side-muted:#b8b9bc;
  --side-active:rgba(183,169,154,.22);

  --ok:#4a7c59; --ok-bg:#e9f1ec; --warn:#a8792f; --warn-bg:#f7f0e3;
  --danger:#a8443c; --danger-bg:#f8ecea; --info-bg:#eceef1;

  --shadow:0 1px 2px rgba(47,48,51,.04), 0 8px 24px -14px rgba(47,48,51,.18);
  --shadow-lift:0 2px 6px rgba(47,48,51,.06), 0 18px 40px -18px rgba(47,48,51,.30);
  --shadow-bar:0 -2px 16px -8px rgba(47,48,51,.18);
  --r-sm:6px; --r:12px; --r-lg:18px; --r-xl:26px;
  /* El portal es de tema claro. Se declara para que los controles nativos
     —selects, fechas, barras de scroll— no se pinten oscuros cuando el sistema
     esta en oscuro. */
  color-scheme:light;
  --sans:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand:"Montserrat", "Work Sans", system-ui, sans-serif;
}

/* DESACTIVADO. El portal es de tema claro, con los colores oficiales de AMSA.
   La paleta oscura se deja escrita y lista: para volver a encenderla alcanza
   con cambiar el selector de abajo por `@media (prefers-color-scheme: dark)`.
   Hoy no se aplica nunca porque nadie escribe el atributo `data-theme`. */
:root[data-theme="dark"]{ /* apagado */
    --bg:#1a1b1d; --surface:#232427; --surface-2:#292a2e; --surface-3:#303135;
    --border:#36373b; --border-strong:#4a4b50;
    --text:#eceae7; --text-muted:#a9a7a3; --text-faint:#83817e;
    --side-bg:#141517; --side-muted:#9b9c9f; --side-active:rgba(183,169,154,.18);
    --taupe:#c9bcae; --taupe-hover:#d6ccc0; --taupe-suave:#33302c; --taupe-borde:#4a4540;
    --gris-1:#3a3b3e;
    --ok:#7fb18c; --ok-bg:#222d25; --warn:#d3a862; --warn-bg:#312a1d;
    --danger:#d98b83; --danger-bg:#33211f; --info-bg:#2a2b2f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
    --shadow-bar:0 -2px 16px -8px rgba(0,0,0,.6);
  }

*{box-sizing:border-box}
body{font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--brand); font-weight:600; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--taupe); outline-offset:2px; border-radius:4px}
img,svg{max-width:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.saltar{position:absolute; left:-9999px; top:0; background:var(--surface); padding:10px 16px; z-index:100}
.saltar:focus{left:8px; top:8px}

/* ─── logotipo ─────────────────────────────────────────────────────────────── */
.logo{display:flex; align-items:center; gap:9px; text-decoration:none}
.logo svg{flex:none; height:30px; width:auto}

/* ─── layout ───────────────────────────────────────────────────────────────── */
.app{display:flex; min-height:100vh}
.side{display:none}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20}
.top h1{font-size:16px; font-weight:600; display:none}
.contenido{padding:18px 16px 92px; flex:1; width:100%}

@media (min-width:900px){
  .side{display:flex; flex-direction:column; width:246px; flex:none;
    background:var(--side-bg); color:var(--side-text); padding:22px 14px 16px; position:sticky;
    top:0; height:100vh}
  .side .logo{padding:2px 8px 26px; color:#fff}
  .side nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto}
  .side .grupo{margin-top:16px; padding:0 10px 6px; font-size:10.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--side-muted)}
  .side a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-sm);
    color:var(--side-muted); text-decoration:none; font-size:14px}
  .side a:hover{background:rgba(255,255,255,.06); color:#fff}
  .side a[aria-current]{background:var(--side-active); color:#fff; font-weight:500}
  .side .pie{margin-top:auto; padding:14px 10px 0; border-top:1px solid rgba(255,255,255,.12);
    font-size:12px; color:var(--side-muted)}
  .side .pie a{padding:0; display:inline; color:var(--taupe)}
  .top{padding:16px 30px}
  .top h1{display:block}
  .top .logo{display:none}
  .contenido{padding:26px 30px 40px; max-width:1000px}
  .tabbar{display:none !important}
}

/* ─── selector de paciente ─────────────────────────────────────────────────── */
.paciente{margin-left:auto; display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px;
  border:1px solid var(--border-strong); border-radius:999px; background:var(--surface-2);
  text-decoration:none}
.paciente:hover{border-color:var(--taupe)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--taupe); color:#2f3033;
  display:grid; place-items:center; font-size:12px; font-weight:600; font-family:var(--brand); flex:none}
.paciente .quien{text-align:left; line-height:1.15}
.paciente .quien b{display:block; font-size:12.5px; font-weight:600}
.paciente .quien span{display:block; font-size:10.5px; color:var(--text-faint)}

/* ─── barra inferior ───────────────────────────────────────────────────────── */
.tabbar{position:sticky; bottom:0; z-index:30; display:flex; background:var(--surface);
  border-top:1px solid var(--border); box-shadow:var(--shadow-bar); padding:6px 4px 8px}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; font-size:10.5px; color:var(--text-faint); border-radius:var(--r-sm);
  text-decoration:none}
.tabbar a[aria-current]{color:var(--text); font-weight:600}
.tabbar a[aria-current] svg{color:var(--taupe)}

/* ─── piezas ───────────────────────────────────────────────────────────────── */
/* Texto que solo se muestra de 900px para arriba: en un telefono los rotulos
   largos hacen desbordar botones y solapas. */
.solo-ancho{display:none}
@media (min-width:900px){.solo-ancho{display:inline}}

/* Sin `nowrap` el boton de la derecha se cae a un segundo renglon y queda
   suelto contra el borde: el titulo se achica antes que eso pase. */
.encabezado{display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; flex-wrap:nowrap}
.encabezado > div:first-child{min-width:0}
.encabezado h2{font-size:20px}
.encabezado p{font-size:13.5px; color:var(--text-muted); margin-top:3px}
.encabezado .cta{margin-left:auto; flex:none}
@media (min-width:900px){.encabezado h2{font-size:23px}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow)}
.card + .card{margin-top:12px}
.card h3{font-size:14.5px; margin-bottom:2px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px;
  border-radius:999px; font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none;
  transition:background .15s, border-color .15s}
.btn-primary{background:var(--taupe); color:#2f3033}
.btn-primary:hover{background:var(--taupe-hover)}
.btn-oscuro{background:var(--gris-oscuro); color:#fff}
.btn-oscuro:hover{background:var(--gris-noche)}
.btn-ghost{border:1px solid var(--border-strong); color:var(--text-muted); background:var(--surface)}
.btn-ghost:hover{border-color:var(--taupe); color:var(--text)}
.btn-peligro{border:1px solid var(--danger); color:var(--danger); background:transparent}
.btn-sm{padding:7px 13px; font-size:12.5px}
.btn-full{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:600}
.chip-ok{background:var(--ok-bg); color:var(--ok)}
.chip-warn{background:var(--warn-bg); color:var(--warn)}
.chip-danger{background:var(--danger-bg); color:var(--danger)}
.chip-neutro{background:var(--surface-3); color:var(--text-muted)}
.chip-taupe{background:var(--taupe-suave); color:#6d5f50}

.linea{height:1px; background:var(--border); margin:16px 0}
.vacio{text-align:center; padding:38px 20px; color:var(--text-faint)}
.vacio svg{color:var(--gris-1); margin-bottom:10px}
.vacio p{font-size:13.5px; margin-bottom:14px}

/* ─── turnos ───────────────────────────────────────────────────────────────── */
.turno{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:15px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.turno + .turno{margin-top:11px}
.turno::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--taupe)}
.turno.pasado::before{background:var(--gris-1)}
.turno .cab{display:flex; align-items:flex-start; gap:10px; margin-bottom:9px}
.turno .fecha{flex:none; width:56px; text-align:center; background:var(--taupe-suave);
  border:1px solid var(--taupe-borde); border-radius:var(--r-sm); padding:6px 2px}
.turno.pasado .fecha{background:var(--surface-3); border-color:var(--border)}
.turno .fecha b{display:block; font-family:var(--brand); font-size:19px; font-weight:600; line-height:1}
.turno .fecha span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); margin-top:2px}
.turno .quien b{font-size:15px; font-weight:600; display:block}
.turno .quien p{font-size:12.5px; color:var(--text-muted)}
.turno .datos{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--text-muted)}
.turno .datos span{display:flex; align-items:center; gap:6px}
.turno .acciones{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

/* ─── wizard ───────────────────────────────────────────────────────────────── */
.pasos{display:flex; align-items:center; gap:4px; margin-bottom:20px; overflow-x:auto; padding-bottom:2px}
.paso{display:flex; align-items:center; gap:7px; flex:none; opacity:.45}
.paso.on{opacity:1}
.paso .num{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--surface-3); color:var(--text-muted); flex:none}
.paso.on .num{background:var(--taupe); color:#2f3033}
.paso.listo .num{background:var(--ok-bg); color:var(--ok)}
.paso .lbl{font-size:12px; font-weight:500; white-space:nowrap}
.pasos .sep{width:16px; height:1px; background:var(--border-strong); flex:none}
@media (max-width:899px){.paso:not(.on) .lbl{display:none}}

.campo{margin-bottom:14px}
.campo label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text-muted)}
.campo input,.campo select{width:100%; padding:11px 13px; border:1px solid var(--border-strong);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:14px}
.campo input:focus,.campo select:focus{border-color:var(--taupe); outline:none;
  box-shadow:0 0 0 3px var(--taupe-suave)}
.campo .ayuda{font-size:11.5px; color:var(--text-faint); margin-top:5px}
.campo .error{font-size:11.5px; color:var(--danger); margin-top:5px}
.campo input[disabled]{background:var(--surface-3); color:var(--text-muted)}
/* Campos que se guardan en mayúscula: se ven así desde que se escriben, para que
   el resultado no sorprenda al guardar. */
.campo input.mayusculas{text-transform:uppercase}
/* Las condiciones de la contraseña, a la vista antes de escribirla: enterarse de
   que faltaba un número recién al enviar es la peor forma de enterarse. */
.reglas{list-style:none; margin:-8px 0 14px; padding:0}
.reglas li{font-size:11.5px; color:var(--text-faint); padding-left:14px; position:relative; line-height:1.7}
.reglas li::before{content:"·"; position:absolute; left:4px; font-weight:700}
.reglas li.incumplida{color:var(--danger)}
.reglas li.incumplida::before{content:"×"}
.reglas li.cumplida{color:var(--ok)}
.reglas li.cumplida::before{content:"✓"}
/* Bloques dentro de una tarjeta: separan teléfonos de domicilio sin partirla en
   dos tarjetas, que dejaría el botón de guardar lejos de lo que se editó. */
.titulo-bloque{font-size:13px; font-weight:600; color:var(--text-muted); margin:0 0 12px;
    text-transform:uppercase; letter-spacing:.04em}
.titulo-bloque:not(:first-child){margin-top:26px; padding-top:20px; border-top:1px solid var(--border)}
/* Campos que van juntos en una línea y se apilan en pantalla angosta. */
.fila-campos{display:flex; gap:12px; flex-wrap:wrap}
/* La base de 200px hace que en un telefono los campos se apilen y en escritorio
   sigan compartiendo fila: con 150px entraban de a dos en 390px y el valor se
   recortaba, tanto en los combos de codigo de pais como en la calle. */
.fila-campos > *{flex:1 1 200px; min-width:0}

/* TomSelect con la piel del portal. Trae su propio tema —gris, con sombras y
   otro radio— y al lado de los inputs propios se nota que es de otra casa. Solo
   se le corrige la apariencia: el comportamiento y el buscador son suyos. */
.ts-wrapper{margin:0}
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control{
    /* Mismo alto que un input del portal: 11 + 11 de padding, 21 de línea y el
       borde. Sin esto el texto elegido y el campo de escritura se apilan y el
       combo queda 24px más alto que los campos de al lado. */
    display:flex; align-items:center; flex-wrap:nowrap; gap:0;
    padding:11px 13px; line-height:21px; min-height:0;
    border:1px solid var(--border-strong); border-radius:var(--r-sm);
    background:var(--surface); background-image:none; box-shadow:none;
    color:var(--text); font-size:14px}
.ts-wrapper.single .ts-control:hover{border-color:var(--border-strong)}
.ts-wrapper.focus .ts-control{border-color:var(--taupe); box-shadow:0 0 0 3px var(--taupe-suave)}
/* El tema de TomSelect le pone un borde inferior al valor elegido, que al lado
   de un input normal se lee como una raya suelta. */
/* El valor elegido manda: conserva su ancho y el campo de escritura se achica.
   Al revés, en un combo angosto el texto sale cortado como «9…». */
.ts-wrapper.single .ts-control > .item{flex:0 1 auto; height:21px; line-height:21px; padding:0;
    border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ts-wrapper .ts-control > input{flex:0 1 auto; min-width:0; height:21px; line-height:21px;
    margin:0; padding:0; font-size:14px; color:var(--text)}
.ts-wrapper.single:not(.has-items) .ts-control > input{flex:1 1 auto}
/* La flecha, del mismo gris que el resto de la interfaz. */
.ts-wrapper.single .ts-control:after{border-color:var(--text-faint) transparent transparent}
.ts-dropdown{border:1px solid var(--border-strong); border-radius:var(--r-sm); margin-top:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.08); font-size:14px; color:var(--text)}
.ts-dropdown .option{padding:9px 13px}
.ts-dropdown .active{background:var(--taupe-suave); color:var(--text)}
.ts-dropdown .optgroup-header{color:var(--text-faint); font-size:11.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.04em; padding:9px 13px 4px}
.ts-dropdown .no-results{padding:9px 13px; color:var(--text-faint)}
/* El separador que Symfony pone entre las opciones preferidas y el resto. */
.ts-dropdown .option[data-value=""]:not(:first-child){color:var(--border-strong); pointer-events:none}

.opcion{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; padding:13px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface); margin-bottom:9px;
  text-decoration:none}
.opcion:hover{border-color:var(--taupe)}
.opcion[aria-pressed="true"],.opcion.elegida{border-color:var(--taupe); background:var(--taupe-suave);
  box-shadow:0 0 0 1px var(--taupe)}
.opcion .ini{width:38px; height:38px; border-radius:50%; background:var(--surface-3); flex:none;
  display:grid; place-items:center; font-family:var(--brand); font-weight:600; font-size:13px;
  color:var(--text-muted)}
.opcion.elegida .ini{background:var(--taupe); color:#2f3033}
.opcion b{display:block; font-size:14px; font-weight:600}
.opcion p{font-size:12.5px; color:var(--text-muted); margin-top:2px}
/* La fecha del primer turno, a la derecha: es la columna con la que se comparan
   los profesionales entre sí. En teléfono baja debajo del nombre.
   El bloque de texto lleva `flex:1 1 0` y `min-width:0` para que se achique en
   vez de empujar: sin eso, al permitir el salto de línea el avatar se quedaba
   solo en el primer renglón. */
.opcion > span:not(.ini):not(.cuando){flex:1 1 0; min-width:0}
.opcion .cuando{margin-left:auto; flex:none; align-self:center; text-align:right}
@media (max-width:899px){
  .opcion{flex-wrap:wrap}
  .opcion .cuando{flex:1 0 100%; margin-left:50px; align-self:flex-start; text-align:left}
}
.opcion.no{opacity:.75; cursor:not-allowed}
.opcion.no:hover{border-color:var(--border)}

.dias{display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px}
.dia{flex:none; width:62px; padding:9px 4px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface); text-align:center; text-decoration:none}
.dia span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint)}
.dia b{display:block; font-family:var(--brand); font-size:18px; font-weight:600; margin:2px 0}
.dia small{display:block; font-size:10px; color:var(--taupe); font-weight:600}
.dia.elegido{background:var(--taupe); border-color:var(--taupe); color:#2f3033}
.dia.elegido span,.dia.elegido small{color:#2f3033}

.horas{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.hora{padding:11px 6px; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface); font-size:14px; font-weight:600; font-family:var(--brand);
  text-align:center; text-decoration:none}
.hora:hover{border-color:var(--taupe)}
.hora.elegida{background:var(--taupe); border-color:var(--taupe); color:#2f3033}

.resumen{border:1px solid var(--taupe-borde); background:var(--taupe-suave); border-radius:var(--r); padding:16px}
.resumen dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; font-size:13.5px}
.resumen dt{color:#6d5f50; font-weight:500}
.resumen dd{margin:0; font-weight:600; text-align:right}

.aviso{display:flex; gap:11px; padding:13px 14px; border-radius:var(--r); font-size:13px; align-items:flex-start}
.aviso + .aviso{margin-top:8px}
.aviso svg{flex:none; margin-top:1px}
.aviso-info{background:var(--info-bg); color:var(--text-muted)}
.aviso-ok{background:var(--ok-bg); color:var(--ok)}
.aviso-warn{background:var(--warn-bg); color:var(--warn)}
.aviso-danger{background:var(--danger-bg); color:var(--danger)}
.aviso b{font-weight:600}
/* En las pantallas de acceso el aviso queda pegado al primer label. Va acá y no
   en .aviso a secas porque adentro del portal los avisos encabezan la pantalla y
   ya tienen su propio aire. */
.acceso-form .aviso{margin-bottom:20px}

.acciones-pie{display:flex; gap:10px; margin-top:20px}
.acciones-pie .btn{flex:1}
@media (min-width:900px){
  .acciones-pie{justify-content:flex-end}
  .acciones-pie .btn{flex:none; min-width:150px}
}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto}
.tabs a{padding:10px 14px; font-size:13.5px; font-weight:500; color:var(--text-muted);
  border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none}
.tabs a[aria-current]{color:var(--text); font-weight:600; border-bottom-color:var(--taupe)}

.item{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--border)}
.item:last-child{border-bottom:0}
.item .icono{width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-3);
  display:grid; place-items:center; color:var(--text-muted); flex:none}
.item b{display:block; font-size:14px; font-weight:600}
.item p{font-size:12.5px; color:var(--text-muted); margin-top:2px}
/* El bloque de texto se achica en vez de empujar: sin esto, al permitir el salto
   de línea un título largo se llevaba consigo el renglón entero y el ícono
   quedaba solo arriba. */
.item > div{flex:1 1 0; min-width:0}
.item .der{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}
/* Acciones que no entran al lado del texto: pasan abajo, alineadas con el.
   El wrap va solo en las filas marcadas: si se aplica a todas, un texto largo
   —los motivos de consulta, sin ir mas lejos— se cae abajo del icono. */
@media (max-width:899px){
  .item-apilado{flex-wrap:wrap}
  .item-apilado .der-bloque{width:calc(100% - 46px); margin-left:46px; margin-top:8px}
}

.accesos{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
@media (min-width:900px){.accesos{grid-template-columns:repeat(4,1fr)}}
.acceso{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:14px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface); text-align:left;
  box-shadow:var(--shadow); text-decoration:none}
.acceso:hover{border-color:var(--taupe)}
.acceso .ic{width:34px; height:34px; border-radius:50%; background:var(--taupe-suave); color:#6d5f50;
  display:grid; place-items:center}
.acceso b{font-size:13.5px; font-weight:600}
.acceso span{font-size:11.5px; color:var(--text-muted)}

.rotulo{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint);
  margin-bottom:10px}

/* ─── tablero del inicio ───────────────────────────────────────────────────── */
/* Una columna en telefono; dos en escritorio, donde si no queda medio metro de
   pagina vacia abajo del unico turno. */
.tablero{display:grid; gap:20px}
@media (min-width:900px){.tablero{grid-template-columns:1fr 1fr; gap:24px; align-items:start}}
.tablero .rotulo{margin-top:4px}
.pie-seccion{margin-top:10px}
.accesos-movil{margin-top:20px}
@media (min-width:900px){.accesos-movil{display:none}}

/* La epicrisis viene como texto plano del sistema del sanatorio: se respetan sus
   saltos de línea en vez de reflotarlo todo en un párrafo. */
.texto-clinico{font-size:13.5px; color:var(--text-muted); white-space:pre-wrap; margin-bottom:6px}

/* ─── preguntas frecuentes ─────────────────────────────────────────────────── */
/* El rótulo de la categoría pertenece a la tarjeta de abajo, no a la de arriba:
   sin este aire quedaba pegado a la anterior y se leía como su pie. */
.faq + .rotulo{margin-top:26px}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex; align-items:center; gap:10px; padding:13px 0; cursor:pointer;
  font-size:14px; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{margin-left:auto; flex:none; color:var(--text-faint); transition:transform .15s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .respuesta{padding:0 0 14px; font-size:13.5px; color:var(--text-muted)}
.faq .respuesta p{margin-bottom:9px}
.faq .respuesta p:last-child{margin-bottom:0}
.faq .respuesta ul,.faq .respuesta ol{margin:0 0 9px; padding-left:20px}
.faq .respuesta li{margin-bottom:4px}
.faq .respuesta strong{color:var(--text); font-weight:600}
.faq .respuesta a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--border-strong)}

/* ─── salir, en teléfono ───────────────────────────────────────────────────── */
.salir-movil{margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:8px}
.salir-movil .btn{width:100%}
.salir-movil p{font-size:12px; color:var(--text-faint)}
@media (min-width:900px){.salir-movil{display:none}}

/* ─── filtros del historial ────────────────────────────────────────────────── */
.filtros{margin-bottom:12px}
.filtros .acciones-filtro{display:flex; gap:8px; align-items:flex-end; flex:1 1 200px}
.filtros .acciones-filtro .btn{flex:1}
@media (min-width:900px){.filtros .acciones-filtro .btn{flex:none}}

/* ─── acceso ───────────────────────────────────────────────────────────────── */
.acceso-pantalla{display:grid; min-height:100vh}
/* Anclado arriba en telefono: centrado verticalmente dejaba hasta 250px de aire
   y el formulario quedaba empujado abajo de todo. En escritorio si se centra. */
.acceso-form{padding:28px 24px 34px; display:flex; flex-direction:column; justify-content:flex-start;
  background:var(--surface)}
.acceso-form .logo{margin-bottom:30px; color:var(--text)}
.acceso-form h2{font-size:24px; margin-bottom:6px}
.acceso-form .bajada{font-size:13.5px; color:var(--text-muted); margin-bottom:24px}
.acceso-form form{width:100%; max-width:420px}
.acceso-arte{display:none; position:relative; background:var(--surface-3); overflow:hidden}
.acceso-arte .frase{position:absolute; left:52px; bottom:56px; right:52px; z-index:2}
.acceso-arte .frase p{font-family:var(--brand); font-size:29px; font-weight:600; line-height:1.28;
  letter-spacing:-.01em}
.acceso-arte .frase em{font-style:normal; color:#8d7f70}
.acceso-arte .linea-fina{width:150px; height:1px; background:var(--border-strong); margin-bottom:22px}
.acceso-arte .circulos{position:absolute; inset:0; opacity:.5; color:var(--border-strong)}
@media (min-width:900px){
  .acceso-pantalla{grid-template-columns:minmax(380px,42%) 1fr}
  .acceso-form{padding:48px 54px; justify-content:center}
  .acceso-arte{display:block}
}
.enlace{color:var(--text-muted); font-size:12.5px; text-decoration:none;
  border-bottom:1px solid var(--border-strong)}
.enlace:hover{color:var(--text); border-color:var(--taupe)}
.pie-form{margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:13px;
  color:var(--text-muted); text-align:center}

/* ─── carga parcial del wizard ─────────────────────────────────────────────── */
/* La API de turnos tarda hasta 16 segundos: mientras responde, el paso queda
   atenuado y sin clics, y el aviso va fijo en pantalla —no dentro del contenedor,
   que al hacer clic en un horario queda muy por encima de donde mira la persona. */
.wizard{transition:opacity .15s}
.wizard[aria-busy="true"]{opacity:.5; pointer-events:none}

.cargando-barra{position:fixed; top:0; left:0; right:0; height:3px; z-index:100;
  background:linear-gradient(90deg, var(--taupe-suave) 0%, var(--taupe) 50%, var(--taupe-suave) 100%);
  background-size:200% 100%; animation:cargando 1.1s linear infinite}

.cargando-aviso{position:fixed; z-index:100; left:50%; transform:translateX(-50%);
  bottom:86px; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px);
  padding:12px 18px; border-radius:999px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-lift);
  font-size:13.5px; font-weight:500}
@media (min-width:900px){.cargando-aviso{bottom:32px}}

.cargando-aviso .rueda{width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid var(--taupe-borde); border-top-color:var(--taupe);
  animation:girar .7s linear infinite}

@keyframes cargando{from{background-position:200% 0} to{background-position:-200% 0}}
@keyframes girar{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .cargando-barra{animation:none; background:var(--taupe)}
  .cargando-aviso .rueda{animation:none; border-top-color:var(--taupe-borde)}
}