/* OdontoCloud — app.css · spec §3.1 y §3.2 · destino: public/assets/app.css
   Móvil primero. Quiebres: 900 px (armazón) y 1200 px (ancho máximo).
   Sin preprocesador ni framework. Carga tokens.css antes que este archivo. */

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box }
* { margin: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { font-family: var(--fuente); font-size: var(--t-base); line-height: var(--interlinea-texto); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, svg, video { display: block; max-width: 100% }
input, button, select, textarea { font: inherit; color: inherit }
button { background: none; border: 0 }
[hidden] { display: none !important }
h1, h2, h3, h4 { line-height: var(--interlinea-titulo); font-weight: var(--peso-fuerte); letter-spacing: -.022em; text-wrap: balance }
p { text-wrap: pretty }
ul, ol { padding: 0 }
fieldset { border: 0; padding: 0; margin-bottom: var(--e-5) }
legend { padding: 0 }
a { color: var(--teal-700); text-underline-offset: 3px }
a:hover { color: var(--teal-800) }
:target { scroll-margin-top: var(--e-16) }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r-sm) }
.saltar { position: absolute; left: var(--e-2); top: -60px; z-index: 90; background: var(--superficie); color: var(--teal-800); padding: var(--e-3) var(--e-4); border-radius: var(--r-md); box-shadow: var(--sombra-2); font-weight: var(--peso-medio); transition: top var(--rapido) var(--curva) }
.saltar:focus { top: var(--e-2) }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0 }
/* Task 2: tamaño base de los iconos de icono() — el catálogo del brief pide
   .ico y el sistema de diseño no traía una clase genérica (usaba width/height
   en línea en cada <svg>). 20 px es el tamaño más repetido en las maquetas. */
.ico { width: 20px; height: 20px; flex: none }
/* Task 3: tamaño base de marca()/marca('simbolo') — mismo motivo que .ico:
   el <svg> que arma el helper no lleva width/height y cada contexto lo
   sobreescribe (.lateral .marca, .login-panel .marca, etc.). */
.marca { display: inline-block; width: 160px; height: 36px }
.simbolo { display: inline-block; flex: none; width: 40px; height: 40px }
/* Cuando marca() va dentro de un enlace que ya lleva la clase .marca (menú
   lateral, cabecera de landing), el símbolo interno usa esta otra clase: si
   compartiera .marca con el enlace, el alto explícito (box-sizing: border-box)
   recortaría el área táctil del enlace por debajo de los 44 px mínimos. */
.marca-svg { display: block; width: 160px; height: 36px }

/* Tipografía ------------------------------------------------------------- */
.titular-1 { font-size: var(--t-3xl); letter-spacing: -.03em }
.titular-2 { font-size: var(--t-2xl); letter-spacing: -.026em }
.titular-3 { font-size: var(--t-xl) }
.apoyo { color: var(--texto-suave); font-size: var(--t-lg); max-width: 62ch }
.menudo { font-size: var(--t-sm); color: var(--texto-suave) }
.cifra { font-variant-numeric: tabular-nums }
.antetitulo { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); font-weight: var(--peso-fuerte); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); margin-bottom: var(--e-3) }
.antetitulo::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: var(--r-pill); background: var(--coral-500) }

