/* =========================================================================
   MANZO Clínica Dental — sistema visual
   =========================================================================
   La identidad sale del logotipo: la pincelada de mar sobre el negro del
   wordmark. El azul profundo manda, el azul vivo se reserva para acentos
   —igual que en la marca, donde el claro es solo el borde de la ola— y los
   neutros llevan sesgo azul para que nada parezca gris de fábrica.

   Es una herramienta de ocho horas al día: la profundidad es suave, el
   movimiento corto y funcional, y nada se mueve porque sí.
   ========================================================================= */

:root {
  /* --- marca --- */
  --mar-900: #0B3A52;
  --mar-800: #0F4C6B;
  --mar-700: #156384;
  --mar-600: #1B7BA8;
  --mar-500: #2A93C4;
  --mar-400: #2FA8DB;
  --mar-200: #9BD3EE;
  --mar-100: #D5EBF7;
  --mar-050: #EAF5FB;

  /* --- neutros con sesgo azul --- */
  --n-950: #0A1720;
  --n-900: #111F2A;
  --n-800: #17303E;
  --n-700: #2A4657;
  --n-600: #46606E;
  --n-500: #5A707C;   /* medido: 4.5:1 sobre fondo de tarjeta, alterno y de aplicación */
  --n-400: #93A9B6;
  --n-300: #BECDD7;
  --n-200: #D8E3EA;
  --n-100: #E9F0F5;
  --n-050: #F4F8FB;
  --n-000: #FFFFFF;

  /* --- semánticos, independientes del acento --- */
  --ok: #2C7A55;        --ok-fondo: #E3F2EA;
  --alerta: #926611;    --alerta-fondo: #FBF0DC;   /* medido: 4.5:1 */
  --error: #9E362C;     --error-fondo: #FBE7E4;

  /* --- roles --- */
  --ground: var(--n-100);
  --surface: var(--n-000);
  --surface-alt: var(--n-050);
  --ink: var(--n-900);
  --ink-soft: var(--n-600);
  --ink-faint: var(--n-500);
  --rule: var(--n-200);
  --rule-soft: var(--n-100);
  /* El borde de un campo de formulario no es decoración: indica dónde se puede
     escribir, así que la norma le exige 3:1 igual que a un icono. Separado del
     separador visual, que sí es decorativo y puede ser suave. */
  --borde-campo: #818B92;

  /* Alto del banner de previsualización de roles. Vale cero salvo cuando dirección
     está mirando la aplicación con otros ojos; así las cabeceras pegajosas de tablas
     y agenda se apartan solas y nadie tiene que acordarse de restarlo a mano. */
  --alto-banner: 0px;

  --accent: var(--mar-600);
  /* El acento en superficie plana funciona a 4.72:1, pero sobre su propio lavado se
     queda en 4.26. Para texto y enlaces se usa el tono contiguo, que aguanta ambos. */
  --accent-texto: var(--mar-700);
  --accent-deep: var(--mar-800);
  --accent-wash: var(--mar-050);
  --accent-borde: var(--mar-200);
  --sobre-accent: #FFFFFF;

  /* nombres heredados, para no romper lo ya escrito */
  --verde: var(--ok);
  --ochre: var(--alerta);        --ochre-wash: var(--alerta-fondo);
  --rust: var(--error);          --rust-wash: var(--error-fondo);
  --espuma: var(--mar-050);
  --mar-hondo: var(--mar-800);
  --mar: var(--mar-600);
  --mar-claro: var(--mar-400);

  /* --- elevación: tres niveles, no más --- */
  --e1: 0 1px 2px rgba(11,58,82,.05), 0 1px 3px rgba(11,58,82,.04);
  --e2: 0 2px 4px rgba(11,58,82,.05), 0 8px 20px -10px rgba(11,58,82,.18);
  --e3: 0 8px 16px -6px rgba(11,58,82,.14), 0 24px 48px -20px rgba(11,58,82,.30);
  --anillo: 0 0 0 3px rgba(27,123,168,.22);

  /* --- forma --- */
  --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --radio: var(--r-sm);

  /* --- ritmo --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 42px;

  /* --- movimiento --- */
  --rapido: 130ms cubic-bezier(.4, 0, .2, 1);
  --medio: 210ms cubic-bezier(.22, .8, .3, 1);

  --display: "Didot", "Bodoni MT", "Bodoni 72", "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- modo oscuro: en gabinete se trabaja con poca luz ---
   Los mismos tokens se declaran dos veces a propósito, porque hay tres estados y no
   dos: el usuario puede no haber elegido nada (manda el sistema operativo), haber
   elegido claro, o haber elegido oscuro. La consulta de medio cubre el primero; el
   selector de atributo cubre el tercero. Si solo estuviera la consulta de medio, el
   botón «oscuro» no haría nada en un ordenador cuyo sistema esté en claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ground: var(--n-950);
    --surface: var(--n-900);
    --surface-alt: #162834;
    --ink: #E7EFF4;
    --ink-soft: #A6BCC9;
    --ink-faint: #7B95A4;
    --rule: #26404F;
    --rule-soft: #1C3341;
    /* En oscuro el borde de campo también se recalcula: el gris del tema claro
       aquí quedaría más brillante que el propio texto secundario. Medido a 3.2:1
       sobre tarjeta y 3.5:1 sobre el fondo de la aplicación. */
    --borde-campo: #55707F;

    --accent: #59ACD6;
    --accent-texto: var(--accent);
    --accent-deep: #8FCDEA;
    --accent-wash: #112E3D;
    --accent-borde: #2C5A72;
    --sobre-accent: #06212E;

    --ok: #6EBB92;        --ok-fondo: #10291D;
    --alerta: #D6A94F;    --alerta-fondo: #2A2314;
    --error: #E08D84;     --error-fondo: #2E1917;
    --verde: var(--ok);
    --ochre: var(--alerta); --ochre-wash: var(--alerta-fondo);
    --rust: var(--error);   --rust-wash: var(--error-fondo);
    --espuma: var(--accent-wash);
    --mar-hondo: var(--accent-deep);
    --mar: var(--accent);
    --mar-700: #2E7EA6;
    --mar-600: #3D93BE;
    --mar-800: #1B5C7C;
    --mar-100: #1E4459;
    --mar-050: #112E3D;

    --e1: 0 1px 2px rgba(0,0,0,.32);
    --e2: 0 2px 4px rgba(0,0,0,.34), 0 8px 20px -10px rgba(0,0,0,.6);
    --e3: 0 8px 16px -6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
    --anillo: 0 0 0 3px rgba(89,172,214,.28);
  }
}
/* Elección explícita del usuario: gana sobre el sistema en los dos sentidos. */
:root[data-tema="oscuro"], :root[data-tema="dark"] {
    --ground: var(--n-950);
    --surface: var(--n-900);
    --surface-alt: #162834;
    --ink: #E7EFF4;
    --ink-soft: #A6BCC9;
    --ink-faint: #7B95A4;
    --rule: #26404F;
    --rule-soft: #1C3341;
    /* En oscuro el borde de campo también se recalcula: el gris del tema claro
       aquí quedaría más brillante que el propio texto secundario. Medido a 3.2:1
       sobre tarjeta y 3.5:1 sobre el fondo de la aplicación. */
    --borde-campo: #55707F;

    --accent: #59ACD6;
    --accent-texto: var(--accent);
    --accent-deep: #8FCDEA;
    --accent-wash: #112E3D;
    --accent-borde: #2C5A72;
    --sobre-accent: #06212E;

    --ok: #6EBB92;        --ok-fondo: #10291D;
    --alerta: #D6A94F;    --alerta-fondo: #2A2314;
    --error: #E08D84;     --error-fondo: #2E1917;
    --verde: var(--ok);
    --ochre: var(--alerta); --ochre-wash: var(--alerta-fondo);
    --rust: var(--error);   --rust-wash: var(--error-fondo);
    --espuma: var(--accent-wash);
    --mar-hondo: var(--accent-deep);
    --mar: var(--accent);
    --mar-700: #2E7EA6;
    --mar-600: #3D93BE;
    --mar-800: #1B5C7C;
    --mar-100: #1E4459;
    --mar-050: #112E3D;

    --e1: 0 1px 2px rgba(0,0,0,.32);
    --e2: 0 2px 4px rgba(0,0,0,.34), 0 8px 20px -10px rgba(0,0,0,.6);
    --e3: 0 8px 16px -6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
    --anillo: 0 0 0 3px rgba(89,172,214,.28);
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-borde); color: var(--ink); }
/* El anillo de foco se define en el bloque de accesibilidad, al final. */

