/* Sistema visual v2. Celular primero.
   Lo memorable: el tablero de próximas horas sobre la franja petróleo, y las horas como
   cifras grandes que se tocan. Todo lo demás es sobrio: bordes finos, sin sombras duras. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fuentes/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
/* Cifras: la fuente de texto usa cero tachado; las cifras toman la de títulos en todo el sitio. */
@font-face {
  font-family: "Cifras";
  src: url("fuentes/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fuentes/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root, html[data-paleta="azul-papel"] {
  /* Paleta «Azul y papel» (elegida por el dueño el 9-oct-2026; ver docs/marca/marca.md). */
  --tinta: #1b2238;
  --tinta-suave: #565d70;
  --profundo: #1e2f7a;
  --profundo-2: #2c4bc0;
  --papel: #faf6ef;
  --blanco: #ffffff;
  --bruma: #f0eef6;
  --menta: #e2e7f7;
  --menta-viva: #f2b880;
  --verde: #2c4bc0;
  --linea: #e2dcd0;
  --linea-oscura: rgba(255, 255, 255, .16);
  --foco: #2c4bc0;
  --senal: #e9a23b;
  --error: #8b2f3d;
  --error-fondo: #f9edef;
  --aviso: #6b5313;
  --aviso-fondo: #fbf4df;
  --exito-fondo: #e3f2ec;
  --firma: #aab5e0;
  --borde-control: #7f86a0;
  --texto: "Cifras", "Atkinson Hyperlegible Next", "Avenir Next", Avenir, system-ui, sans-serif;
  --titular: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --r-control: .625rem;
  --r-hoja: 1.25rem;
  --alto-control: 3rem;
  --ancho: 74rem;
  --sombra: 0 1px 2px rgba(27, 34, 56, .06), 0 8px 24px -12px rgba(27, 34, 56, .18);
}

/* Paleta 2: Bosque Médico, Salvia y Marfil (Inspirada en One Medical y Maven Clinic) */
html[data-paleta="esmeralda-marfil"] {
  --tinta: #142623;
  --tinta-suave: #4a5d59;
  --profundo: #0c3b36;
  --profundo-2: #0f685d;
  --papel: #f9f6f0;
  --bruma: #edf3f1;
  --menta: #dff0ec;
  --menta-viva: #e8b078;
  --verde: #0f685d;
  --linea: #dce3de;
  --foco: #0f685d;
  --senal: #e59a54;
  --firma: #9ec2b9;
  --borde-control: #768f89;
}

/* Paleta 3: Índigo Clínico, Esmeralda y Alabastro (Inspirada en Doctolib y Kry) */
html[data-paleta="indigo-salvia"] {
  --tinta: #151e34;
  --tinta-suave: #4e5a75;
  --profundo: #132352;
  --profundo-2: #2447c2;
  --papel: #f6f8fc;
  --bruma: #ecf0f9;
  --menta: #e3f3ef;
  --menta-viva: #6ee7b7;
  --verde: #0d746b;
  --linea: #d8e0ef;
  --foco: #2447c2;
  --senal: #38bdf8;
  --firma: #b2c0de;
  --borde-control: #8392b0;
}

/* Paleta 4: Azul Noche, Cobre Suave y Arena (Cercanía boutique y calidez humana) */
html[data-paleta="noche-arena"] {
  --tinta: #1d2433;
  --tinta-suave: #596070;
  --profundo: #182949;
  --profundo-2: #284880;
  --papel: #faf5ee;
  --bruma: #f2ece4;
  --menta: #e5ebf5;
  --menta-viva: #e7a977;
  --verde: #284880;
  --linea: #e3d9cc;
  --foco: #284880;
  --senal: #de9151;
  --firma: #b0bed6;
  --borde-control: #858d9e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.55 var(--texto); }
img, svg { max-width: 100%; }
a { color: var(--foco); text-underline-offset: .18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--titular); line-height: 1.08; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 6.2vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.35rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 66ch; }
.sutil { color: var(--tinta-suave); }
.pequeno { font-size: .9rem; }
.numeros { font-variant-numeric: tabular-nums; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hora, .fila-hora, .necesidad, .pro { position: relative; }
body { overflow-x: clip; }
.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.estrecho { width: min(100% - 2rem, 42rem); margin-inline: auto; }
main { padding-block: 2rem 4rem; }
body.portada-cuerpo main { padding: 0; }

/* ------------------------------------------------------------- Cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papel) 88%, var(--blanco));
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 85%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(27, 34, 56, .04), 0 8px 24px -16px rgba(27, 34, 56, .08); }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 4.4rem; }
.marca { display: inline-flex; align-items: center; gap: .65rem; font: 700 1.25rem/1 var(--titular); letter-spacing: -.02em;
  color: var(--tinta); text-decoration: none; }
.marca img { width: 2.55rem; height: 2.55rem; flex: none; border-radius: .35rem; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--profundo) 22%, transparent)); }
.marca-texto { display: grid; min-width: 0; gap: .2rem; }
.marca-nombre { line-height: 1.1; color: var(--profundo); }
.marca-descriptor { font: 500 .73rem/1.2 var(--texto); letter-spacing: .01em; color: var(--tinta-suave); }
.cabecera nav { display: flex; align-items: center; gap: .25rem .6rem; flex-wrap: wrap; justify-content: flex-end; }
.cabecera nav a:not(.boton) { color: var(--tinta); text-decoration: none; padding: .42rem .75rem; border-radius: 999px; font-size: .96rem; font-weight: 600; transition: background-color .15s, color .15s; }
.cabecera nav a:not(.boton):hover { background: var(--menta); color: var(--profundo); text-decoration: none; }
.cabecera nav .boton { padding: .55rem 1.1rem; min-height: 2.75rem; border-radius: 999px; color: var(--blanco); white-space: nowrap;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--verde) 45%, transparent); }
.cabecera nav .boton:hover { text-decoration: none; transform: translateY(-1px); }
.cabecera nav .solo-escritorio { display: none; }
@media (min-width: 52rem) { .cabecera nav .solo-escritorio { display: inline-flex; } }
.cabecera nav .enlace-boton { color: var(--tinta-suave); text-decoration: none; padding: .42rem .65rem; border-radius: 999px; font-weight: 600; }
.cabecera nav .enlace-boton:hover { background: var(--bruma); color: var(--tinta); }
.en-linea { display: inline; }

/* Al final de la página, no flotante: así nunca queda bajo el asistente «¿Dudas? Escríbenos». */
.etiqueta-entorno { display: block; width: fit-content; margin: .75rem auto; text-align: center; font-size: .75rem !important; background: var(--aviso-fondo);
  color: var(--aviso); border: 1px solid var(--aviso); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; }

/* ------------------------------------------------------------- Botones y formularios */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--alto-control);
  padding: .7rem 1.35rem; border-radius: .75rem; border: 2px solid var(--verde);
  background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 86%, var(--blanco)) 0%, var(--verde) 100%);
  color: var(--blanco); font: 700 1rem/1.2 var(--texto); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--verde) 35%, transparent);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.boton:hover { background: var(--profundo); border-color: var(--profundo); color: var(--blanco); transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--profundo) 45%, transparent); }
.boton.secundario { background: var(--blanco); border-color: var(--linea); color: var(--tinta); box-shadow: 0 1px 3px rgba(27, 34, 56, .05); }
.boton.secundario:hover { background: var(--bruma); border-color: var(--borde-control); color: var(--tinta); }
.boton.claro { background: linear-gradient(180deg, color-mix(in srgb, var(--menta-viva) 82%, var(--blanco)) 0%, var(--menta-viva) 100%); border-color: var(--menta-viva); color: var(--tinta);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--menta-viva) 45%, transparent); }
.boton.claro:hover { background: color-mix(in srgb, var(--menta-viva) 70%, var(--blanco)); border-color: color-mix(in srgb, var(--menta-viva) 70%, var(--blanco)); color: var(--tinta); }
.boton.borde-claro { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .45); color: var(--blanco); box-shadow: none; backdrop-filter: blur(6px); }
.boton.borde-claro:hover { border-color: var(--blanco); background: rgba(255, 255, 255, .15); }
.boton.peligro { background: transparent; color: var(--error); border-color: var(--error); box-shadow: none; }
.boton.peligro:hover { background: var(--error-fondo); }
.boton.ancho { width: 100%; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--foco); font: inherit; text-decoration: underline; cursor: pointer; }
label { display: block; font-weight: 700; margin-bottom: .3rem; }
.campo { margin-bottom: 1.1rem; }
.campo .ayuda, .ayuda { display: block; font-weight: 400; color: var(--tinta-suave); font-size: .9rem; margin-top: .2rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"],
input[type="datetime-local"], input[type="search"], input[type="password"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--alto-control); padding: .65rem .9rem; border-radius: .7rem;
  border: 1.5px solid var(--borde-control); background: var(--blanco); color: var(--tinta); font: inherit;
  box-shadow: inset 0 1px 2px rgba(27, 34, 56, .04); transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--foco); outline: 3px solid color-mix(in srgb, var(--foco) 22%, transparent); }
.fila { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .fila.dos { grid-template-columns: 1fr 1fr; } .fila.tres { grid-template-columns: repeat(3, 1fr); } }
.casilla { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; }
.casilla input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; accent-color: var(--profundo-2); flex: none; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--linea); background: var(--blanco); cursor: pointer; font-weight: 600; transition: all .15s; }
.opcion input:checked + span { background: var(--profundo); border-color: var(--profundo); color: var(--blanco); box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--profundo) 32%, transparent); }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ------------------------------------------------------------- Avisos y estados */
.aviso { border-radius: .8rem; padding: .95rem 1.15rem; margin-bottom: 1.25rem; border: 1.5px solid; box-shadow: 0 2px 8px -4px rgba(27, 34, 56, .06); }
.aviso p:last-child { margin-bottom: 0; }
.aviso.error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.aviso.ok { background: var(--exito-fondo); border-color: #166534; color: #14532d; }
.aviso.atencion { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }
.aviso.info { background: color-mix(in srgb, var(--menta) 45%, var(--blanco)); border-color: color-mix(in srgb, var(--profundo-2) 25%, var(--linea)); }
.estado { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .68rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--linea); background: var(--blanco); text-box: trim-both cap alphabetic; }
.estado.confirmada, .estado.atendida { background: #e6f4ea; border-color: #b7e1c4; color: #14532d; }
.estado.cancelada, .estado.inasistencia, .estado.expirada { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.estado.retenida { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }

/* ------------------------------------------------------------- Portada: franja */
.franja {
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--profundo-2) 55%, transparent) 0%, transparent 52%),
    radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--menta-viva) 18%, transparent) 0%, transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--profundo) 78%, #070d1f) 0%, var(--profundo) 56%, color-mix(in srgb, var(--profundo-2) 82%, var(--profundo)) 100%);
  color: #f4f6fd; padding-block: 2.75rem 3.25rem; position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.franja::after { content: ""; position: absolute; right: -10rem; top: -10rem; width: 36rem; height: 36rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 80px rgba(255, 255, 255, .03); pointer-events: none; }