/* Contenedores ----------------------------------------------------------- */
.envoltura { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--e-5) }
.seccion { padding-block: var(--e-16) }
.seccion-blanca { background: var(--superficie) }
.seccion-teal { background: var(--teal-800); color: #fff }
.seccion-teal h2 { color: #fff }
.seccion-teal .antetitulo { color: var(--teal-200) }
.pila > * + * { margin-top: var(--e-4) }
.pila-ancha > * + * { margin-top: var(--e-6) }
.fila { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center }
.rejilla-2, .rejilla-3, .rejilla-4 { display: grid; gap: var(--e-4) }
/* Filete de nube: el motivo de marca que cierra las secciones. */
.filete-nube { height: 18px; border: 0; margin: 0; background: radial-gradient(circle at 13px 0, var(--superficie) 13px, transparent 13.5px) repeat-x 0 0 / 26px 18px }

/* Botones §3.2 ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--tactil); padding: var(--e-3) var(--e-5); border: 1.5px solid transparent; border-radius: var(--r-md); font-size: var(--t-base); font-weight: var(--peso-medio); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva) }
.btn:active { transform: translateY(1px) }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none }
.btn-primario { background: var(--color-primario); color: #fff }
.btn-primario:hover:not(:disabled) { background: var(--color-primario-hover); color: #fff }
.btn-secundario { background: var(--superficie); color: var(--teal-800); border-color: var(--linea-fuerte) }
.btn-secundario:hover:not(:disabled) { background: var(--teal-50); border-color: var(--teal-600); color: var(--teal-800) }
.btn-acento { background: var(--color-acento); color: #fff }
.btn-acento:hover:not(:disabled) { background: var(--color-acento-hover); color: #fff }
.btn-peligro { background: var(--error); color: #fff }
.btn-peligro:hover:not(:disabled) { background: #8E1E17; color: #fff }
.btn-fantasma { color: var(--teal-700); padding-inline: var(--e-3) }
.btn-fantasma:hover:not(:disabled) { background: var(--teal-50); color: var(--teal-800) }
.btn-sm { min-height: var(--tactil); padding: var(--e-2) var(--e-3); font-size: var(--t-sm) }
.btn-lg { min-height: 52px; padding: var(--e-4) var(--e-8); font-size: var(--t-lg) }
.btn-bloque { display: flex; width: 100% }
.btn[aria-busy="true"] { pointer-events: none }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: girar 700ms linear infinite }
@keyframes girar { to { transform: rotate(360deg) } }

/* Campos §3.2 ------------------------------------------------------------ */
.campo { display: block; margin-bottom: var(--e-5) }
.campo > label, .campo-etiqueta { display: block; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--gris-700); margin-bottom: var(--e-2) }
.campo .req { color: var(--error) }
.campo input, .campo select, .campo textarea { display: block; width: 100%; min-height: var(--tactil); padding: var(--e-3) var(--e-4); background: var(--superficie); color: var(--texto); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-md); transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva) }
.campo textarea { min-height: 120px; resize: vertical; line-height: var(--interlinea-texto) }
.campo select { appearance: none; padding-right: var(--e-10); cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gris-600) 50%), linear-gradient(135deg, var(--gris-600) 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat }
.campo ::placeholder { color: var(--texto-pista) }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--gris-500) }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 28%, transparent) }
.campo-ayuda { display: block; font-size: var(--t-sm); color: var(--texto-suave); margin-top: var(--e-2) }
.campo-error { display: flex; gap: var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--error); margin-top: var(--e-2) }
.campo-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: #fff; font-size: var(--t-xs); line-height: 18px; text-align: center }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--error) }
.campo.con-error input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent) }
.campo-grupo { display: flex }
.campo-grupo > :first-child { flex: none; display: flex; align-items: center; padding-inline: var(--e-4); background: var(--gris-100); color: var(--gris-700); font-variant-numeric: tabular-nums; border: 1.5px solid var(--linea-fuerte); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md) }
.campo-grupo > input { border-radius: 0 var(--r-md) var(--r-md) 0 }
.campos-2 { display: grid; gap: 0 var(--e-4) }
/* Task 8 fix ronda 1: buscador de un listado (ej. pacientes), no ocupa todo
   el ancho en escritorio. */
.campo-buscador { max-width: 420px }
.opcion { display: flex; gap: var(--e-3); align-items: flex-start; min-height: var(--tactil); padding-block: var(--e-2); cursor: pointer }
.opcion input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primario); cursor: pointer }
.opcion span { font-size: var(--t-sm); color: var(--gris-700) }