/* =============================== MARCA =============================== */
.marca-manzo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.marca-manzo .nombre { font-family: var(--display); font-weight: 400; letter-spacing: .06em; line-height: 1; color: var(--ink); font-size: 26px; }
.marca-manzo .sub { font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.2; }
.marca-manzo .ola { display: block; margin-top: 3px; }
.marca-manzo.centrada { align-items: center; }
.marca-manzo.grande .nombre { font-size: 40px; }
.marca-manzo.grande .sub { font-size: 10.5px; letter-spacing: .38em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-manzo img { filter: brightness(0) invert(1) opacity(.92); }
}
:root[data-tema="oscuro"] .marca-manzo img,
:root[data-tema="dark"] .marca-manzo img { filter: brightness(0) invert(1) opacity(.92); }

/* =============================== ACCESO =============================== */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
  background: radial-gradient(1100px 460px at 50% -12%, var(--accent-wash), transparent 70%), var(--ground);
}
.login-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s7) var(--s6); width: 100%; max-width: 400px;
  box-shadow: var(--e3); animation: sube var(--medio) both;
}
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }
.login-card h1 { font-size: 20px; margin: 0 0 var(--s1); letter-spacing: -.01em; }
.login-card .sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 var(--s5); }

/* ============================ ESTRUCTURA ============================ */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

nav.lateral {
  background: var(--surface); border-right: 1px solid var(--rule);
  padding: var(--s5) 0 var(--s4);
  display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: var(--alto-banner); height: calc(100vh - var(--alto-banner));
  overflow-y: auto; scrollbar-width: thin;
}
nav.lateral .marca { padding: 0 var(--s5) var(--s5); }
nav.lateral button {
  position: relative; background: none; border: 0; text-align: left;
  padding: 10px var(--s4) 10px 15px; margin: 0 10px;
  border-radius: var(--r-sm);
  font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  transition: background var(--rapido), color var(--rapido);
}
nav.lateral button svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .78; }
nav.lateral button:hover { background: var(--surface-alt); color: var(--ink); }
nav.lateral button.activo {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--mar-700), var(--mar-600));
  box-shadow: var(--e1);
}
nav.lateral button.activo svg { opacity: 1; }
nav.lateral .pie { margin-top: auto; padding: var(--s4) var(--s5) 0; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--ink-faint); }

main { padding: var(--s6) var(--s6) 90px; min-width: 0; }
main > * { animation: entra var(--medio) both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

header.seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
header.seccion h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0; letter-spacing: -.005em; color: var(--ink); }
header.seccion p { margin: 0; color: var(--ink-faint); font-size: 13.5px; max-width: 68ch; }
.seccion-intro { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 var(--s5); max-width: 78ch; line-height: 1.6; }

/* ========================== TARJETAS Y TABLAS ========================== */
.tarjeta {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  margin-bottom: var(--s5); overflow: hidden; box-shadow: var(--e1);
  transition: box-shadow var(--medio);
}
.tarjeta:hover { box-shadow: var(--e2); }
.tarjeta > h3 {
  margin: 0; padding: 14px var(--s5); font-size: 14px; font-weight: 650;
  border-bottom: 1px solid var(--rule-soft); background: var(--surface-alt);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
}
.tarjeta .cuerpo { padding: var(--s5); }
.scroll { overflow-x: auto; scrollbar-width: thin; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px var(--s4); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; background: var(--surface-alt);
  white-space: nowrap; position: sticky; top: var(--alto-banner); z-index: 2; border-bottom: 1px solid var(--rule);
}
tbody tr { transition: background var(--rapido); }
tbody tr:hover { background: var(--accent-wash); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.neg { color: var(--rust); font-weight: 600; }

/* ============================ FORMULARIOS ============================ */
label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: var(--s1); font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde-campo); border-radius: var(--r-xs);
  font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover, select:hover, textarea:hover { border-color: var(--n-600); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--anillo); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-alt); color: var(--ink-faint); cursor: not-allowed; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
textarea { resize: vertical; line-height: 1.55; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.campo-check { display: flex; align-items: center; gap: var(--s2); padding-top: 20px; }
.campo-check label { margin: 0; font-weight: 500; }
.ayuda { font-size: 12px; color: var(--ink-faint); margin-top: var(--s1); line-height: 1.5; }

/* La clase manda, no la etiqueta. Estaba atada a `button.btn`, así que cualquier
   `<a class="btn">` —las descargas, que tienen que ser enlaces de verdad para que el
   navegador guarde el fichero— se pintaba como texto azul subrayado en vez de como
   botón. Un enlace necesita además display, alineación y quitarle el subrayado, cosas
   que un botón ya trae de fábrica. */
.btn {
  display: inline-block; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, var(--mar-600), var(--mar-700));
  color: #fff; border: 0; border-radius: var(--r-xs); padding: 9px 17px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
  box-shadow: var(--e1);
  transition: transform var(--rapido), box-shadow var(--rapido), filter var(--rapido);
}
a.btn:hover { color: #fff; text-decoration: none; }
.btn:hover { filter: brightness(1.08); box-shadow: var(--e2); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.btn.sec { background: var(--surface); color: var(--accent-texto); border: 1px solid var(--borde-campo); box-shadow: none; }
a.btn.sec:hover { color: var(--accent-texto); }
.btn.sec:hover { background: var(--accent-wash); border-color: var(--accent-borde); filter: none; }
.btn.peligro { background: var(--surface); color: var(--rust); border: 1px solid var(--rule); box-shadow: none; }
a.btn.peligro:hover { color: var(--rust); }
.btn.peligro:hover { background: var(--rust-wash); border-color: var(--rust); filter: none; }
.btn.mini { padding: 5px 11px; font-size: 12.5px; }
.acciones { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.barra { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s4); }
.barra > div { min-width: 150px; }

/* ============================== ESTADOS ============================== */
.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 20px;
  white-space: nowrap; font-weight: 500;
  /* Sin modificador también tiene que leerse como etiqueta y no como texto suelto. */
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--rule);
}
.pastilla.ok { background: var(--ok-fondo); color: var(--ok); }
.pastilla.aviso { background: var(--alerta-fondo); color: var(--alerta); }
.pastilla.mal { background: var(--error-fondo); color: var(--error); }
.pastilla.gris { background: var(--surface-alt); color: var(--ink-faint); border: 1px solid var(--rule); }
.pastilla.info { background: var(--accent-wash); color: var(--accent-texto); border: 1px solid var(--accent-borde); }

.aviso-caja {
  border-left: 3px solid var(--alerta); background: var(--alerta-fondo);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px; margin-bottom: var(--s4); line-height: 1.6;
  animation: entra var(--medio) both;
}
.aviso-caja.error { border-left-color: var(--error); background: var(--error-fondo); color: var(--error); }
.aviso-caja.info { border-left-color: var(--accent); background: var(--accent-wash); color: var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.kpi {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s4) 18px; box-shadow: var(--e1); position: relative; overflow: hidden;
  transition: transform var(--medio), box-shadow var(--medio);
}
.kpi::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--mar-600), var(--mar-400));
  opacity: 0; transition: opacity var(--medio);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.kpi:hover::after { opacity: 1; }
.kpi .et { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kpi .val { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 2px; }
.kpi .val.neg { color: var(--rust); }
.kpi .pie { font-size: 12px; color: var(--ink-faint); }

.vacio { color: var(--ink-faint); font-size: 14px; padding: var(--s6); text-align: center; }
.oculto { display: none !important; }

/* Esqueleto de carga: la pantalla no se queda en blanco mientras llegan los datos. */
.esqueleto { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0; }
.esqueleto span {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--rule-soft) 25%, var(--surface-alt) 37%, var(--rule-soft) 63%);
  background-size: 400% 100%; animation: brillo 1.3s ease-in-out infinite;
}
.esqueleto span:nth-child(1) { width: 42%; height: 26px; }
.esqueleto span:nth-child(2) { width: 88%; }
.esqueleto span:nth-child(3) { width: 74%; }
.esqueleto span:nth-child(4) { width: 80%; }
@keyframes brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