.franja .contenedor { position: relative; z-index: 1; display: grid; gap: 2.25rem; }
@media (min-width: 62rem) { .franja { padding-block: 4.25rem 4.75rem; } .franja .contenedor { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 3.75rem; } }
.insignias-portada { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.15rem; max-width: none; }
.insignia-portada { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .22); color: #eef2ff;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(6px); text-box: trim-both cap alphabetic; }
.insignia-portada::before { content: "✓"; color: var(--menta-viva); font-weight: 800; }
.franja h1 { color: var(--blanco); max-width: 19ch; font-size: clamp(2.15rem, 5.6vw, 3.35rem); letter-spacing: -.025em; margin-bottom: .45em; }
.franja .bajada { font-size: 1.16rem; line-height: 1.55; color: rgba(244, 246, 253, .88); max-width: 46ch; }
.franja .acciones { margin: 1.75rem 0 0; gap: .85rem; }
.franja .urgente { margin: 1.65rem 0 0; font-size: .9rem; color: rgba(244, 246, 253, .82); position: relative; padding: .55rem .85rem .55rem 1.85rem;
  background: rgba(8, 14, 34, .32); border: 1px solid rgba(255, 255, 255, .14); border-radius: .65rem; width: fit-content; }
.franja .urgente::before { content: ""; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: .55rem; height: .55rem; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 28%, transparent); }
.franja .urgente a { color: var(--blanco); font-weight: 700; }

.tablero { background: var(--blanco); color: var(--tinta); border-radius: 1.35rem; border: 1px solid rgba(255, 255, 255, .25);
  border-top: 4px solid var(--menta-viva); padding: 1.25rem 1.25rem .75rem;
  box-shadow: 0 28px 64px -20px rgba(10, 16, 42, .55), 0 4px 16px -4px rgba(10, 16, 42, .2); }
.tablero-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .15rem .35rem .85rem; border-bottom: 1px solid var(--linea); }
.tablero-cabeza h2 { font-size: 1.15rem; margin: 0; display: inline-flex; align-items: center; gap: .5rem; color: var(--profundo); }
.tablero-cabeza h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
.tablero-cabeza a { font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--profundo-2); padding: .25rem .6rem; border-radius: 999px; background: var(--menta); }
.tablero-cabeza a:hover { background: var(--profundo-2); color: var(--blanco); }
.tablero ol { list-style: none; margin: 0; padding: .45rem 0 .15rem; display: grid; gap: .35rem; }
.fila-hora { display: grid; grid-template-columns: 4.9rem 1fr auto; gap: .25rem .95rem; align-items: center; padding: .65rem .65rem;
  border-radius: .85rem; border: 1px solid transparent; color: var(--tinta); text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .15s; }
.tablero li + li .fila-hora { border-top: 1px solid var(--bruma); }
.fila-hora:hover { background: color-mix(in srgb, var(--menta) 55%, var(--blanco)); border-color: color-mix(in srgb, var(--profundo-2) 25%, transparent); color: var(--tinta); transform: translateX(2px); }
.fila-hora .cuando { display: grid; place-items: center; line-height: 1.05; background: var(--bruma); padding: .45rem .5rem; border-radius: .65rem; }
.fila-hora:hover .cuando { background: var(--blanco); }
.fila-hora .reloj { font: 700 1.45rem/1 var(--titular); color: var(--profundo); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.fila-hora .dia { font-size: .76rem; font-weight: 600; color: var(--tinta-suave); margin-top: .2rem; }
.fila-hora .que { display: grid; min-width: 0; gap: .1rem; }
.fila-hora .que strong { font-weight: 700; color: var(--tinta); }
.fila-hora .que span { font-size: .88rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-hora .monto { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--profundo); background: var(--papel);
  padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--linea); display: flex; align-items: center; gap: .45rem; }
.fila-hora .monto::after { content: ""; width: .45rem; height: .45rem; border-top: 2px solid var(--verde); border-right: 2px solid var(--verde); transform: rotate(45deg); }
.hoy::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--senal); margin-right: .3rem; vertical-align: .1em; }

/* ------------------------------------------------------------- Secciones */
.seccion { padding-block: 3.5rem; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 2rem; margin-bottom: 1.85rem; }
.seccion-cabeza h2 { margin: 0; color: var(--tinta); }
.seccion-cabeza p { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; }
@media (min-width: 62rem) { .seccion { padding-block: 4.75rem; } }

.necesidades { display: grid; gap: .95rem; container-type: inline-size; }
@media (min-width: 40rem) { .necesidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .necesidades { grid-template-columns: repeat(3, 1fr); } }
.necesidad { display: grid; gap: .45rem; align-content: space-between; padding: 1.3rem 1.35rem; border-radius: var(--r-hoja);
  border: 1.5px solid var(--linea); border-top: 3.5px solid var(--profundo-2);
  background: var(--blanco); color: var(--tinta); text-decoration: none;
  box-shadow: 0 6px 20px -12px rgba(27, 34, 56, .1);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.necesidad:hover { border-color: var(--profundo-2); color: var(--tinta); transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(30, 47, 122, .18); }
.necesidad[aria-current="true"] { border-color: var(--profundo); background: color-mix(in srgb, var(--menta) 32%, var(--blanco)); box-shadow: inset 0 0 0 1px var(--profundo); }
.necesidad strong { font: 700 1.22rem/1.22 var(--titular); letter-spacing: -.015em; color: var(--profundo); }
.necesidad .ayuda { margin: 0; color: var(--tinta-suave); font-size: .96rem; line-height: 1.45; }
.necesidad .meta { font-size: .86rem; color: var(--profundo); font-weight: 700; margin-top: .5rem;
  background: color-mix(in srgb, var(--menta) 65%, var(--blanco)); padding: .3rem .75rem; border-radius: 999px;
  width: fit-content; display: inline-flex; align-items: center; gap: .35rem; }
.necesidad .meta::after { content: "→"; font-weight: 700; transition: transform .15s; }
.necesidad:hover .meta::after { transform: translateX(3px); }

/* Tarjeta de profesional con sus atenciones y horas */
.equipo-lista { display: grid; gap: 1.5rem; }
@media (min-width: 70rem) { .equipo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pro { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 1.35rem;
  box-shadow: 0 12px 32px -14px rgba(27, 34, 56, .12); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.pro:hover { border-color: color-mix(in srgb, var(--profundo-2) 38%, var(--linea)); box-shadow: 0 18px 40px -16px rgba(30, 47, 122, .16); }
.pro-cabeza { display: grid; grid-template-columns: auto 1fr; gap: 1.05rem; align-items: center; padding: 1.35rem 1.4rem 1.15rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--menta) 42%, var(--blanco)) 0%, var(--blanco) 100%);
  border-bottom: 1px solid var(--bruma); }
.avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--profundo) 0%, var(--profundo-2) 100%);
  color: var(--blanco); font: 700 1.18rem/1 var(--titular); letter-spacing: -.02em;
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4.5px var(--menta), 0 6px 14px -4px rgba(30, 47, 122, .25); }
.avatar.grande { width: 5.25rem; height: 5.25rem; font-size: 1.75rem; }
img.avatar { object-fit: cover; padding: 0; background: var(--menta); }
.foto-fila { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pro-cabeza h3 { margin: 0; font-size: 1.3rem; color: var(--tinta); }
.pro-cabeza h3 a { color: inherit; text-decoration: none; }
.pro-cabeza h3 a:hover { color: var(--profundo-2); text-decoration: underline; }
.pro-cabeza p { margin: .18rem 0 0; font-size: .93rem; color: var(--tinta-suave); line-height: 1.4; }
.verificado { display: inline-flex; align-items: center; gap: .38rem; color: #14532d; background: #e6f4ea;
  border: 1px solid #b7e1c4; border-radius: 999px; padding: .18rem .65rem; font-size: .8rem; font-weight: 700;
  margin-top: .35rem; text-box: trim-both cap alphabetic; }
.verificado::before { content: ""; width: .6rem; height: .35rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-.08rem); }
.servicio { border-top: 1px solid var(--bruma); padding: 1.15rem 1.4rem 1.3rem; }
.servicio-cabeza { display: flex; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; flex-wrap: wrap; }
.servicio-cabeza h4 { font-size: 1.08rem; margin: 0; color: var(--tinta); }
.precio-linea { font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--papel); padding: .22rem .65rem; border-radius: 999px; border: 1px solid var(--linea); }
.precio-linea strong { font: 700 1.18rem/1 var(--titular); color: var(--profundo); }
.servicio .detalle { margin: .4rem 0 .85rem; font-size: .93rem; color: var(--tinta-suave); line-height: 1.5; }
.horas-fila { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .1rem 0 .3rem; margin: 0; list-style: none; }
.horas-fila li { flex: none; scroll-snap-align: start; }
@media (min-width: 40rem) { .horas-fila { flex-wrap: wrap; overflow: visible; } }
.horas-fila .mas { display: inline-flex; align-items: center; min-height: 3.4rem; padding: 0 .95rem; font-weight: 700; font-size: .92rem;
  border-radius: .7rem; background: var(--bruma); color: var(--profundo); text-decoration: none; white-space: nowrap; transition: background .15s; }
.horas-fila .mas:hover { background: var(--menta); }
.sin-horas { margin: 0; color: var(--tinta-suave); font-size: .93rem; background: var(--papel); padding: .65rem .9rem; border-radius: .65rem; border: 1px dashed var(--linea); }

/* La hora: cifra grande, tocable */
.hora { display: grid; place-items: center; min-width: 4.75rem; min-height: 3.45rem; padding: .4rem .65rem; border: 1.5px solid color-mix(in srgb, var(--verde) 65%, var(--linea));
  border-radius: .75rem; background: linear-gradient(180deg, var(--blanco) 0%, color-mix(in srgb, var(--menta) 32%, var(--blanco)) 100%); color: var(--tinta); text-decoration: none; line-height: 1.05; text-align: center;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--profundo) 7%, transparent);
  transition: background .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s; }