/* Tarjetas §3.2 ---------------------------------------------------------- */
.tarjeta, .tarjeta-resumen { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg) }
.tarjeta { overflow: hidden; transition: box-shadow var(--normal) var(--curva) }
.tarjeta:hover { box-shadow: var(--sombra-1) }
.tarjeta-cabecera { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; padding: var(--e-5) var(--e-6); border-bottom: 1px solid var(--linea) }
.tarjeta-cabecera h3 { font-size: var(--t-lg) }
.tarjeta-cuerpo { padding: var(--e-6) }
.tarjeta-pie { display: flex; flex-wrap: wrap; gap: var(--e-3); padding: var(--e-4) var(--e-6); border-top: 1px solid var(--linea); background: var(--gris-50) }
.tarjeta-resumen { position: relative; padding: var(--e-5) }
.tarjeta-resumen::before { content: ""; position: absolute; inset: var(--e-5) auto var(--e-5) 0; width: 3px; border-radius: var(--r-pill); background: var(--teal-300) }
.tarjeta-resumen .etiqueta { display: block; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-suave) }
.tarjeta-resumen .valor { display: block; margin-top: var(--e-1); font-size: var(--t-3xl); font-weight: var(--peso-fuerte); letter-spacing: -.03em; color: var(--teal-700); font-variant-numeric: tabular-nums }
.tarjeta-resumen .valor.vacia { color: var(--gris-400) }
.tarjeta-resumen .tendencia { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--exito) }
.tarjeta-resumen .nota { font-size: var(--t-sm); color: var(--texto-suave) }

/* Tabla responsiva §3.2 -------------------------------------------------- */
.tabla-caja { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--superficie) }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.tabla thead { display: none }
.tabla tbody tr { display: block; padding: var(--e-4); border-bottom: 1px solid var(--linea) }
.tabla tbody tr:last-child { border-bottom: 0 }
.tabla td { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-1) 0; text-align: right }
.tabla td::before { content: attr(data-etiqueta); flex: none; text-align: left; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-suave) }
.tabla td:first-child { font-size: var(--t-lg); font-weight: var(--peso-fuerte); text-align: left; padding-bottom: var(--e-2) }
.tabla td:first-child::before { display: none }
.fila-enlace { position: relative; cursor: pointer }
.fila-enlace td:first-child a::after { content: ""; position: absolute; inset: 0 }
.fila-enlace td:last-child { position: relative; z-index: 1 }
.fila-enlace a { color: inherit; text-decoration: none }
.fila-enlace:hover, .fila-enlace:focus-within { background: var(--teal-50) }