#aviso {
  position: fixed; right: 22px; bottom: 22px;
  background: var(--n-900); color: #fff; padding: 13px 20px;
  border-radius: var(--r-sm); font-size: 14px; z-index: 90; max-width: 380px;
  box-shadow: var(--e3); border-left: 3px solid var(--mar-400);
  animation: entra-aviso var(--medio) both;
}
#aviso.error { background: var(--error); border-left-color: #fff; }
@keyframes entra-aviso { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* =============================== AGENDA =============================== */
.agenda {
  display: grid; gap: 0; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--e1);
}
.agenda .cab {
  padding: 12px var(--s3); font-size: 13px; font-weight: 650;
  border-bottom: 1px solid var(--rule); background: var(--surface-alt);
  border-left: 1px solid var(--rule-soft); position: sticky; top: var(--alto-banner); z-index: 3;
}
.agenda .cab:first-child { border-left: 0; }
.agenda .horas { border-right: 1px solid var(--rule-soft); position: relative; background: var(--surface-alt); }
.agenda .horas span { position: absolute; right: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); transform: translateY(-6px); }
.agenda .columna { position: relative; border-left: 1px solid var(--rule-soft); cursor: crosshair; transition: background var(--rapido); }
.agenda .columna:hover { background: var(--accent-wash); }
.agenda .linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule-soft); pointer-events: none; }
.agenda .linea.media { border-top-style: dotted; opacity: .6; }

.cita {
  position: absolute; left: 4px; right: 4px; border-radius: var(--r-xs);
  padding: 5px 9px; font-size: 12px; line-height: 1.35; overflow: hidden; cursor: pointer;
  border-left: 3px solid var(--accent); background: var(--accent-wash); color: var(--ink);
  box-shadow: var(--e1); transition: transform var(--rapido), box-shadow var(--rapido);
}
.cita:hover { transform: translateY(-1px); box-shadow: var(--e2); z-index: 4; }
.cita strong { display: block; font-size: 12.5px; font-weight: 650; }
.cita .det { color: var(--ink-soft); font-size: 11px; }
.cita.e-pendiente { background: var(--surface-alt); border-left-color: var(--ink-faint); }
.cita.e-confirmada { background: var(--accent-wash); border-left-color: var(--accent); }
.cita.e-llegada { background: var(--ok-fondo); border-left-color: var(--ok); }
.cita.e-atendida { background: var(--ok-fondo); border-left-color: var(--ok); opacity: .72; }
.cita.e-no_show { background: var(--error-fondo); border-left-color: var(--error); }
.cita.e-cancelada {
  background: repeating-linear-gradient(45deg, var(--surface-alt), var(--surface-alt) 6px, var(--surface) 6px, var(--surface) 12px);
  border-left-color: var(--rule); opacity: .55; text-decoration: line-through;
}
.cita.bloqueo {
  background: repeating-linear-gradient(45deg, var(--alerta-fondo), var(--alerta-fondo) 7px, var(--surface) 7px, var(--surface) 14px);
  border-left-color: var(--alerta); cursor: default;
}
.cita.ajena {
  background: repeating-linear-gradient(45deg, var(--rule-soft), var(--rule-soft) 6px, var(--surface-alt) 6px, var(--surface-alt) 12px);
  border-left-color: var(--ink-faint); color: var(--ink-faint); cursor: default;
}
.cita.ajena:hover { transform: none; box-shadow: var(--e1); }
.cita.ajena strong { color: var(--ink-soft); font-weight: 600; }

.leyenda { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin: var(--s3) 0 0; }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border-left: 3px solid; }

/* ============================== DIÁLOGOS ============================== */
.panel-flotante {
  position: fixed; inset: 0; background: rgba(10, 23, 32, .55);
  backdrop-filter: blur(3px); display: grid; place-items: center;
  padding: var(--s5); z-index: 80; animation: aparece var(--rapido) both;
}
@keyframes aparece { from { opacity: 0; } }
.panel-flotante .caja {
  background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 580px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--e3); animation: sube var(--medio) both;
}
/* Hay contenido que no cabe en una columna de lectura: el periodontograma son treinta
   y dos dientes por seis puntos. Encajarlo en 580 px obligaba a desplazar en dos ejes
   a la vez y hacía la exploración ilegible. */
.panel-flotante .caja.ancho { max-width: min(1360px, 96vw); }
.panel-flotante h3 {
  margin: 0; padding: 16px var(--s5); font-size: 15px; font-weight: 650;
  border-bottom: 1px solid var(--rule-soft); display: flex;
  justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.panel-flotante .cuerpo { padding: var(--s5); }

.buscador { position: relative; }
.resultados {
  position: absolute; z-index: 5; left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 0 0 var(--r-sm) var(--r-sm);
  max-height: 230px; overflow-y: auto; box-shadow: var(--e2);
}
.resultados button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px var(--s3); font: inherit; font-size: 13.5px; cursor: pointer;
  border-bottom: 1px solid var(--rule-soft); color: var(--ink);
}
.resultados button:hover { background: var(--accent-wash); }

/* ============================ ODONTOGRAMA ============================ */
.arcada { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; padding: 7px 2px; }
.arcada.temporal { padding-top: 0; }
.diente {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto;
  cursor: pointer; padding: 4px; border-radius: var(--r-xs); border: 1px solid transparent;
  transition: background var(--rapido), transform var(--rapido), border-color var(--rapido);
}
.diente:hover { background: var(--accent-wash); border-color: var(--accent-borde); transform: translateY(-2px); }
.diente.elegido { background: var(--accent-wash); border-color: var(--accent); }
.diente.ausente { opacity: .42; }
.diente .num { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.diente svg { display: block; }
.diente svg .zona { fill: var(--surface); stroke: var(--rule); stroke-width: 1; transition: stroke var(--rapido); }
.diente svg .zona:hover { stroke: var(--accent); stroke-width: 1.8; }
.diente svg .tachado { stroke: var(--error); stroke-width: 2.2; }
.diente .marcas { display: flex; gap: 2px; min-height: 9px; }
.diente .marcas i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.diente .marcas i.plan { background: transparent !important; border: 1.5px dashed currentColor; }
.arcada .media { width: 12px; flex: 0 0 auto; border-left: 1px dashed var(--rule); margin: 4px 0; }

.leyenda-odo { display: flex; gap: 10px var(--s4); flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }
.leyenda-odo span { display: flex; align-items: center; gap: 5px; }
.leyenda-odo i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.evolucion { display: flex; flex-direction: column; }
.entrada { padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 6px; }
.entrada:last-child { border-bottom: 0; }
.entrada .cabecera { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }
.entrada .cabecera b { color: var(--ink-soft); font-weight: 500; }
.entrada .texto { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.entrada.rectificada .texto { color: var(--ink-faint); text-decoration: line-through solid var(--rule); }
.entrada.es-rectificacion { border-left: 3px solid var(--alerta); padding-left: var(--s3); }

/* ============================ CONTRASEÑAS ============================ */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.campo-clave .ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px 8px; cursor: pointer;
  color: var(--ink-faint); border-radius: var(--r-xs); line-height: 0;
  transition: color var(--rapido), background var(--rapido);
}
.campo-clave .ver-clave:hover { color: var(--accent); background: var(--accent-wash); }
.campo-clave .ver-clave svg { width: 18px; height: 18px; display: block; }

/* ============================== PORTAL ============================== */
.portal-cab {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  padding: 0 var(--s5); display: flex; align-items: center;
  gap: var(--s5); flex-wrap: wrap;
  position: sticky; top: var(--alto-banner); z-index: 20; box-shadow: var(--e1);
}
.portal-cab .marca-manzo img { width: 104px; }
.portal-cab .quien-portal { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.portal-cuerpo { max-width: 1000px; margin: 0 auto; padding: var(--s6) var(--s5) 90px; }

/* El menú va dentro de la barra superior: ocupaba una fila entera para nada. */
.portal-nav {
  display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; align-self: stretch;
}
.portal-nav::-webkit-scrollbar { display: none; }
.portal-nav button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 20px var(--s3) 18px; font: inherit; font-size: 14.5px; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: color var(--rapido), border-color var(--rapido);
}
.portal-nav button:hover { color: var(--ink); }
.portal-nav button.activo { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 650; }
@media (max-width: 760px) {
  .portal-cab { padding: var(--s3) var(--s4); gap: var(--s3); }
  .portal-cab .marca-manzo img { width: 86px; }
  .portal-nav { order: 3; width: 100%; }
  .portal-nav button { padding: 12px var(--s3); }
}
.portal-nav button .cuenta { display: inline-block; background: var(--accent); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; margin-left: 6px; font-weight: 700; }

.saludo { font-family: var(--display); font-size: clamp(28px, 4vw, 36px); line-height: 1.12; margin: 0 0 var(--s2); font-weight: 400; }
.saludo + p { color: var(--ink-soft); margin: 0 0 var(--s5); }

.presupuesto-tarjeta {
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface);
  margin-bottom: var(--s4); overflow: hidden; box-shadow: var(--e1); transition: box-shadow var(--medio);
}
.presupuesto-tarjeta:hover { box-shadow: var(--e2); }
.presupuesto-tarjeta .cab {
  padding: var(--s4) 18px; background: var(--surface-alt); border-bottom: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.presupuesto-tarjeta .total { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--accent-deep); }

