/* ===========================================================================
   Panel de Dermè
   ---------------------------------------------------------------------------
   Lenguaje visual editorial, tomado del membrete del consultorio: serif fina
   en los títulos, versalitas espaciadas en los rótulos, filetes en vez de
   recuadros, y el azul marino de la marca con un dorado discreto.

   Pensado para el iPad del consultorio: texto grande, blancos táctiles de
   44 px, y nada que dependa del hover.

   Un solo archivo a propósito: IIS manda todas las peticiones al proceso de
   Python, así que cada <link> extra cuesta. Índice:

     0. Tokens
     1. Tipografía auto-hospedada
     2. Base
     3. Armazón: cinta, encabezado, marca, nav, main
     4. Tipografía de pantalla
     5. Avisos
     6. Tarjetas
     7. Tablas y listas
     8. Etiquetas de estado
     9. Botones y enlaces
    10. Formularios
    11. Piezas: entrar, agenda, hilo, hallazgo, permiso, explicación
    12. Anchos, impresión y accesibilidad
   =========================================================================== */

/* --- 0. Tokens ---------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Marca. El azul es el del logotipo; el dorado, el acento noble. */
  --marino: #1e3a5f;
  --marino-hondo: #14283f;
  --marino-tenue: #eef1f6;
  --dorado: #c9a961;
  --dorado-tenue: #f6efe0;

  /* Neutros con matiz cálido: el gris azulado se pelea con el marino. */
  --tinta: #1d2733;
  --apagado: #6b7280;
  --linea: #e4e2dd;
  --linea-fuerte: #c8c5be;
  --fondo: #faf9f7;
  --papel: #ffffff;

  /* Texto sobre el color de acento. Cambia en oscuro, donde el acento pasa
     a ser claro y las letras blancas dejarían de leerse. */
  --sobre-acento: #ffffff;

  /* Estado */
  --si: #15704a;
  --si-fondo: #e8f3ed;
  --no: #8a6400;
  --no-fondo: #fdf4e0;
  --baja: #9c2b2b;
  --baja-fondo: #fbeceb;
  --aviso-borde: #f0dfb8;

  /* Tipografía */
  --serif: "Membrete", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --texto: 17px;
  --texto-chico: .9rem;
  --texto-mini: .78rem;
  --versalita: .72rem;
  --tracking: .14em;

  /* Espaciado: el aire editorial se compra aquí. */
  --e0: .25rem;
  --e1: .5rem;
  --e2: .75rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2.5rem;
  --e6: 4rem;

  /* Casi sin esquinas redondeadas: es lo que separa «membrete» de «app». */
  --radio: 3px;
  --radio-control: 6px;
  --radio-pastilla: 999px;

  --sombra: 0 1px 2px rgba(29, 39, 51, .05);
  --ancho: 1040px;
  --toque: 44px;
  --lateral: 216px;
}

/* --- 0b. Tema oscuro ---------------------------------------------------- */

/* Se elige a mano con el botón del encabezado y se guarda en una galleta que
   dura un año. NO sigue al sistema a propósito: el iPad del consultorio lo
   usan varias personas y un panel que cambia de color solo, según la hora,
   se siente descompuesto. Quien lo quiera oscuro, lo deja oscuro.

   El marino no puede quedarse igual: sobre fondo oscuro no se lee. Se
   aclara para textos y enlaces, y las superficies se oscurecen. El dorado
   sube un poco de luminosidad para sostener el contraste. */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --marino: #8fb3dc;
  --marino-hondo: #abc8ea;
  --marino-tenue: #1f2a38;
  --dorado: #d9bd7d;
  --dorado-tenue: #2a2418;

  --tinta: #e7e4de;
  --apagado: #9aa3ae;
  --linea: #2b323b;
  --linea-fuerte: #3f4854;
  /* Carbón con matiz cálido, no negro: el negro puro cansa y apaga el papel. */
  --fondo: #13171c;
  --papel: #1b2027;

  --sobre-acento: #10161d;

  --si: #73c49a;
  --si-fondo: #16271f;
  --no: #d9b45f;
  --no-fondo: #2a2416;
  --baja: #e69089;
  --baja-fondo: #2e1b1a;
  --aviso-borde: #453a1f;

  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
}

/* --- 1. Tipografía auto-hospedada --------------------------------------- */

/* Se declara con nombre propio y no con el del proveedor: cambiar de familia
   después es editar estas dos líneas y nada más. Si el archivo no carga, el
   respaldo (Palatino en iPad, Georgia en Windows) sostiene el diseño. */
