/* gestion.acodifna.org — una sola hoja, sin framework.
Estilo «panel dividido», tipo Outlook: plano, sin sombras, bordes de 1 px, lateral gris con
el elemento activo en blanco y una raya azul. Cada apartado es una caja con su cabecera en
una banda gris. Un solo azul; los estados son etiquetas de texto con un fondo suave. Todo
por teclado, foco visible, nada depende solo del color. Los colores y las medidas viven
aquí arriba; la fuente (Inter, OFL) va en static/fonts y no se carga de fuera. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2"); }
:root {
color-scheme: light;
--tinta: #242424;
--tinta-suave: #616161;
--tinta-tenue: #6e6e6e;
--fondo: #ffffff;
--fondo-suave: #f5f5f5;
--fuera-horario: #eef0f2;
/* La agenda pinta por tipo de cita, no por profesional, en tonos claros y poco saturados: se
mira todo el día y no tiene que cansar. Ninguno es gris: el gris es fuera de horario, no
vino y lo ocupado de las demás. */
--agenda-individual: #e3ecf6;
--agenda-individual-borde: #8fa8c4;
--agenda-grupal: #e5efe0;
--agenda-grupal-borde: #98b88c;
--agenda-bloqueo: #f2ecdc;
--agenda-bloqueo-raya: #f9f6ee;
--agenda-bloqueo-borde: #bfae86;
--agenda-cancelada: #f5e4e4;
--agenda-cancelada-borde: #cfa3a3;
--fondo-hover: #f0f6fc;
--papel: #ffffff;
--linea: #e1e1e1;
--linea-fuerte: #c7c7c7;
/* El borde de un campo dice dónde se escribe: 3,4:1 sobre blanco (con #c7c7c7 era 1,7:1). */
--borde-campo: #8a8a8a;
--marca: #0f6cbd;
--marca-oscura: #0b5394;
--marca-clara: #e6f0fa;
--marca-tenue: #f0f6fc;
--marca-linea: #b4d0ec;
/* El azul del nombre «ACODIFNA»: el de su logotipo, algo más oscuro. */
--color-nombre: #377aa9;
--acento: var(--marca);
--acento-clara: var(--marca-clara);
--ok: #0e700e;
--ok-fondo: #e6f4ea;
--ok-linea: #b7dcc0;
--aviso: #8a5a00;
--aviso-fondo: #fff4cf;
--aviso-linea: #ecd58a;
--error: #c4314b;
--error-fondo: #fde7ea;
--error-linea: #f3b7c1;
--radio: 4px;
--radio-pequeno: 4px;
--radio-grande: 6px;
--sombra: none;
--sombra-alta: 0 8px 24px rgba(0, 0, 0, .12);
--espacio: 1rem;
--hueco: 1rem;
--ancho: 100rem;
--ancho-formulario: 64rem;
--lateral: 224px;
--superior: 52px;
--control: 36px;
--fila: 44px;
/* Escala de letra: 15 px para leer sin esfuerzo toda la jornada; las tablas, un punto
menos para que quepan las columnas; nada baja de 12 px. */
--t-base: 15px;
--t-tabla: 14px;
--t-rotulo: 13px;
--t-min: 12px;
--t-h1: 24px;
--t-h2: 17px;
--t-h3: 15px;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
font-size: var(--t-base);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-padding-top: calc(var(--superior) + .5rem); }
body { margin: 0; min-height: 100%; background: var(--fondo); color: var(--tinta); display: flex; flex-direction: column; }
/* --- iconos (sprite SVG propio en base.html) -------------------------------------------- */
.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.icono.grande { width: 1.5em; height: 1.5em; }
.icono.suave { color: var(--tinta-tenue); }
/* --- armazón: lateral, barra superior, contenido ---------------------------------------- */
body.con-lateral { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-rows: var(--superior) 1fr auto; min-height: 100vh; }
.lateral { grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: .5rem; background: var(--fondo-suave); border-right: 1px solid var(--linea); }
.marca { display: flex; align-items: baseline; gap: .4rem; min-height: 2.5rem; padding: .6rem .5rem 0; margin-bottom: .5rem; font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none; color: var(--color-nombre); }
.marca small { font-weight: 400; letter-spacing: 0; color: var(--tinta-tenue); font-size: var(--t-min); }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav .grupo { padding: 1rem .6rem .3rem; font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta-tenue); }
.nav a { display: flex; align-items: center; gap: .6rem; min-height: 34px; padding: .25rem .6rem; border-radius: var(--radio); text-decoration: none; color: var(--tinta); line-height: 1.25; }
.nav a .icono { width: 18px; height: 18px; color: var(--tinta-suave); }
.nav a:hover { background: #ebebeb; color: var(--tinta); }
.nav a[aria-current] { background: var(--papel); font-weight: 600; box-shadow: inset 3px 0 0 var(--marca), 0 0 0 1px var(--linea); }
.nav a[aria-current] .icono { color: var(--marca); }
/* Cuando el contenido llega a su ancho máximo y se centra, el buscador y "Salir" se alinean con
sus bordes: a 1920 px quedaban 100 px por fuera. */
.cabecera { grid-column: 2; display: flex; align-items: center; gap: .75rem; height: var(--superior); padding: 0 max(1.25rem, calc((100% - var(--ancho)) / 2 + 1.25rem)); background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.cabecera .marca { margin: 0; padding: 0; }
.buscador-global { display: flex; align-items: center; gap: .5rem; flex: 1 1 12rem; max-width: 26rem; height: var(--control); padding: 0 .6rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); color: var(--tinta-suave); }
.buscador-global .icono { width: 16px; height: 16px; }
.buscador-global input[type="search"] { flex: 1; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; background: transparent; font: inherit; color: var(--tinta); }
.buscador-global input[type="search"]:focus { outline: none; }
.buscador-global:focus-within { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); outline: 2px solid transparent; }
.yo { display: flex; align-items: center; gap: .6rem; margin-left: auto; font-size: var(--t-rotulo); line-height: 1.2; }
.yo small { display: block; color: var(--tinta-suave); font-size: var(--t-min); }
.cabecera form { margin: 0; }
.dialogo { width: min(34rem, calc(100vw - 2rem)); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.25rem; color: var(--tinta); }
.dialogo::backdrop { background: rgba(0, 0, 0, .35); }
.dialogo h2 { margin: 0 0 .35rem; }
.dialogo textarea { width: 100%; }
.dialogo ul { padding-left: 1.25rem; margin: 0 0 .6rem; }
.cabecera button.secundario { min-height: 30px; padding: 0 .7rem; font-weight: 500; }
.avisar-boton { display: inline-flex; align-items: center; gap: .35rem; }main { grid-column: 2; flex: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 1.1rem 1.25rem 3rem; min-width: 0; }
main.estrecha { max-width: 30rem; }
.pie { grid-column: 2; max-width: var(--ancho); margin: 0 auto; padding: .75rem 1.25rem; color: var(--tinta-tenue); font-size: var(--t-min); width: 100%; }
body:not(.con-lateral) .cabecera, body:not(.con-lateral) main, body:not(.con-lateral) .pie { grid-column: auto; }
/* --- tipografía --------------------------------------------------------------------------- */
h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .75rem; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 600; margin: 1.5rem 0 .5rem; letter-spacing: 0; }
h3 { font-size: var(--t-h3); font-weight: 600; margin: 1.1rem 0 .4rem; }
p { margin: 0 0 .8rem; max-width: 72ch; }
/* Una lista con viñetas sangra como las de los avisos, no los 40 px del navegador. */
main :is(ul, ol):not([class]) { padding-left: 1.25rem; }
a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--marca-oscura); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.25rem 0; }
small, .suave { color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }
/* --- cajas: cada apartado con su cabecera en una banda gris -------------------------------- */
.tarjeta, .panel { padding: var(--hueco); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); min-width: 0; }
.tarjeta + .tarjeta, .panel + .panel { margin-top: var(--hueco); }
/* Una caja dentro de otra no lleva su propio marco. */
:is(.panel, .tarjeta) :is(.panel, .tarjeta) { padding: 0; border: 0; border-radius: 0; }
.rejilla-dos .panel-ancho { grid-column: 1 / -1; }
/* El título es lo primero de la caja aunque delante vaya un campo oculto, como el del csrf:
sin eso se quedaba fuera de la banda. Bajo un h2 de pestaña, el de la caja es un h3. */
:is(.panel, .tarjeta) > :is(h2, h3:not(.apartado)):is(:first-child, :nth-child(1 of :not([type="hidden"]))) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: calc(-1 * var(--hueco)) calc(-1 * var(--hueco)) var(--hueco); padding: .55rem var(--hueco); font-size: var(--t-h3); background: var(--fondo-suave); border-bottom: 1px solid var(--linea); border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
:is(.panel, .tarjeta) :is(.panel, .tarjeta) > :is(h2, h3:not(.apartado)):is(:first-child, :nth-child(1 of :not([type="hidden"]))) { margin: 0 0 .6rem; padding: 0 0 .35rem; background: none; border-radius: 0; }
.panel h2 .icono { color: var(--tinta-suave); width: 16px; height: 16px; }
.panel > :is(h2, h3:not(.apartado)):is(:first-child, :nth-child(1 of :not([type="hidden"]))) > .suave { font-weight: 400; }
.panel > :last-child { margin-bottom: 0; }
.panel ul.acciones { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.vacio { padding: .25rem 0; color: var(--tinta-suave); }
.vacio p { margin: 0; }
/* --- formularios --------------------------------------------------------------------------- */
form p, .campo { margin: 0 0 .9rem; }
label { display: block; font-weight: 600; font-size: var(--t-rotulo); margin-bottom: .25rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
width: 100%; min-height: var(--control); padding: .3rem .6rem; font: inherit; color: var(--tinta);
background-color: var(--papel); border: 1px solid var(--borde-campo); border-radius: var(--radio);
}
select:not([multiple]) { padding-right: 1.9rem; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .55rem center; background-size: .95rem; }
textarea { min-height: 5rem; padding: .45rem .6rem; }
.buscador-lista { margin-bottom: .25rem; }
.buscador-cuenta:empty { display: none; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); outline: 2px solid transparent; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; margin-right: .4rem; vertical-align: middle; accent-color: var(--marca); }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline; font-weight: 400; font-size: var(--t-base); }
/* Grupo de casillas o de opciones: el título es una leyenda y va igual que una etiqueta. */
fieldset.grupo-campo { border: 0; padding: 0; margin: 0; min-width: 0; background: none; }
fieldset.grupo-campo > legend { display: block; padding: 0; font-weight: 600; font-size: var(--t-rotulo); margin-bottom: .25rem; color: var(--tinta); }
/* Las opciones del grupo van en fila, en letra normal y con el texto al lado de su botón: con
el estilo de rótulo salían en negrita, una debajo de otra, y el texto largo caía bajo el botón. */
fieldset.grupo-campo > div:has(> div > label > :is([type="radio"], [type="checkbox"])) { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
/* En una escala con preguntas de cinco o seis respuestas, todas caben en una fila: la última
bajaba sola (WHO-5 a 1536 px, Barthel a 1366). Las columnas siguen alineadas entre preguntas. */
@media (min-width: 1100px) {
form:has(fieldset.grupo-campo > div > :nth-child(5) [type="radio"]) fieldset.grupo-campo > div:has(> div > label > [type="radio"]) { grid-template-columns: repeat(auto-fill, minmax(min(14rem, calc((100% - 4.5rem) / 5)), 1fr)); }
form:has(fieldset.grupo-campo > div > :nth-child(6) [type="radio"]) fieldset.grupo-campo > div:has(> div > label > [type="radio"]) { grid-template-columns: repeat(auto-fill, minmax(min(14rem, calc((100% - 5.5rem) / 6)), 1fr)); }
}
fieldset.grupo-campo label:has(> :is([type="radio"], [type="checkbox"])) { display: block; margin: 0; padding: .2rem 0 .2rem 1.5rem; text-indent: -1.5rem; font-weight: 400; font-size: var(--t-base); }
fieldset.grupo-campo label > * { text-indent: 0; }
fieldset.grupo-campo label > :is([type="radio"], [type="checkbox"]) { margin: 0 .45rem 0 0; vertical-align: -.15em; }
fieldset.grupo { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; background: none; }
fieldset.grupo > legend { padding: 0; font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta); }
.ayuda, form p span { display: block; color: var(--tinta-suave); font-size: var(--t-min); margin-top: .25rem; }
.errorlist { list-style: none; padding: .45rem .7rem; margin: 0 0 .75rem; background: var(--error-fondo); color: var(--error); border-radius: var(--radio); font-size: var(--t-rotulo); }
.errorlist li { margin: 0; }
/* La caja de errores de arriba del formulario: errores.js la enfoca al cargar. */
.resumen-errores { padding: .7rem .9rem; margin: 0 0 1rem; background: var(--error-fondo); color: var(--error); border: 1px solid var(--error-linea); border-radius: var(--radio); }
.resumen-errores:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.resumen-errores-titulo { margin: 0 0 .35rem; font-weight: 600; }
.resumen-errores ul { margin: 0; padding-left: 1.2rem; }
.resumen-errores li { margin: .15rem 0; }
.resumen-errores a { color: inherit; font-weight: 600; }
/* --- botones ------------------------------------------------------------------------------- */
button, .boton, input[type="submit"] {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
min-height: var(--control); padding: 0 .85rem; font: inherit; font-weight: 600; cursor: pointer;
border-radius: var(--radio); border: 1px solid var(--marca); background: var(--marca); color: #fff; text-decoration: none;
white-space: nowrap;
}
button:hover, .boton:hover, input[type="submit"]:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); color: #fff; }
button.secundario, .boton.secundario { background: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte); font-weight: 500; }
button.secundario:hover, .boton.secundario:hover { background: var(--fondo-suave); border-color: var(--linea-fuerte); color: var(--tinta); }
button.peligro, .boton.peligro { background: var(--papel); color: var(--error); border-color: var(--error); }
button.peligro:hover, .boton.peligro:hover { background: var(--error-fondo); color: var(--error); }
button.enlace { background: none; border: 0; color: var(--marca); padding: 0; min-height: var(--control); font-weight: 400; text-decoration: underline; }
button.enlace:hover { background: none; color: var(--marca-oscura); }
.botones { display: flex; gap: .5rem; flex-wrap: wrap; max-width: none; margin-top: 1rem; }
.botones.vertical { flex-direction: column; align-items: stretch; }
/* --- avisos ------------------------------------------------------------------------------ */
.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensajes li, .alerta { display: flex; gap: .6rem; align-items: flex-start; max-width: none; padding: .6rem .8rem; margin-bottom: .5rem; border-radius: var(--radio); border: 1px solid var(--marca-linea); background: var(--marca-tenue); }
.mensajes li.success, .alerta.ok { border-color: var(--ok-linea); background: var(--ok-fondo); }
.mensajes li.warning, .alerta.aviso { border-color: var(--aviso-linea); background: var(--aviso-fondo); }
.mensajes li.error, .alerta.error { border-color: var(--error-linea); background: var(--error-fondo); }
/* Sin icono, el aviso es un bloque de texto: en fila, cada párrafo, lista, enlace o negrita se
iba a su propia columna. Con icono delante, icono y texto siguen en fila. */
.alerta:not(:has(> .icono)) { display: block; }
.alerta > :last-child { margin-bottom: 0; }
.alerta > ul:not([class]) { margin-top: 0; padding-left: 1.25rem; }
/* --- tablas -------------------------------------------------------------------------------- */
.tabla-scroll { position: relative; overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
/* Dentro de una caja la tabla llega de borde a borde, sin marco propio. */
.panel .tabla-scroll { border: 0; border-radius: 0; margin: 0 calc(-1 * var(--hueco)); }
.panel .tabla-scroll :is(th, td):first-child { padding-left: var(--hueco); }
.panel .tabla-scroll :is(th, td):last-child { padding-right: var(--hueco); }
.panel > .tabla-scroll:last-child { margin-bottom: calc(-1 * var(--hueco)); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
/* En una caja dentro de otra no hay borde que tocar: así la tabla se comía el hueco de debajo. */
:is(.panel, .tarjeta) :is(.panel, .tarjeta) > .tabla-scroll:last-child { margin-bottom: 0; }
.panel > :is(h2, h3:not(.apartado)):is(:first-child, :nth-child(1 of :not([type="hidden"]))) + .tabla-scroll { margin-top: calc(-1 * var(--hueco)); }
/* En una tabla ancha la primera columna (la persona, la fecha, la medida) se queda al
desplazar a los lados. */
/* Con :where no pesa nada: el fondo de una fila marcada, vencida o bajo el ratón manda. El
calendario del mes no, que su primera columna es el lunes. */
:where(.tabla-scroll table:not(.mes)) :where(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); }
table { font-size: var(--t-tabla); border-collapse: collapse; width: 100%; background: var(--papel); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
td { height: var(--fila); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--fondo-hover); }
th { font-weight: 600; color: var(--tinta-suave); font-size: var(--t-rotulo); background: var(--papel); }
thead th { border-bottom-color: var(--linea-fuerte); }
td a:first-child:not(.boton) { font-weight: 500; }
td a:not(.boton) { text-decoration: none; }
td a:not(.boton):hover, td a:not(.boton):focus-visible { text-decoration: underline; }
td :is(.boton, button):not(.enlace) { min-height: 34px; padding: 0 .75rem; }
/* --- estados: etiqueta de texto con un fondo suave ------------------------------------------- */
.etiqueta { display: inline-block; padding: 0 .4rem; border-radius: 3px; font-size: var(--t-min); font-weight: 600; line-height: 1.6; color: var(--tinta-suave); background: var(--fondo-suave); white-space: nowrap; text-decoration: none; }
.etiqueta.ok, .etiqueta.estado-asociada { color: var(--ok); background: var(--ok-fondo); }
.etiqueta.aviso, .etiqueta.estado-acogida, .etiqueta.estado-solicitud { color: var(--aviso); background: var(--aviso-fondo); }
.etiqueta.error, .etiqueta.estado-baja, .etiqueta.estado-bloqueada { color: var(--error); background: var(--error-fondo); }
.etiqueta.estado-fallecida, .etiqueta.estado-contacto { color: var(--tinta-suave); }
a.etiqueta:hover { text-decoration: underline; }
/* --- cabeceras de vista, buscador, ficha ------------------------------------------------------ */
.encabezado-vista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.encabezado-vista :is(h1, h2, h3) { margin: 0; }
.encabezado-vista .botones { margin: 0; }
.buscador { margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.buscador-fila { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1 1 100%; }
.buscador-fila input[type="search"][name][id] { flex: 1 1 14rem; max-width: 26rem; min-height: var(--control); padding-left: 2rem; background: var(--papel) url("data:image/svg+xml;utf8,") no-repeat .55rem center / 1rem; }
/* Búsqueda al escribir (htmx): el botón de buscar sobra cuando hay JavaScript; los de
exportar (con name) se quedan. Mientras llega la respuesta, los resultados se atenúan. */
.con-js form[hx-get] button[type="submit"]:not([name]) { display: none; }
#resultados.htmx-request { opacity: .55; }
.filtrar-tabla { max-width: 22rem; margin: 0 0 .75rem; }
.filtrar-tabla input[type="search"][name][id] { padding-left: 2rem; background: var(--papel) url("data:image/svg+xml;utf8,") no-repeat .55rem center / 1rem; }
.migas { margin: 0 0 .35rem; font-size: var(--t-rotulo); color: var(--tinta-suave); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
/* La cabecera de la ficha: la persona y, debajo, sus pestañas a todo lo ancho. */
.ficha-encabezado { margin: 0 0 1rem; }
.ficha-cabecera { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ficha-cabecera h1 { margin-bottom: .3rem; }
.ficha-cabecera > .botones { margin-left: auto; margin-top: 0; }
.ficha-cabecera > div:not(.botones) { flex: 1 1 14rem; min-width: 0; }
.ficha-datos { display: flex; align-items: center; gap: .35rem .7rem; flex-wrap: wrap; margin: 0; font-size: var(--t-rotulo); color: var(--tinta-suave); }
/* Alergias y urgencia, en franja bajo el nombre y en todas las pestañas: con datos de salud no
pueden ser una etiqueta pequeña que se pasa por alto. Dice que las hay, no cuáles. */
.ficha-alerta { max-width: none; margin: .6rem 0 0; align-items: center; }
.ficha-alerta + .ficha-alerta { margin-top: .4rem; }
.ficha-alerta.aviso .icono { color: var(--aviso); }
.ficha-alerta.error .icono { color: var(--error); }
.ficha-foto { width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none; object-fit: cover; border: 1px solid var(--linea); }
.pestanas { display: flex; margin: .75rem 0 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.ficha-encabezado .pestanas { margin-bottom: 0; }
.pestanas a { padding: 0 .4rem; text-decoration: none; color: var(--tinta-suave); min-height: 38px; display: inline-flex; align-items: center; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
.pestanas a[aria-current="page"], .pestanas a[aria-current="true"] { font-weight: 600; color: var(--marca); border-bottom-color: var(--marca); }
/* Si no caben en una fila, ninguna baja sola a la siguiente: se reparten como las palabras de un
párrafo. En el móvil van en una fila que se desliza. */
@media (min-width: 601px) {
.pestanas { display: block; text-wrap: pretty; font-size: 0; }
.pestanas a { font-size: var(--t-base); vertical-align: top; }
}
/* Dos columnas como mucho: con minmax(20rem, 1fr) a solas salían cuatro en pantalla grande. Una
caja que se queda sola en su fila, entre cajas que ocupan todo el ancho, se estira. */
.rejilla-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(20rem, calc(50% - .75rem)), 1fr)); gap: var(--hueco) 1.25rem; align-items: start; }
.rejilla-dos > :not(.panel-ancho):is(:first-child, .panel-ancho + *):is(:last-child, :has(+ .panel-ancho)) { grid-column: 1 / -1; }
/* Con tres cajas justas, de tres en tres si caben: de dos en dos la tercera se quedaba sola. */
.rejilla-dos:has(> :nth-child(3):last-child):not(:has(> .panel-ancho)) { grid-template-columns: repeat(auto-fit, minmax(max(20rem, calc(33.3% - .9rem)), 1fr)); }
.rejilla-dos .panel + .panel { margin-top: 0; }
.rejilla-dos + .panel { margin-top: var(--hueco); }
/* Con un rótulo largo, su columna no pasa de la mitad: a 375 px sacaba la página de lado. */
.datos { display: grid; grid-template-columns: fit-content(50%) 1fr; gap: .5rem 1.25rem; margin: 0; align-items: baseline; }
.datos dt { color: var(--tinta-suave); font-weight: 400; font-size: var(--t-rotulo); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos dd .icono { color: var(--tinta-tenue); margin-right: .15rem; }
.dato-vacio { color: var(--tinta-tenue); }
.lista-limpia { list-style: none; padding: 0; margin: .25rem 0 0; }
.lista-limpia li { padding: .5rem 0; }
.lista-limpia li + li { border-top: 1px solid var(--linea); }
.lista-limpia li:first-child { padding-top: 0; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: .5rem 0; border-top: 1px solid var(--linea); }
.lista-simple li:first-child { border-top: 0; padding-top: 0; }
/* En las listas de una caja el enlace es el título de la fila: sin subrayar hasta pasar por encima. */
:is(.lista-limpia, .lista-simple) li > a:first-child:not(.boton) { text-decoration: none; font-weight: 500; }
:is(.lista-limpia, .lista-simple) li > a:first-child:not(.boton):hover { text-decoration: underline; }
.fila-estado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
td.fila-estado { display: table-cell; white-space: nowrap; text-align: right; }
td.fila-estado > * + * { margin-left: .6rem; }
td.fila-estado form { display: inline-flex; gap: .4rem; }
/* Las acciones de cada fila van discretas: pesa más lo que dice la fila que sus botones. */
td.fila-estado :is(button, .boton):is(.secundario, .enlace) { min-height: 32px; padding: 0 .5rem; background: none; border: 1px solid transparent; color: var(--marca); font-weight: 500; text-decoration: none; }
td.fila-estado :is(button, .boton):is(.secundario, .enlace):hover { background: var(--marca-tenue); border-color: transparent; color: var(--marca-oscura); }
.equipo-tabla td:first-child, .equipo-tabla td.num { white-space: nowrap; }
/* El PAI se lee de arriba abajo, sin tabla: por áreas, y en cada objetivo qué, quién, para cuándo,
las actuaciones, el indicador y cómo va. */
.pai-estado { margin-bottom: var(--hueco); }
.pai-estado > p { margin-bottom: .35rem; }
.pai-estado > :is(.alerta, .datos) { margin-top: .6rem; }
.pai-estado > .alerta { max-width: none; }
.objetivos-pai { list-style: none; padding: 0; margin: 0; }
.objetivos-pai > li { padding: 1rem 0; }
.objetivos-pai > li:first-child { padding-top: 0; }
.objetivos-pai > li:last-child { padding-bottom: 0; }
.objetivos-pai > li + li { border-top: 1px solid var(--linea); }
.objetivos-pai h3 { margin-top: 0; }
/* El que se está editando, en gris: se ve cuál es sin buscarlo. */
.objetivos-pai > li.editando { margin: 0 calc(-1 * var(--hueco)); padding: 1rem var(--hueco); background: var(--fondo-suave); }
.objetivos-pai > li.editando:first-child { margin-top: calc(-1 * var(--hueco)); }
.objetivos-pai > li.editando:last-child { margin-bottom: calc(-1 * var(--hueco)); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
.objetivo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.objetivo-cabeza > p:first-child { flex: 1 1 20rem; margin: 0; font-weight: 600; }
.objetivo-cabeza > .fila-estado { margin: 0; }
.objetivo-cabeza > .fila-estado :is(label, .suave) { margin: 0; font-weight: 400; font-size: var(--t-rotulo); color: var(--tinta-suave); white-space: nowrap; }
.objetivo-cabeza > .fila-estado select { width: auto; max-width: 100%; }
.objetivo-quien, .objetivo-origen, .objetivo-cambios { margin: .25rem 0 0; max-width: none; font-size: var(--t-rotulo); color: var(--tinta-suave); }
/* Como el aviso de Hoy: llegó la fecha y nadie lo ha evaluado. */
.plazo-cumplido { color: var(--error); font-weight: 600; }
.objetivo-origen, .objetivo-cambios { margin-top: .5rem; }
.objetivo-cambios { list-style: none; padding: 0; }
.objetivos-pai .datos { margin-top: .6rem; }
.objetivos-pai .datos ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
/* Las acciones de cada objetivo, discretas como las de las filas de Tareas: pesa más lo que
dice el objetivo. */
.objetivo-acciones { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 0 -.5rem; }
.objetivo-cabeza > .fila-estado button.secundario,
.objetivo-acciones :is(a, button) { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .5rem; background: none; border: 1px solid transparent; border-radius: var(--radio); color: var(--marca); font-weight: 500; text-decoration: none; }
:is(.objetivo-cabeza > .fila-estado button.secundario, .objetivo-acciones :is(a, button)):hover { background: var(--marca-tenue); border-color: transparent; color: var(--marca-oscura); }
/* Revisar: «si sigue todo igual» y «si hay que cambiar algo», una al lado de la otra. */
.revisar-salidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 2.5rem; }
.revisar-salidas h3 { margin-top: 0; }
.revisar-salidas .campo { max-width: 16rem; }
@media (max-width: 600px) {
/* «Cómo va» encima, y el estado con su «Guardar» en una fila. */
.objetivo-cabeza > .fila-estado label { flex-basis: 100%; }
}
.pai-interes { margin-top: var(--hueco); }
.texto-largo { white-space: pre-wrap; }
.nivel { display: inline-block; min-width: 1.6rem; text-align: center; padding: .05rem .35rem; border-radius: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nivel-0 { background: var(--ok-fondo); color: var(--ok); }
.nivel-1 { background: var(--aviso-fondo); color: var(--aviso); }
.nivel-2 { background: var(--error-fondo); color: var(--error); }
/* En el detalle de la valoración social el nivel no se parte: estrecha el nombre del ámbito. */
.nivel-texto { white-space: nowrap; }
.medidas { max-width: 40rem; display: grid; grid-template-columns: 1fr 6rem 6rem; gap: .35rem .75rem; align-items: center; margin: 0 0 1rem; }
.medidas .cabecera-medidas { font-size: var(--t-min); color: var(--tinta-suave); text-align: center; }
.medidas input { min-height: var(--control); }
.escala { max-width: 48rem; display: grid; grid-template-columns: 1fr minmax(8rem, 18rem); gap: .35rem .75rem; align-items: center; margin: 0 0 1rem; }
/* A 375 px el texto de las opciones de Barthel o Braden no cabe al lado: debajo. */
@media (max-width: 600px) { .medidas { grid-template-columns: 1fr 4.5rem 4.5rem; } .escala { grid-template-columns: 1fr; } }
.opciones-fila > div, .opciones-fila ul { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; gap: .25rem 1rem; flex-wrap: wrap; }
.opciones-fila label { display: inline-flex; align-items: center; font-weight: 400; font-size: var(--t-base); margin: 0; min-height: var(--control); }
/* En un formulario la explicación ocupa su caja, como los campos: el tope de 72 caracteres
la dejaba a media caja en un portátil. */
fieldset p { max-width: none; }
/* Lo plegable y el botón del borrador no van pegados al rótulo que les sigue. */
.criterios { margin: 0 0 .75rem; }
/* Lo que significa cada nivel, con la marca de color del botón que le toca, en un recuadro
gris: se ve que es ayuda y no parte del formulario. */
.criterios-lista { list-style: none; margin: .4rem 0 0; padding: .65rem .8rem; background: var(--fondo-suave); border-radius: var(--radio); display: grid; gap: .5rem; }
.criterios-lista li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: baseline; }
.criterios-lista strong { font-weight: 600; }
.botones[data-borrador] { margin-bottom: .75rem; }
/* "No procede / No valorado" no es un nivel: va al final, un poco aparte del 0, el 1 y el 2. */
.dimension .opciones-fila > div > :last-child { margin-left: .75rem; }
/* Los niveles de la valoración social son botones con borde. El marcado toma el color de su
nivel, el de las marcas 0, 1 y 2 del detalle y la evolución, y gris "No procede". El círculo
se oculta, pero el teclado lo sigue usando: el foco se ve en el botón. */
.dimension .opciones-fila > div { gap: .5rem; }
.dimension .opciones-fila label { position: relative; padding: 0 .9rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); cursor: pointer; }
.dimension .opciones-fila label:hover { border-color: var(--borde-campo); background: var(--fondo-suave); }
.dimension .opciones-fila input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dimension .opciones-fila label:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.dimension .opciones-fila label:has(input[value="0"]:checked) { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.dimension .opciones-fila label:has(input[value="1"]:checked) { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }
.dimension .opciones-fila label:has(input[value="2"]:checked) { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.dimension .opciones-fila label:has(input[value="np"]:checked) { background: var(--fondo-suave); border-color: var(--tinta-suave); color: var(--tinta); }
/* Un apartado con título es una caja como las de la ficha, con el título dentro, en la banda
gris. El del navegador, partiendo el borde, hacía que la pantalla pareciera sin estilo. */
fieldset { min-width: 0; margin: 0 0 var(--hueco); padding: 0 var(--hueco); border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); }
fieldset:not(.grupo-campo, .grupo) > legend:not(.visualmente-oculto) { float: left; box-sizing: border-box; width: calc(100% + 2 * var(--hueco)); margin: 0 calc(-1 * var(--hueco)) var(--hueco); padding: .55rem var(--hueco); font-size: var(--t-h3); font-weight: 600; color: var(--tinta); background: var(--fondo-suave); border-bottom: 1px solid var(--linea); border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
fieldset:not(.grupo-campo, .grupo) > legend ~ * { clear: left; }
/* Dentro de una caja, el apartado no lleva otra caja: la caja queda partida en bandas. */
.panel > fieldset:not(.grupo-campo, .grupo) { margin: var(--hueco) calc(-1 * var(--hueco)) 0; border: 0; border-radius: 0; background: none; }
.panel > fieldset:not(.grupo-campo, .grupo) > legend { border-top: 1px solid var(--linea); border-radius: 0; }
.panel > fieldset:not(.grupo-campo, .grupo):is(:first-child, :nth-child(1 of :not([type="hidden"]))) { margin-top: calc(-1 * var(--hueco)); }
.panel > fieldset:not(.grupo-campo, .grupo):is(:first-child, :nth-child(1 of :not([type="hidden"]))) > legend { border-top: 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.rejilla-campos .campo > .casilla:first-child { margin-top: 1.45rem; min-height: var(--control); }
/* En una sola columna no hay campo al lado con el que alinearla: el hueco de encima sobraba. */
@media (max-width: 460px) { .rejilla-campos .campo > .casilla:first-child { margin-top: 0; } }
/* Lo mismo sola en su fila, entre dos campos a todo lo ancho. */
.rejilla-campos .campo-ancho + .campo:is(:has(+ .campo-ancho), :last-child) > .casilla:first-child { margin-top: 0; }
/* El buscador de persona ocupa dos columnas: en una, "Escribe apellidos o nombre para filtrar"
se cortaba (la sesión, incidencias) y no cabían los nombres largos. En el móvil hay una sola. */
@media (min-width: 1100px) {
.rejilla-campos > .campo:not(.campo-ancho):has([data-buscar]) { grid-column: span 2; }
}
.casilla { display: flex; align-items: center; gap: .25rem; margin: .35rem 0; }
.casilla label { margin: 0; font-weight: 400; font-size: var(--t-base); }
/* Casilla con su ayuda (el cierre): la ayuda va debajo, no en una columna estrecha al lado. */
.campo.casilla { flex-wrap: wrap; }
.campo.casilla > .ayuda { flex-basis: 100%; }
details + form.panel { margin-top: 1rem; }
.etiqueta-grupo { display: block; font-weight: 600; font-size: var(--t-rotulo); margin-bottom: .3rem; }
/* --- entrada (entrar, código, confiar, contraseña) --------------------------------------- */
.cuerpo-entrada main { max-width: none; padding: 0; }
.entrada { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--fondo-suave); }
.entrada-cuerpo { width: 100%; max-width: 24rem; padding: 2rem 1rem; }
.entrada-marca { margin: 0 0 1.25rem; text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--color-nombre); }
.entrada-marca small { display: block; font-weight: 400; font-size: var(--t-base); color: var(--tinta-suave); letter-spacing: 0; }
.entrada-tarjeta { width: 100%; max-width: 24rem; padding: 2rem 1.75rem; }
.entrada h1 { font-size: 1.25rem; margin-bottom: .25rem; }
.entrada h1 + p { margin-bottom: 1.25rem; }
.entrada input { min-height: 38px; }
.entrada input[name="code"] { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; min-height: 3rem; }
.entrada .botones { margin-top: 1.25rem; flex-direction: column; align-items: stretch; }
.entrada .botones button, .entrada .botones .boton { min-height: 38px; width: 100%; }
.entrada hr { margin: 1.25rem 0 1rem; }
.entrada form + p { margin-top: 1rem; }
.entrada-enlace { text-align: center; margin: 1rem 0 0; font-size: var(--t-rotulo); }
@media (max-width: 800px) {
.entrada { align-items: flex-start; }
.entrada-cuerpo { padding: 1.25rem .75rem 2rem; }
.entrada-tarjeta { padding: 1.5rem 1.25rem; }
}
.menu-boton { display: none; }
/* --- pantallas estrechas: la lateral se pliega tras un botón «Menú» (menu.js) ------------- */
@media (max-width: 900px) {
body.con-lateral { grid-template-columns: minmax(0, 1fr); }
.lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 16rem; z-index: 20; transform: translateX(-100%); }
.lateral.abierto { transform: none; box-shadow: 0 0 0 100vw rgba(0, 0, 0, .25), var(--sombra-alta); }
.cabecera, main, .pie { grid-column: 1; }
.menu-boton { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--control); padding: 0 .7rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 500; cursor: pointer; }
.menu-boton:hover, .menu-boton[aria-expanded="true"] { background: var(--fondo-suave); }
.buscador-global { max-width: none; }
.yo small { display: none; }
.yo strong { display: block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
.lateral { transition: transform .18s ease; }
.nav a, button, .boton, .pestanas a, tbody tr td { transition: background-color .12s ease, color .12s ease; }
}
/* --- pequeño primero: las pantallas de trabajo se hacen a 375 px ------------------------- */
@media (max-width: 600px) {
/* En el móvil las tablas se leen fila a fila y caben a tamaño de texto. */
:root { --control: 42px; --fila: 46px; --t-tabla: var(--t-base); }
button, .boton, input[type="submit"] { white-space: normal; }
main { padding: .85rem .85rem 2.5rem; }
h1 { font-size: 22px; }
.cabecera { padding: 0 .85rem; gap: .5rem; }
/* En el móvil el botón de avisar se queda en su icono: la cabecera no cabe entera. */
.avisar-boton span { display: none; }
.avisar-boton { padding: 0 .5rem; }
.cabecera .marca small { display: none; }
.botones:not(.vertical) > * { flex: 1 1 auto; }
/* Las tablas cortas del Resumen caben sin desplazarse de lado. */
th, td { padding-left: .5rem; padding-right: .5rem; }
}
/* A 375 px el nombre de la cuenta dejaba el buscador en «Busca»: en el móvil, fuera. */
@media (max-width: 420px) { .cabecera .yo { display: none; } }
/* --- piezas del panel dividido: barra de herramientas, vista previa, ficha, «Más» ---------- */
.herramientas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.herramientas .buscador-fila { flex: 1 1 16rem; max-width: 34rem; }
/* Con el botón «Buscar» oculto, la fila no le guarda sitio: lo siguiente va pegado al buscador. */
.con-js .herramientas[hx-get] .buscador-fila { max-width: 26rem; }
.herramientas select, .herramientas input[type="text"][name][id] { width: auto; min-width: 8rem; }
.herramientas .casilla { margin: 0; }
.rejilla-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.vista-previa { display: none; }
@media (min-width: 1100px) {
.rejilla-lista.con-previa { grid-template-columns: minmax(0, 1fr) 22rem; }
.rejilla-lista.con-previa .vista-previa { display: block; position: sticky; top: calc(var(--superior) + 1rem); }
}
.vista-previa .panel { padding: 0; }
.vista-previa .cab { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--linea); }
.vista-previa .cab h2 { margin: 0; font-size: var(--t-h3); }
.vista-previa .cab .suave { display: block; font-size: var(--t-min); }
.vista-previa .datos { padding: .75rem 1rem; }
.vista-previa .bloque { padding: .6rem 1rem; border-top: 1px solid var(--linea); }
.vista-previa .bloque h3 { margin: 0 0 .4rem; font-size: var(--t-rotulo); color: var(--tinta-suave); }
.vista-previa .bloque ul { list-style: none; margin: 0; padding: 0; }
.vista-previa .bloque li { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; font-size: var(--t-rotulo); }
.vista-previa .botones { padding: .75rem 1rem; margin: 0; border-top: 1px solid var(--linea); }
.vista-previa .botones .boton { flex: 1; }
.vista-previa .vacia { padding: 1.5rem 1rem; color: var(--tinta-tenue); font-size: var(--t-rotulo); text-align: center; }
tbody tr.fila-persona { cursor: pointer; }
.tabla-personas td.num a { color: inherit; font-weight: 400; text-decoration: none; }
.tabla-personas td.num a:hover, .tabla-personas td.num a:focus-visible { text-decoration: underline; }
/* Tablas cortas que en el móvil no caben (personas, servicios y citas de la ficha): cada fila es
una ficha, lo primero arriba y el resto debajo en una línea, con su etiqueta si la necesita y
sin lo que falta. */
@media (max-width: 600px) {
.tabla-compacta thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabla-compacta, .tabla-compacta tbody { display: block; }
.tabla-compacta tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; padding: .7rem .75rem; border-bottom: 1px solid var(--linea); }
.tabla-compacta td, .rejilla.ficha .tabla-compacta td.num { display: block; height: auto; padding: 0; border: 0; font-size: var(--t-rotulo); color: var(--tinta-suave); white-space: normal; }
.tabla-compacta td:first-child { flex-basis: 100%; font-size: var(--t-base); font-weight: 500; color: var(--tinta); }
.tabla-compacta td:nth-child(n+3)::before { content: "· "; }
.tabla-compacta td[data-etiqueta]::before { content: attr(data-etiqueta) " "; }
.tabla-compacta td:nth-child(n+3)[data-etiqueta]::before { content: "· " attr(data-etiqueta) " "; }
.tabla-compacta td.sin-dato, .rejilla.ficha .tabla-compacta td.sin-dato { display: none; }
.tabla-compacta td.num a { color: var(--marca); }
}
tbody tr.seleccionada td { background: var(--fondo-hover); }
.rejilla.ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
@media (min-width: 1100px) { .rejilla.ficha { grid-template-columns: minmax(0, 1fr) 22rem; } .rejilla.ficha.sola { grid-template-columns: minmax(0, 1fr); } }
.rejilla.ficha .col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-width: 0; }
/* La fecha y la hora de una cita no se parten en tres líneas en el móvil. */
.rejilla.ficha td.num { white-space: nowrap; }
@media (max-width: 600px) { .pestanas a { padding: 0 .5rem; } }
.rejilla.ficha .panel + .panel { margin-top: 0; }
.datos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
.datos.tres > div { min-width: 0; }
.datos.tres dt { margin-bottom: .1rem; }
@media (max-width: 700px) { .datos.tres { grid-template-columns: 1fr 1fr; } }
details.mas { position: relative; display: inline-block; }
details.mas > summary { list-style: none; cursor: pointer; }
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary::after { content: " ▾"; font-size: .85em; }
details.mas > .mas-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 12rem; padding: .3rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; }
details.mas > .mas-lista a { display: block; padding: .4rem .6rem; border-radius: var(--radio); text-decoration: none; color: var(--tinta); white-space: nowrap; }
details.mas > .mas-lista a:hover { background: var(--fondo-suave); }
@media (max-width: 600px) {
/* Las de la ficha van en una fila que se desliza de lado: en cuatro filas tapaban los datos. */
.ficha-encabezado .pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ficha-encabezado .pestanas::-webkit-scrollbar { display: none; }
.ficha-encabezado .pestanas > * { flex: none; }
}
.grupo-botones { display: inline-flex; }
.grupo-botones .boton { border-radius: 0; margin-left: -1px; }
.grupo-botones .boton:first-child { border-radius: var(--radio) 0 0 var(--radio); margin-left: 0; }
.grupo-botones .boton:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.agenda-barra .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* --- agenda ------------------------------------------------------------------------------ */
.agenda-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.agenda-barra h1 { margin: 0; font-size: 22px; }
.agenda-barra form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.agenda-profesional { margin-bottom: 1.25rem; }
.agenda-dias { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .9rem; }
.agenda-dias nav, .agenda-dias form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.agenda-dias form { margin-left: auto; }
.agenda-dias select { width: auto; }
.agenda-dias a[aria-current="page"] small { color: rgba(255, 255, 255, .9); }
.agenda-dias a small { font-weight: 400; }
.agenda-dias a[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }
.agenda-general .agenda-dia-cab { font-size: var(--t-rotulo); overflow-wrap: anywhere; }
.agenda-profesional h2 { font-size: var(--t-h3); margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.agenda-scroll { overflow-x: auto; }
/* Tantas columnas como días tiene la semana: sin el sábado y el domingo vacíos son cinco. */
.agenda { display: grid; grid-template-columns: 3.5rem repeat(var(--dias, 6), minmax(9rem, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); min-width: calc(3.5rem + var(--dias, 6) * 9rem); overflow: clip; }
.agenda-dia-cab { padding: .5rem .6rem; font-weight: 600; font-size: var(--t-rotulo); border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); background: var(--fondo-suave); }
.agenda-dia-cab.hoy { background: var(--marca); color: #fff; }
.agenda-dia-cab.hoy small { color: rgba(255, 255, 255, .85); }
.agenda-dia-cab small { display: block; font-weight: 400; color: var(--tinta-suave); }
.agenda-horas { position: relative; position: sticky; left: 0; z-index: 2; background: var(--papel); }
/* La esquina de encima de las horas se queda con ellas: si no, al desplazar la rejilla de lado
la cabecera de la primera columna se metía sobre las horas y no cuadraba con sus citas. */
.agenda > .agenda-dia-cab:first-child { position: sticky; left: 0; z-index: 2; }
.agenda-hora { position: absolute; right: .4rem; transform: translateY(-50%); font-size: var(--t-min); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
/* Lo disponible en blanco y lo de fuera del horario en gris, como en cualquier calendario. Las
líneas de las horas van por encima de los dos: el tramo queda al fondo de su día. */
.agenda-dia { position: relative; border-left: 1px solid var(--linea); background: var(--fuera-horario); }
.agenda-dia::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rem-hora) - 1px), var(--linea) calc(var(--rem-hora) - 1px), var(--linea) var(--rem-hora)); }
/* Sin horario se le puede dar cita a cualquier hora: todo el día en blanco. Hoy se marca en
la cabecera y con la línea de ahora: el fondo solo dice si se le puede dar cita. */
.agenda-dia.sin-limite { background: var(--papel); outline: 1px dashed var(--linea); outline-offset: -1px; }
.agenda-dia-horario span { display: block; font-variant-numeric: tabular-nums; }
.agenda-tramo { position: absolute; z-index: -1; left: 0; right: 0; background: var(--papel); }
.agenda-bloqueo { position: absolute; left: 0; right: 0; z-index: 2; background: repeating-linear-gradient(135deg, var(--agenda-bloqueo) 0, var(--agenda-bloqueo) 6px, var(--agenda-bloqueo-raya) 6px, var(--agenda-bloqueo-raya) 12px); border: 1px solid var(--agenda-bloqueo-borde); color: var(--tinta-suave); font-size: var(--t-min); padding: .15rem .4rem; overflow: hidden; }
.agenda-bloqueo span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La leyenda: cada cosa es una muestra de tamaño de botón, igual que en la rejilla, con su
nombre escrito dentro en letra grande. Con cuadraditos de 11 px al lado no se distinguía. */
.agenda-leyenda { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .9rem; padding: .55rem .75rem; max-width: none; font-size: var(--t-base); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio); }
.agenda-leyenda strong { margin-right: .35rem; }
.agenda-leyenda ul { display: contents; list-style: none; margin: 0; padding: 0; }
.agenda-leyenda li, .agenda-leyenda span { display: inline-flex; align-items: center; min-height: 2rem; padding: .15rem .7rem; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); line-height: 1.2; }
.agenda-leyenda .l-fuera { background: var(--fuera-horario); }
.agenda-leyenda .l-sin-horario { border-style: dashed; }
.horario-filas.con-modo .sin-horas { visibility: hidden; }
@media (max-width: 640px) { .horario-filas.con-modo .sin-horas { display: none; } }
.agenda-leyenda .l-individual { background: var(--agenda-individual); border-color: var(--agenda-individual-borde); }
.agenda-leyenda .l-grupal { background: var(--agenda-grupal); border-color: var(--agenda-grupal-borde); }
.agenda-leyenda .l-realizada { border-color: var(--tinta-tenue); }
.agenda-leyenda .l-realizada::before { content: "✓"; margin-right: .35rem; }
.agenda-leyenda .l-no-vino { background: #f3f3f3; border-color: #bbb; color: var(--tinta-suave); }
.agenda-leyenda .l-cancelada { background: var(--agenda-cancelada); border-color: var(--agenda-cancelada-borde); color: var(--tinta-suave); text-decoration: line-through; }
.agenda-leyenda .l-bloqueo { background: repeating-linear-gradient(135deg, var(--agenda-bloqueo) 0, var(--agenda-bloqueo) 6px, var(--agenda-bloqueo-raya) 6px, var(--agenda-bloqueo-raya) 12px); border-color: var(--agenda-bloqueo-borde); }
.agenda-leyenda .l-ocupado { background: #ececec; border: 1px dashed #999; }
.agenda-leyenda .l-ahora { border: 0; background: none; padding-left: 0; }
.agenda-leyenda .l-ahora::before { content: ""; width: 1.75rem; height: 0; border-top: 2px solid var(--error); margin-right: .45rem; }
.agenda-cita { position: absolute; left: .15rem; right: .15rem; min-height: 2.4rem; box-sizing: border-box; padding: .15rem .45rem; border-radius: var(--radio); background: var(--agenda-individual); border: 1px solid var(--agenda-individual-borde); color: var(--tinta); text-decoration: none; font-size: var(--t-min); line-height: 1.25; overflow: hidden; display: block; }
.agenda-cita.grupal { background: var(--agenda-grupal); border-color: var(--agenda-grupal-borde); }
.agenda-cita:hover, .agenda-cita:focus { filter: brightness(.96); outline: 2px solid var(--marca); }
.agenda-cita span, .agenda-cita strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El nombre ocupa dos líneas antes que cortarse, y el estado se lee sin fiarse del color. */
.agenda-cita strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* Cada bloque enseña lo que le cabe entero: una línea cortada por la mitad parecía un fallo. En
una cita de una hora caben la hora y el nombre; el servicio, desde la hora y cuarto; en una
de menos de una hora, el nombre en una línea. */
.agenda-cita { container: cita / size; }
@container cita (max-height: 4.1rem) { .agenda-cita strong ~ span:not(.agenda-telefono) { display: none; } }
@container cita (max-height: 2.8rem) { .agenda-cita strong { -webkit-line-clamp: 1; } }
/* El teléfono del día es para avisar: va a la vista antes que el servicio. En una cita de una
hora caben la hora, el nombre en una línea y el teléfono. Las de menos de una hora van en
corto: la hora y el nombre en una línea y el teléfono debajo. */
.agenda-cita .agenda-telefono { color: var(--tinta); font-variant-numeric: tabular-nums; }
@container cita (max-height: 5rem) { .agenda-cita.con-telefono strong ~ span:not(.agenda-telefono) { display: none; } }
@container cita (max-height: 4.1rem) { .agenda-cita.con-telefono strong { -webkit-line-clamp: 1; } }
.agenda-estado { font-weight: 600; }
.agenda-cita span { font-size: var(--t-min); color: var(--tinta-suave); }
/* Realizada: fondo blanco y la marca delante del nombre, que detrás la cortaba el «…». Sin
opacidad: al 75 % el texto quedaba en 3,1:1. */
.agenda-cita.realizada { background: var(--papel); }
.agenda-cita.realizada strong::before { content: "✓ "; }
.agenda-cita.cancelada, .agenda-cita.cancela_tarde, .agenda-cita.cancela_prof, .agenda-cita.reprogramada, .agenda-cita.anulada { background: var(--agenda-cancelada); border-color: var(--agenda-cancelada-borde); color: var(--tinta-suave); text-decoration: line-through; }
/* Quien no vino ocupó su hueco: no se tacha como lo cancelado y sigue en gris, y la falta
justificada se distingue por el borde. El estado va además escrito en la primera línea. */
.agenda-cita .agenda-estado { display: inline; }
.agenda-cita.no_acude { background: #f3f3f3; border-color: #bbb; color: var(--tinta-suave); text-decoration: none; }
.agenda-cita.no_acude.justificada { border-style: dotted; border-color: var(--tinta-tenue); }
.agenda-cita.ocupado { background: #ececec; border: 1px dashed #999; color: var(--tinta-suave); text-decoration: none; }
.agenda-nueva { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
/* Vista general: el equipo entero un día. */
.agenda-dias a.hoy:not([aria-current="page"]) { border-color: var(--marca); color: var(--marca); box-shadow: inset 0 -3px 0 var(--marca); }
.agenda-dias .agenda-salto { font-size: 20px; line-height: 1; }
.agenda-general .agenda-dia-cab small { font-variant-numeric: tabular-nums; }
.agenda-general .agenda-dia-cab a { color: inherit; text-decoration: none; }
.agenda-general .agenda-dia-cab a:hover, .agenda-general .agenda-dia-cab a:focus-visible { color: var(--marca); text-decoration: underline; }
.agenda-general .agenda-dia-cab.vacia { color: var(--tinta-suave); font-weight: 500; }
.agenda-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--error); z-index: 3; pointer-events: none; }
.grupo-botones .boton[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; position: relative; }
.agenda-hora.agenda-ahora-hora { z-index: 1; color: var(--error); font-weight: 700; background: var(--papel); padding: 0 .1rem; }
/* Semana: los filtros en una fila, del ancho de lo que dicen. */
.agenda-barra + .agenda-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
.agenda-barra + .agenda-filtros select { width: auto; max-width: 100%; }
.agenda-profesional h2 small { font-size: var(--t-min); font-weight: 400; color: var(--tinta-suave); }
.agenda-profesional h2 .boton { margin-left: auto; font-size: var(--t-min); padding: .2rem .6rem; }
/* La primera hora, debajo de su línea: centrada en ella se metía en la cabecera. */
.agenda-hora:first-child { transform: none; }
/* La hora en punto que cae debajo de la de ahora no se pinta: medio tapada parecía la fila cortada. */
.agenda-hora.tapada { visibility: hidden; }
@media (max-width: 600px) {
.solo-pantalla-ancha { display: none; }
.agenda-dias nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: .15rem; }
.agenda-dias nav .boton { flex: none; }
.agenda-dias form { margin-left: 0; }
/* Sábado y domingo van estrechos: con el relleno, «Dom» se cortaba. */
table.mes th { padding-left: 0; padding-right: 0; }
}
/* Los desplegables de la fila de Hoy (Nota, Incidencia, Canceló). Cerrados, un rótulo discreto
entre los botones. Abiertos, una caja que ocupa la fila, con el rótulo en su banda y cada cosa
en su línea. Chrome mete todo lo que no es el rótulo en una sola pieza, así que lo de dentro
lo ordena la caja de dentro y no el details: en flex salía amontonado al lado del rótulo. */
.hoy-incidencia { display: block; }
.hoy-incidencia > summary { display: flex; width: fit-content; cursor: pointer; list-style: none; color: var(--tinta-suave); }
.hoy-incidencia > summary::-webkit-details-marker { display: none; }
.hoy-incidencia > summary::before { content: "▸ "; }
.hoy-incidencia[open] { flex-basis: 100%; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.hoy-incidencia[open] > summary { width: auto; padding: .45rem .75rem; font-weight: 600; color: var(--tinta); background: var(--fondo-suave); border-bottom: 1px solid var(--linea); border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
.hoy-incidencia[open] > summary::before { content: "▾ "; color: var(--tinta-suave); }
.hoy-plegado, .hoy-nota > .pasar-lista-nota { padding: .75rem; }
.hoy-plegado { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
/* "Cancela en plazo" y "Cancela fuera de plazo", uno al lado del otro, como los de la fila. */
.hoy-plegado:has(> button) { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
/* Tipo y Gravedad, cada uno con su rótulo encima, juntos en una línea. */
.hoy-incidencia-campos { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.hoy-incidencia-campo select { width: auto; max-width: 100%; }
.horario-filas { display: grid; grid-template-columns: max-content 1fr 1fr max-content 1fr 1fr; gap: .5rem .75rem; align-items: center; max-width: 52rem; }
@media (max-width: 640px) { .horario-filas { grid-template-columns: max-content 1fr 1fr; } .horario-filas > span:nth-child(6n+4) { text-align: right; } }
.horario-filas .campo { margin: 0; }
.horario-filas.con-modo { grid-template-columns: max-content max-content 1fr 1fr max-content 1fr 1fr; max-width: 64rem; }
@media (max-width: 640px) { .horario-filas.con-modo { grid-template-columns: 1fr 1fr; } .horario-filas.con-modo > :nth-child(7n+1), .horario-filas.con-modo > :nth-child(7n+2), .horario-filas.con-modo > :nth-child(7n+5) { grid-column: 1 / -1; text-align: left; } .horario-filas.con-modo > span:nth-child(7n+1) { margin-top: .5rem; } }
/* La asistencia de un grupo: una persona por fila, con el desplegable entero («Falta justificada»). */
.horario-filas.asistencia-filas { grid-template-columns: minmax(8rem, max-content) max-content minmax(12rem, 1fr); }
@media (max-width: 640px) { .horario-filas.asistencia-filas { grid-template-columns: 1fr; } }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campo-ancho { grid-column: 1 / -1; }
/* --- hoy --------------------------------------------------------------------------------- */
.hoy-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.hoy-cabecera h1 { margin: 0; }
.hoy-citas { list-style: none; padding: 0; margin: 0; }
.hoy-cita { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .2rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.hoy-cita:last-child { border-bottom: 0; }
/* Lo pasado se atenúa, salvo la fila en la que aún hay que pasar lista: ahí solo la hora. */
.hoy-cita.pasada:not(:has(.pasar-lista)) { opacity: .65; }
.hoy-cita.pasada:has(.pasar-lista) .hora { color: var(--tinta-suave); }
.hoy-cita.bloqueo { color: var(--tinta-suave); }
.hoy-cita .hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.hoy-cita .hora small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: var(--t-min); }
.hoy-cita .quien { font-weight: 500; }
.hoy-cita .detalle { color: var(--tinta-suave); font-size: var(--t-rotulo); display: block; }
.hoy-cita .acciones { display: flex; align-items: center; gap: .5rem; }
/* Pasar lista va en su propia línea bajo el nombre: la columna de citas es estrecha en cuanto
hay alertas al lado, aunque la pantalla sea ancha, y el nombre no debe partirse. */
.hoy-cita:has(.pasar-lista) { grid-template-columns: 6.5rem 1fr; }
.hoy-cita .pasar-lista { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; margin: 0; }
/* La nota de la sesión va en su propia línea y admite un párrafo; Intro hace salto de línea. */
.hoy-cita .pasar-lista-nota { flex: 1 1 100%; }
/* Los botones de resultado van juntos: en el móvil, en su propia fila. */
.pasar-lista-resultado { display: contents; }
.hoy-cita .pasar-lista-nota textarea { min-height: 3.5rem; font-size: var(--t-base); }
.hoy-cita .pasar-lista-nota button { margin-top: .35rem; }
.hoy-cita .alerta { margin: .35rem 0 0; }
.hoy-cita .pasar-lista button, .hoy-cita .pasar-lista label { white-space: nowrap; }
.hoy-cita .pasar-lista button { padding: .3rem .7rem; font-size: var(--t-rotulo); }
.casilla-linea { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-rotulo); color: var(--tinta-suave); }
/* Con todo el equipo, cada profesional abre su tramo de la lista: se ve dónde empieza y cuántas lleva. */
.hoy-grupo { margin: 1.1rem 0 .3rem; padding: .4rem .6rem; font-size: var(--t-base); display: flex; align-items: center; gap: .5rem; color: var(--tinta); background: var(--fondo-suave); border-radius: var(--radio); }
.hoy-grupo small { font-size: var(--t-min); font-weight: 400; color: var(--tinta-suave); }
.hoy-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 1.5rem 2.5rem; align-items: start; }
.hoy-rejilla > .panel + .panel { margin-top: 0; }
.hoy-lateral .panel + .panel { margin-top: 0; }
.hoy-lateral { display: grid; gap: 1.5rem; }
.cifras { display: flex; gap: .5rem 1.75rem; flex-wrap: wrap; margin: 0; padding: .5rem 0; }
.cifra { display: flex; align-items: baseline; gap: .45rem; padding: 0; background: none; }
.cifra dd { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra dt { font-size: var(--t-rotulo); color: var(--tinta-suave); margin: 0; }
.alertas { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.alertas li { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; }
.alertas .icono { color: var(--aviso); margin-top: .15rem; }
.alertas .cuantos { font-weight: 600; }
@media (max-width: 800px) { .hoy-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hoy-cita, .hoy-cita:has(.pasar-lista) { grid-template-columns: 1fr; } .hoy-cita .hora { white-space: nowrap; } .hoy-cita .pasar-lista-resultado { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; } .hoy-cita .hora small { display: inline; margin-left: .4rem; } .cifras { gap: .5rem 1.25rem; } }
/* --- pestañas de la ficha ------------------------------------------------------------- */
.seguimientos { display: grid; gap: .6rem; }
.seguimiento { padding: .6rem .8rem; background: var(--fondo-suave); border-radius: var(--radio); }
.seguimiento p { margin: 0 0 .25rem; }
form.en-linea { display: inline; }
/* Festivos y cierres: una fila por festivo. */
.fila-festivo { display: grid; grid-template-columns: 11rem 11rem minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.fila-festivo .campo { margin: 0; }
.fila-festivo [data-quitar-fila] { margin-bottom: .35rem; }
@media (max-width: 600px) {
.fila-festivo { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); padding-bottom: .75rem; }
.fila-festivo .campo:nth-child(3) { grid-column: 1 / -1; }
}
/* En el móvil, "cambiar" y "quitar" de una lista se pulsan con el dedo: más alto, sin cambiar
cómo se ve. */
@media (pointer: coarse) {
.lista-limpia li > a, .lista-limpia form.en-linea button.enlace { display: inline-block; padding: .55rem .2rem; min-height: 0; }
}
tr.vencida td { background: #fdf4f5; }
.filtros { display: flex; gap: .5rem .75rem; flex-wrap: wrap; align-items: end; margin: 0; }
.filtros label { display: flex; flex-direction: column; gap: .15rem; font-size: var(--t-rotulo); font-weight: 500; color: var(--tinta-suave); }
.filtros label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; min-height: var(--control); gap: .1rem; font-size: var(--t-base); color: var(--tinta); }
.filtros select, .filtros input:not([type="checkbox"]) { min-width: 9rem; font-size: var(--t-base); }
@media (max-width: 600px) {
/* A 375 px, a dos columnas iguales: con el ancho de cada campo quedaban a trompicones. Casillas,
botones y notas, en su propia fila. */
.filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filtros > label > :is(select, input:not([type="checkbox"]):not([type="radio"])) { width: 100%; min-width: 0; }
.filtros > :not(label), .filtros > label:has(> input[type="checkbox"]) { grid-column: 1 / -1; }
.filtros > :is(button, .boton) { justify-self: start; }
}
.siguiente-paso { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0 0; font-weight: 500; }
.siguiente-paso .boton { min-height: 28px; padding: 0 .6rem; font-size: var(--t-rotulo); }
.siguiente-paso.tenue { font-weight: 400; color: var(--tinta-suave); font-size: var(--t-rotulo); }
.contacto-rapido { display: flex; gap: .4rem; flex-wrap: wrap; margin: .35rem 0 0; }
.contacto-rapido a { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .6rem; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); color: var(--marca); text-decoration: none; font-weight: 500; font-size: var(--t-rotulo); min-height: 28px; }
.contacto-rapido a:hover { background: var(--marca-tenue); border-color: var(--marca); }
/* --- agenda mensual ---------------------------------------------------------------------- */
table.mes { table-layout: fixed; }
table.mes th { text-align: center; }
.mes-dia { position: relative; height: 6.5rem; vertical-align: top; padding: .4rem .5rem; font-size: var(--t-min); }
/* Toda la casilla abre su semana, no solo el número. */
.mes-num::after { content: ""; position: absolute; inset: 0; }
.mes-num:focus-visible { outline: none; }
.mes-num:focus-visible::after { outline: 2px solid var(--marca); outline-offset: -2px; }
.mes-dia:hover { background: var(--marca-tenue); }
table.mes col.finde { width: 9%; }
table.mes th:nth-child(n+6) { color: var(--tinta-suave); font-weight: 500; }
.agenda-total { font-size: var(--t-base); font-weight: 400; color: var(--tinta-suave); margin-left: .3rem; }
.mes-dia.otro-mes { background: var(--fondo-suave); color: var(--tinta-tenue); }
.mes-dia.hoy { background: var(--marca-tenue); box-shadow: inset 0 0 0 2px var(--marca); }
.mes-num { font-weight: 600; text-decoration: none; color: var(--tinta); display: inline-block; min-width: 1.6rem; }
.mes-dia.otro-mes .mes-num { color: var(--tinta-tenue); font-weight: 500; }
.mes-citas { margin: .2rem 0 0; font-weight: 600; color: var(--marca-oscura); }
.mes-prof { margin: .1rem 0 0; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-bloqueo { margin: .1rem 0 0; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La misma trama que «No disponible» en la semana. */
.mes-bloqueo::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -.1rem; border-radius: 2px; border: 1px solid var(--agenda-bloqueo-borde); background: repeating-linear-gradient(135deg, var(--agenda-bloqueo) 0, var(--agenda-bloqueo) 3px, var(--agenda-bloqueo-raya) 3px, var(--agenda-bloqueo-raya) 6px); }
.plan-sesion { display: block; font-size: var(--t-min); color: var(--tinta-suave); }
.plan-sesion::before { content: "Plan: "; font-weight: 600; }
/* El primer tabulador lleva al contenido: con teclado, la navegación entera antes de cada
formulario largo era un suplicio. */
.saltar { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--papel); border: 2px solid var(--marca); border-radius: var(--radio); padding: .5rem .9rem; }
.saltar:focus { left: .5rem; top: .5rem; }
/* --- imprimir o guardar como PDF ----------------------------------------------------------- */
.solo-impresion { display: none; }
/* El número de página al pie, como en los Word de la asociación. */
@page { margin: 1.5cm 1.5cm 2cm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-size: 9pt; } }
@media print {
:root { font-size: 11pt; }
body.con-lateral { display: block; }
.lateral, .cabecera, .pie, .botones, .filtros, .buscador, form.buscador, .menu-boton, .nav, button, .boton, .agenda-barra form,
.pestanas, .migas, .ficha-foto, details.mas { display: none !important; }
/* Sin "gráficos de fondo" se perdían los colores de la rejilla y la leyenda no decía nada. */
.agenda-dia, .agenda-tramo, .agenda-bloqueo, .agenda-cita, .agenda-leyenda li { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.solo-impresion { display: block; }
.cabecera-impresion { font-size: 9pt; color: #555; border-bottom: 1px solid #999; padding-bottom: .3rem; margin-bottom: 1rem; }
body { background: #fff; color: #000; }
main { max-width: none; padding: 0; }
.panel, .tarjeta, .tabla-scroll { break-inside: avoid; }
a { color: #000; text-decoration: none; }
.etiqueta { color: #000 !important; }
.rejilla-dos { display: block; }
.rejilla-dos > * + * { margin-top: .75rem; }
.hoy-rejilla { display: block; }
table { font-size: 10pt; }
th { background: #eee !important; color: #000; }
/* Tablas compactas; la columna de etiquetas de una ficha va sin fondo. */
th, td { padding: .15rem .4rem; height: auto; }
tbody th { background: none !important; }
.agenda-scroll, .tabla-scroll { overflow: visible; }
.agenda-ahora, .agenda-ahora-hora, .agenda-leyenda .l-ahora, .agenda-filtros { display: none; }
:where(.tabla-scroll table:not(.mes)) :where(th, td):first-child { position: static; }
.agenda { min-width: 0; }
/* El día, en A4 vertical: sin desplazamiento de lado, las columnas se estrechan hasta caber.
Con nueve, cada una mide menos de dos centímetros: letra menor, sin relleno y el nombre en
dos líneas, para que se lean la hora, el nombre y el teléfono. Los días de la semana y el
servicio no hacen falta en el papel: el título dice el día. */
.agenda-general { grid-template-columns: var(--columnas-papel) !important; min-width: 0 !important; }
.agenda-general .agenda-dia-cab { padding: .3rem .25rem; font-size: 8pt; overflow-wrap: break-word; }
.agenda-general .agenda-cita { left: 0; right: 0; padding: 0 .15rem; font-size: 7.5pt; line-height: 1.2; }
.agenda-general .agenda-cita span { font-size: 7.5pt; }
.agenda-general .agenda-bloqueo { padding: 0 .15rem; font-size: 7.5pt; }
.agenda-general .agenda-bloqueo span { white-space: normal; }
@container cita (min-height: 2.6rem) { .agenda-general .agenda-cita strong { -webkit-line-clamp: 2; } }
.agenda-dias { display: none; }
h2, h3 { break-after: avoid; }
.firma { margin-top: 3cm; border-top-color: #000; }
/* Lo que se escribe en pantalla no va al papel: avisos de guardado, formularios de
anotación, la nota y la casilla de pasar lista, «editar», las alertas de Hoy. */
.mensajes, .panel:has(> form[method="post"]), .pasar-lista input, .pasar-lista .casilla-linea,
.hoy-cita .acciones a, .hoy-lateral .panel:has(.alertas), .hoy-cita .plan-sesion, .hoy-cita .nota-sesion { display: none !important; }
}
/* Filtros guardados */
.filtros-guardados { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; align-items: center; margin: 0 0 .75rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.chips li { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); padding: .1rem .3rem .1rem .6rem; font-size: var(--t-rotulo); }
.chips li.activo { border-color: var(--marca); background: var(--marca-clara); }
.chips li a { text-decoration: none; font-weight: 500; }
.chips li form { display: inline; }
.chips button.enlace { background: none; border: 0; padding: 0 .35rem; min-height: 0; font-size: 1.1rem; line-height: 1; color: var(--tinta-suave); cursor: pointer; }
.chips button.enlace:hover { color: var(--error); }
.guardar-filtro { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.guardar-filtro label { display: inline; margin: 0; font-size: var(--t-rotulo); font-weight: 500; }
.guardar-filtro input[type="text"]:not([type="checkbox"]) { width: 14rem; margin: 0; }
@media print { .filtros-guardados { display: none !important; } }
/* El PAI en papel, cada objetivo con sus rótulos y en negro: es lo que se entrega a la persona. */
@media print {
.pai-impreso > ol > li { margin-bottom: .7rem; break-inside: avoid; }
.pai-impreso .impreso-objetivo { margin: 0; font-weight: 600; }
.pai-impreso .impreso-quien { margin: 0 0 .25rem; }
.pai-impreso li .datos { gap: .15rem 1.25rem; }
.pai-impreso .datos ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
}
/* Apartados de un cuestionario */
h3.apartado { margin: 1.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: var(--t-h3); }
h3.apartado:first-of-type { border-top: 0; padding-top: 0; }
/* Dentro de una caja, cada apartado del cuestionario la parte con su banda, como los de un
formulario: con solo una raya encima parecía otro estilo. */
.panel > h3.apartado { margin: var(--hueco) calc(-1 * var(--hueco)); padding: .55rem var(--hueco); background: var(--fondo-suave); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.panel > h3.apartado:is(:first-child, :nth-child(1 of :not([type="hidden"]))) { margin-top: calc(-1 * var(--hueco)); border-top: 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
/* Elegir escala */
.elegir-escala { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.elegir-escala label { display: inline; margin: 0; }
.elegir-escala select { width: auto; min-width: 18rem; max-width: 100%; }
/* Fusión de fichas */
.fusion-elegir { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin-bottom: .5rem; }
/* Cifras en fila (cabecera de una ficha) */
.cifras.fila { display: flex; gap: .5rem 1.75rem; flex-wrap: wrap; }
.cifras.fila .cifra { min-width: 0; }
/* Plan de transporte */
.ruta { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ruta-parada { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: start; }
.ruta-hora { display: flex; flex-direction: column; gap: .1rem; }
.ruta-hora strong { font-size: 1.4rem; line-height: 1.1; }
.ruta-datos h2 { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ruta-foto { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 50%; float: right; margin: 0 0 .5rem .75rem; }
.ruta-acciones { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; min-width: 11rem; }
.ruta-acciones form { display: flex; gap: .4rem; }
.ruta-acciones form button { flex: 1; }
.ruta-acciones input[type="time"], .ruta-acciones input[type="text"] { min-height: var(--control); }
.ruta-parada.estado-realizado { opacity: .7; }
.ruta-parada.estado-cancelado { opacity: .55; }
@media (max-width: 700px) { .ruta-parada { grid-template-columns: 1fr; } .ruta-hora { flex-direction: row; gap: .75rem; align-items: baseline; } }
/* Documentos generados */
/* Los espacios y las líneas en blanco del texto son del documento (huecos para escribir).
Si el texto llega partido en párrafos, los respeta dentro de cada uno. */
.documento-texto { line-height: 1.6; white-space: pre-wrap; }
.documento-texto:has(> p) { white-space: normal; }
.documento-texto > p { white-space: pre-wrap; }
/* Hueco para firmar: la raya y debajo quién firma; nunca partido entre dos páginas. */
.firma { margin-top: 2.5rem; padding-top: .3rem; border-top: 1px solid var(--tinta); width: 18rem; max-width: 100%; break-inside: avoid; }
.documento-papel { max-width: 46rem; margin: 1rem auto; background: var(--papel); padding: 3rem 3.5rem; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 15px; line-height: 1.6; }
.documento-membrete { border-bottom: 1px solid #c8c8c8; padding-bottom: .6rem; margin-bottom: 1.75rem; }
.documento-membrete strong { font-size: 1.2rem; color: var(--color-nombre); }
.documento-borrador { color: var(--error); font-weight: 700; letter-spacing: .2em; text-align: center; margin-top: 2rem; }
@media print { .documento-papel { border: 0; margin: 0; padding: 0; max-width: none; } .no-imprimir { display: none !important; } }
/* Encuestas */
table.barras { width: 100%; border-collapse: collapse; }
table.barras th { text-align: left; font-weight: 400; width: 40%; padding: .3rem .5rem .3rem 0; background: none; font-size: var(--t-base); color: var(--tinta); border-bottom: 0; }
table.barras td { padding: .3rem 0; height: auto; border-bottom: 0; }
table.barras td:nth-child(2) { width: 40%; }
table.barras td:last-child { white-space: nowrap; padding-left: .75rem; color: var(--tinta-suave); }
.barra { height: .6rem; background: var(--marca); border-radius: 2px; min-width: 2px; }
.pista { width: 6rem; }
.sin-partir { white-space: nowrap; }
.encuesta-publica .campo { margin-top: 1.25rem; }
@media (max-width: 600px) { .documento-papel { padding: 1.5rem 1.1rem; margin: .5rem 0; } }
/* Fechas: texto día/mes/año más el calendario del navegador al lado (fechas.js). */
.fecha-campo { display: inline-flex; align-items: center; gap: .25rem; position: relative; }
.fecha-u-hora { display: inline-block; vertical-align: top; margin-right: .75rem; }
.fecha-campo input.fecha { width: 8.5rem; font-variant-numeric: tabular-nums; }
.fecha-campo input.hora { width: 5.5rem; font-variant-numeric: tabular-nums; }
.fecha-boton { padding: .3rem .5rem; min-height: var(--control); background: var(--papel); color: var(--tinta-suave); border-color: var(--borde-campo); }
.fecha-boton:hover { background: var(--fondo-suave); color: var(--tinta); border-color: var(--borde-campo); }
.fecha-campo input.fecha-selector { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Lista de casillas larga con buscador delante (buscar-select.js). */
.casillas-lista { max-height: 13rem; overflow-y: auto; padding: .2rem .1rem; }
.casillas-lista > div { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.casillas-lista label { font-weight: 400; font-size: var(--t-base); margin: 0; }
.casillas-lista input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }
/* Pasar lista se hace de pie y con el dedo: los botones, la casilla de incidencia y «editar»
no bajan de 44 px hasta la pantalla de escritorio, ni en ninguna pantalla táctil. */
@media (max-width: 1024px), (pointer: coarse) {
.pasar-lista button { min-height: 44px; }
.casilla-linea, .hoy-cita .acciones a { min-height: 44px; display: inline-flex; align-items: center; }
.hoy-cita .acciones a { padding: 0 .5rem; }
.casilla-linea input[type="checkbox"], .campo.casilla input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
}
/* El hueco del sello en los documentos generados: no hay imagen del sello, se pone a mano. */
.hueco-sello { width: 8cm; max-width: 100%; height: 4cm; margin-top: 1rem; padding: .3rem .5rem; border: 1px dashed currentColor; font-size: .85em; }
/* «No sigue» en la cabecera de la ficha: sin triángulo, y el formulario abierto baja a su línea. */
details.no-sigue > summary { list-style: none; cursor: pointer; }
details.no-sigue[open] { flex-basis: 100%; }
/* En la cabecera el buscador gana a la regla general de los campos, y en el móvil el botón de
menú deja solo el icono para que quede sitio para escribir. */
.cabecera .buscador-global input[type="search"] { border: 0; min-width: 5rem; min-height: 0; height: auto; outline: none; background: transparent; box-shadow: none; }
@media (max-width: 600px) {
.menu-boton .menu-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Lo que lleva hidden no se ve aunque otra regla le dé display. */
[hidden] { display: none !important; }
/* Una columna de bloques apilados, como la de la pestaña de un servicio. */
.columna-apilada { display: grid; gap: 1.5rem; min-width: 0; align-content: start; }
/* Vacía (Fisioterapia, Trabajo Social) no ocupa media fila: la caja de al lado se estira. */
.rejilla-dos > .columna-apilada:not(:has(*)) { display: none; }
/* Los filtros de Personas se pliegan: a 375 px ocupaban la pantalla antes de la lista.
Plegados o abiertos, son la misma caja gris que los filtros de las demás listas. */
.filtros-plegados { flex-basis: 100%; background: var(--fondo-suave); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.filtros-plegados > summary { display: flex; align-items: center; gap: .4rem; min-height: var(--control); padding: 0 .8rem; font-weight: 600; list-style: none; }
.filtros-plegados > summary::-webkit-details-marker { display: none; }
.filtros-plegados > summary::before { content: "▸"; color: var(--tinta-suave); }
.filtros-plegados[open] > summary::before { content: "▾"; }
.filtros-plegados > .filtros { padding: 0 .8rem .7rem; }
.filtros-plegados .filtros input[type="number"] { width: 6rem; min-width: 0; }
/* A 375 px una tabla ancha se lee fila a fila, cada dato con su columna delante. */
@media (max-width: 400px) {
table.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.apilable, table.apilable tbody, table.apilable tr, table.apilable :is(th, td) { display: block; width: auto; }
table.apilable tr { padding: .5rem 0; border-bottom: 1px solid var(--linea); }
table.apilable tbody tr:last-child { border-bottom: 0; }
table.apilable :is(th, td) { position: static; height: auto; padding: .15rem .9rem; border: 0; }
table.apilable td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--tinta-suave); }
table.apilable td:not([data-etiqueta]):empty { display: none; }
}
/* El total del Barthel se va sumando mientras se marca y queda a la vista, abajo. */
.total-en-vivo { position: sticky; bottom: 0; z-index: 1; max-width: none; background: var(--papel); padding: .5rem 0; margin: 0; font-weight: 700; border-top: 1px solid var(--linea); }
/* El gráfico de la evolución de una escala; su ancho máximo depende de los pases. */
.grafico-evolucion { display: block; margin-bottom: .75rem; }
/* La semana va en el HTML por orden de hora, que es como la lee el teclado. El apilado lo da
esto y no el orden: cada día es su propio contexto, lo activo queda encima de lo cancelado y
los bloqueos encima de todo, sin tapar la columna de horas al desplazar. */
.agenda-dia { isolation: isolate; }
.agenda-cita.planificada, .agenda-cita.realizada { z-index: 1; }
.agenda-bloqueo { z-index: 2; }
/* Una tabla que en el móvil se lee de arriba abajo: cada fila en su bloque, con el rótulo de
cada dato delante y nada escondido a la derecha. */
@media (max-width: 600px) {
.tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada td { display: block; width: auto; }
.tabla-apilada td { border: 0; padding: .15rem 0; height: auto; }
.tabla-apilada tr.fila-principal { padding-top: .6rem; border-top: 1px solid var(--linea); }
.tabla-apilada tr.fila-principal td:first-child { font-weight: 600; }
.tabla-apilada tr.fila-detalle { padding-bottom: .6rem; }
.tabla-apilada td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--tinta-suave); }
}
/* --- piezas comunes: desplegables, barra de filtros, columna de lectura ------------------ */
summary { cursor: pointer; }
/* Un desplegable con la misma cabecera gris que una caja; la flecha dice si está abierto. */
details.plegable, details.panel { padding: 0; }
details.plegable { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
:is(details.plegable, details.panel) > summary { padding: .55rem var(--hueco); font-weight: 600; list-style: none; background: var(--fondo-suave); border-radius: var(--radio-grande); }
:is(details.plegable, details.panel) > summary::-webkit-details-marker { display: none; }
:is(details.plegable, details.panel) > summary::before { content: "▸ "; color: var(--tinta-suave); }
:is(details.plegable, details.panel)[open] > summary::before { content: "▾ "; }
:is(details.plegable, details.panel)[open] > summary { border-bottom: 1px solid var(--linea); border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
:is(details.plegable, details.panel) > :not(summary) { margin-left: var(--hueco); margin-right: var(--hueco); }
:is(details.plegable, details.panel) > :not(summary):first-of-type { margin-top: var(--hueco); }
:is(details.plegable, details.panel) > :last-child:not(summary) { margin-bottom: var(--hueco); }
details.plegable :is(.panel, .tarjeta) { padding: 0; border: 0; border-radius: 0; }
/* Cualquier otro desplegable («Anular», «Cambiar de profesional», «Cómo se calcula…») lleva la
misma flecha y el color de lo que se pulsa, no el triángulo negro del navegador. Quedan fuera
los que tienen estilo propio. */
details:not(.mas, .plegable, .panel, .no-sigue, .hoy-incidencia, .filtros-plegados, .carril) > summary { width: fit-content; list-style: none; color: var(--marca); }
details:not(.mas, .plegable, .panel, .no-sigue, .hoy-incidencia, .filtros-plegados, .carril) > summary::-webkit-details-marker { display: none; }
details:not(.mas, .plegable, .panel, .no-sigue, .hoy-incidencia, .filtros-plegados, .carril) > summary::before { content: "▸ "; color: var(--tinta-suave); }
details:not(.mas, .plegable, .panel, .no-sigue, .hoy-incidencia, .filtros-plegados, .carril)[open] > summary::before { content: "▾ "; }
details:not(.mas, .plegable, .panel, .no-sigue, .hoy-incidencia, .filtros-plegados, .carril)[open] > summary { margin-bottom: .5rem; }
/* El botón de elegir archivo, como uno secundario: el del navegador era gris y de otro estilo. */
input[type="file"]::file-selector-button { margin-right: .6rem; padding: .2rem .7rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 500; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--fondo-suave); }
/* Los filtros de una lista, sueltos encima de ella: una barra gris, como la de una caja. */
main > form.filtros, main > .encabezado-vista + form.filtros { padding: .6rem .8rem; margin-bottom: .9rem; background: var(--fondo-suave); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
/* Los que van dentro de un formulario de búsqueda (Consultas, Informe, Panel), en la misma caja. */
main > form.buscador > .filtros { flex: 1 1 100%; padding: .6rem .8rem; background: var(--fondo-suave); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.filtros > button, .filtros > .boton { align-self: flex-end; }
/* Lo que se lee de arriba abajo (una tarea, un aviso) no se estira a todo lo ancho. */
.columna-lectura { max-width: 56rem; }
.meta { margin: -.45rem 0 .9rem; color: var(--tinta-suave); font-size: var(--t-rotulo); }
/* Ritmo vertical: cada caja se separa de lo que tiene encima, aunque entre medias haya un
bloque que htmx dejó vacío. En las rejillas manda el hueco de la rejilla. */
:is(.panel, .tarjeta, .tabla-scroll, details.plegable, .botones, form.filtros, .cifras) ~ :is(.panel, .tarjeta, .tabla-scroll, details.plegable, .rejilla-dos, .rejilla.ficha, .columna-apilada) { margin-top: var(--hueco); }
:is(.rejilla-dos, .columna-apilada, .hoy-rejilla, .hoy-lateral, .rejilla.ficha, .rejilla.ficha .col, .rejilla-lista) > :is(.panel, .tarjeta, .tabla-scroll, details.plegable, .columna-apilada) { margin-top: 0; }
main > .botones { margin-bottom: var(--hueco); }
/* Lo que antes iba con style suelto en las plantillas: cada cosa con su nombre y su sitio. */
.hoy-cabecera .botones { margin: 0; }
:is(.panel, .tarjeta, .tabla-scroll, details.plegable) ~ h1 { margin-top: 1.75rem; }
:is(.lista-limpia, .lista-simple, .datos, .cifras, .alertas, .tabla-scroll, .vacio) + :is(p, .alertas) { margin-top: .75rem; }
.cifras.fila { margin-bottom: 1rem; }
.datos.tres:not(:last-child) { margin-bottom: 1.25rem; }
.con-saltos { white-space: pre-line; }
input.campo-corto:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { width: 5rem; }
.panel.estrecho { max-width: 32rem; }
/* Un formulario no se estira a todo lo ancho de una pantalla grande: los campos quedan juntos y
las notas, con renglones que se leen. Las cajas y avisos que lo acompañan en su página, igual.
Siguen a todo lo ancho las escalas con cinco respuestas o más por pregunta, que así caben en
una fila, y las páginas con una tabla: el formulario de añadir quedaba más corto que la tabla.
"Motivo" al anular, como una frase. */
:not(main) > form.panel:not(:has(table, fieldset.grupo-campo > div > :nth-child(5) [type="radio"])),
main:not(:has(> * table)) > form.panel:not(:has(fieldset.grupo-campo > div > :nth-child(5) [type="radio"])),
main:has(> form.panel):not(:has(> * table, > form.panel fieldset.grupo-campo > div > :nth-child(5) [type="radio"])) > :is(.panel, .alerta, .rejilla-dos) { max-width: var(--ancho-formulario); }
details > form > .campo { max-width: 40rem; }
tr.actual td { font-weight: 700; }
/* Hoja de firmas y pies de firma de lo que se imprime. */
.col-firma { width: 40%; }
.renglon-firma { height: 1.3cm; }
footer:is(.firmas, .solo-impresion) { break-inside: avoid; }
footer.firmas.en-fila { display: flex; flex-wrap: wrap; gap: 0 2rem; }
/* En los formularios largos, «Guardar» se queda a la vista abajo mientras se rellena. Un total
que se suma en vivo se coloca encima de la barra, y el foco no se esconde detrás. */
.panel > .barra-guardar { position: sticky; bottom: 0; z-index: 4; margin: 1.25rem calc(-1 * var(--hueco)) calc(-1 * var(--hueco)); padding: .75rem var(--hueco); background: var(--papel); border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
form:has(> .barra-guardar) .total-en-vivo { bottom: calc(var(--control) + 1.5rem + 1px); }
/* Con varias escalas en el mismo formulario (la valoración física), cada total va bajo su escala:
pegados abajo los tres a la vez se tapaban. */
.total-en-vivo[data-en-vivo] { position: static; }
html:has(.barra-guardar) { scroll-padding-bottom: calc(var(--control) + 2.5rem); }
/* En papel no hay cajas: ni marco ni banda gris; los títulos vuelven a su sitio. */
@media print {
.panel, .tarjeta, .tabla-scroll, details.plegable { border: 0; background: none; padding: 0; border-radius: 0; }
:is(.panel, .tarjeta) > :is(h2, h3:not(.apartado)):is(:first-child, :nth-child(1 of :not([type="hidden"]))) { margin: 1rem 0 .4rem; padding: 0 0 .2rem; background: none; }
fieldset:not(.grupo-campo, .grupo), .panel > fieldset:not(.grupo-campo, .grupo), .panel > fieldset:not(.grupo-campo, .grupo):is(:first-child, :nth-child(1 of :not([type="hidden"]))) { margin: 0 0 1rem; padding: 0; border: 0; }
fieldset:not(.grupo-campo, .grupo) > legend:not(.visualmente-oculto) { width: 100%; margin: 1rem 0 .4rem; padding: 0 0 .2rem; background: none; border-top: 0; }
.panel .tabla-scroll { margin: 0; }
.datos:not(.tres) { grid-template-columns: 10rem 1fr; }
header.solo-impresion .datos { margin-bottom: .5rem; }
/* En el papel el nombre del membrete va en negro; el azul se queda para la pantalla. */
.documento-membrete strong { color: #000; }
}
@media (max-width: 600px) {
/* Las tablas compactas de una caja: cada fila con el mismo margen que el resto. */
.panel .tabla-scroll .tabla-compacta :is(th, td) { padding: 0; }
.panel .tabla-compacta tr { padding: .7rem var(--hueco); }
}