/* ============================= SERVICIOS ============================= */
.servicios { display: flex; flex-direction: column; gap: var(--s4); }
.servicio { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e1); }

/* La foto va recortada a un tamaño fijo. Antes se estiraba para igualar la altura de
   la tarjeta, y con una imagen vertical de 300x700 eso dejaba un hueco enorme. */
.servicio .portada { display: flex; align-items: stretch; flex-wrap: wrap; }
.servicio .portada img.foto {
  width: 230px; flex: 0 0 230px; height: 196px;
  object-fit: cover; object-position: center; display: block; background: var(--surface-alt);
}
.servicio .texto { flex: 1 1 320px; padding: var(--s5); min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.servicio .texto h3 { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 400; color: var(--accent-deep); display: flex; align-items: center; gap: 10px; }
.servicio .texto h3 img { width: 28px; height: 28px; object-fit: contain; }
.servicio .texto p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.62; max-width: 62ch; }
.servicio .texto .acciones { margin-top: auto; padding-top: var(--s3); }

.servicio .lista { border-top: 1px solid var(--rule-soft); }
.servicio details { border-bottom: 1px solid var(--rule-soft); }
.servicio details:last-child { border-bottom: 0; }

/* Rejilla fija: nombre, duración y precio caen siempre en la misma columna, así que
   los importes se leen alineados de arriba abajo. */
.servicio summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) 92px 118px 26px;
  gap: var(--s3); align-items: center;
  padding: 13px var(--s5); cursor: pointer; font-size: 14.5px;
  color: var(--ink); list-style: none; transition: background var(--rapido);
}
.servicio summary::-webkit-details-marker { display: none; }
.servicio summary:hover { background: var(--accent-wash); }
.servicio details[open] > summary { background: var(--accent-wash); }
.servicio summary .nombre-t { font-weight: 600; min-width: 0; }
.servicio summary .duracion { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.servicio summary .precio-t { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent-deep); text-align: right; font-variant-numeric: tabular-nums; }
.servicio summary .precio-t small { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: .04em; }
.servicio summary .abre { color: var(--accent); font-size: 19px; line-height: 1; text-align: center; transition: transform var(--rapido); }
.servicio details[open] > summary .abre { transform: rotate(45deg); }

.servicio .detalle {
  padding: 0 var(--s5) var(--s5);
  display: grid; grid-template-columns: 200px minmax(0,1fr);
  gap: var(--s4); align-items: start;
}
.servicio .detalle img { width: 100%; border-radius: var(--r-sm); display: block; }
.servicio .detalle .cuerpo-t { display: flex; flex-direction: column; gap: var(--s3); }
.servicio .detalle p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.62; }
.servicio .detalle.sin-foto { grid-template-columns: minmax(0,1fr); }

@media (max-width: 760px) {
  .servicio summary { grid-template-columns: minmax(0,1fr) 108px 24px; }
  .servicio summary .duracion { display: none; }
  .servicio .detalle { grid-template-columns: minmax(0,1fr); }
  .servicio .detalle img { max-width: 240px; }
}

.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
.doctor {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--e1);
  transition: transform var(--medio), box-shadow var(--medio);
}
.doctor:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.doctor img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center top; display: block; background: var(--espuma); }
.doctor .sin-foto {
  width: 100%; aspect-ratio: 1/1; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--mar-100), var(--espuma));
  color: var(--accent); font-family: var(--display); font-size: 46px;
}
.doctor .datos { padding: var(--s4) 18px; display: flex; flex-direction: column; gap: 5px; }
.doctor .datos strong { font-size: 15.5px; }
.doctor .datos .puesto { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.doctor .datos .titulo { font-size: 13px; color: var(--ink-soft); }
.doctor .datos .bio { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 4px; }

/* =============================== AVISOS =============================== */
.avisos-pila { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column-reverse; gap: 10px; z-index: 85; max-width: 370px; }
.aviso-llegada {
  background: linear-gradient(135deg, var(--mar-800), var(--mar-600)); color: #fff;
  border-radius: var(--r-md); padding: var(--s4) 18px; box-shadow: var(--e3);
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  position: relative; padding-right: 34px; animation: entra-aviso var(--medio) both;
}
.aviso-llegada .quien { font-size: 15.5px; font-weight: 700; }
.aviso-llegada .que { font-size: 13px; opacity: .9; line-height: 1.45; }
.aviso-llegada .cerrar { position: absolute; top: 7px; right: 10px; background: none; border: 0; color: rgba(255,255,255,.75); font-size: 17px; cursor: pointer; line-height: 1; }
.aviso-llegada .tarde { color: #FFD79A; font-weight: 600; }

nav.lateral button .chincheta {
  display: inline-block; min-width: 19px; padding: 0 6px; margin-left: auto;
  background: var(--error); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 19px;
}
nav.lateral button.activo .chincheta { background: rgba(255,255,255,.28); }

.espera-fila { display: flex; align-items: center; gap: 10px; }
.espera-fila .reloj { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--accent-wash); color: var(--accent-deep); font-size: 13px; }
.espera-fila .reloj.mucho { background: var(--alerta-fondo); color: var(--alerta); }
.espera-fila .reloj.demasiado { background: var(--error-fondo); color: var(--error); }

/* ============================ LABORALIDAD ============================ */
.indicio { display: grid; grid-template-columns: 10px 1fr; gap: 0 var(--s3); border-bottom: 1px solid var(--rule-soft); padding: var(--s4) 0; }
.indicio:last-child { border-bottom: 0; }
.indicio .semaforo { border-radius: 3px; }
.indicio.favorable .semaforo { background: var(--ok); }
.indicio.atencion .semaforo { background: var(--alerta); }
.indicio.riesgo .semaforo { background: var(--error); }
.indicio .cuerpo-i { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.indicio h4 { margin: 0; font-size: 14.5px; font-weight: 650; }
.indicio .hallazgo { font-size: 14px; color: var(--ink); }
.indicio .porque { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.indicio .hacer { font-size: 13px; color: var(--accent-deep); background: var(--accent-wash); padding: 8px 12px; border-radius: var(--r-xs); line-height: 1.5; }
.indicio.favorable .hacer { display: none; }

.tarjeta-riesgo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.tarjeta-riesgo .persona-riesgo {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s4) 17px; cursor: pointer; box-shadow: var(--e1);
  transition: transform var(--medio), box-shadow var(--medio), border-color var(--rapido);
}
.tarjeta-riesgo .persona-riesgo:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--e2); }
.tarjeta-riesgo .persona-riesgo.elegida { border-color: var(--accent); background: var(--accent-wash); }
.tarjeta-riesgo strong { display: block; font-size: 14.5px; margin-bottom: var(--s2); }
.barra-indicios { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--rule-soft); }
.barra-indicios i { display: block; height: 100%; transition: width var(--medio); }
.barra-indicios i.f { background: var(--ok); }
.barra-indicios i.a { background: var(--alerta); }
.barra-indicios i.r { background: var(--error); }
.tarjeta-riesgo .leyenda-mini { font-size: 12px; color: var(--ink-soft); margin-top: 7px; }

/* ============================== TARIFARIO ============================== */
.buscador-grande { position: relative; flex: 1 1 320px; }
.buscador-grande input { font-size: 15.5px; padding: 12px 14px 12px 40px; border-radius: var(--r-sm); }
.buscador-grande::before {
  content: ''; position: absolute; left: 15px; top: 50%; width: 13px; height: 13px;
  margin-top: -9px; border: 2px solid var(--ink-faint); border-radius: 50%; pointer-events: none;
}
.buscador-grande::after {
  content: ''; position: absolute; left: 25px; top: 50%; margin-top: 2px;
  width: 7px; height: 2px; background: var(--ink-faint); transform: rotate(45deg);
  pointer-events: none; border-radius: 2px;
}