@font-face {
  font-family: "Membrete";
  src: url("/estaticos/tipos/membrete-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Base ------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: var(--texto)/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marino); text-underline-offset: 2px; }

.apagado { color: var(--apagado); }
.mini { font-size: var(--texto-mini); }
.error-texto { color: var(--baja); }

/* El foco no existía. Se captura con teclado Bluetooth en el iPad. */
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* --- 3. Armazón --------------------------------------------------------- */

/* Solo aparece cuando NO es la instalación del consultorio, para que nadie
   capture pacientes de verdad en la equivocada. */
.cinta-ambiente {
  background: var(--no-fondo);
  color: var(--no);
  border-bottom: 1px solid var(--aviso-borde);
  padding: var(--e1) var(--e4);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  text-align: center;
}

/* Barra lateral. Se pliega a riel con el botón de hamburguesa, y la elección
   se guarda en una galleta: así no se deshace al cambiar de pantalla, que es
   lo que pasa con los menús que solo viven en CSS. */
.marco { display: flex; align-items: flex-start; min-height: 100vh; }

.lateral {
  position: sticky;
  top: 0;
  flex: 0 0 var(--lateral);
  width: var(--lateral);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3) var(--e2);
  background: var(--papel);
  border-right: 1px solid var(--linea);
  overflow-y: auto;
}

.cabeza-lateral {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 0 var(--e1) var(--e3);
  border-bottom: 1px solid var(--linea);
}

.plegar {
  background: none;
  border: 0;
  color: var(--apagado);
  padding: var(--e1);
  min-height: 0;
  flex: 0 0 auto;
}

.marca { display: block; line-height: 0; min-width: 0; }
/* Los dos logotipos llevan el mismo peso de selector a propósito: con
   `.marca-riel` a secas, `.marca img` le ganaba y salían los dos encimados. */
.marca img { height: 22px; width: auto; display: block; }
.marca img.marca-riel { display: none; }

/* El logotipo viene del diseñador en dos tintas, oscura y marfil, las dos en
   PNG con transparencia. La plantilla elige cuál según el tema, así que aquí
   no hace falta ningún filtro. */

.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral nav a,
.opcion-lateral {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2);
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--tinta);
  font-size: var(--texto-chico);
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  /* Sin esto, los del pie heredan el `center` de la regla de botones y
     quedan desalineados respecto a los del menú. */
  justify-content: flex-start;
}
.lateral nav a.activo {
  background: var(--marino-tenue);
  color: var(--marino);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--dorado);
}

/* El trazo se declara AQUÍ, no dentro de iconos.svg.
   `<use>` contra un archivo externo clona el símbolo, pero Safari no le
   aplica el `<style>` que vive dentro de ese archivo: sin estas reglas
   pierde el `fill: none` y pinta cada icono como una silueta rellena. Pasó
   en el iPad el 3 de octubre. Estas cinco propiedades se heredan, así que
   puestas en el documento que las usa entran al clon en todos lados. */
.icono {
  width: 19px; height: 19px; flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pie-lateral {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--linea);
  padding-top: var(--e2);
}
.opcion-lateral { color: var(--apagado); }
.usuario-actual {
  color: var(--apagado);
  font-size: var(--versalita);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  margin: var(--e2) 0 0;
  padding: 0 var(--e2);
}

/* Riel: el mismo menú, solo los iconos. */
:root[data-menu="riel"] { --lateral: 62px; }
:root[data-menu="riel"] .texto-menu { display: none; }
:root[data-menu="riel"] .marca img.marca-ancha { display: none; }
:root[data-menu="riel"] .marca img.marca-riel { display: block; height: 26px; }
:root[data-menu="riel"] .cabeza-lateral {
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding-left: 0;
  padding-right: 0;
}
:root[data-menu="riel"] .lateral nav a,
:root[data-menu="riel"] .opcion-lateral { justify-content: center; padding: var(--e2) 0; }

main {
  flex: 1;
  min-width: 0;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e6);
}

/* El botón de hamburguesa es solo un icono: quien usa lector de pantalla
   necesita que diga qué hace. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section { margin-bottom: var(--e5); }

/* --- 4. Tipografía de pantalla ------------------------------------------ */

h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 var(--e3);
}

/* Versalitas espaciadas: es literalmente lo que hace el membrete debajo del
   logotipo, y lo que le da el aire de papelería. */