/* Pestañas §3.2 ---------------------------------------------------------- */
.pestanas { display: flex; gap: var(--e-2); list-style: none; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--e-1) }
.pestanas::-webkit-scrollbar { display: none }
.pestanas a, .pestanas button { display: inline-flex; align-items: center; min-height: var(--tactil); padding: var(--e-2) var(--e-4); border-radius: var(--r-pill); background: var(--gris-100); color: var(--gris-700); font-size: var(--t-sm); font-weight: var(--peso-medio); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--rapido) var(--curva) }
.pestanas a:hover, .pestanas button:hover { background: var(--gris-200); color: var(--gris-800) }
.pestanas .on, .pestanas .on:hover { background: var(--teal-800); color: #fff }

/* Badges §3.2 ------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: var(--e-1); padding: 3px var(--e-3); border-radius: var(--r-pill); background: var(--gris-200); color: var(--gris-700); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .02em; white-space: nowrap }
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.badge-exito { background: var(--exito-bg); color: var(--exito) }
.badge-aviso { background: var(--aviso-bg); color: var(--aviso) }
.badge-error { background: var(--error-bg); color: var(--error) }
.badge-info { background: var(--info-bg); color: var(--info) }
.badge-neutro { background: var(--gris-200); color: var(--gris-700) }

/* Alertas y toast §3.2 --------------------------------------------------- */
.alerta { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--t-sm) }
.alerta strong { display: block; font-size: var(--t-base) }
.alerta .cerrar, .toast .cerrar { flex: none; width: var(--tactil); height: var(--tactil); margin-left: auto; border-radius: var(--r-sm); color: inherit; font-size: var(--t-lg); cursor: pointer }
.alerta .cerrar { margin-top: calc(var(--e-3) * -1); margin-right: calc(var(--e-3) * -1) }
.alerta .cerrar:hover { background: rgba(0, 0, 0, .07) }
.alerta-exito { background: var(--exito-bg); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 30%, transparent) }
.alerta-aviso { background: var(--aviso-bg); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent) }
.alerta-error { background: var(--error-bg); color: var(--error); border-color: color-mix(in srgb, var(--error) 30%, transparent) }
.alerta-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent) }
.toast-zona { position: fixed; left: var(--e-4); right: var(--e-4); bottom: calc(var(--alto-barra) + var(--e-4)); z-index: 70; display: grid; gap: var(--e-2); pointer-events: none }
.toast { pointer-events: auto; display: flex; gap: var(--e-3); align-items: center; padding: var(--e-4); border-radius: var(--r-md); background: var(--gris-900); color: #fff; box-shadow: var(--sombra-2); font-size: var(--t-sm) }
.toast-exito { background: var(--exito) }
.toast-error { background: var(--error) }

/* Modal §3.2 ------------------------------------------------------------- */
.modal { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100vw - 32px)); height: fit-content; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2) }
.modal::backdrop { background: rgba(7, 59, 61, .55) }
.modal-cuerpo { padding: var(--e-6) }
.modal-cuerpo h2 { font-size: var(--t-xl); margin-bottom: var(--e-2) }
.modal-cuerpo p { color: var(--texto-suave); font-size: var(--t-sm) }
.modal-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); padding: var(--e-4) var(--e-6); border-top: 1px solid var(--linea); background: var(--gris-50) }
.modal-pie .btn { flex: 1 1 auto }

/* Vacío, paginación, esqueleto, cabecera de página, datos §3.2 ----------- */
.vacio { text-align: center; padding: var(--e-12) var(--e-5); border: 1px dashed var(--gris-300); border-radius: var(--r-lg); background: var(--superficie) }
.vacio svg { width: 56px; height: 56px; margin: 0 auto var(--e-4); color: var(--teal-300) }
.vacio h3, .vacio h1 { font-size: var(--t-lg); margin-bottom: var(--e-2) }
.vacio p { max-width: 42ch; margin: 0 auto var(--e-5); color: var(--texto-suave); font-size: var(--t-sm) }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-5) }
.paginacion .pagina-actual { font-size: var(--t-sm); color: var(--texto-suave); font-variant-numeric: tabular-nums }
.paginacion .pagina-actual b { color: var(--texto) }
.paginacion [aria-disabled="true"] { opacity: .45; pointer-events: none }
.esqueleto { height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--gris-100) 25%, var(--gris-200) 37%, var(--gris-100) 63%) 100% 0 / 400% 100% }
.esqueleto + .esqueleto { margin-top: var(--e-3) }
.esqueleto-titulo { height: 24px; width: 45% }
.pagina-cabecera { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-6) }
.pagina-cabecera h1 { font-size: var(--t-2xl); letter-spacing: -.026em }
.pagina-cabecera .sub { margin-top: var(--e-1); color: var(--texto-suave); font-size: var(--t-sm) }
.pagina-cabecera .acciones { display: flex; flex-wrap: wrap; gap: var(--e-3) }
.datos { display: grid; margin: 0 }
.datos > div { display: flex; flex-direction: column; gap: 2px; padding: var(--e-3) 0; border-bottom: 1px solid var(--linea) }
.datos dt { font-size: var(--t-sm); color: var(--texto-suave) }
.datos dd { margin: 0; font-weight: var(--peso-medio) }

