:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --borde: #dfe3e8;
  --texto: #1d2733;
  --suave: #5b6876;
  --acento: #0f6e8c;
  --acento-texto: #ffffff;
  --acento-suave: #e8f2f6;
  --acento-oscuro: #0b5670;
  /* Marca del consultorio (cuentas/marca.py las reemplaza en templates/base.html) */
  --marca: #0f6e8c;
  --marca-secundario: #0f6e8c;
  --secundario-suave: #e8f2f6;
  --secundario-texto: #0f6e8c;
  --lateral-fondo: #ffffff;
  --franja: #0f6e8c;
  --peligro: #b42318;
  --exito: #067647;
  --alerta: #b54708;
  --azul-norma: #1d4ed8;
  --rojo-norma: #dc2626;
  --radio: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.suave { color: var(--suave); }
.chico { font-size: .85rem; }

.barra { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.25rem; background: var(--superficie); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.marca { font-weight: 700; color: var(--texto); display: inline-flex; align-items: center; }
.marca:hover { text-decoration: none; }
.logo-marca { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.franja-marca { height: 5px; background: var(--franja); }
.hamburguesa { display: none; padding: .2rem .55rem; font-size: 1.1rem; line-height: 1; }

/* Menú lateral: fijo a la izquierda en pantallas anchas, desplegable con ☰ en las angostas */
.marco { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; min-height: calc(100vh - 3.2rem); }
.marco > .lateral { align-self: stretch; }
/* Un elemento de la grilla con margin: auto se encoge a su contenido: el ancho se fija explícitamente */
.marco > main { width: 100%; }
.lateral { background: var(--lateral-fondo); border-right: 1px solid var(--borde); padding: 1.1rem .7rem; display: flex; flex-direction: column; gap: 1.4rem; }
.lateral .grupo-menu { display: flex; flex-direction: column; gap: .15rem; }
.lateral a { position: relative; display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: 10px; color: var(--texto); font-weight: 500; }
.lateral a .icono { width: 19px; height: 19px; flex: none; color: var(--secundario-texto); }
.lateral a:hover { background: var(--secundario-suave); text-decoration: none; }
.lateral a[aria-current="page"] { background: var(--secundario-suave); color: var(--secundario-texto); font-weight: 650; }
.lateral a[aria-current="page"]::before { content: ""; position: absolute; left: -.7rem; top: .45rem; bottom: .45rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--marca-secundario); }
.lateral a.sub { font-size: .93rem; padding-top: .4rem; padding-bottom: .4rem; }
.titulo-menu { padding: 0 .7rem .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--secundario-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .hamburguesa { display: inline-block; }
  .marco { display: block; position: relative; }
  .lateral { display: none; position: absolute; z-index: 20; top: 0; left: 0; min-height: 100%; width: min(280px, 85vw); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  .lateral.abierto { display: flex; }
}
.usuario { margin-left: auto; color: var(--suave); font-size: .9rem; }
.rol { background: var(--secundario-suave); color: var(--secundario-texto); padding: .05rem .45rem; border-radius: 99px; font-size: .8rem; }
.enlinea { display: inline; }
.fuera-de-vista { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Un solo ancho para todas las páginas: que el contenido no cambie de tamaño al navegar */
.contenido, .ancho { max-width: 1280px; margin: 0 auto; padding: 1.5rem 24px 3rem; }
@media (max-width: 720px) { .contenido, .ancho { padding: 1rem 16px 2.5rem; } }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.grilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.columnas { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 860px) { .columnas { grid-template-columns: 1fr; } }

/* Botones. Principal: relleno del color de la marca. Secundario: fondo suave del mismo color, con texto y borde en
   color, para que no pase desapercibido sobre una tarjeta blanca (decisión del 14/11). El texto usa el tono oscuro:
   contraste de al menos 5:1 con cualquier marca. */
.boton, button { display: inline-block; font: inherit; font-weight: 600; padding: .45rem .9rem; border-radius: var(--radio);
  border: 1px solid color-mix(in srgb, var(--acento) 45%, #fff); background: var(--acento-suave); color: var(--acento-oscuro); cursor: pointer; }
.boton:hover, button:hover { text-decoration: none; border-color: var(--acento); background: color-mix(in srgb, var(--acento) 22%, #fff); }
.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.peligro { background: #fef3f2; color: var(--peligro); border-color: #f1c4c0; }
.peligro:hover { background: #fee4e2; border-color: var(--peligro); }
button:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* Controles que no son acciones (pestañas, interruptores, hallazgos del odontograma): neutros, con su propio estado */
.segmentado button, .boton-hallazgo, .boton-pincel { background: var(--superficie); border-color: var(--borde); color: var(--texto); font-weight: 400; }
.boton-finalizar { width: 100%; padding: .65rem 1rem; font-weight: 600; }
button.enlace { border: 0; background: none; padding: 0; color: var(--acento); font-weight: 400; }
button.enlace:hover { background: none; }

form p { margin: 0 0 .75rem; }
label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .2rem; }
input, select, textarea { width: 100%; font: inherit; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--texto); }
input[type=checkbox], input[type=radio] { width: auto; }
input { text-overflow: ellipsis; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
textarea { min-height: 4.5rem; resize: vertical; }
/* Más aire entre campos que entre un campo y su ayuda: la ayuda se lee como parte del campo de arriba */
.campos { display: grid; gap: 1.15rem 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.campos .ayuda { margin-top: .2rem; }
.campos .entero { grid-column: 1 / -1; }
.campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 720px) { .campos-3 { grid-template-columns: 1fr; } }
.campos .casilla { align-self: end; padding-bottom: .5rem; }
.campos .casilla label { color: var(--texto); font-size: .9rem; }
.helptext, .ayuda { font-size: .8rem; color: var(--suave); }
.errorlist { color: var(--peligro); margin: .2rem 0; padding-left: 1rem; font-size: .85rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.acciones.vertical { flex-direction: column; align-items: stretch; }
/* Un enlace con forma de botón ocupa el ancho igual que un <button>, pero alinea su texto a la izquierda */
.acciones.vertical .boton { text-align: center; }
.acciones.separada { border-top: 1px solid var(--borde); padding-top: 1rem; }

/* Pantallas de cuenta (django-allauth): ingreso y segundo factor en una tarjeta angosta; seguridad, más ancha */
.contenido.entrada { max-width: 420px; margin: 4rem auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem 1.75rem; }
.contenido.cuenta { max-width: 760px; }
.formulario-cuenta .campo-cuenta { margin-bottom: .9rem; }
.formulario-cuenta .campo-cuenta input[type=checkbox] { margin-right: .4rem; }

.aviso { padding: .6rem .9rem; border-radius: var(--radio); margin-bottom: 1rem; background: var(--secundario-suave); border: 1px solid color-mix(in srgb, var(--marca-secundario) 35%, #fff); }
.aviso-success { background: #ecfdf3; border-color: #abefc6; }
.aviso-error, .aviso-warning { background: #fef3f2; border-color: #fecdca; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; color: var(--secundario-texto); font-weight: 600; }
td.grupo { background: var(--fondo); font-weight: 600; }
tr.htmx-request { opacity: .6; }

/* Alimentación: alimento, estado y observación en una fila */
.grilla-alimentos { display: grid; gap: 0 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lista-alimentos { display: flex; flex-direction: column; gap: .35rem; }
/* Alimentación: dos columnas solo si cada una tiene espacio para la observación; si no, una debajo de otra */
.grupos-alimentos { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); }
/* ¿Introducido? (Sí/No) y ¿reacción?, que solo aparece si el alimento está introducido; con reacción, la fila en rojo */
.fila-alimento { display: grid; grid-template-columns: minmax(7rem, 11rem) 5.5rem 6.5rem minmax(10rem, 1fr); gap: .5rem; align-items: center; }
.fila-suplemento { grid-template-columns: minmax(7rem, 11rem) minmax(12rem, 1fr); }
.fila-alimento label { margin: 0; color: var(--texto); font-size: .9rem; }
.encabezado-alimentos { font-size: .75rem; color: var(--suave); }
.fila-alimento .reaccion { visibility: hidden; }
.fila-alimento:has(select.introducido option[value="si"]:checked) .reaccion { visibility: visible; }
.fila-alimento:has(.reaccion input:checked):has(select.introducido option[value="si"]:checked) select,
.fila-alimento:has(.reaccion input:checked):has(select.introducido option[value="si"]:checked) .reaccion { border-color: var(--peligro); color: var(--peligro); }
.enlinea-check { display: flex; gap: .4rem; align-items: center; }
@media (max-width: 560px) {
  .fila-alimento, .fila-suplemento { grid-template-columns: 1fr 1fr; }
  .fila-alimento input[type=text] { grid-column: 1 / -1; }
  .encabezado-alimentos { display: none; }
}
.tabla-desplazable { overflow-x: auto; }
.valor-lab { display: flex; gap: .4rem; align-items: center; }
.valor-lab input { max-width: 7rem; }
.tabla-evolucion th, .tabla-evolucion td { white-space: nowrap; }

/* Secciones de examen (consultas/_secciones.html): opciones que se marcan con un clic */
.seccion-examen { border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem .9rem .8rem; margin: .75rem 0 0; }
.seccion-examen legend { font-weight: 600; padding: 0 .35rem; }
.preguntas { display: grid; gap: .6rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pregunta .rotulo, .pastillas .rotulo { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .25rem; }
.pastillas { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.pastillas .rotulo { margin: 0 .25rem 0 0; }
.pastilla { display: inline-flex; margin: 0; cursor: pointer; }
.pastilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilla span { padding: .2rem .65rem; border: 1px solid var(--borde); border-radius: 99px; font-size: .85rem; color: var(--texto); background: var(--superficie); }
.pastilla input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.pastilla input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 1px; }
.pregunta .dato-extra { margin-top: .3rem; max-width: 14rem; }
/* Las secciones de un tipo de atención aparecen solo si ese tipo está marcado */
.evaluacion-odonto [data-grupo] { display: none; }
.evaluacion-odonto:has(input[name$="-ortodoncia"]:checked) [data-grupo="ortodoncia"],
.evaluacion-odonto:has(input[name$="-maxilofacial"]:checked) [data-grupo="maxilofacial"] { display: block; }

/* Huanca test */
.huanca-area { margin-top: .75rem; }
.huanca-area h4 { margin: 0 0 .35rem; font-size: .9rem; }
.hito { display: grid; grid-template-columns: 1fr 5.5rem; gap: .1rem .5rem; align-items: center; padding: .25rem 0; border-bottom: 1px dashed var(--borde); }
.hito label { margin: 0; color: var(--texto); font-size: .88rem; }
.hito .ayuda { grid-column: 1 / -1; }
.hito:has(option[value="no"]:checked) select { border-color: var(--peligro); color: var(--peligro); }

/* Examen por sistemas: conservado/alterado con la descripción (opcional) siempre a la vista; lo alterado resalta */
.sistemas { display: grid; gap: .5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sistema { display: grid; grid-template-columns: 1fr 7.5rem; gap: .25rem .5rem; align-items: center; }
.sistema label { margin: 0; color: var(--texto); font-size: .9rem; }
.sistema .hallazgo { grid-column: 1 / -1; }
.sistema:has(option[value="anormal"]:checked) select { border-color: var(--alerta); color: var(--alerta); }

.sugerencias { list-style: none; margin: .25rem 0 0; padding: 0; max-height: 16rem; overflow-y: auto; border-radius: 6px; }
.sugerencias:not(:empty) { border: 1px solid var(--borde); }
.sugerencias li + li { border-top: 1px solid var(--borde); }
.sugerencias .sugerencia, .sugerencias .sugerencia-rx { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: .4rem .6rem; font-size: .85rem; background: var(--superficie); color: var(--texto); font-weight: 400; }
.sugerencias .sugerencia:hover, .sugerencias .sugerencia:focus, .sugerencias .sugerencia-rx:hover, .sugerencias .sugerencia-rx:focus { background: var(--acento-suave); }
.sugerencias .sugerencia b, .sugerencias .sugerencia-rx b { color: var(--acento); margin-right: .35rem; }

.etiqueta { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; background: #eef1f4; }
.etiqueta.ok { background: #ecfdf3; color: var(--exito); }
.etiqueta.alerta { background: #fffaeb; color: var(--alerta); }
.etiqueta.mal { background: #fef3f2; color: var(--peligro); }

.tabla-resultados td { vertical-align: middle; }
.tabla-resultados .col-barra { width: 160px; text-align: center; }
@media (max-width: 720px) { .tabla-resultados .col-barra { display: none; } }
/* Barra de -3,5 a +3,5 DE: rojo, ámbar, verde (±2 DE), ámbar, rojo */
.barra-z { position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #f3b5b0 0 7.1%, #f6d79c 7.1% 21.4%, #b7e1c4 21.4% 78.6%, #f6d79c 78.6% 92.9%, #f3b5b0 92.9%); }
.barra-z span { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; background: var(--texto); border-radius: 2px; }
.resultados { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: .75rem; }
.resultado { border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem .7rem; background: #fbfcfd; }
.resultado b { display: block; font-size: .8rem; color: var(--suave); font-weight: 600; }
.resultado .z { font-size: 1.1rem; font-weight: 600; }

.resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.resumen h3 { margin: 0 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.resumen p { margin: 0; }
@media (max-width: 860px) { .resumen { grid-template-columns: 1fr; } }
.alertas { margin: 0; padding-left: 1.1rem; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { padding: .6rem 0; border-bottom: 1px solid var(--borde); }

/* Curvas de crecimiento */
.pestanas { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--borde); margin-bottom: .75rem; }
.pestanas button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: .5rem .75rem; color: var(--suave); font-weight: 400; }
.pestanas button[aria-selected="true"] { border-bottom-color: var(--acento); color: var(--texto); font-weight: 600; }
.segmentado { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.segmentado label { margin: 0; padding: .3rem .7rem; font-size: .85rem; color: var(--texto); cursor: pointer; }
.segmentado input { display: none; }
.segmentado label:has(input:checked) { background: var(--acento); color: var(--acento-texto); }
.resumen-curva { font-size: 1rem; margin-bottom: .5rem; min-height: 3rem; }
.lienzo-curva { position: relative; height: 400px; }
@media (max-width: 720px) { .lienzo-curva { height: 300px; } }
.leyenda-curva { display: flex; gap: .4rem 1rem; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--suave); margin: .5rem 0 0; }
.muestra { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: -.6rem; vertical-align: middle; }
.muestra.verde { background: rgba(56, 161, 105, .35); }
.muestra.ambar { background: rgba(214, 158, 46, .45); }
.muestra.mediana { height: 3px; background: #2f855a; }
.muestra.paciente { width: 10px; border-radius: 50%; background: #0f6e8c; }

/* Odontograma (NTS 188) */
.odontograma { overflow-x: auto; }
.odontograma svg { min-width: 760px; width: 100%; height: auto; user-select: none; }
.odontograma .pieza { cursor: pointer; }
.odontograma .pieza:hover .contorno { stroke: var(--acento); stroke-width: 1.6; }
.odontograma .pieza.elegida .contorno { stroke: var(--acento); stroke-width: 2.2; }
.odontograma .pieza .cara:hover { stroke: var(--acento); stroke-width: 2.4; fill-opacity: .75; }
.odontograma .pieza:focus-visible { outline: none; }
.odontograma .pieza:focus-visible .contorno { stroke: var(--acento); stroke-width: 2.2; }
.pintando .odontograma .pieza { cursor: crosshair; }
.odontograma .pieza.inicio .contorno { stroke: #d97706; stroke-width: 2.6; }
/* Barra del odontograma: pincel con los más usados, buscador «Más», estado, borrador y deshacer. Fija arriba al bajar. */
.barra-odonto { position: sticky; top: 0; z-index: 3; background: var(--superficie); padding: .5rem 0; margin-bottom: .5rem;
  display: flex; flex-direction: column; gap: .4rem; border-bottom: 1px solid var(--borde); }
.barra-pincel { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.boton-pincel { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; font-size: .85rem; }
.boton-pincel[aria-pressed="true"], #pincel-borrador[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.buscar-pincel { display: flex; align-items: center; gap: .35rem; flex: 1 1 15rem; min-width: 12rem; }
.buscar-pincel input { flex: 1; }
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; flex: none; }
.punto.rojo { background: var(--rojo-norma); }
.punto.azul { background: var(--azul-norma); }
.punto.estado { background: linear-gradient(90deg, var(--azul-norma) 50%, var(--rojo-norma) 50%); }
.segmentado { display: inline-flex; }
.segmentado button { border-radius: 0; font-size: .8rem; padding: .3rem .6rem; }
.segmentado button:first-child { border-radius: 6px 0 0 6px; }
.segmentado button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.segmentado button[data-estado="1"][aria-pressed="true"]:not(:disabled) { background: var(--azul-norma); border-color: var(--azul-norma); color: #fff; }
.segmentado button[data-estado="0"][aria-pressed="true"]:not(:disabled) { background: var(--rojo-norma); border-color: var(--rojo-norma); color: #fff; }
.barra-odonto .aviso { margin: 0; }
.panel-pieza { background: #fbfcfd; margin-top: .75rem; }
.panel-pieza h4 { margin: .9rem 0 .35rem; font-size: .9rem; }
.panel-pieza .existentes { margin: 0 0 .75rem; padding-left: 1rem; }
.fila-hallazgo { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .2rem 0; border-bottom: 1px dashed var(--borde); }
.fila-hallazgo .nombre { flex: 1 1 14rem; font-size: .9rem; }
.fila-hallazgo .botones { display: flex; flex-wrap: wrap; gap: .25rem; }
.boton-hallazgo { padding: .2rem .6rem; font-size: .85rem; border-radius: 99px; min-width: 2.6rem; }
.azul { color: var(--azul-norma); }
.rojo { color: var(--rojo-norma); }

/* Aviso de cierre por inactividad (static/js/app.js): fijo abajo, sobre todo lo demás */
.aviso-inactividad { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50; display: flex;
  align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; background: var(--superficie);
  border: 1px solid var(--alerta); border-radius: var(--radio); box-shadow: 0 6px 24px rgba(0, 0, 0, .15); max-width: calc(100% - 2rem); }

/* Logo de DigiPaciente (producto) arriba de las pantallas de ingreso y recuperación */
.logo-producto { display: flex; justify-content: center; margin: 0 0 1.25rem; }
.logo-producto img { width: 220px; max-width: 100%; height: auto; }
.titulo-ingreso { font-size: 1.35rem; margin: 0; }

/* Desplegable con título (p. ej. la alimentación por consulta en la ficha): cerrado, muestra el título y un resumen */
.desplegable { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: .5rem; }
.desplegable > summary { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; cursor: pointer; list-style: none; padding: .25rem 0; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: "▸"; color: var(--suave); transition: transform .15s; }
.desplegable[open] > summary::before { transform: rotate(90deg); }
.desplegable > summary h3 { margin: 0; display: inline; }
.desplegable[open] > summary .suave { display: none; }

/* Segundo factor: guía paso a paso (templates/mfa/ y templates/ayuda/segundo_factor.html) */
.opciones-factor { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0; }
.opcion-factor { display: flex; flex-direction: column; margin: 0; }
.opcion-factor h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.opcion-factor .boton { margin-top: auto; text-align: center; }
.pasos { padding-left: 1.4rem; margin: .75rem 0; }
.pasos li { margin-bottom: .45rem; padding-left: .2rem; }
.pasos li::marker { font-weight: 700; color: var(--acento); }
.paso { border-top: 1px solid var(--borde); padding-top: 1rem; margin-top: 1rem; }
.paso h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; margin: 0 0 .5rem; }
.numero-paso { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto); font-size: .95rem; }
.qr { display: block; width: 200px; height: 200px; margin: .75rem 0; background: #fff; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio); }
.clave { display: inline-block; font-size: 1rem; letter-spacing: .05em; word-break: break-all; padding: .3rem .5rem; background: var(--fondo); border-radius: 6px; margin-right: .5rem; }
input.codigo { max-width: 12rem; font-size: 1.4rem; letter-spacing: .25em; text-align: center; }
.contenido.entrada:has(.guia) { max-width: 680px; }
.guia h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.preguntas dt { font-weight: 650; margin-top: .75rem; }
.preguntas dd { margin: .2rem 0 0; }

/* Secciones plegables del editor de consulta (static/js/app.js): el título es un botón; plegada, solo se ve el título */
.titulo-plegable { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font: inherit; color: inherit; }
.titulo-plegable::before { content: "▾"; color: var(--acento); font-size: .9em; transition: transform .15s; }
.plegada .titulo-plegable::before { transform: rotate(-90deg); }
.titulo-plegable:hover { background: none; }
.titulo-plegable:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.plegada > :not(.encabezado-plegable) { display: none !important; }
.plegada > .encabezado-plegable { margin-bottom: 0 !important; }
section.plegada { padding-top: .7rem; padding-bottom: .7rem; }