.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-filtro button {
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft);
  border-radius: 20px; padding: 6px 15px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: all var(--rapido);
}
.chips-filtro button:hover { border-color: var(--accent); color: var(--accent-texto); }
.chips-filtro button.activo {
  background: linear-gradient(135deg, var(--mar-600), var(--mar-700));
  border-color: transparent; color: #fff; font-weight: 600; box-shadow: var(--e1);
}

.grupo-tarifa { margin-bottom: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); overflow: hidden; box-shadow: var(--e1); }
.grupo-tarifa > summary {
  padding: 13px 18px; cursor: pointer; background: var(--surface-alt);
  border-bottom: 1px solid var(--rule-soft); font-weight: 650; font-size: 14.5px;
  display: flex; align-items: center; gap: 10px; list-style: none;
}
.grupo-tarifa > summary::-webkit-details-marker { display: none; }
.grupo-tarifa > summary::before { content: '▸'; color: var(--accent); font-size: 12px; transition: transform var(--rapido); }
.grupo-tarifa[open] > summary::before { transform: rotate(90deg); }
.grupo-tarifa > summary .cuantos { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.linea-tarifa {
  display: grid; grid-template-columns: 62px minmax(0,1fr) 76px 100px 30px;
  gap: var(--s3); align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--rule-soft); cursor: pointer; transition: background var(--rapido);
}
.linea-tarifa:last-of-type { border-bottom: 0; }
.linea-tarifa:hover { background: var(--accent-wash); }
.linea-tarifa.abierta { background: var(--accent-wash); border-bottom-color: transparent; }
.linea-tarifa .cod { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.linea-tarifa .nom { font-size: 14.5px; min-width: 0; }
.linea-tarifa .nom small { display: block; color: var(--ink-faint); font-size: 12px; }
.linea-tarifa .dur { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.linea-tarifa .pre { font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent-deep); }
.linea-tarifa .señales { display: flex; gap: 3px; justify-content: flex-end; }
.linea-tarifa .señales i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.linea-tarifa .señales i.pub { background: var(--ok); }
.linea-tarifa .señales i.inactivo { background: var(--error); }
.linea-tarifa.desactivada .nom, .linea-tarifa.desactivada .pre { opacity: .45; text-decoration: line-through; }
.editor-tarifa { padding: var(--s1) 18px var(--s5); background: var(--accent-wash); border-bottom: 1px solid var(--rule-soft); animation: entra var(--rapido) both; }
.editor-tarifa .acciones { margin-top: var(--s3); }

/* ================================ CAJA ================================ */
.franja-hoy {
  background: linear-gradient(135deg, var(--mar-800) 0%, var(--mar-600) 55%, var(--mar-500) 100%);
  color: #fff; border-radius: var(--r-lg); padding: var(--s5) var(--s6);
  display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--s5); box-shadow: var(--e2); position: relative; overflow: hidden;
}
.franja-hoy::after {
  content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none;
}
.franja-hoy .principal { display: flex; flex-direction: column; gap: 2px; }
.franja-hoy .et { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.franja-hoy .cifra { font-size: clamp(34px, 5vw, 46px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.franja-hoy .metodos { display: flex; gap: var(--s5); flex-wrap: wrap; }
.franja-hoy .metodo .v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.franja-hoy .acciones-caja { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.franja-hoy .btn { background: #fff; color: var(--mar-800); font-size: 15px; padding: 12px 22px; border-radius: var(--r-sm); }
.franja-hoy .btn:hover { background: var(--mar-050); filter: none; }
.franja-hoy .btn.sec { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.franja-hoy .btn.sec:hover { background: rgba(255,255,255,.24); }

.deuda-lista { display: flex; flex-direction: column; }
.deuda-fila {
  display: grid; grid-template-columns: minmax(0,1fr) 110px 120px; gap: var(--s3);
  align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule-soft);
  transition: background var(--rapido);
}
.deuda-fila:hover { background: var(--accent-wash); }
.deuda-fila:last-child { border-bottom: 0; }
.deuda-fila strong { font-size: 14.5px; }
.deuda-fila .tel { font-size: 12.5px; color: var(--ink-faint); }
.deuda-fila .importe { font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right; color: var(--rust); font-variant-numeric: tabular-nums; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  nav.lateral {
    flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule);
    padding: 10px; height: auto; position: sticky; top: 0; z-index: 30; gap: 4px;
  }
  nav.lateral .marca, nav.lateral .pie { display: none; }
  nav.lateral button { margin: 0; white-space: nowrap; padding: 9px 14px; }
  nav.lateral button svg { display: none; }
  main { padding: var(--s5) var(--s4) 70px; }
  header.seccion h2 { font-size: 25px; }
}
@media (max-width: 700px) {
  .linea-tarifa { grid-template-columns: 56px minmax(0,1fr) 90px; }
  .linea-tarifa .dur, .linea-tarifa .señales { display: none; }
}
@media (max-width: 620px) {
  .servicio .portada img.foto { width: 100%; flex: 1 1 100%; height: 150px; }
  .deuda-fila { grid-template-columns: minmax(0,1fr) 100px; }
  .deuda-fila .acciones { grid-column: 1/-1; }
  #aviso, .avisos-pila { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

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

/* === IMPRESIÓN === */
/* Al imprimir un presupuesto o una liquidación salía el menú y los botones. */
@media print {
  nav.lateral, .portal-cab, .portal-nav, #aviso, .avisos-pila,
  .acciones, .barra, button, .chips-filtro, footer { display: none !important; }
  .app { display: block; }
  main, .portal-cuerpo { padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tarjeta, .kpi, .servicio, .presupuesto-tarjeta {
    box-shadow: none; border: 1px solid #999; break-inside: avoid; page-break-inside: avoid;
  }
  .tarjeta > h3 { background: #fff; border-bottom: 1px solid #999; }
  table { font-size: 10pt; }
  thead th { background: #fff; color: #000; border-bottom: 1px solid #000; }
  a[href]::after { content: ''; }
  .imprimible-cabecera { display: block !important; margin-bottom: 12mm; }
  @page { margin: 15mm; }
}
.imprimible-cabecera { display: none; }

/* === SELECTOR DE TEMA === */
.selector-tema { display: flex; gap: 2px; background: var(--surface-alt); border: 1px solid var(--rule); border-radius: 20px; padding: 2px; }
.selector-tema button {
  border: 0; background: none; color: var(--ink-faint); cursor: pointer;
  padding: 4px 10px; border-radius: 20px; font: inherit; font-size: 11.5px;
  display: flex; align-items: center; gap: 4px; margin: 0;
}
.selector-tema button svg { width: 13px; height: 13px; }
.selector-tema button.activo { background: var(--surface); color: var(--accent-texto); box-shadow: var(--e1); font-weight: 600; }

/* === BUSCADOR GLOBAL === */
.buscador-global { position: fixed; inset: 0; background: rgba(10,23,32,.5); backdrop-filter: blur(3px); z-index: 95; display: grid; place-items: start center; padding: 10vh 20px 20px; animation: aparece var(--rapido) both; }
.buscador-global .caja { width: 100%; max-width: 600px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden; animation: sube var(--medio) both; }
.buscador-global input { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 18px 22px; font-size: 17px; }
.buscador-global input:focus { box-shadow: none; border-color: var(--accent); }
.buscador-global .resultados-g { max-height: 55vh; overflow-y: auto; }
.buscador-global .grupo { padding: 8px 22px 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.buscador-global .fila {
  display: flex; align-items: center; gap: 12px; padding: 11px 22px; cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left; font: inherit; color: var(--ink);
}
.buscador-global .fila:hover, .buscador-global .fila.marcada { background: var(--accent-wash); }
.buscador-global .fila .sec { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.buscador-global .pie-ayuda { padding: 10px 22px; border-top: 1px solid var(--rule-soft); font-size: 11.5px; color: var(--ink-faint); background: var(--surface-alt); }
.buscador-global kbd { font-family: var(--mono); font-size: 10.5px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; }


/* La hora actual, marcada en la columna. Es la referencia que se busca al
   mirar la agenda de hoy: qué acaba de pasar y qué viene ahora. */
.raya-ahora {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--error); z-index: 4; pointer-events: none;
}
.raya-ahora::before {
  content: ''; position: absolute; left: -1px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--error);
}

/* Cabecera de columna con el recuento del día debajo del nombre. */
.agenda .cab .ayuda { display: block; font-size: 10.5px; margin-top: 1px; }

/* ====================== AGENDA: VISTA SEMANAL ======================
   Siete columnas donde antes había tres o cuatro gabinetes: cada cita tiene
   la tercera parte de ancho, así que se enseña lo mínimo que sirve para
   reconocerla —nombre y hora de inicio— y el resto va en el título
   emergente. Las que se solapan se reparten en carriles. */

.agenda.semana .columna { cursor: crosshair; }
.agenda.semana .cita.compacta {
  position: absolute; left: 0; right: auto;
  padding: 3px 6px; font-size: 11px; line-height: 1.25;
  box-shadow: none; border-radius: 3px;
}
.agenda.semana .cita.compacta strong {
  font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda.semana .cita.compacta .det { font-size: 9.5px; opacity: .8; font-family: var(--mono); }
/* Al pasar por encima se despliega sobre las vecinas para poder leerla entera. */
.agenda.semana .cita.compacta:hover,
.agenda.semana .cita.compacta:focus-visible {
  z-index: 6; min-width: 130px; box-shadow: var(--e2); transform: none;
}

.agenda .cab-dia {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px var(--s2) 8px; text-align: center; line-height: 1.2;
}
.cab-dia .nombre-dia { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.cab-dia .num-dia { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--ink); }

/* Barra de carga: la lectura rápida de qué día está lleno y cuál tiene sitio.
   Es proporcional al día más ocupado de la semana que se está mirando. */
.cab-dia .carga { display: block; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.cab-dia .carga i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.cab-dia .detalle-carga { font-size: 9.5px; color: var(--ink-faint); font-family: var(--mono); }

/* El día de hoy se marca con color de fondo y con un filete superior: el color
   solo no basta para quien no lo distingue. */
.agenda .cab-dia.es-hoy { background: var(--accent-wash); box-shadow: inset 0 3px 0 var(--accent-deep); }
.agenda .cab-dia.es-hoy .num-dia { color: var(--accent-deep); font-weight: 500; }
.agenda .columna.es-hoy { background: color-mix(in srgb, var(--accent-wash) 45%, transparent); }
.agenda .columna.es-hoy:hover { background: var(--accent-wash); }

@media (max-width: 900px) {
  /* En pantalla estrecha la semana se desplaza en horizontal en vez de comprimir
     las columnas hasta que no se lea nada. */
  .agenda.semana { display: block; overflow-x: auto; }
}

/* =============== RADIOGRAFÍAS Y PERIODONTOGRAMA ===============
   Dos pantallas muy distintas: una se mira y la otra se teclea. La galería
   da protagonismo a la imagen; la tabla del periodontograma prioriza que
   quepan ciento noventa y dos casillas y que se pueda tabular entre ellas
   sin apartar la vista de la boca del paciente. */

.galeria-archivos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3);
}
.archivo-ficha {
  margin: 0; background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-sm); overflow: hidden;
}
.archivo-ficha .miniatura {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0;
  /* Fondo negro: una radiografía sobre blanco se lee peor y deslumbra. */
  background: #0A0D10; cursor: zoom-in; overflow: hidden;
}
.archivo-ficha .miniatura img { width: 100%; height: 100%; object-fit: contain; }
.archivo-ficha .icono-archivo { font-size: 34px; line-height: 1; color: var(--n-300); }
.archivo-ficha figcaption { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.archivo-ficha figcaption strong {
  font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.archivo-ficha .acciones-archivo { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.archivo-ficha .acciones-archivo .btn { text-decoration: none; }

.ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; font-size: 14px; }
.ficha-datos dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); align-self: center; }
.ficha-datos dd { margin: 0; color: var(--ink); }

/* --- Rejilla de sondaje ---
   Casi doscientas casillas. Lo que la hacía ilegible era que los campos
   numéricos no se veían —fondo transparente y sin borde— mientras que las
   casillas de verificar salían con el dibujo del sistema, blancas y enormes,
   quedándose con toda la atención. Ahora manda el número, que es el dato, y
   las marcas son puntos discretos que solo cantan cuando están puestas. */

.titulo-arcada {
  margin: 20px 0 7px; font-size: 12px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.scroll-perio {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.tabla-perio { border-collapse: separate; border-spacing: 0; font-size: 11px; width: max-content; min-width: 100%; }

/* La columna de etiquetas se queda fija: desplazando a la derecha hay que seguir
   sabiendo si la fila que se está leyendo es sondaje, recesión o sangrado. */
.tabla-perio th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-alt); text-align: left; white-space: nowrap;
  padding: 0 12px 0 10px; height: 26px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
}
.tabla-perio thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-alt); border-bottom: 1px solid var(--rule);
}
.tabla-perio thead th:first-child { left: 0; z-index: 4; }

.tabla-perio .cab-diente {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 0; text-align: center; color: var(--ink);
  border-left: 1px solid var(--rule);
}
/* Donde empieza otro cuadrante, una línea más fuerte: es la referencia para no
   tener que contar dientes desde el borde. */
.tabla-perio .cab-diente.nuevo-cuadrante,
.tabla-perio td.celda-perio.limite-cuadrante { border-left: 2px solid var(--accent); }

/* Franja que separa vestibular de palatino y del bloque por diente. */
.tabla-perio .separador-cara th[scope="row"] {
  background: var(--accent-wash); color: var(--accent-texto);
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  height: 20px; border-top: 1px solid var(--rule);
}
.tabla-perio .separador-cara td { background: var(--accent-wash); border-top: 1px solid var(--rule); }

.tabla-perio .celda-perio {
  padding: 0; text-align: center; height: 26px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
/* Cada tres columnas empieza un diente: la línea marca dónde. */
.tabla-perio tbody td.celda-perio:nth-child(3n + 2) { border-left: 1px solid var(--rule); }

.ent-perio {
  width: 30px; height: 24px; padding: 0; border: 0; border-radius: 0;
  text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
  /* Ahora sí se ve dónde se escribe. */
  background: var(--surface-alt); color: var(--ink);
}
.ent-perio::placeholder { color: transparent; }
.ent-perio:hover { background: var(--rule-soft); }
.ent-perio:focus {
  outline: 2px solid var(--accent-deep); outline-offset: -2px;
  background: var(--surface); position: relative; z-index: 1;
}
/* La fila de sondaje es la principal: se destaca del resto. */
.tabla-perio .fila-sondaje .ent-perio { font-size: 12.5px; }
.tabla-perio .fila-sondaje th[scope="row"] { color: var(--ink); font-weight: 700; }

/* Profundidad por color Y por peso, nunca solo por color. */
.ent-perio.perio-sano { background: var(--ok-fondo); color: var(--ok); }
.ent-perio.perio-moderada { background: var(--alerta-fondo); color: var(--alerta); font-weight: 700; }
.ent-perio.perio-profunda {
  background: var(--error-fondo); color: var(--error); font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--error);
}

/* Marcas de sangrado y placa: un punto, no una casilla del sistema operativo. */
.marca-perio { display: grid; place-items: center; height: 24px; cursor: pointer; }
.marca-perio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marca-perio span {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--borde-campo); background: transparent;
  transition: background var(--rapido), border-color var(--rapido);
}
.marca-perio:hover span { border-color: var(--accent); }
.marca-perio.sangrado input:checked + span { background: var(--error); border-color: var(--error); }
/* La placa se distingue del sangrado por forma además de por color. */
.marca-perio.placa span { border-radius: 2px; }
.marca-perio.placa input:checked + span { background: var(--accent); border-color: var(--accent); }
.marca-perio.ausente span { border-radius: 2px; width: 12px; height: 12px; }
.marca-perio.ausente input:checked + span {
  background: var(--ink-faint); border-color: var(--ink-faint);
  /* Aspa para que «ausente» se lea como ausente y no como otra marca más. */
  background-image: linear-gradient(45deg, transparent 44%, var(--surface) 44%, var(--surface) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--surface) 44%, var(--surface) 56%, transparent 56%);
}
.marca-perio input:focus-visible + span { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.tabla-perio .celda-diente { border-left: 1px solid var(--rule); }

/* --- Mapa de la boca ---
   La rejilla tiene el dato exacto; el mapa contesta de un vistazo la pregunta
   que se hace al abrirlo: dónde está el problema. Cada diente se pinta por su
   peor punto, que es el que decide el tratamiento. */
.mapa-boca {
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: var(--s3);
  margin-bottom: var(--s4); overflow-x: auto;
}
.mapa-arcada { display: flex; gap: 3px; justify-content: center; min-width: max-content; }
/* La línea media de la boca, entre el cuadrante derecho y el izquierdo. */
.mapa-diente.abre-cuadrante { margin-left: 14px; position: relative; }
.mapa-diente.abre-cuadrante::before {
  content: ''; position: absolute; left: -8px; top: -2px; bottom: -2px;
  border-left: 1px dashed var(--ink-faint);
}
.mapa-diente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 30px; padding: 4px 0 3px; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--rule);
  font-family: var(--mono); line-height: 1.15;
}
.mapa-diente b { font-size: 9px; font-weight: 500; color: var(--ink-faint); }
.mapa-diente em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--ink); }
.mapa-diente.sin-datos em { color: var(--ink-faint); font-weight: 400; }
.mapa-diente.sano { background: var(--ok-fondo); border-color: var(--ok); }
.mapa-diente.sano em { color: var(--ok); }
.mapa-diente.moderada { background: var(--alerta-fondo); border-color: var(--alerta); }
.mapa-diente.moderada em { color: var(--alerta); }
.mapa-diente.profunda { background: var(--error-fondo); border-color: var(--error); border-width: 2px; }
.mapa-diente.profunda em { color: var(--error); }
/* El sangrado va aparte de la profundidad: son dos cosas distintas y pueden no
   coincidir. Se marca con un filete inferior, no cambiando el color del fondo. */