.hora .cuando { font-size: .75rem; font-weight: 600; color: var(--tinta-suave); }
.hora .reloj { font: 700 1.28rem/1.05 var(--titular); color: var(--profundo); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hora:hover, .hora:focus-visible { background: var(--profundo-2); border-color: var(--profundo-2); color: var(--blanco);
  transform: translateY(-1px); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--profundo-2) 42%, transparent); }
.hora:hover .cuando, .hora:focus-visible .cuando { color: rgba(255, 255, 255, .82); }
.hora:hover .reloj, .hora:focus-visible .reloj { color: var(--blanco); }
.hora .reloj.chico { font-size: 1rem; }
button.hora { font: inherit; cursor: pointer; width: 100%; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .55rem; padding: 0; margin: 0; list-style: none; }

/* Cómo funciona (secuencia real: numerada) */
.pasos-portada { display: grid; gap: 1.15rem; padding: 0; margin: 0; list-style: none; counter-reset: paso; }
@media (min-width: 52rem) { .pasos-portada { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pasos-portada li { counter-increment: paso; padding: 1.5rem; border-radius: var(--r-hoja); background: var(--blanco);
  border: 1.5px solid var(--linea); box-shadow: 0 8px 24px -14px rgba(27, 34, 56, .09); }
.pasos-portada li::before { content: counter(paso); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--profundo) 0%, var(--profundo-2) 100%); color: var(--blanco);
  font: 700 1.1rem/1 var(--titular); margin-bottom: 1rem; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--profundo) 35%, transparent); }
.pasos-portada h3 { margin-bottom: .35rem; color: var(--profundo); }
.pasos-portada p { margin: 0; color: var(--tinta-suave); }

.ventajas { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .ventajas { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.ventajas div { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja); padding: 1.35rem; box-shadow: 0 6px 20px -12px rgba(27, 34, 56, .08); }
.ventajas h3 { color: var(--profundo); margin-bottom: .4rem; }
@media (min-width: 52rem) { .ventajas.cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .ventajas.cuatro { grid-template-columns: repeat(4, 1fr); } }
.ventajas p { color: var(--tinta-suave); margin: 0; font-size: .96rem; }
.seccion-cabeza p { color: var(--tinta-suave); }

.precios { width: 100%; border-collapse: collapse; background: var(--blanco); }
.precios th, .precios td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--bruma); vertical-align: middle; }
.precios th { font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; color: var(--profundo); font-weight: 700; background: color-mix(in srgb, var(--menta) 55%, var(--blanco)); }
.precios tbody tr:hover { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); }
.precios td.num, .precios th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precios td.num { font-weight: 700; color: var(--profundo); font-size: 1.05rem; }
.precios tr:last-child td { border-bottom: 0; }

.faq { max-width: 52rem; display: grid; gap: .65rem; }
.faq details { border: 1.5px solid var(--linea); border-radius: .9rem; background: var(--blanco); margin: 0; padding: 0 1.2rem;
  box-shadow: 0 2px 8px -4px rgba(27, 34, 56, .05); transition: border-color .15s, box-shadow .15s; }
.faq details[open] { border-color: var(--profundo-2); box-shadow: 0 8px 22px -12px rgba(30, 47, 122, .14); }
.faq summary { padding: 1.1rem 0; font: 700 1.08rem/1.3 var(--titular); color: var(--tinta); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--menta); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--profundo); flex: none; }
.faq details[open] summary::after { content: "–"; background: var(--profundo-2); color: var(--blanco); }
.faq details > div { padding: 0 0 1.15rem; color: var(--tinta-suave); border-top: 1px solid var(--bruma); padding-top: .85rem; }

/* ------------------------------------------------------------- Pie */
.pie { background: linear-gradient(180deg, var(--profundo) 0%, color-mix(in srgb, var(--profundo) 74%, #070d1f) 100%); color: rgba(244, 246, 253, .85); padding-block: 3.5rem 2.25rem; font-size: .95rem; }
.pie .contenedor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.pie .contenedor > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 52rem) { .pie .contenedor { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pie a { color: var(--blanco); }
.pie h2 { font-size: 1rem; color: var(--menta-viva); margin-bottom: .75rem; letter-spacing: .01em; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie .marca { color: var(--blanco); margin-bottom: .75rem; }
.pie .marca-nombre { color: var(--blanco); }
.pie .marca-descriptor { color: rgba(244, 246, 253, .72); }
.pie .legal-pie { grid-column: 1 / -1; border-top: 1px solid var(--linea-oscura); padding-top: 1.25rem; font-size: .85rem; color: rgba(244, 246, 253, .65); }

/* ------------------------------------------------------------- Reserva */
.paso-reserva { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .paso-reserva { grid-template-columns: minmax(0, 1fr) 22.5rem; align-items: start; gap: 3rem; } .paso-reserva > aside { position: sticky; top: 5.5rem; order: 2; } }
.resumen { background: var(--blanco); border: 1.5px solid var(--linea); border-top: 4px solid var(--profundo-2); border-radius: var(--r-hoja); padding: 1.35rem; margin-bottom: 1.5rem; box-shadow: var(--sombra); }
.resumen-pro { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bruma); }
.resumen-pro strong { display: block; font: 700 1.12rem/1.2 var(--titular); color: var(--profundo); }
.resumen dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.resumen dt { color: var(--tinta-suave); font-size: .92rem; }
.resumen dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.resumen .total { font: 700 1.55rem/1.1 var(--titular); color: var(--profundo); font-variant-numeric: tabular-nums; }
.pasos { display: flex; gap: .5rem; padding: 0; margin: 0 0 1.75rem; list-style: none; font-size: .9rem; color: var(--tinta-suave); }
.pasos li { flex: 1; border-top: 3.5px solid var(--linea); padding-top: .45rem; }
.pasos li[aria-current="step"] { border-color: var(--profundo-2); color: var(--profundo); font-weight: 700; }
.pasos li.hecho { border-color: #16a34a; color: var(--tinta); }
.dias { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.25rem; }
.dias a { flex: none; display: grid; place-items: center; min-width: 4.5rem; min-height: 4.1rem; padding: .4rem .55rem; border: 1.5px solid var(--linea);
  border-radius: .75rem; text-decoration: none; color: var(--tinta); background: var(--blanco); line-height: 1.1; transition: all .15s; }
.dias a:hover { border-color: var(--profundo-2); background: var(--bruma); }
.dias a .n { font-size: .78rem; font-weight: 600; color: var(--tinta-suave); }
.dias a strong { font: 700 1.32rem/1.1 var(--titular); }
.dias a[aria-current="date"] { background: var(--profundo); border-color: var(--profundo); color: var(--blanco); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--profundo) 35%, transparent); }
.dias a[aria-current="date"] .n { color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------- Perfil público */
.perfil-cabeza { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--menta) 40%, var(--blanco)) 0%, var(--blanco) 100%);
  border: 1.5px solid var(--linea); border-top: 4px solid var(--profundo-2); border-radius: var(--r-hoja); padding: 1.45rem; box-shadow: var(--sombra); }
.perfil-cabeza h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0; color: var(--profundo); }