h2 {
  font-size: var(--versalita);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--apagado);
  margin: var(--e5) 0 var(--e2);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--linea);
}

h3 {
  font-size: var(--texto-chico);
  font-weight: 600;
  margin: var(--e4) 0 var(--e1);
}

/* Los párrafos explicativos son muchos y a 1040 px se leen mal. */
main > p, section > p, .aviso { max-width: 68ch; }

.titulo-con-accion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}

/* --- 5. Avisos ---------------------------------------------------------- */

.aviso {
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--linea-fuerte);
  background: var(--fondo);
  margin: 0 0 var(--e4);
}
/* `avisar()` manda tipo "ok" por omisión: hasta ahora toda confirmación se
   veía igual que un aviso informativo. */
.aviso.ok { border-left-color: var(--si); background: var(--si-fondo); }
.aviso.error { border-left-color: var(--baja); background: var(--baja-fondo); color: var(--baja); }

/* --- 6. Tarjetas -------------------------------------------------------- */

/* Rejilla y no flex: con flex, la última tarjeta de un renglón incompleto se
   estira a todo lo ancho y se ve como un error. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--marino);
  border-radius: var(--radio);
  padding: var(--e3);
  color: var(--apagado);
  font-size: var(--versalita);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}
.tarjeta strong { font-size: var(--texto-chico); text-transform: none; letter-spacing: 0; color: var(--tinta); }
.tarjeta .apagado { text-transform: none; letter-spacing: 0; font-size: var(--texto-mini); }
.tarjeta .lista { text-transform: none; letter-spacing: 0; font-size: var(--texto-mini); }

.numero {
  display: block;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--marino);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: var(--e0);
}

.tarjetas.enlaces a.tarjeta { text-decoration: none; color: var(--apagado); }

/* --- 7. Tablas y listas ------------------------------------------------- */

/* Sin caja: filetes y aire. Es el cambio que más «membrete» aporta. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-chico);
}
th, td {
  text-align: left;
  padding: var(--e2) var(--e2) var(--e2) 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
th {
  font-size: var(--versalita);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--apagado);
  border-bottom: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}
td { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

/* Las filas inactivas: `.apagado` solo cambiaba el color del texto y no
   alcanzaba a los enlaces. */
tr.apagado td, tr.apagado a { color: var(--apagado); }

/* La única tabla que se desborda en el iPad vertical es la de sesiones de
   depilación, de 7 columnas. */
.tabla-ancha { overflow-x: auto; }

.lista { padding-left: var(--e3); margin: var(--e1) 0; }
.lista li { margin: var(--e0) 0; }
.avisos li { color: var(--no); }

/* --- 8. Etiquetas de estado --------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-mini);
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta.si { background: var(--si-fondo); color: var(--si); }
.etiqueta.no { background: var(--no-fondo); color: var(--no); }
.etiqueta.baja { background: var(--baja-fondo); color: var(--baja); }

/* --- 9. Botones y enlaces ----------------------------------------------- */

button, input, select, textarea {
  font: inherit;
  border-radius: var(--radio-control);
  border: 1px solid var(--linea-fuerte);
  padding: var(--e1) var(--e2);
  background: var(--papel);
  color: var(--tinta);
}

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  padding: var(--e1) var(--e4);
  background: var(--marino);
  color: var(--sobre-acento);
  border: 1px solid var(--marino);
  border-radius: var(--radio-control);
  font-size: var(--texto-chico);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}

.boton.secundario, button.secundario {
  background: var(--papel);
  color: var(--marino);
  border-color: var(--linea-fuerte);
  font-weight: 500;
}

.peligro { background: var(--baja); border-color: var(--baja); color: var(--sobre-acento); }

/* Sin el tag delante, para que sirva igual en <button> y en <a>. */
.enlace {
  display: inline;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  color: var(--marino);
  font: inherit;
  font-size: var(--texto-chico);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.botones { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); }

/* --- 10. Formularios ---------------------------------------------------- */

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}

/* En iOS los campos de fecha y hora ignoran el ancho con el aspecto nativo. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  min-width: 0;
}

form.captura fieldset {
  border: 0;
  border-top: 1px solid var(--linea);
  background: none;
  padding: var(--e3) 0 var(--e2);
  margin: 0 0 var(--e4);
}
form.captura legend {
  font-size: var(--versalita);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--apagado);
  padding: 0 var(--e2) 0 0;
}
form.captura label {
  display: flex;
  flex-direction: column;
  gap: var(--e0);
  margin-bottom: var(--e3);
  font-size: var(--texto-chico);
  color: var(--apagado);
}
form.captura label.en-linea {
  flex-direction: row;
  align-items: center;
  gap: var(--e1);
  color: var(--tinta);
}
/* Un campo de fecha de 780 px de ancho se ve mal y no ayuda a nadie: los
   campos cortos se quedan cortos. */