.mapa-diente.sangra { box-shadow: inset 0 -3px 0 var(--error); }
.mapa-diente.ausente {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--rule) 3px, var(--rule) 4px);
  color: var(--ink-faint);
}
.mapa-diente.ausente b { color: var(--ink-faint); }

.linea-oclusal {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s2) 0; color: var(--ink-faint);
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
}
.linea-oclusal::before, .linea-oclusal::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}

.leyenda-perio {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: 11px; color: var(--ink-soft); margin-bottom: var(--s3);
}
.leyenda-perio span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-perio i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--rule); }
.leyenda-perio i.mu-sano { background: var(--ok-fondo); border-color: var(--ok); }
.leyenda-perio i.mu-moderada { background: var(--alerta-fondo); border-color: var(--alerta); }
.leyenda-perio i.mu-profunda { background: var(--error-fondo); border-color: var(--error); border-width: 2px; }
.leyenda-perio i.mu-sangra { background: var(--error); border-color: var(--error); border-radius: 50%; }
.leyenda-perio i.mu-placa { background: var(--accent); border-color: var(--accent); }
.leyenda-perio i.mu-ausente {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--rule) 3px, var(--rule) 4px);
}

@media (forced-colors: active) {
  .ent-perio.perio-profunda, .mapa-diente.profunda { outline: 2px solid Highlight; }
  .marca-perio input:checked + span { background: Highlight; }
}