/* ------------------------------------------------------------- Comunes */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; align-items: center; }
.bloque { border-top: 1px solid var(--linea); padding-top: 1.5rem; margin-top: 1.5rem; }
details { border: 1.5px solid var(--linea); border-radius: .8rem; background: var(--blanco); margin-bottom: .75rem; transition: border-color .15s, box-shadow .15s; }
details[open] { border-color: color-mix(in srgb, var(--profundo-2) 45%, var(--linea)); box-shadow: 0 6px 18px -10px rgba(30, 47, 122, .12); }
details > summary { cursor: pointer; padding: .85rem 1.05rem; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--tinta); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--menta); color: var(--profundo); font-weight: 700; font-size: 1.05rem; line-height: 1; flex: none; transition: background-color .15s, color .15s; }
details[open] > summary::after { content: "–"; background: var(--profundo-2); color: var(--blanco); }
details > div { padding: 0 1.05rem 1.05rem; border-top: 1px solid var(--bruma); padding-top: .85rem; }
.legal p { white-space: pre-line; }
.sala { display: grid; gap: 1rem; }
.video { width: 100%; aspect-ratio: 3 / 4; border: 0; border-radius: var(--r-hoja); background: var(--tinta); }
@media (min-width: 48rem) { .video { aspect-ratio: 16 / 9; } }
.mt { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.normal { font-weight: 400; }

/* ------------------------------------------------------------- Equipo */
.equipo main { padding-top: 1.75rem; }
.equipo .cabecera { background: color-mix(in srgb, var(--blanco) 92%, var(--papel)); }
.tabla { width: 100%; border-collapse: collapse; font-size: .96rem; background: var(--blanco); }
.tabla th, .tabla td { text-align: left; padding: .85rem .9rem; border-bottom: 1px solid var(--bruma); vertical-align: middle; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); }
.tabla th { font-weight: 700; color: var(--profundo); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; background: color-mix(in srgb, var(--menta) 52%, var(--blanco)); }
.tabla td.num { font-variant-numeric: tabular-nums; text-align: right; }
.desplazable { overflow-x: auto; border: 1.5px solid var(--linea); border-radius: .95rem; background: var(--blanco); box-shadow: 0 8px 24px -14px rgba(27, 34, 56, .09); }
.desplazable .tabla tr:last-child td { border-bottom: 0; }
.lista-citas { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.cita { display: grid; grid-template-columns: 4.8rem 1fr; gap: .3rem 1.1rem; align-items: start; background: var(--blanco);
  border: 1.5px solid var(--linea); border-left: 4px solid var(--profundo-2); border-radius: .95rem; padding: 1.1rem 1.25rem;
  box-shadow: 0 6px 20px -12px rgba(27, 34, 56, .09); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cita:hover { border-color: color-mix(in srgb, var(--profundo-2) 45%, var(--linea)); box-shadow: 0 12px 28px -14px rgba(30, 47, 122, .15); }
.cita .reloj { font: 700 1.48rem/1.05 var(--titular); color: var(--profundo); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: var(--bruma); padding: .45rem .5rem; border-radius: .65rem; text-align: center; }
.cita .acciones { margin: .6rem 0 0; grid-column: 2; }
.cita.ahora { border-color: var(--profundo-2); border-left: 5px solid #1f8a5b; background: linear-gradient(90deg, color-mix(in srgb, var(--exito-fondo) 45%, var(--blanco)) 0%, var(--blanco) 45%);
  box-shadow: 0 12px 28px -12px rgba(30, 47, 122, .18); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.cifra { background: var(--blanco); border: 1.5px solid var(--linea); border-top: 3.5px solid var(--profundo-2); border-radius: .95rem; padding: 1.1rem 1.2rem;
  box-shadow: 0 6px 18px -10px rgba(27, 34, 56, .08); display: flex; flex-direction: column; justify-content: space-between; }
.cifra dt { color: var(--tinta-suave); font-size: .86rem; font-weight: 600; line-height: 1.3; }
.cifra dd { margin: .35rem 0 0; font: 700 1.75rem/1.08 var(--titular); color: var(--profundo); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.periodos { display: inline-flex; gap: .35rem; margin-bottom: 1.6rem; flex-wrap: wrap; background: var(--bruma); padding: .3rem; border-radius: 999px; border: 1px solid var(--linea); }
.periodos a, .areas a { padding: .42rem 1rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; color: var(--tinta-suave); background: transparent; font-weight: 700; font-size: .92rem; transition: all .15s; }
.areas a { border-color: var(--linea); background: var(--blanco); color: var(--tinta); }
.periodos a:hover, .areas a:hover { color: var(--profundo); background: var(--blanco); }
.periodos a[aria-current="true"], .areas a[aria-current="true"] { background: var(--profundo); color: var(--blanco); border-color: var(--profundo); box-shadow: 0 2px 8px -2px rgba(30, 47, 122, .3); }
.areas { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; }
.consulta { display: grid; gap: 1.65rem; }
@media (min-width: 64rem) {
  .consulta { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .consulta .columna-video { position: sticky; top: 5rem; }
  .consulta .video { aspect-ratio: 4 / 3; }
}
.columna-ficha { display: grid; gap: 1.1rem; }
.registro { background: var(--papel); border: 1.5px solid var(--linea); border-left: 4px solid var(--profundo-2); border-radius: .85rem; padding: 1.1rem 1.2rem; margin-bottom: .75rem; }
.registro header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin-bottom: .65rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.registro .seccion { padding: 0; margin-bottom: .75rem; border: 0; }
.registro .seccion h4 { margin: 0 0 .18rem; font: 700 .88rem/1.3 var(--texto); text-transform: uppercase; letter-spacing: .03em; color: var(--profundo); }
.registro .seccion p { white-space: pre-wrap; margin: 0; }
.firmado { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: #14532d; background: #e6f4ea; border: 1px solid #b7e1c4; padding: .2rem .65rem; border-radius: 999px; margin-top: .4rem; }
.firmado::before { content: "✓"; font-weight: 800; }
.antecedentes { display: grid; gap: .45rem; padding: 0; list-style: none; margin: 0 0 1rem; }
.antecedentes li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .5rem .75rem; background: var(--papel); border: 1px solid var(--linea); border-radius: .65rem; }
.antecedentes .tipo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .55rem; border-radius: 999px; background: var(--menta); color: var(--profundo); }
.antecedentes .alergia { background: var(--error-fondo); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); font-weight: 700; }

/* Compatibilidad con plantillas previas */
.oferta { display: grid; gap: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .cabecera, .pie, .acciones, form, .etiqueta-entorno { display: none !important; } }

/* Ajustes de celular */
.marca { white-space: normal; max-width: 100%; }
@media (max-width: 40rem) {
  .cabecera nav { flex-wrap: wrap; min-width: 0; max-width: 100%; gap: .75rem; }
  .cabecera nav .boton { padding: .5rem .8rem; font-size: .95rem; }
  .marca { font-size: 1.1rem; }
  .fila-hora { grid-template-columns: 4.1rem minmax(0, 1fr); gap: .2rem .75rem; }
  .fila-hora .que strong { white-space: normal; line-height: 1.25; }
  .fila-hora .monto { grid-column: 2; }
  .fila-hora .monto::after { display: none; }
  .hora .cuando { font-size: .875rem; }
  /* El asistente flota: se deja espacio al final para que no tape el último contenido; la etiqueta de entorno no flota. */
  body { padding-bottom: 5rem; }
  .franja .acciones .boton { flex: 1 1 auto; }
}

/* Franja de emergencia (páginas interiores) */
.urgencia { background: var(--profundo); color: rgba(244, 246, 253, .88); font-size: .9rem; }
.urgencia .contenedor { padding-block: .5rem; position: relative; padding-left: 1.1rem; box-sizing: border-box; }
.urgencia .contenedor::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--senal); }
.urgencia a { color: var(--blanco); }
.paso-reserva h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); }

/* Área del equipo: más densa y sin el pie de pacientes */
.equipo h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--profundo); }
.equipo h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); color: var(--profundo); }
.equipo .pie { display: none; }
.tabla th.num { text-align: right; }
.tabla input { min-height: 2.6rem; width: 8rem; }
.pie .legal-pie { max-width: none; }
.paso-reserva > *, .franja .contenedor > *, .equipo-lista > *, .consulta > * { min-width: 0; }
.cabecera .contenedor:has(.nav-equipo) { align-items: center; padding-block: .6rem; }
.nav-equipo { display: flex; flex-direction: column; align-items: flex-end; gap: .38rem; flex: 1 1 auto; min-width: 0; }
.nav-grupo-clinico, .nav-grupo-gestion { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .22rem .38rem; }
.nav-grupo-clinico { background: var(--bruma); padding: .25rem .35rem; border-radius: 999px; border: 1px solid var(--linea); }
.nav-grupo-clinico a { padding: .32rem .78rem; border-radius: 999px; text-decoration: none; color: var(--tinta); font-weight: 700; font-size: .92rem; transition: background-color .15s, color .15s; }
.nav-grupo-clinico a:hover { background: var(--menta); color: var(--profundo); }
.nav-grupo-clinico a[aria-current="page"] { background: var(--profundo); color: var(--blanco); box-shadow: 0 2px 6px rgba(30, 47, 122, .25); }
.nav-grupo-gestion { padding-top: .2rem; font-size: .84rem; gap: .18rem .55rem; }
.nav-grupo-gestion a { color: var(--tinta-suave); text-decoration: none; padding: .2rem .55rem; border-radius: 999px; font-weight: 600; transition: all .15s; }
.nav-grupo-gestion a:hover { color: var(--profundo); background: var(--bruma); text-decoration: none; }
.nav-grupo-gestion a[aria-current="page"] { color: var(--profundo); font-weight: 700; background: var(--menta); }
@media (max-width: 58rem) {
  .cabecera .contenedor:has(.nav-equipo) { flex-wrap: wrap; padding-top: .5rem; }
  .nav-equipo { width: 100%; align-items: stretch; }
  .nav-grupo-clinico, .nav-grupo-gestion { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: .25rem; border-radius: .65rem; }
  .nav-equipo a, .nav-equipo form { flex: none; }
}
.horas-primero > aside { order: 2; }
/* Foco visible sobre fondos azules (el azul de foco no contrasta con ellos). */
.franja :focus-visible, .pie :focus-visible, .urgencia :focus-visible { outline-color: var(--menta-viva); }
/* Celulares angostos: conservar el nombre; la navegación puede pasar abajo. */
@media (max-width: 26rem) {
  .cabecera .contenedor { gap: .5rem; }
  .cabecera nav { gap: .25rem .75rem; flex-wrap: wrap; }
  .cabecera nav .sin-chico { display: none; }
}
@media (max-width: 23rem) { .cabecera nav a:not(.boton) { font-size: .95rem; } .cabecera nav .boton { padding-inline: .8rem; } }
.preformateado { white-space: pre-line; background: var(--bruma); border-radius: var(--r-control); padding: .75rem 1rem; }
/* Operación del equipo: elegir atención, hora y filtros. */
.estrecho-medio { max-width: 46rem; }
.lista-opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.opcion-enlace { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1.5px solid var(--linea); border-radius: var(--r-control);
  background: var(--blanco); color: var(--tinta); text-decoration: none; min-height: 3rem; }
.opcion-enlace:hover, .opcion-enlace:focus-visible { border-color: var(--verde); background: var(--bruma); }
.dia-titulo { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
button.hora { font: inherit; cursor: pointer; width: 100%; }
.filtro { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.filtro .campo { margin-bottom: 0; min-width: 14rem; }
/* Ficha: cabecera clínica fija (alergias primero), barra rápida y secciones encapsuladas. */
.cabecera-clinica { display: grid; gap: .5rem; padding: 1.05rem 1.2rem; margin: 0; border-radius: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--menta) 48%, var(--blanco)) 0%, var(--blanco) 100%);
  border: 1.5px solid color-mix(in srgb, var(--profundo-2) 28%, var(--linea)); font-size: .94rem;
  box-shadow: 0 6px 18px -12px rgba(30, 47, 122, .12); }
.cabecera-clinica > div { padding: .35rem .65rem; border-radius: .55rem; background: rgba(255, 255, 255, .75); border: 1px solid var(--bruma); }
.cabecera-clinica .alergias { color: var(--error); background: var(--error-fondo); border: 1.5px solid color-mix(in srgb, var(--error) 35%, transparent); padding: .45rem .75rem; border-radius: .6rem; font-weight: 600; }
.cabecera-clinica .alergias.sin { color: var(--tinta-suave); background: rgba(255, 255, 255, .75); border: 1px solid var(--bruma); font-weight: 400; }
.accesos-portal, .accesos-ficha { display: flex; flex-wrap: wrap; gap: .42rem; margin: .65rem 0 1.25rem; }
.accesos-ficha { position: sticky; top: 4.55rem; z-index: 12; margin: 0; padding: .55rem .65rem; border-radius: .9rem;
  background: color-mix(in srgb, var(--papel) 90%, var(--blanco)); border: 1px solid var(--linea);
  backdrop-filter: saturate(1.3) blur(10px); box-shadow: 0 8px 20px -12px rgba(27, 34, 56, .12); }
.chip-acceso, .accesos-portal a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .28rem .82rem; border-radius: 999px;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font-size: .86rem; font-weight: 700;
  text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s; text-box: trim-both cap alphabetic; }