form.captura input, form.captura select { width: 100%; max-width: 26rem; }
form.captura textarea { width: 100%; }
form.captura input[type="date"], form.captura input[type="time"] { max-width: 11rem; }
form.captura label.en-linea input { width: auto; }

.linea-servicio { display: flex; gap: var(--e3); flex-wrap: wrap; }
.linea-servicio label { flex: 1 1 220px; }

form.formulario { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; }
form.formulario label, .entrar label {
  display: flex;
  flex-direction: column;
  gap: var(--e0);
  font-size: var(--texto-chico);
  color: var(--apagado);
}
form.en-linea { display: flex; gap: var(--e1); }

.buscar { display: flex; gap: var(--e1); margin-bottom: var(--e3); align-items: center; flex-wrap: wrap; }
.buscar input { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.buscar input[type="date"] { flex: 0 0 11rem; }
.filtros { color: var(--apagado); margin-top: calc(var(--e1) * -1); font-size: var(--texto-chico); }

/* --- 11. Piezas de pantalla --------------------------------------------- */

/* Entrar */
.entrar {
  max-width: 440px;
  margin: 10vh auto;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--marino);
  border-radius: var(--radio);
  padding: var(--e5) var(--e5) var(--e4);
  text-align: center;
}
/* 260 y no menos: abajo del logotipo va «Aesthetic Medicine · Mexicali» en
   letra muy chica, y por debajo de ese ancho deja de leerse. */
.entrar img { width: 260px; max-width: 100%; height: auto; }
.entrar p { font-size: var(--texto-chico); }
.entrar form { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e4); text-align: left; }
.entrar input { width: 100%; }

/* Agenda del día */
.agenda { list-style: none; padding: 0; margin: 0; }
.cita {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e1) var(--e3) var(--e3);
  border-bottom: 1px solid var(--linea);
  border-left: 2px solid var(--marino);
}
.cita .cuando {
  min-width: 4.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.cita .cuando .mini { font-family: var(--sans); }
.cita .quien { flex: 1 1 260px; color: var(--tinta); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.cita .acciones { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cita.programada { border-left-color: var(--marino); }
.cita.atendida { border-left-color: var(--si); }
/* Las que ya no van ocupan menos la vista. */
.cita.cancelada, .cita.no_asistio { border-left-color: var(--linea); opacity: .6; }

/* Hilo de conversación */
.hilo { display: flex; flex-direction: column; gap: var(--e1); margin: var(--e3) 0; }
.globo {
  max-width: 78%;
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-control);
  border: 1px solid var(--linea);
  background: var(--papel);
  font-size: var(--texto-chico);
}
.globo p { margin: 0 0 var(--e0); white-space: pre-wrap; }
.globo.entrante { align-self: flex-start; }
.globo.saliente {
  align-self: flex-end;
  background: var(--marino-tenue);
  border-color: #dbe2ec;
}

.responder { display: flex; flex-direction: column; gap: var(--e1); }
.responder textarea { width: 100%; resize: vertical; }
.responder .pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.liberar { margin-top: var(--e4); }

/* Hallazgo: quién es el teléfono que se está capturando. Hasta ahora no
   tenía ni una regla y salía como texto suelto dentro del formulario. */
.hallazgo {
  border-left: 3px solid var(--marino);
  background: var(--marino-tenue);
  padding: var(--e2) var(--e3);
  margin: calc(var(--e1) * -1) 0 var(--e3);
  font-size: var(--texto-chico);
}
.hallazgo.error-texto { border-left-color: var(--baja); background: var(--baja-fondo); }
.hallazgo.apagado { border-left-color: var(--linea-fuerte); background: var(--fondo); }

/* Permiso: es donde se decide si a una paciente se le escribe o no. Que se
   vea que ahí se toma una decisión. */
.permiso {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--dorado);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4) var(--e4);
}
.permiso h2 { margin-top: var(--e1); }

/* Explicación de por qué una visita generó recordatorio */
.explicacion {
  background: var(--fondo);
  border-left: 3px solid var(--linea-fuerte);
  padding: var(--e2) var(--e3);
  margin: var(--e0) 0 var(--e3);
  font-size: var(--texto-mini);
  white-space: pre-wrap;
  overflow-x: auto;
}