/* ==================== HORARIOS: REJILLA SEMANAL ====================
   Un turno es un rectángulo en una semana, no una fila de formulario. Se
   pinta arrastrando, como se marcaría en un cuadrante de papel, y se ve la
   semana entera de golpe: qué días quedan libres y dónde hay un hueco a
   media tarde son las dos preguntas que se hacen al montar los horarios,
   y una lista de filas no contesta ninguna de las dos. */

.rejilla-horario {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  user-select: none;
}
.rejilla-horario .cab-h {
  padding: 9px 4px; text-align: center;
  font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  background: var(--surface-alt); border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule-soft); color: var(--ink-soft);
}
.rejilla-horario .cab-h:first-child { border-left: 0; }
.rejilla-horario .cab-h .horas-dia {
  display: block; font-family: var(--mono); font-size: 10px;
  font-weight: 400; color: var(--ink-faint); margin-top: 2px;
}
.rejilla-horario .cab-h.con-turnos { background: var(--accent-wash); color: var(--accent-deep); }

.rejilla-horario .regla { position: relative; background: var(--surface-alt); border-right: 1px solid var(--rule); }
.rejilla-horario .regla span {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}

.rejilla-horario .col-dia {
  position: relative; border-left: 1px solid var(--rule-soft);
  cursor: cell; touch-action: none;
}
.rejilla-horario .col-dia .marca-hora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule-soft); pointer-events: none; }
.rejilla-horario .col-dia .marca-hora.entera { border-top-color: var(--rule); }
/* Franja de fin de semana atenuada: se distingue sin necesidad de leer la cabecera. */
.rejilla-horario .col-dia.finde { background: color-mix(in srgb, var(--ink) 3%, transparent); }