/* Armazón de la app §4 --------------------------------------------------- */
.armazon { display: flex; min-height: 100dvh }
.lateral { display: none }
.columna { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.contenido { flex: 1; padding: var(--e-5) var(--e-5) calc(var(--alto-barra) + var(--e-8)) }
.contenido > .interior { max-width: var(--ancho-max); margin-inline: auto }
.cabecera { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--e-3); min-height: 60px; padding: var(--e-3) var(--e-4); background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea) }
.cabecera .marca-mini { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--teal-700) }
.cabecera .marca-mini .simbolo { width: 26px; height: 26px }
.cabecera .marca-mini span { font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--gris-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.buscador { display: flex; flex: none; margin-left: auto }
.buscador input { width: 100%; min-height: var(--tactil); padding: var(--e-2) var(--e-4); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-pill); background: var(--superficie) }
.buscador input:focus { outline: 0; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 28%, transparent) }
.buscador .btn-lupa { display: grid; place-items: center; width: var(--tactil); height: var(--tactil); border-radius: var(--r-pill); color: var(--teal-700); cursor: pointer }
.buscador .btn-lupa:hover { background: var(--teal-50) }
/* Task 3: el toggle "abierto" era de un app.js que ya no existe (Task 2 lo
   cambió por el contrato genérico [data-abre]/[hidden]). El campo se
   posiciona siempre; [hidden] decide si se ve. */
.buscador .campo-buscar { position: absolute; left: var(--e-4); right: var(--e-4); top: 62px }
/* Task 3: alias de .barra-inf → .barra-inferior. El brief nombra el
   componente ".barra-inf" (ver tests/Http/ShellTest.php); se añade el
   selector aquí en vez de renombrar la clase real del sistema de diseño. */
.barra-inferior, .barra-inf { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--superficie); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom) }
.barra-inferior a, .barra-inferior button, .barra-inf a, .barra-inf button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--alto-barra); padding: var(--e-2) var(--e-1); color: var(--gris-600); font-size: 11px; font-weight: var(--peso-medio); text-decoration: none; cursor: pointer }
.barra-inferior svg, .barra-inf svg { width: 22px; height: 22px }
.barra-inferior [aria-current="page"], .barra-inf [aria-current="page"] { color: var(--teal-700) }
.barra-inferior [aria-current="page"] svg, .barra-inf [aria-current="page"] svg { color: var(--coral-600) }
.barra-inferior [aria-disabled="true"], .barra-inf [aria-disabled="true"] { color: var(--gris-600); pointer-events: none }
/* Fix ronda 1 (IMP-3, IMP-4): la hoja "Más" era un <div> con velo aparte,
   sin trampa de foco, sin anuncio de diálogo y con Escape roto (el
   keydown de app.js apagaba el panel interior, no el contenedor, y el
   velo se quedaba tapando la pantalla). Ahora es un <dialog> nativo
   (showModal() en app.js): el navegador regala trampa de foco, Escape y
   devolución del foco, y el fondo se pinta con ::backdrop en vez de un
   div .velo aparte — mismo patrón que ya usa .modal. */
.hoja { position: fixed; inset: auto 0 0 0; z-index: 60; width: auto; margin: 0; border: 0; max-width: none; max-height: 85dvh; overflow-y: auto; padding: var(--e-3) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom)); background: var(--superficie); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sombra-2) }
.hoja::backdrop { background: rgba(7, 59, 61, .5) }
.hoja .asa { width: 44px; height: 4px; margin: var(--e-2) auto var(--e-4); border-radius: var(--r-pill); background: var(--gris-300) }
.nav-lista { list-style: none; display: grid; gap: var(--e-1) }
.nav-lista a, .nav-lista button { position: relative; display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: var(--tactil); padding: var(--e-3) var(--e-4); border-radius: var(--r-md); color: var(--gris-700); font-size: var(--t-sm); font-weight: var(--peso-medio); text-decoration: none; cursor: pointer; transition: background-color var(--rapido) var(--curva) }
.nav-lista svg { flex: none; width: 20px; height: 20px; color: var(--gris-500) }
.nav-lista a:hover, .nav-lista button:hover { background: var(--gris-100); color: var(--gris-900) }
.nav-lista [aria-current="page"] { background: var(--teal-50); color: var(--teal-800); font-weight: var(--peso-fuerte) }
.nav-lista [aria-current="page"] svg { color: var(--teal-700) }
.nav-lista [aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: var(--r-pill); background: var(--coral-500) }
.nav-lista [aria-disabled="true"] { color: var(--gris-400); pointer-events: none }
.nav-lista .pronto { margin-left: auto; padding: 2px var(--e-2); border-radius: var(--r-pill); background: var(--gris-100); color: var(--gris-600); font-size: var(--t-xs); font-weight: var(--peso-fuerte) }
.nav-lista .salir, .nav-lista .salir svg { color: var(--error) }
.pie-app { padding: var(--e-5); border-top: 1px solid var(--linea); color: var(--texto-suave); font-size: var(--t-xs); text-align: center }