.chip-acceso:hover, .chip-acceso:focus-visible, .accesos-portal a:hover, .accesos-portal a:focus-visible { border-color: var(--profundo-2); background: var(--menta); color: var(--profundo); transform: translateY(-1px); }
.chip-acceso.principal { border-color: var(--profundo-2); background: var(--profundo); color: var(--blanco); }
.chip-acceso.principal:hover { background: var(--profundo-2); color: var(--blanco); }
.tarjeta-destacada { background: var(--blanco); border: 1.5px solid var(--profundo-2); border-top: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja); padding: 1.3rem 1.35rem; box-shadow: var(--sombra); }
.tarjeta-destacada h2:first-child, .tarjeta-destacada h3:first-child { margin-top: 0; color: var(--profundo); }
.tarjeta-secundaria { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 1.2rem 1.3rem; }
.tarjeta-secundaria h2:first-child, .tarjeta-secundaria h3:first-child { margin-top: 0; }
.tarjeta-portal { background: var(--blanco); border: 1.5px solid var(--linea); border-top: 3.5px solid var(--profundo-2); border-radius: var(--r-hoja); padding: 1.25rem 1.35rem;
  box-shadow: 0 8px 22px -12px rgba(21, 31, 58, .1); }
.tarjeta-portal h2:first-child, .tarjeta-portal h3:first-child { margin-top: 0; color: var(--profundo); }
.grilla-portal { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .grilla-portal { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.mt-corto { margin-top: .5rem; margin-bottom: 0; }
.tarjeta-paso { background: var(--blanco); border: 1.5px solid var(--linea); border-top: 3.5px solid var(--profundo-2); border-radius: 1.1rem; padding: 1.25rem 1.35rem;
  box-shadow: 0 8px 24px -14px rgba(27, 34, 56, .1); }
.tarjeta-paso h2:first-child { margin-top: 0; font-size: 1.22rem; color: var(--profundo); }
.tarjeta-paso.confirmada { background: var(--exito-fondo); border-color: #1f8a5b; border-top-width: 3.5px; padding: .9rem 1.15rem; }
.tarjeta-paso.confirmada h2:first-child { font-size: 1.05rem; margin-bottom: .25rem; color: #14532d; }
.tarjeta-paso.confirmada .aviso.ok { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.seccion-destacada { background: var(--blanco); border: 1.5px solid var(--linea); border-top: 4px solid var(--profundo-2);
  border-radius: 1.1rem; padding: 1.25rem 1.35rem; box-shadow: 0 10px 26px -14px rgba(21, 31, 58, .12); }
.seccion-destacada > h3:first-child { margin-top: 0; color: var(--profundo); }
.columna-ficha > section:not(.cabecera-clinica):not(.seccion-destacada) { background: var(--blanco); border: 1.5px solid var(--linea);
  border-radius: 1.05rem; padding: 1.2rem 1.3rem; box-shadow: 0 6px 20px -14px rgba(27, 34, 56, .08); }
.columna-ficha > section[aria-labelledby="h-paciente"] {
  border-top: 4px solid var(--profundo);
  background: linear-gradient(180deg, color-mix(in srgb, var(--menta) 32%, var(--blanco)) 0%, var(--blanco) 100%);
}
.columna-ficha > section:not(.cabecera-clinica):not(.seccion-destacada) > h2:first-child,
.columna-ficha > section:not(.cabecera-clinica):not(.seccion-destacada) > h3:first-child { margin-top: 0; color: var(--profundo); }
.grafico { margin: 0 0 .75rem; color: var(--verde); }
.grafico svg { width: 100%; max-width: 22rem; height: auto; display: block; }
.mb { margin-bottom: 1rem; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
/* Avisos de guardado sin recarga (atención y ficha). */
.estado-flotante { position: fixed; z-index: 30; left: 50%; bottom: 1rem; transform: translateX(-50%); max-width: min(92vw, 34rem);
  margin: 0; padding: .7rem 1rem; border-radius: var(--r-control); background: var(--tinta); color: var(--blanco);
  box-shadow: var(--sombra); font-size: .95rem; }
.estado-flotante[data-tipo="error"] { background: var(--error); }
.autoguardado { align-self: center; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* "Saltar al contenido": invisible hasta recibir el foco del teclado. */
.saltar:focus { position: fixed; z-index: 40; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto;
  padding: .75rem 1rem; background: var(--menta-viva); color: var(--tinta); border-radius: var(--r-control); font-weight: 700; }
main:focus { outline: none; }
.version-anterior { border-left: 3px solid var(--linea); padding-left: .85rem; margin-bottom: 1rem; }
.error-campo { display: block; color: var(--error); font-size: .92rem; font-weight: 700; margin-top: .3rem; }
[aria-invalid="true"] { border-color: var(--error) !important; border-width: 2px; }
.espera { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.opciones.escala { flex-wrap: wrap; }
.opciones.numeros .opcion span { min-width: 2.75rem; justify-content: center; }
.boton.chico { min-height: 2.75rem; padding: .4rem .8rem; font-size: .92rem; }
/* Nota en vivo: texto propuesto por la IA y sugerencias en secciones que el profesional ya escribió. */
textarea.escrito-ia { border-left: 4px solid var(--verde); background: var(--bruma); }
.sugerencia-ia { margin-top: .5rem; padding: .7rem .85rem; border: 1.5px dashed var(--verde); border-radius: var(--r-control); background: var(--blanco); }
.sugerencia-ia .texto { white-space: pre-line; margin: .3rem 0 .5rem; }
.corto { width: 5rem; min-height: 2.5rem; }

/* Prueba de cámara y micrófono */
.probar [hidden] { display: none !important; }
.pruebas { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.pruebas > li { border: 1.5px solid var(--borde-control); border-radius: 14px; padding: .9rem 1rem; background: var(--blanco); }
.pruebas h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.pruebas .estado { margin: 0; }
.pruebas > li[data-estado="ok"] { border-color: #1d7a46; }
.pruebas > li[data-estado="ok"] .estado::before { content: "✓ "; color: #1d7a46; font-weight: 700; }
.pruebas > li[data-estado="aviso"] { border-color: #a35d00; }
.pruebas > li[data-estado="aviso"] .estado::before { content: "! "; color: #a35d00; font-weight: 700; }
.pruebas > li[data-estado="error"] { border-color: #b3261e; }
.pruebas > li[data-estado="error"] .estado::before { content: "✕ "; color: #b3261e; font-weight: 700; }
.vista-camara { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #0f1b3d; margin-top: .6rem; transform: scaleX(-1); }
.nivel { display: grid; gap: .35rem; margin: .6rem 0 0; }
.nivel meter { width: 100%; height: 1.1rem; }

/* Sobre el centro */
.sobre .entrada { font-size: 1.15rem; }
/* Sólo en «Sobre el centro»: no debe heredar la lista de profesionales con horas (revisión de diseño, 9-oct). */
.equipo-sobre { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.equipo-sobre a { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.05rem; border: 1.5px solid var(--linea);
  border-radius: 1rem; text-decoration: none; color: inherit; background: var(--blanco); min-height: 44px;
  box-shadow: 0 4px 14px -8px rgba(27, 34, 56, .08); transition: border-color .15s, transform .15s; }
.equipo-sobre a:hover { border-color: var(--profundo-2); transform: translateY(-1px); }
.equipo-sobre a > span { display: grid; }

/* Motivos de consulta */
.migas { font-size: .9rem; margin: 1rem 0 .5rem; color: var(--texto-suave, #4f5b73); }
.migas a { color: inherit; }
.motivo .entrada { font-size: 1.15rem; }
.texto-motivo h2 { margin-top: 1.6rem; color: var(--profundo); }
.texto-motivo ul, .texto-motivo ol { padding-left: 1.2rem; }
.texto-motivo li { margin: .35rem 0; }
.autor { display: flex; gap: .9rem; align-items: center; margin: 1.6rem 0 1rem; padding: 1rem 1.15rem;
  border: 1.5px solid var(--linea); border-left: 4px solid var(--profundo-2); border-radius: 1rem; background: var(--blanco);
  box-shadow: 0 4px 16px -10px rgba(27, 34, 56, .08); }
.autor p { margin: 0; }
.lista-motivos { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lista-motivos a { display: grid; gap: .35rem; align-content: start; padding: 1.15rem 1.2rem; border: 1.5px solid var(--linea);
  border-radius: 1.05rem; background: var(--blanco); color: inherit; text-decoration: none; min-height: 44px;
  box-shadow: 0 4px 16px -10px rgba(27, 34, 56, .08); transition: border-color .16s, transform .16s, box-shadow .16s; }
.lista-motivos a strong { color: var(--profundo); font-family: var(--titular); font-size: 1.08rem; line-height: 1.25; }
.lista-motivos a:hover { border-color: var(--profundo-2); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(30, 47, 122, .16); }
.lista-motivos a:hover strong { text-decoration: underline; }
.lista-motivos img { width: calc(100% + 2.4rem); max-width: none; height: auto; margin: -1.15rem -1.2rem .5rem;
  border-radius: 1rem 1rem 0 0; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--papel, #faf6ef); }
.ilustracion-motivo { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin: 1rem 0;
  border-radius: 1rem; background: var(--papel, #faf6ef); }

/* Logo escrito (opción A): parte firme y parte suave */
.editorial { max-width: 52rem; }
.editorial-cabecera { max-width: 44rem; margin-block: 1.5rem 2rem; }
.editorial-cabecera h1 { max-width: 22ch; line-height: 1.12; overflow-wrap: anywhere; color: var(--profundo); }
.editorial-cabecera .entrada { max-width: 65ch; font-size: 1.15rem; }
.editorial-areas { flex-wrap: wrap; overflow-x: visible; margin-block: 1rem 1.5rem; }
.editorial-areas a { white-space: normal; }
.editorial-areas a[aria-current="page"] { background: var(--profundo); color: var(--blanco); }
.lecturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lectura { padding: 1.35rem 1.45rem; border: 1.5px solid var(--linea); border-left: 4px solid var(--profundo-2); border-radius: 1.1rem;
  background: var(--blanco); box-shadow: 0 6px 20px -12px rgba(27, 34, 56, .08); }
.lectura h2 { margin-block: .35rem .55rem; font-size: clamp(1.3rem, 3vw, 1.65rem); line-height: 1.22; }
.lectura h2 a { color: var(--profundo); text-decoration: none; }
.lectura h2 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.lectura p { max-width: 68ch; margin-block: .5rem; }
.lectura-area { display: inline-block; color: var(--profundo); background: var(--menta); padding: .18rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.articulo-blog .texto-motivo { max-width: 68ch; overflow-wrap: anywhere; }
.articulo-blog .autor { align-items: flex-start; }
.articulo-blog .autor p { min-width: 0; overflow-wrap: anywhere; }
.editorial-siguiente { margin-top: 2rem; background: var(--blanco); border: 1.5px solid var(--linea); border-top: 4px solid var(--profundo-2); border-radius: var(--r-hoja); padding: 1.35rem 1.5rem; margin-bottom: 2.5rem; box-shadow: 0 6px 20px -12px rgba(27, 34, 56, .08); }
.enlaces-editoriales { display: flex; flex-wrap: wrap; gap: .5rem .85rem; list-style: none; padding: 0; }
.enlaces-editoriales a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border-radius: 999px; background: var(--bruma); color: var(--profundo); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: background .15s; }
.enlaces-editoriales a:hover { background: var(--menta); }
.enlaces-servicios { padding-block: .6rem; margin-block: 0; }

.marca-suave { font-weight: inherit; color: inherit; }


/* Reseñas y plan B */
.resenas { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; }
.resenas li { border: 1.5px solid var(--borde-control); border-radius: 14px; padding: .8rem 1rem; background: var(--blanco); }
.resenas p { margin: .2rem 0; }
.estrellas { color: #a35d00; letter-spacing: .1em; }
.plan-b { margin: .6rem 0 1rem; }

/* Agentes: asistente de dudas del sitio */
.asistente { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.asistente[hidden] { display: none; }
.asistente-boton { min-height: 2.75rem; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .24);
  background: var(--profundo); color: var(--blanco); font: 700 .92rem/1.2 var(--texto); box-shadow: var(--sombra); cursor: pointer; }
.asistente-panel { width: min(24rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 6rem)); display: flex; flex-direction: column;
  background: var(--blanco); border: 1.5px solid var(--borde-control); border-radius: var(--r-hoja); box-shadow: var(--sombra); overflow: hidden; }
.asistente-panel[hidden] { display: none; }
.asistente-cabeza { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--profundo); color: var(--blanco); }
.asistente-cabeza h2 { font-size: 1rem; margin: 0; color: var(--blanco); }
.asistente-cerrar { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: transparent; color: var(--blanco); font-size: 1.5rem; cursor: pointer; }
.asistente-aviso { margin: 0; padding: .6rem 1rem; font-size: .85rem; background: var(--aviso-fondo); color: var(--aviso); }
.asistente-aviso a { color: inherit; }
.asistente-mensajes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.asistente-msg { flex-shrink: 0; margin: 0; padding: .55rem .75rem; border-radius: .9rem; max-width: 90%; white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; }
.asistente-msg.de-asistente { background: var(--bruma); align-self: flex-start; }
.asistente-msg.de-usuario { background: var(--profundo-2); color: var(--blanco); align-self: flex-end; }
.asistente-msg.de-usuario a { color: var(--blanco); }
.asistente-msg.de-herramienta { font-size: .8rem; color: var(--tinta-suave); align-self: flex-start; }
.asistente-form { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--linea); align-items: flex-end; }
.asistente-form textarea { flex: 1; min-height: 2.75rem; resize: vertical; }
.chat-preparacion { border: 1.5px solid var(--borde-control); border-radius: var(--r-hoja); background: var(--blanco); overflow: hidden; }
.chat-preparacion .asistente-mensajes { max-height: 28rem; }
.asistente-mensajes.revision { max-height: none; border: 1px solid var(--linea); border-radius: var(--r-hoja); background: var(--blanco); }

/* Preparación de la consulta y cuestionarios */
.progreso-cuestionario { position: sticky; top: .5rem; z-index: 10; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  border: 1px solid var(--linea); border-left: 4px solid var(--profundo-2); border-radius: var(--r-control); padding: .55rem .9rem;
  margin: 1rem 0; box-shadow: 0 4px 12px -6px rgba(21, 31, 58, .12); }
.progreso-cuestionario p { margin: 0; font-weight: 700; color: var(--profundo); }
.preparacion .escala { margin: 1.25rem 0; }
.item-escala { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--r-control); padding: .9rem 1.05rem;
  margin: 0 0 .85rem; transition: border-color .15s, background-color .15s; }
.item-escala legend { font-weight: 700; padding: 0 .25rem; }
.item-escala:has(input:checked) { border-color: var(--verde); background: #fcfdff; }
.item-escala:has(input:checked) legend::after { content: " ✓"; color: var(--verde); font-weight: 700; }
.opciones-escala { display: grid; gap: .4rem; margin-top: .45rem; }
@media (min-width: 42rem) { .opciones-escala { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opciones-escala label { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .3rem .65rem;
  border: 1px solid var(--linea); border-radius: .55rem; background: var(--blanco); cursor: pointer; transition: background-color .12s, border-color .12s; }
.opciones-escala label:hover { background: var(--bruma); border-color: var(--borde-control); }
.opciones-escala label:has(input:checked) { background: var(--menta); border-color: var(--verde); font-weight: 700; color: var(--profundo); }
.opciones-escala input { width: 1.25rem; height: 1.25rem; accent-color: var(--verde); }
.escala-opcional { margin: 1rem 0; }
.opciones-preparacion { display: grid; gap: 1rem; margin-top: 1rem; }
.opcion-preparacion { border: 1.5px solid var(--borde-control); border-radius: var(--r-hoja); padding: 1rem 1.1rem; background: var(--blanco); }
.opcion-preparacion h2 { margin-top: 0; font-size: 1.15rem; }
.crisis h2 { margin-top: 0; font-size: 1.15rem; }
.preparacion-paciente { border: 1.5px solid var(--firma); border-radius: var(--r-hoja); padding: .9rem 1rem; margin: 1rem 0; background: var(--papel); }
.etiqueta-aporte { display: inline-block; font: 600 .78rem/1.3 var(--texto); background: var(--aviso-fondo); color: var(--aviso); padding: .15rem .5rem; border-radius: 999px; margin-left: .35rem; vertical-align: middle; }
.preparacion-paciente textarea { width: 100%; }
.tarjeta-agente { border: 1.5px solid var(--linea); border-radius: var(--r-hoja); padding: 1rem 1.1rem; margin: 1rem 0; background: var(--blanco); }
.tarjeta-agente h2 { margin-top: 0; }
@media (max-width: 30rem) { .asistente { right: .75rem; bottom: .75rem; } }
/* Altura fija y adaptable del historial del asistente: el formulario siempre queda visible y clicable. */
.asistente-panel .asistente-mensajes { flex: none; height: min(18rem, calc(100vh - 22rem)); min-height: 6rem; }
.asistente-panel { max-height: none; }

/* Enlaces para compartir */
.copiar-fila { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.copiar-fila input { flex: 1 1 14rem; min-width: 0; }
.compartir { margin-top: 1rem; }

/* Bandeja de continuidad */
.bandeja { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.bandeja-item { border: 1.5px solid var(--borde-control); border-left-width: 6px; border-radius: 14px; padding: .9rem 1rem; background: var(--blanco); }
.bandeja-item.prioridad-urgente { border-left-color: #b3261e; }
.bandeja-item.prioridad-alta { border-left-color: #a35d00; }
.bandeja-item.prioridad-media { border-left-color: var(--profundo-2); }
.bandeja-cabeza { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 .25rem; }
.bandeja .etiqueta { font-size: .8rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--bruma); }
.ayuda section { margin-top: 1.6rem; }
.ayuda .indice { columns: 2 12rem; }
.ayuda .indice a { display: inline-block; min-height: 24px; padding: .15rem 0; }

/* Planes de seguimiento (portal y página del profesional) */
.tarjeta-plan { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-control); padding: .95rem 1.1rem; margin-bottom: 1rem; }
.tarjeta-plan > summary { cursor: pointer; }
#volver-profesional .tarjeta-plan { overflow-wrap: anywhere; }
#volver-profesional .boton { max-width: 100%; text-align: center; }
button.hora { cursor: pointer; font: inherit; }
.planes-publicos { list-style: none; padding: 0; margin: 0; }
.planes-publicos li { border-top: 1px solid var(--linea); padding: .75rem 0; }

/* Preguntas por escrito: el texto del paciente y la respuesta conservan sus saltos de línea */
.texto-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pregunta-vence { font-weight: 600; }
.pregunta-vence.urgente { color: var(--error, #9b1c1c); }

/* Exámenes del paciente y sala de videollamada */
.lista-archivos { list-style: none; padding: 0; margin: .65rem 0 1.15rem; display: grid; gap: .55rem; }
.lista-archivos li {
  display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: center; overflow-wrap: anywhere;
  padding: .65rem .9rem; background: var(--papel); border: 1px solid var(--linea);
  border-radius: .65rem; transition: border-color .15s, background-color .15s;
}
.lista-archivos li:hover { border-color: var(--profundo-2); background: var(--blanco); }
.lista-archivos li a:first-child { font-weight: 700; color: var(--profundo); }
.etiqueta.nuevo {
  background: var(--menta); color: var(--profundo); border: 1px solid color-mix(in srgb, var(--profundo-2) 28%, transparent);
  border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 700;
}
.examenes-cita {
  margin-block: 1rem; padding: 1.15rem 1.25rem;
  background: linear-gradient(180deg, var(--blanco) 0%, color-mix(in srgb, var(--menta) 18%, var(--blanco)) 100%);
  border: 1px solid color-mix(in srgb, var(--profundo-2) 24%, var(--linea));
  border-left: 4px solid var(--profundo-2); border-radius: var(--r-control);
  box-shadow: 0 8px 20px -14px rgba(15, 37, 87, .12);
}
.examenes-cita h3, .examenes-cita h4 { margin-top: 0; color: var(--profundo); }

/* Sala de videollamada del paciente */
.cabecera-sala {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  margin-bottom: 1.25rem; padding: 1.15rem 1.4rem;
  background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja); box-shadow: 0 8px 22px -14px rgba(15, 37, 87, .09);
}
.insignia-sala {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .3rem; padding: .18rem .65rem; border-radius: 999px;
  background: var(--menta); color: var(--profundo); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.insignia-sala::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}
.titulo-sala { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .15rem; color: var(--profundo); }
.tarjeta-examenes-sala {
  margin-block: 1.35rem; padding: 1.35rem 1.5rem;
  background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja); box-shadow: var(--sombra);
}
.tarjeta-examenes-cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem;
  margin-bottom: .85rem;
}
.tarjeta-examenes-cabeza h2 { font-size: 1.25rem; margin: 0 0 .2rem; color: var(--profundo); }
.etiqueta-vivo {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .22rem .7rem; border-radius: 999px;
  background: var(--ok-fondo); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.etiqueta-vivo::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 999px; background: var(--ok);
}
.form-subir-examen {
  margin-top: .75rem; padding: 1.1rem 1.2rem;
  background: var(--papel); border: 1.5px dashed color-mix(in srgb, var(--profundo-2) 32%, var(--linea-fuerte));
  border-radius: var(--r-control); transition: border-color .15s, background-color .15s;
}
.form-subir-examen:hover, .form-subir-examen:focus-within {
  border-color: var(--profundo-2); background: color-mix(in srgb, var(--menta) 22%, var(--blanco));
}
.campo-dropzone input[type="file"] {
  background: var(--blanco); padding: .55rem .7rem; cursor: pointer;
}

/* Próxima atención y hoja de preparación: una sola cita principal y estados observados. */
.proxima-cita { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--linea); border-top: .35rem solid var(--profundo-2);
  background: var(--blanco); border-radius: var(--r-hoja); box-shadow: var(--sombra); }
.proxima-cita h2, .proxima-cita h3 { font-size: 1.25rem; color: var(--profundo); margin: 0 0 .8rem; }
.proxima-cita .proxima-fecha { font: 700 clamp(1.55rem, 5vw, 2rem)/1.2 var(--titular); margin-bottom: .65rem; }
.proxima-cita .proxima-profesional { margin-bottom: .6rem; }
.proxima-cita .proxima-datos { margin: 1rem 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; }
.proxima-cita .proxima-datos dt { color: var(--tinta-suave); }
.proxima-cita .proxima-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.proxima-cita .proxima-acciones { display: grid; gap: .6rem; margin: 1rem 0 .65rem; }
.proxima-cita .proxima-acciones .boton { width: 100%; }
.proxima-cita .proxima-ayuda { margin: .75rem 0 0; font-size: .9rem; color: var(--tinta-suave); }
.pasos-grupo { margin-block: 2rem; padding: .25rem 0 .5rem 1rem; border-left: .2rem solid var(--profundo-2); }
.pasos-grupo h2 { font-size: 1.35rem; }
.pasos-grupo h3 { margin-top: 1.25rem; font-size: 1.1rem; }
.pasos-lista { list-style: none; padding: 0; }
.pasos-lista > li { border-top: 1px solid var(--linea); padding-block: 1rem; overflow-wrap: anywhere; }
.pasos-lista > li p { margin-block: .4rem; }
.preparacion-hoja { background: var(--blanco); padding: 1.25rem; border-top: .35rem solid var(--profundo-2);
  border-radius: 0 0 var(--r-control) var(--r-control); box-shadow: var(--sombra); border-inline: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.preparacion-hoja h1 { font-size: clamp(2rem, 6vw, 3rem); }
.preparacion-hoja .preparacion-cita { margin: 1rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.preparacion-hoja .preparacion-cita p { margin-bottom: .35rem; }
.preparacion-hoja .preparacion-lista { list-style: none; padding: 0; margin: 1.5rem 0; }
.preparacion-hoja .preparacion-item { padding: 1.15rem 0; border-top: 1px solid var(--linea); }
.preparacion-hoja .preparacion-item:last-child { border-bottom: 1px solid var(--linea); }
.preparacion-hoja .preparacion-item h2 { font-size: 1.2rem; margin: 0; }
.preparacion-hoja .preparacion-item p { margin: .55rem 0; }
.preparacion-hoja .preparacion-item-cabeza { display: flex; flex-wrap: wrap; gap: .45rem .8rem;
  align-items: baseline; justify-content: space-between; }
.preparacion-hoja .preparacion-estado { font-size: .9rem; font-weight: 600; color: var(--profundo);
  background: var(--menta); padding: .15rem .5rem; border-radius: .25rem; }
.preparacion-hoja .preparacion-estado[data-estado="error"] { color: var(--error); background: var(--error-fondo); }
.preparacion-hoja .preparacion-estado[data-estado="aviso"] { color: var(--aviso); background: var(--aviso-fondo); }
.preparacion-hoja .preparacion-item .boton { margin-top: .25rem; }
.preparacion-hoja .preparacion-nota { color: var(--tinta-suave); font-size: .9rem; }
.preparacion-hoja .preparacion-acciones { display: grid; gap: .65rem; margin: 1.25rem 0 .6rem; }
.preparacion-hoja .preparacion-acciones .boton { width: 100%; }
.preparacion-hoja .preparacion-estado-formulario { margin: 1.1rem 0; padding: .85rem 0;
  border-block: 1px solid var(--linea); }
.preparacion-hoja .preparacion-estado-formulario p { margin-bottom: .35rem; }
@media (min-width: 40rem) {
  .proxima-cita { padding: 1.5rem 1.75rem; }
  .proxima-cita .proxima-acciones, .preparacion-hoja .preparacion-acciones { display: flex; flex-wrap: wrap; }
  .proxima-cita .proxima-acciones .boton, .preparacion-hoja .preparacion-acciones .boton { width: auto; }
  .preparacion-hoja { padding: 1.75rem 2rem; }
}
/* MC19: estado por cita, legible también dentro de la columna de atención. */
.estado-sala { margin-block: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--linea); border-left: 4px solid var(--profundo-2);
  border-radius: var(--r-control); background: var(--blanco); box-shadow: 0 4px 12px -6px rgba(21, 31, 58, .06); overflow-wrap: anywhere; }
.estado-sala h2 { margin-top: 0; font-size: 1.1rem; color: var(--profundo); }
.estado-sala-titulo { font-weight: 700; margin-bottom: .25rem; }
.estado-sala form, .estado-sala details { min-width: 0; max-width: 100%; }
.estado-sala .boton { max-width: 100%; white-space: normal; }
.estado-sala input[type="number"] { width: 100%; max-width: 14rem; }
/* Ayuda MC17: las opciones y respuestas conservan ancho legible en celular. */
.ayuda-motivos { overflow-wrap: anywhere; }
.ayuda-motivos .tarjeta-plan { min-width: 0; }
.ayuda-motivos .areas { flex-wrap: wrap; overflow-x: visible; }
.ayuda-motivos .areas a { flex: 0 0 auto; max-width: 100%; }
.ayuda-motivos .proxima-datos { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.ayuda-motivos .proxima-datos dt { margin-top: .5rem; font-weight: 600; }
.ayuda-motivos .proxima-datos dd { margin: 0; }
.ayuda-motivos .boton { max-width: 100%; white-space: normal; }
.ayuda-motivos .respuesta-solicitud { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--linea); }

/* Calculadora IMC: medidas locales y lectura educativa, Azul y papel. */
.imc { max-width: 66rem; }
.imc [hidden] { display: none; }
.imc-intro { max-width: 46rem; margin-bottom: 2rem; }
.imc-privacidad { border-left: 3px solid var(--profundo-2); padding-left: 1rem; color: var(--tinta-suave); font-size: .95rem; }
.imc-disposicion { display: grid; gap: 2.5rem; }
.imc-calculadora { padding: 1.25rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-hoja); min-width: 0; box-shadow: var(--sombra); }
.imc-calculadora fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.imc-estatura { display: grid; gap: 0 1rem; }
.imc-referencia { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; font-weight: 400; }
.imc-referencia input { flex: 0 0 auto; margin-top: .35rem; }
.imc-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.5rem; }
.imc-error { color: var(--error); font-size: .95rem; margin: .3rem 0 0; }
.imc-resultado { border-top: 3px solid var(--profundo-2); background: var(--bruma); padding: 1.25rem; margin-top: 1.75rem; border-radius: 0 0 var(--r-control) var(--r-control); }
.imc-resultado h2 { font-size: 1.4rem; }
.imc-cifra { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; font: 700 clamp(2.7rem, 9vw, 4.25rem)/1.1 var(--titular); margin-block: .75rem; color: var(--profundo); }
.imc-unidad-resultado { font: 400 1rem var(--texto); color: var(--tinta-suave); }
.imc-categoria { font-weight: 700; }
.imc-explicacion { min-width: 0; }
.imc-explicacion h2 { font-size: 1.75rem; }
.imc-formula { padding-block: .75rem; border-block: 1px solid var(--linea); font-weight: 700; }
.imc-rangos { margin: 1rem 0 1.5rem; }
.imc-rangos > div { display: grid; grid-template-columns: 1.15fr 1fr; gap: .6rem; padding-block: .7rem; border-bottom: 1px solid var(--linea); }
.imc-rangos dt { font-weight: 700; }
.imc-rangos dd { margin: 0; }
.imc-fuentes { margin-top: 1.5rem; }
@media (min-width: 38rem) { .imc-estatura { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .imc-disposicion { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .imc-calculadora { padding: 1.75rem; } }

/* Tarjeta institucional de ingreso y acceso directo con Google */
.tarjeta-acceso {
  padding: 1.75rem 1.5rem; background: var(--blanco);
  border: 1px solid var(--linea); border-top: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja); box-shadow: var(--sombra);
}
@media (min-width: 36rem) {
  .tarjeta-acceso { padding: 2.25rem 2.35rem; }
}
.cabecera-acceso { margin-bottom: 1.35rem; }
.insignia-acceso {
  display: inline-block; margin: 0 0 .55rem; padding: .22rem .7rem;
  border-radius: 999px; background: var(--menta); color: var(--profundo);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cabecera-acceso h1 { font-size: clamp(1.75rem, 4.5vw, 2.35rem); margin-bottom: .35rem; }
.subtitulo-acceso { color: var(--tinta-suave); font-size: .98rem; margin: 0; }
.ingreso-google-bloque { margin-bottom: 1.35rem; }
.boton-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; background: var(--blanco); color: var(--tinta);
  border: 1.5px solid color-mix(in srgb, var(--profundo-2) 32%, var(--linea));
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .08);
  font-weight: 700; min-height: 3.1rem;
}
.boton-google:hover {
  background: color-mix(in srgb, var(--menta) 45%, var(--blanco));
  border-color: var(--profundo-2); color: var(--profundo);
}
.boton-google svg { flex: 0 0 auto; }
.ingreso-google-nota { margin: .5rem 0 0; text-align: center; }
.separador-o {
  display: flex; align-items: center; gap: .75rem; margin: 1.2rem 0 .9rem;
  color: var(--tinta-suave); font-size: .85rem;
}
.separador-o::before, .separador-o::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}

/* Estados nativos modernos de validación de formularios (:user-invalid) */
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: var(--error);
  background-color: color-mix(in srgb, var(--error-fondo) 35%, var(--blanco));
}

/* Hojas editoriales públicas (motivos de consulta, artículos del blog y perfiles profesionales) */
.hoja-editorial {
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-top: 4px solid var(--profundo-2);
  border-radius: var(--r-hoja);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--sombra);
}
@media (min-width: 44rem) {
  .hoja-editorial { padding: 2.25rem 2.5rem; }
}
.cabecera-motivo {
  margin-bottom: 1.35rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--bruma);
}
.cabecera-motivo h1 {
  color: var(--profundo);
  margin-bottom: .5rem;
}
.ficha-profesional-bio {
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-hoja);
  padding: 1.35rem 1.5rem;
  box-shadow: 0 6px 20px -14px rgba(27, 34, 56, .08);
}
.enfoque-clinico {
  background: color-mix(in srgb, var(--menta) 45%, var(--blanco));
  border-left: 3.5px solid var(--profundo-2);
  padding: .65rem .9rem;
  border-radius: .5rem;
  color: var(--profundo);
}

/* ------------------------------------------------------------- Sistema de tarjetas, etiquetas, grillas y utilidades ejecutivas */
.nav-equipo:not(:has(.nav-grupo-clinico)) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem .6rem;
}

p.aviso, .aviso p {
  max-width: none;
}
.aviso.exito {
  background: var(--exito-fondo);
  border-color: #166534;
  color: #14532d;
}

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-s { margin-top: .5rem !important; }
.mb-s { margin-bottom: .5rem !important; }
.mt { margin-top: 1.25rem; }
.mb { margin-bottom: 1.5rem; }
.texto-chico { font-size: .95rem; line-height: 1.55; color: var(--tinta-suave); max-width: none; }
.lista-compacta { padding-left: 1.25rem; margin: .5rem 0 0; display: grid; gap: .5rem; font-size: .96rem; line-height: 1.5; }
.encabezado-seccion { margin-bottom: 1.75rem; }
.encabezado-seccion h1 { font-size: clamp(1.75rem, 3.8vw, 2.45rem); color: var(--profundo); margin-bottom: .55rem; line-height: 1.15; }
.encabezado-seccion .subtitulo { font-size: 1.06rem; color: var(--tinta-suave); max-width: 76ch; margin: 0; line-height: 1.55; }

.tarjeta {
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-top: 3.5px solid var(--profundo-2);
  border-radius: var(--r-hoja);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 8px 24px -14px rgba(27, 34, 56, .1);
  min-width: 0;
  overflow-wrap: break-word;
}
.tarjeta.seccion {
  padding: 1.5rem 1.65rem;
  margin-bottom: 1.5rem;
}
.tarjeta h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.55rem);
  line-height: 1.22;
  color: var(--profundo);
  margin-top: 0;
  margin-bottom: .55rem;
}
.tarjeta h3 {
  font-size: 1.12rem;
  line-height: 1.28;
  color: var(--profundo);
  margin-top: 0;
  margin-bottom: .45rem;
}
.tarjeta p {
  max-width: 82ch;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .24rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.3;
  background: var(--menta);
  color: var(--profundo);
  border: 1px solid color-mix(in srgb, var(--profundo-2) 22%, transparent);
  margin: 0 0 .65rem;
  width: fit-content;
  max-width: 100%;
}
td .etiqueta, th .etiqueta {
  margin-bottom: 0;
}
.etiqueta.ok, .etiqueta.exito {
  background: #e6f4ea;
  color: #14532d;
  border-color: #b7e1c4;
}
.etiqueta.info {
  background: var(--menta);
  color: var(--profundo);
  border-color: color-mix(in srgb, var(--profundo-2) 28%, transparent);
}
.etiqueta.atencion {
  background: var(--aviso-fondo);
  color: var(--aviso);
  border-color: color-mix(in srgb, var(--aviso) 30%, transparent);
}
.etiqueta.error {
  background: var(--error-fondo);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
}

.rejilla-2, .rejilla-3, .rejilla-4 {
  display: grid;
  gap: 1.15rem;
  align-items: stretch;
}
.rejilla-2 > *, .rejilla-3 > *, .rejilla-4 > * {
  min-width: 0;
}
@media (min-width: 48rem) {
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tabla-contenedor {
  overflow-x: auto;
  border: 1.5px solid var(--linea);
  border-radius: .95rem;
  background: var(--blanco);
  box-shadow: 0 6px 20px -14px rgba(27, 34, 56, .08);
  max-width: 100%;
}
.tabla-contenedor .tabla tr:last-child td {
  border-bottom: 0;
}

/* Control deslizante (range) moderno para calculadoras interactivas */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--profundo-2) 20%, var(--linea));
  outline: none;
  margin: .5rem 0 .25rem;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--profundo-2);
  border: 3px solid var(--blanco);
  box-shadow: 0 2px 8px rgba(30, 47, 122, .35);
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: var(--profundo);
}
input[type="range"]::-moz-range-thumb {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--profundo-2);
  border: 3px solid var(--blanco);
  box-shadow: 0 2px 8px rgba(30, 47, 122, .35);
  cursor: pointer;
}

/* Página pública de reclutamiento (/unete-al-equipo) */
.hero-reclutamiento {
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--profundo-2) 48%, transparent) 0%, transparent 50%),
    linear-gradient(135deg, #152259 0%, var(--profundo) 58%, #2643AD 100%);
  color: var(--blanco);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 22px 48px -18px rgba(21, 34, 89, .32);
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 58rem) {
  .hero-reclutamiento {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
    padding: 2.75rem 2.75rem;
    gap: 2.5rem;
  }
}
.hero-reclutamiento h1 {
  color: var(--blanco);
  font-size: clamp(1.95rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  margin: 0 0 .75rem;
  letter-spacing: -.025em;
}
.hero-reclutamiento h1 span {
  color: var(--menta-viva);
}
.hero-reclutamiento .bajada-reclutamiento {
  color: rgba(244, 246, 253, .9);
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 1.25rem;
}
.hero-reclutamiento .eslogan-destacado {
  background: rgba(255, 255, 255, .1);
  border-left: 4px solid var(--menta-viva);
  padding: .75rem 1rem;
  border-radius: .65rem;
  font-size: .98rem;
  color: #ffffff;
  margin: 0 0 1.25rem;
  max-width: 60ch;
}
.hero-reclutamiento-metricas {
  background: rgba(255, 255, 255, .97);
  color: var(--tinta);
  border-radius: 1.15rem;
  padding: 1.35rem 1.4rem;
  border-top: 4px solid var(--menta-viva);
  box-shadow: 0 18px 40px -16px rgba(10, 16, 42, .45);
  display: grid;
  gap: .85rem;
}
.hero-reclutamiento-metricas h2 {
  font-size: 1.05rem;
  color: var(--profundo);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hero-reclutamiento-metricas h2::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #1f8a5b;
  box-shadow: 0 0 0 3px rgba(31, 138, 91, .2);
}
.metricas-8020-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.metrica-8020 {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: .75rem;
  padding: .7rem .85rem;
}
.metrica-8020 strong {
  display: block;
  font: 800 1.35rem/1.1 var(--titular);
  color: var(--profundo);
  margin-bottom: .15rem;
}
.metrica-8020 span {
  font-size: .8rem;
  color: var(--tinta-suave);
  line-height: 1.3;
  display: block;
}
.calc-presets {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.35rem;
  padding: .65rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: .9rem;
}
.calc-presets .boton.chico {
  border-radius: 999px;
  font-size: .86rem;
  min-height: 2.35rem;
  padding: .35rem .85rem;
}
.calc-grid {
  display: grid;
  gap: 1.35rem;
  align-items: stretch;
}
@media (min-width: 54rem) {
  .calc-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
.calc-panel-controles {
  background: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: 1.05rem;
  padding: 1.35rem 1.4rem;
}
.calc-panel-resultado {
  background: linear-gradient(180deg, #f2fbf7 0%, #ffffff 100%);
  border: 2px solid #1f8a5b;
  border-radius: 1.05rem;
  padding: 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 28px -14px rgba(20, 90, 58, .18);
}
.calc-cifra-principal {
  font: 800 clamp(1.9rem, 3.8vw, 2.55rem)/1.1 var(--titular);
  color: #145a3a;
  font-variant-numeric: tabular-nums;
  margin: .25rem 0 .85rem;
  letter-spacing: -.02em;
}
.calc-desglose {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
  font-size: .93rem;
}
.calc-desglose li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed #cde7d8;
}
.calc-desglose li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.calc-desglose li strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Carriles clínicos de la Portada Comercial y utilidades complementarias */
.franja-eslogan {
  display: inline-block;
  background: rgba(255, 255, 255, .1);
  border-left: 3.5px solid var(--menta-viva);
  padding: .55rem .9rem;
  border-radius: .55rem;
  color: #ffffff;
  font-size: .96rem;
  line-height: 1.45;
  margin: 0 0 1.15rem;
  max-width: 54ch;
}
.texto-secundario {
  color: var(--tinta-suave);
}
.insignia {
  display: inline-block;
  background: color-mix(in srgb, var(--menta) 65%, var(--blanco));
  color: var(--profundo);
  border: 1px solid color-mix(in srgb, var(--profundo-2) 22%, transparent);
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}
.pila-s {
  display: grid;
  gap: .75rem;
}
.carril-prestacion {
  background: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: .85rem;
  padding: .95rem 1.05rem;
  display: grid;
  gap: .25rem;
  transition: border-color .15s, background-color .15s;
}
.carril-prestacion:hover {
  border-color: var(--profundo-2);
  background: var(--blanco);
}
.acciones-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.pasos-produccion {
  display: grid;
  gap: .75rem;
}
@media (min-width: 58rem) {
  .pasos-produccion {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.paso-prod {
  background: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: .9rem;
  padding: .95rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .45rem;
}
.paso-prod.listo {
  background: #f2fbf7;
  border-color: #a5f3ce;
}
.paso-prod h3 {
  font-size: .96rem;
  margin: 0;
  color: var(--profundo);
}