.turno-bloque {
  position: absolute; left: 3px; right: 3px;
  background: var(--accent-wash); border: 1px solid var(--accent);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--r-xs);
  padding: 3px 6px; overflow: hidden; cursor: pointer;
  font-size: 11px; line-height: 1.3; color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px;
}
.turno-bloque:hover { background: var(--accent-borde); }
.turno-bloque .rango { font-family: var(--mono); font-weight: 650; font-size: 11px; white-space: nowrap; }
.turno-bloque .gab { font-size: 10px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Un turno de media hora no tiene sitio para dos líneas: se queda solo con la hora. */
.turno-bloque.corto { padding: 1px 5px; justify-content: center; }
.turno-bloque.corto .gab { display: none; }
.turno-bloque.corto .rango { font-size: 10px; }
/* Sin gabinete asignado no es un error, pero conviene que se note. */
.turno-bloque.sin-gabinete { border-style: dashed; }

/* Lo que se está pintando ahora mismo, antes de soltar. */
.turno-previo {
  position: absolute; left: 3px; right: 3px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border: 1.5px dashed var(--accent-deep); border-radius: var(--r-xs);
  pointer-events: none; z-index: 5;
  font-family: var(--mono); font-size: 10.5px; font-weight: 650;
  color: var(--accent-deep); text-align: center; padding-top: 2px;
}
.turno-previo.borrando {
  background: color-mix(in srgb, var(--error) 24%, transparent);
  border-color: var(--error); color: var(--error);
}

.plantillas-turno { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.plantillas-turno .btn { white-space: nowrap; }

@media (max-width: 760px) {
  /* En móvil la semana no cabe: se desplaza en horizontal manteniendo la regla
     de horas pegada a la izquierda para no perder la referencia. */
  .envoltorio-rejilla { overflow-x: auto; }
  .rejilla-horario { min-width: 620px; }
}

/* ====================== FICHAS DE PERSONAL ======================
   Once columnas no caben en una pantalla: la tabla las comprimía hasta
   dejar «Dr. J», «Odo» y «Au», y un dato que no se lee no está. Cada
   persona pasa a ser una ficha con sitio para su nombre entero, y la
   edición se hace en un formulario donde cada campo tiene su ancho. */

.fichas-personal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}

.ficha-persona {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s4);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.ficha-persona:hover { border-color: var(--accent-borde); box-shadow: var(--e1); }
/* Quien está de baja se ve, pero se ve que está de baja. */
.ficha-persona.de-baja { opacity: .62; }
.ficha-persona.de-baja:hover { opacity: 1; }

.cabecera-persona { display: flex; align-items: center; gap: var(--s3); }
.avatar-persona {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  /* El texto va siempre blanco sobre el color del profesional. Los colores de
     agenda son medios u oscuros; si alguien elige uno muy claro, el borde
     interior mantiene la figura recortada del fondo. */
  color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.cabecera-persona .identidad { min-width: 0; display: flex; flex-direction: column; }
.cabecera-persona .identidad strong {
  font-size: 15px; line-height: 1.3; color: var(--ink);
  /* El nombre completo cabe; si no cupiera, parte de línea antes que recortarse. */
  overflow-wrap: anywhere;
}
.cabecera-persona .identidad .puesto { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }

.etiquetas-persona { display: flex; flex-wrap: wrap; gap: 5px; }

.datos-persona {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px var(--s3); margin: 0;
  font-size: 13px; align-items: baseline;
}
.datos-persona dt {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.datos-persona dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.datos-persona a { color: var(--accent-texto); }

.acciones-persona {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
}

/* Los formularios largos del panel reparten en dos columnas cuando hay sitio,
   sin bajar de un ancho en el que un NIF o un correo se lean enteros. */
.panel-flotante .campos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ======================= PRIMERA VISITA =======================
   Que alguien venga por primera vez cambia el trabajo: hay que abrir
   historia, hacer anamnesis, firmar documentos y contar con más tiempo.
   Se marca en la agenda y en el aviso de llegada para que el profesional
   lo sepa antes de hacerle pasar, no cuando ya lo tiene en el sillón. */

.cita.primera-visita { box-shadow: inset 0 0 0 1.5px var(--accent-deep), var(--e1); }

.galon-primera {
  position: absolute; top: 2px; right: 3px; z-index: 2;
  background: var(--accent-deep); color: #fff;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .04em; line-height: 1;
  padding: 2px 4px; border-radius: 3px;
}
/* En la vista semanal el rectángulo es estrecho: el galón se queda pero el
   nombre pierde el ancho justo para que no se solapen. */
.cita.compacta.primera-visita strong { padding-right: 20px; }

.aviso-llegada.es-primera { border-left-color: var(--accent-deep); }
.marca-primera {
  display: inline-block; align-self: flex-start;
  background: var(--accent-deep); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; margin-bottom: 4px;
}

/* ===================== CONTADORES DEL MENÚ =====================
   El número de cosas sin responder, en lo único que está siempre a la
   vista. Va pegado al borde derecho de la entrada y no empuja al texto,
   para que el menú no baile cada vez que entra o sale una petición. */

.globo-menu {
  margin-left: auto;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--sobre-accent);
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 10px;
  /* Aparece con un pulso corto: entra una petición y se nota sin ser molesto. */
  animation: entra-globo var(--medio) both;
}
@keyframes entra-globo {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* Sobre la entrada activa, que ya va en color de acento, el globo se invierte
   para no perderse contra el fondo. */
nav.lateral button.activo .globo-menu { background: var(--sobre-accent); color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) { .globo-menu { animation: none; } }
@media (forced-colors: active) { .globo-menu { border: 1px solid ButtonBorder; } }

/* ========================== ACCESIBILIDAD ==========================
   Esto no es una capa aparte: es lo que hace que la aplicación se pueda
   usar con teclado, con lector de pantalla o con el contraste alto del
   sistema operativo. En una clínica el personal trabaja con las manos
   ocupadas y el teclado es a menudo más rápido que el ratón, así que
   además de accesible sale más ágil. */

/* Saltar la navegación. Sin esto, quien navega con teclado tiene que
   tabular por todo el menú lateral en cada pantalla. */
.saltar-a-contenido {
  position: absolute; left: var(--s3); top: -60px; z-index: 200;
  background: var(--accent-deep); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--rapido);
}
.saltar-a-contenido:focus { top: 0; }

/* Texto solo para lectores de pantalla: se lee pero no ocupa sitio. No se
   usa display:none porque eso también lo oculta al lector. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Salvo cuando recibe el foco: los enlaces de salto tienen que verse. */
.solo-lectores.enfocable:focus {
  position: static; width: auto; height: auto;
  clip: auto; clip-path: none; white-space: normal;
}

/* Anillo de foco visible sobre cualquier fondo. Se pinta con dos sombras
   —una clara y otra de acento— para que se distinga tanto en tarjeta
   blanca como sobre superficies de color. */
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
summary:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px rgba(27,123,168,.3);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 1px;
}

/* Modo de contraste alto del sistema. Ahí el navegador sustituye los colores
   por los del usuario, y las señales hechas solo con fondo desaparecen: hay
   que redibujarlas con borde, que sí se respeta. */
@media (forced-colors: active) {
  .btn, .chip, .cita, .tarjeta, .diente { border: 1px solid ButtonBorder; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .cita.e-confirmada, .diente.elegido, .chip.activo { outline: 2px solid Highlight; }
  .selector-tema button.activo, .portal-nav button.activo { border-bottom: 3px solid Highlight; }
}

/* El estado no puede ir solo en el color: quien no distingue rojo de verde
   necesita otra señal. Los estados llevan además un punto con forma propia. */
.chip.estado::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  margin-right: 6px; vertical-align: middle; background: currentColor;
}
.chip.estado.confirmada::before { border-radius: 50%; }
.chip.estado.pendiente::before { border-radius: 0; transform: rotate(45deg); }
.chip.estado.cancelada::before { border-radius: 0; height: 2px; width: 9px; }
.chip.estado.atendida::before { border-radius: 2px; }

/* Región de anuncios: cambia de texto y el lector lo lee sin mover el foco. */
.anuncio-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Objetivos táctiles: en tableta, un botón de 20 px no se acierta. */
@media (pointer: coarse) {
  button, .btn, [role="tab"], select { min-height: 44px; }
  .btn.mini { min-height: 38px; }
}

/* El movimiento reducido ya se respeta arriba; aquí se completa con lo que
   no es animación sino desplazamiento automático. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .esqueleto { animation: none !important; background: var(--surface-alt) !important; }
}

/* =========================================================================
   BANNER DE ROLES — previsualizar la aplicación con otros ojos
   =========================================================================
   Solo lo ve dirección. En reposo es una barra callada: está ahí, no grita.
   En cuanto hay un rol prestado se tiñe de ámbar y no se quita de encima,
   porque el error caro es olvidarse de que lo que estás viendo no es tuyo y
   dar por hecho que a recepción le falta algo que en realidad sí tiene.
   ========================================================================= */

.banner-roles {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5); height: 46px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  box-shadow: var(--e1); font-size: 13px;
}

.banner-roles .rotulo {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}

/* Mando segmentado: las cuatro vistas, siempre las cuatro, para que se vea de
   un vistazo cuántos perfiles hay y en cuál estás. */
.banner-roles .vistas { display: flex; gap: 2px; background: var(--surface-alt); padding: 3px; border-radius: var(--r-sm); }

.banner-roles .vistas button {
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-weight: 550; cursor: pointer;
  padding: 5px 12px; border-radius: calc(var(--r-sm) - 2px);
  display: flex; align-items: center; gap: 7px;
  transition: background var(--rapido), color var(--rapido);
}
.banner-roles .vistas button:hover { background: var(--surface); color: var(--ink); }
.banner-roles .vistas button[aria-pressed="true"] {
  background: var(--accent); color: #fff; box-shadow: var(--e1);
}

/* Un punto por rol, cada uno de su color. Con cuatro vistas en fila, el color es lo
   que permite saber dónde estás de reojo, sin volver a leer las etiquetas. */
.banner-roles .punto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--n-400); }
.banner-roles [data-rol="direccion"] .punto { background: var(--mar-800); }
.banner-roles [data-rol="recepcion"] .punto { background: var(--mar-400); }
.banner-roles [data-rol="sanitario"] .punto { background: var(--ok); }
.banner-roles [data-rol="paciente"]  .punto { background: var(--alerta); }
/* Sobre el azul del botón activo el punto tiene que salirse de la paleta o desaparece. */
.banner-roles .vistas button[aria-pressed="true"] .punto { background: #fff; }

.banner-roles .de-quien {
  border: 1px solid var(--borde-campo); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; padding: 5px 8px; max-width: 200px;
}

.banner-roles .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.banner-roles .nota { color: var(--ink-faint); }

/* Estado prestado. El ámbar es el mismo que usa el resto de la aplicación para
   «ojo con esto», no un color nuevo inventado para la ocasión. */
.banner-roles.prestado { background: var(--alerta-fondo); border-bottom-color: var(--alerta); }
.banner-roles.prestado .rotulo,
.banner-roles.prestado .nota { color: var(--alerta); }
.banner-roles.prestado .vistas { background: rgba(0,0,0,.05); }

.banner-roles .sello {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--alerta); color: #fff; padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}

/* En pantallas estrechas el banner deja de ser una línea y se apila. Se prefiere
   que crezca a que esconda botones: un previsualizador con vistas ocultas no
   previsualiza nada. */
@media (max-width: 820px) {
  .banner-roles { height: auto; flex-wrap: wrap; padding: 8px var(--s4); gap: var(--s3); }
  .banner-roles .derecha { margin-left: 0; width: 100%; }
  /* Las cuatro vistas también se apilan. Sin esto la fila se salía de la pantalla y
     «Cliente» quedaba cortado contra el borde: una vista a la que no se puede llegar
     es una vista que no existe. */
  .banner-roles .vistas { flex-wrap: wrap; }
}