details { font-size: var(--texto-chico); }
details summary { cursor: pointer; color: var(--marino); }
details pre { white-space: pre-wrap; font-size: var(--texto-mini); }

/* --- 12. Anchos, impresión y accesibilidad ------------------------------ */

/* En el iPad el hover se queda pegado después de tocar. */
@media (hover: hover) {
  /* `:not(.enlace)` no es adorno: sin eso, un botón que se ve como enlace
     —«Oscuro», «Salir», «Corregir»— se pintaba de azul al pasar el mouse
     mientras su texto seguía azul, y quedaba ilegible. */
  button:not(.enlace):hover,
  .boton:not(.enlace):hover {
    background: var(--marino-hondo);
    border-color: var(--marino-hondo);
    color: var(--sobre-acento);
  }
  .boton.secundario:hover, button.secundario:hover {
    background: var(--marino-tenue);
    border-color: var(--marino);
    color: var(--marino);
  }
  /* Con `.peligro:hover` a secas no bastaba: `button:not(.enlace):hover`
     tiene más especificidad y le ganaba, así que «Dar de baja» se ponía
     azul justo al ir a tocarlo. */
  button.peligro:hover, .boton.peligro:hover {
    background: var(--baja);
    border-color: var(--baja);
    color: var(--sobre-acento);
    filter: brightness(.9);
  }
  :root[data-tema="oscuro"] button.peligro:hover,
  :root[data-tema="oscuro"] .boton.peligro:hover { filter: brightness(1.12); }

  /* Los que se ven como enlace no cambian de fondo: solo se marcan más. */
  .enlace:hover { color: var(--marino-hondo); text-decoration-thickness: 2px; }

  .lateral nav a:hover { background: var(--marino-tenue); color: var(--marino); }
  .tarjetas.enlaces a.tarjeta:hover { border-color: var(--marino); }
}

/* El iPad del consultorio son 810 px en vertical y 1080 en horizontal: el
   breakpoint anterior, de 640, no se disparaba nunca. */
@media (max-width: 1024px) {
  main { padding: var(--e4) var(--e3) var(--e5); }
  /* En el iPad vertical, 216 px de menú se comen el contenido: se pliega
     solo a riel, aunque la galleta diga abierto. El botón sigue sirviendo
     al girar el iPad. */
  :root { --lateral: 62px; }
  .texto-menu { display: none; }
  .marca img.marca-ancha { display: none; }
  .marca img.marca-riel { display: block; height: 26px; }
  .cabeza-lateral { flex-direction: column; align-items: center; gap: var(--e2); padding-left: 0; padding-right: 0; }
  .lateral nav a, .opcion-lateral { justify-content: center; padding: var(--e2) 0; }
  table { font-size: var(--texto-mini); }
  th, td { padding: var(--e1) var(--e1) var(--e1) 0; }
}

@media (max-width: 700px) {
  h1 { font-size: 1.7rem; }
  main { padding: var(--e3) var(--e2) var(--e5); }
  table, thead, tbody, th, td, tr { display: block; }
  th { display: none; }
  td { border: none; padding: var(--e0) 0; }
  tr { border-bottom: 1px solid var(--linea); padding: var(--e2) 0; }
  .globo { max-width: 92%; }
  .cita .acciones { width: 100%; }
}

@media print {
  /* En papel siempre va claro, aunque la pantalla esté en oscuro: imprimir
     un fondo carbón gasta tinta y se lee peor. */
  :root, :root[data-tema="oscuro"] {
    --tinta: #000; --apagado: #444; --linea: #bbb; --linea-fuerte: #888;
    --fondo: #fff; --papel: #fff; --marino: #000; --dorado: #888;
  }
  .cinta-ambiente, .lateral, .acciones, .botones, form, .boton { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Pestañas de Caja. Son enlaces con un parámetro en la URL, no JavaScript:
   igual que el resto del panel, y así la pestaña sobrevive a enviar un
   formulario y se puede guardar en favoritos. */
.pestanas {
  display: flex;
  gap: var(--e3);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e4);
  flex-wrap: wrap;
}
.pestanas a {
  padding: var(--e2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--apagado);
  text-decoration: none;
  font-size: var(--versalita);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  font-weight: 600;
}
.pestanas a.activa {
  color: var(--marino);
  border-bottom-color: var(--dorado);
}
@media (hover: hover) {
  .pestanas a:hover { color: var(--marino); }
}