/* Login §5 --------------------------------------------------------------- */
.login { min-height: 100dvh; display: grid }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: var(--e-8) var(--e-5); background: var(--superficie) }
.login-form .interior { width: 100%; max-width: 380px; margin-inline: auto }
.login-form .marca-arriba { color: var(--teal-700); margin-bottom: var(--e-6) }
.login-form h1 { font-size: var(--t-2xl); letter-spacing: -.026em; margin-bottom: var(--e-4) }
.login-form .bienvenida { margin-bottom: var(--e-6); color: var(--texto-suave); font-size: var(--t-sm) }
.login-panel { display: none }

/* Landing §6 ------------------------------------------------------------- */
.cabecera-publica { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--superficie) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea) }
.cabecera-publica .envoltura { display: flex; align-items: center; gap: var(--e-4); min-height: 68px }
.cabecera-publica .marca { flex: none; display: block; width: auto; height: auto; padding-block: var(--e-1); color: var(--teal-800) }
.cabecera-publica .marca-svg { display: none; width: 182px; height: 40px }
.cabecera-publica .marca-simbolo { display: block; width: 40px; height: 40px }
.cabecera-publica nav { display: none; gap: var(--e-6); margin-left: var(--e-8) }
.cabecera-publica nav a { display: flex; align-items: center; min-height: var(--tactil); color: var(--gris-700); font-size: var(--t-sm); font-weight: var(--peso-medio); text-decoration: none }
.cabecera-publica nav a:hover { color: var(--teal-800) }
.cabecera-publica .acciones { display: flex; align-items: center; gap: var(--e-2); margin-left: auto }
.hero { position: relative; overflow: hidden; padding-block: var(--e-12) var(--e-16); background: var(--superficie) }
.hero::before { content: ""; position: absolute; inset: -20% -30% auto auto; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, var(--teal-50) 0%, transparent 68%); pointer-events: none }
.hero .envoltura { position: relative; display: grid; gap: var(--e-10) }
.hero h1 { font-size: clamp(2rem, 7.2vw, 3.5rem); letter-spacing: -.035em }
.hero h1 em { font-style: normal; color: var(--teal-700) }
.hero .apoyo { margin-top: var(--e-5) }
.hero .fila { margin-top: var(--e-8) }
.confianza li { list-style: none; display: flex; gap: var(--e-3); align-items: center }
.confianza svg { flex: none; width: 26px; height: 26px; color: var(--teal-300) }
.confianza b { display: block; font-size: var(--t-sm) }
.confianza span { display: block; font-size: var(--t-xs); color: var(--teal-200) }
.funcion { display: grid; gap: var(--e-8); align-items: center }
.funcion + .funcion { margin-top: var(--e-16) }
.funcion h3 { font-size: var(--t-xl); margin-bottom: var(--e-3) }
.funcion p { color: var(--texto-suave) }
.funcion ul, .plan ul { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-4); font-size: var(--t-sm) }
.funcion ul li, .plan ul li { display: flex; gap: var(--e-2); color: var(--gris-700) }
.funcion ul svg, .plan ul svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--exito) }
.plan { display: flex; flex-direction: column; padding: var(--e-6) }
.plan.destacado { position: relative; border: 2px solid var(--teal-600); box-shadow: var(--sombra-1) }
.plan.destacado::after { content: "La más elegida"; position: absolute; top: calc(var(--e-3) * -1); left: var(--e-6); padding: var(--e-1) var(--e-3); border-radius: var(--r-pill); background: var(--teal-800); color: #fff; font-size: var(--t-xs); font-weight: var(--peso-fuerte) }
.plan h3 { font-size: var(--t-lg) }
.plan .precio { display: flex; align-items: baseline; gap: var(--e-1); margin: var(--e-3) 0 var(--e-1) }
.plan .precio b { font-size: var(--t-4xl); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums }
.plan .precio span, .plan .para { color: var(--texto-suave); font-size: var(--t-sm) }
.plan ul { margin: var(--e-6) 0 }
.plan ul svg { color: var(--teal-600) }
.plan .btn { margin-top: auto }
.paso { display: flex; gap: var(--e-4) }
.paso .num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-50); color: var(--teal-800); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums }
.paso h3 { font-size: var(--t-base); margin-bottom: var(--e-1) }
.paso p { color: var(--texto-suave); font-size: var(--t-sm) }
.faq { border-bottom: 1px solid var(--linea) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--tactil); padding: var(--e-5) 0; font-weight: var(--peso-medio); list-style: none; cursor: pointer }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--teal-700); border-bottom: 2px solid var(--teal-700); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--rapido) var(--curva) }
.faq[open] summary { color: var(--teal-800) }
.faq[open] summary::after { transform: rotate(225deg) translate(-3px, -3px) }
.faq p { max-width: 70ch; padding-bottom: var(--e-5); color: var(--texto-suave); font-size: var(--t-sm) }
.pie-publico { padding-block: var(--e-12) var(--e-8); background: var(--gris-900); color: var(--gris-300) }
.pie-publico .marca { width: 182px; height: 40px; color: #fff }
.pie-publico h4 { margin-bottom: var(--e-3); color: #fff; font-size: var(--t-sm) }
.pie-publico ul { list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-sm) }
.pie-publico a { color: var(--gris-300); text-decoration: none }
.pie-publico a:hover { color: #fff; text-decoration: underline }
.pie-publico .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--gris-800); font-size: var(--t-xs) }

/* Marco de teléfono: la captura de la app dentro de la landing ----------- */
.marco-telefono { flex: none; width: 264px; margin-inline: auto; padding: 10px; background: var(--gris-900); border-radius: 34px; box-shadow: var(--sombra-2) }
.marco-telefono::before { content: ""; display: block; width: 78px; height: 5px; margin: 2px auto 6px; border-radius: var(--r-pill); background: var(--gris-700) }
.marco-telefono .pantalla { width: 244px; height: 452px; overflow: hidden; border-radius: 26px; background: var(--fondo) }
.marco-telefono .lienzo { width: 390px; height: 723px; transform: scale(.6256); transform-origin: top left }

/* ≥ 900 px: escritorio --------------------------------------------------- */
@media (min-width: 900px) {
  .btn-bloque { display: inline-flex; width: auto }
  .btn-sm { min-height: 36px }
  .tarjeta-resumen { padding: var(--e-6) }
  .campos-2, .rejilla-2 { grid-template-columns: 1fr 1fr }
  .rejilla-2 { gap: var(--e-12); align-items: center }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e-6) }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr) }
  .tabla-caja { max-height: 560px; overflow: auto }
  .tabla thead { display: table-header-group; position: sticky; top: 0; z-index: 1 }
  .tabla th { padding: var(--e-3) var(--e-5); background: var(--gris-100); border-bottom: 1px solid var(--linea); color: var(--gris-700); font-size: var(--t-sm); font-weight: var(--peso-fuerte); text-align: left; white-space: nowrap }
  .tabla tbody tr { display: table-row; padding: 0 }
  .tabla td { display: table-cell; padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle }
  .tabla td::before { display: none }
  .tabla td:first-child { font-size: var(--t-base) }
  .tabla .num { text-align: right }
  .pestanas { gap: var(--e-6); border-bottom: 1px solid var(--linea); padding-bottom: 0 }
  .pestanas a, .pestanas button { padding-inline: 0; margin-bottom: -1px; background: none; border-radius: 0; border-bottom: 3px solid transparent }
  .pestanas a:hover, .pestanas button:hover { background: none; border-bottom-color: var(--gris-300) }
  .pestanas .on, .pestanas .on:hover { background: none; color: var(--teal-800); border-bottom-color: var(--coral-500); font-weight: var(--peso-fuerte) }
  .toast-zona { left: auto; right: var(--e-6); top: var(--e-6); bottom: auto; width: 360px }
  .modal-pie .btn { flex: 0 0 auto }
  .pagina-cabecera { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: var(--e-8) }
  .datos > div { flex-direction: row; gap: var(--e-4) }
  .datos dt { flex: 0 0 200px }
  .barra-inferior, .barra-inf, .hoja { display: none }
  .contenido { padding: var(--e-8) var(--e-8) var(--e-12) }
  .cabecera { padding-inline: var(--e-8) }
  .cabecera .marca-mini, .buscador .btn-lupa { display: none }
  .buscador { flex: 0 1 380px }
  /* [hidden] gana por especificidad+!important sobre esta regla en móvil;
     en escritorio el campo va siempre visible, sin botón de lupa. */
  .buscador .campo-buscar { display: block !important; position: static; flex: 1 }
  .lateral { display: flex; flex-direction: column; flex: none; position: sticky; top: 0; width: var(--ancho-lateral); height: 100dvh; padding: var(--e-6) var(--e-4) var(--e-4); background: var(--superficie); border-right: 1px solid var(--linea) }
  .lateral .marca { display: block; width: auto; height: auto; color: var(--teal-800); padding: var(--e-1) var(--e-2) }
  .lateral .marca-svg { width: 176px; height: 40px }
  .lateral .clinica { display: block; padding: var(--e-2) var(--e-2) var(--e-6); color: var(--texto-suave); font-size: var(--t-xs); font-weight: var(--peso-medio) }
  .lateral nav { flex: 1; overflow-y: auto }
  .lateral .usuario { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea) }
  .lateral .quien { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-2) var(--e-3) }
  .lateral .inicial { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800); font-size: var(--t-sm); font-weight: var(--peso-fuerte) }
  .lateral .nombre { display: block; font-size: var(--t-sm); font-weight: var(--peso-fuerte); line-height: 1.3 }
  .lateral .rol { display: block; font-size: var(--t-xs); color: var(--texto-suave) }
  .login { grid-template-columns: 1fr 1fr }
  .login-form { padding: var(--e-12) }
  .login-panel { display: flex; flex-direction: column; justify-content: center; gap: var(--e-8); padding: var(--e-12); background: var(--teal-800) radial-gradient(120% 90% at 100% 0%, var(--teal-700) 0%, transparent 60%); color: #fff }
  .login-panel .marca { width: 230px; height: 52px; color: #fff }
  .login-panel ul { list-style: none; display: grid; gap: var(--e-5); max-width: 34ch }
  .login-panel li { display: flex; gap: var(--e-3); color: var(--teal-100); font-size: var(--t-lg); line-height: 1.4 }
  .login-panel li b { color: #fff }
  .login-panel li svg { flex: none; width: 24px; height: 24px; margin-top: 3px; color: var(--teal-300) }
  .cabecera-publica nav { display: flex }
  .cabecera-publica .marca-svg { display: block }
  .cabecera-publica .marca-simbolo { display: none }
  .hero { padding-block: var(--e-24) }
  .hero .envoltura { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-16) }
  .funcion { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: var(--e-16) }
  .funcion.invertida .funcion-texto { order: 2 }
  .marco-telefono { width: 300px; padding: 12px }
  .marco-telefono .pantalla { width: 276px; height: 512px }
  .marco-telefono .lienzo { transform: scale(.7077) }
}
@media (min-width: 640px) and (max-width: 899px) { .rejilla-4 { grid-template-columns: 1fr 1fr } }
@media (min-width: 1200px) { .login { grid-template-columns: 1fr 1.1fr } }

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