/* =============================================================================
   wwwroot/css/app.css                                                    (p001)
   Una sola hoja, sin dependencias (ni Bootstrap ni compilación, §0.9).
   Pensada primero para el móvil (§8.5): la recogida se hace sobre todo ahí.
   El color de la organización llega en --org (atributo style del <html>).
   p009 — también --org-texto (el texto sobre --org), --org2 (segundo color,
   solo para adornos: rayas y bordes) y --fondo (Vista.EstiloOrg).
   p033 — accesibilidad (WCAG 2.1 AA): --org-tinta es el color de la organización
   para TEXTO y bordes de controles (enlaces, botones secundarios, cifras, foco),
   oscurecido si hace falta para llegar a 4,5:1; foco visible en todo; «saltar al
   contenido»; lo que se esconde en el móvil se sigue leyendo con el lector de
   pantalla; menos movimiento si se pide; bordes de los campos a 3:1.
   ============================================================================= */
:root {
    /* p019 — la altura de la foto o del carrusel de arriba: en el móvil, la que pide una imagen
       apaisada; nunca más de un 30 % de la pantalla ni de 320 px (que se vea «Avalar ahora»). */
    --alto-portada: clamp(120px, min(30vh, 42vw), 320px);
    --org: #1f5fa8;
    --org-texto: #ffffff;
    --org-tinta: #1f5fa8;   /* p033 */
    --org2: #1f5fa8;
    --texto: #1d2430;
    --tenue: #5b6575;
    --fondo: #f4f6f9;
    --tarjeta: #ffffff;
    --borde: #d8dee8;
    --ok: #17733a;   /* p033 — 5,2:1 sobre --ok-fondo (antes 4,46) */
    --ok-fondo: #e6f4ea;
    --mal: #b3261e;
    --mal-fondo: #fbe9e7;
    --aviso: #8a5a00;
    --aviso-fondo: #fff4d6;
    --info-fondo: #e8f0fb;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(20, 30, 50, .08), 0 4px 14px rgba(20, 30, 50, .05);
    --ancho: 980px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.modal-abierto { overflow: hidden; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    overflow-wrap: break-word;   /* p033 — las direcciones y los enlaces largos no ensanchan la página a 320 px */
}
a { color: var(--org-tinta); }
/* p033 — el foco se ve siempre (teclado): dos colores, para que se vea sobre cualquier fondo. */
:focus-visible { outline: 3px solid var(--org-tinta); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.adm-cab :focus-visible, .banda-puesto :focus-visible, .carrusel-diapositivas .carrusel-mandos :focus-visible { outline-color: #ffd45e; box-shadow: none; }
/* p033 — «Saltar al contenido»: el primer enlace de la página, visible solo al llegar con el tabulador. */
.saltar { position: absolute; left: .5rem; top: -100px; z-index: 2000; padding: .6rem 1rem; border-radius: 8px; background: var(--tarjeta); color: var(--org-tinta); font-weight: 700; box-shadow: var(--sombra); }
.saltar:focus { top: .5rem; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; margin: .4em 0 .5em; }
h1 { font-size: clamp(1.45rem, 4vw, 2rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
code { font-size: .9em; background: #eef1f6; padding: .05em .35em; border-radius: 4px; word-break: break-all; }
pre { white-space: pre-wrap; word-break: break-word; background: #f3f5f9; padding: .8rem; border-radius: 6px; font-size: .8rem; max-height: 50vh; overflow: auto; }

/* ---- alineación (§8.5) */
.centrado { text-align: center; }
.justificado { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.tenue { color: var(--tenue); font-size: .92em; }
.oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.subtitulo { color: var(--tenue); font-size: 1.05rem; margin-top: -.2rem; }

/* ---- bandas */
.banda-pruebas, .banda-puesto {
    text-align: center; padding: .45rem 1rem; font-size: .92rem;
}
.banda-pruebas { background: repeating-linear-gradient(45deg, #ffe08a, #ffe08a 12px, #ffd45e 12px, #ffd45e 24px); color: #4a3500; }
.banda-puesto { background: #1d2430; color: #fff; }
.banda-puesto a { color: #ffd45e; }

/* ---- cabecera y menú */
.cabecera {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .6rem 1rem; background: var(--tarjeta); border-bottom: 3px solid var(--org2);
    position: relative;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--texto); font-weight: 700; margin-right: auto; }
.marca-logo { height: 40px; width: auto; }
.marca-nombre { font-size: 1.1rem; }
.menu-boton { display: inline-flex; }
.menu { display: none; width: 100%; }
.menu.abierto { display: block; }
.menu ul { list-style: none; margin: 0; padding: .25rem 0; }
.menu a { display: block; padding: .55rem .5rem; text-decoration: none; color: var(--texto); border-radius: 6px; }
.menu a:hover, .menu a.actual { background: var(--info-fondo); color: var(--org-tinta); }
@media (min-width: 760px) {
    /* p001fix26 — con «.cabecera» delante: si no, la regla «.btn» (más abajo, misma prioridad) volvía a enseñar el ☰ en el ordenador. */
    .cabecera .menu-boton { display: none; }
    .menu { display: block; width: auto; }
    .menu ul { display: flex; gap: .25rem; padding: 0; }
    .menu a { padding: .4rem .6rem; }
}

/* ---- contenido */
.contenido { max-width: var(--ancho); margin: 0 auto; padding: 1rem; min-height: 60vh; }
.pie { padding: 1.5rem 1rem 2rem; color: var(--tenue); font-size: .9rem; border-top: 1px solid var(--borde); background: var(--tarjeta); }
.pie p { margin: .3rem 0; }
.pie-tenue { font-size: .85rem; }
.pie-alerta { color: var(--mal); font-weight: 600; }

.tarjeta {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 1rem 1.1rem; margin: 1rem 0;
}
.tarjeta-destacada { border-color: var(--org2); border-width: 2px; }
.estrecha { max-width: 520px; margin-inline: auto; }
.rejilla-2, .rejilla-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* p001fix07 — una sola tarjeta centrada (p. ej. la entrada sin la opción de certificado). */
.una-columna { max-width: 34rem; margin: 0 auto; }
@media (min-width: 760px) {
    .rejilla-2 { grid-template-columns: 1fr 1fr; }
    .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
}
.solo-ordenador { display: none; }
@media (min-width: 900px) and (pointer: fine) { .solo-ordenador { display: block; text-align: center; } }

/* ---- botones (§8.5: siempre icono + texto, o solo icono) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 44px; padding: .55rem 1rem; border-radius: 8px; border: 1px solid transparent;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2;
    background: #e9edf3; color: var(--texto); transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.ocupado { opacity: .6; cursor: progress; }
.btn-pri { background: var(--org); color: var(--org-texto); }
.btn-sec { background: var(--tarjeta); color: var(--org-tinta); border-color: var(--org-tinta); }
.btn-pel { background: var(--mal); color: #fff; }
.btn-grande { font-size: 1.1rem; min-height: 52px; padding: .7rem 1.4rem; }
.btn-ico { width: 40px; min-height: 40px; padding: 0; font-size: 1.05rem; background: transparent; border-color: #7d8aa0; }
.btn-ico.btn-pel { background: transparent; color: var(--mal); border-color: #f0c5c1; }
.btn.copiado::after { content: " ✓"; }
.ico { font-style: normal; }
/* p033 — en el móvil el texto se esconde a la vista, pero el lector de pantalla lo sigue diciendo (antes, el botón se quedaba sin nombre). */
@media (max-width: 480px) { .btn .txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.botones, .llamada { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; }

/* ---- avisos */
.aviso {
    display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 8px; margin: .8rem 0;
    background: var(--info-fondo); border: 1px solid #c9d8f0;
}
.aviso.centrado { justify-content: center; }
.aviso-texto { flex: 1; }
/* p037 — un aviso de texto seguido («<strong>Ojo:</strong> texto…») no es una fila: con flex, cada trozo se volvía una columna. */
.aviso:has(> strong:first-child) { display: block; }
.aviso-ok { background: var(--ok-fondo); border-color: #b7dfc3; }
.aviso-error { background: var(--mal-fondo); border-color: #f0c5c1; }
.aviso-info { background: var(--info-fondo); }
/* p040 — las piezas de un boletín */
.piezas { padding-left: 1.4rem; margin: .4rem 0 .8rem; }
.piezas li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--borde); }
.piezas li .acciones { margin-left: auto; display: inline-flex; gap: .2rem; }
/* p039 — compartir el aval tras firmar */
.compartir .compartir-redes .btn { min-width: 9rem; }
.compartir .compartir-enlace code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin: .3rem .4rem; }
/* p038 — el recuento de una campaña antes de programarla */
.recuento { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: .6rem; }
.recuento ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.aviso-cerrar { width: 32px; min-height: 32px; border: 0; }
.aviso-error ul, .aviso ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.validation-summary-valid { display: none; }

/* ---- insignias */
/* p001fix21 — globos (data-globo, comun.js): qué quiere decir una insignia o una columna. */
[data-globo] { cursor: help; }
[data-globo]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.globo-i { display: inline-block; margin-left: .15rem; font-weight: 600; opacity: .75; }
.globo { position: absolute; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: .55rem .75rem; border-radius: 8px;
    background: #1f2937; color: #fff; font-size: .85rem; font-weight: 400; line-height: 1.4; text-align: left;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.insignia { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: #eef1f6; color: var(--tenue); white-space: nowrap; }
.ins-ok { background: var(--ok-fondo); color: var(--ok); }
.ins-mal { background: var(--mal-fondo); color: var(--mal); }
.ins-pend { background: var(--aviso-fondo); color: var(--aviso); }
.ins-neutro { background: #eef1f6; color: var(--tenue); }

/* ---- pasos del aval */
.pasos { list-style: none; display: flex; justify-content: center; gap: .3rem; padding: 0; margin: .5rem 0 1rem; }
.pasos li { display: flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; color: var(--tenue); background: #e9edf3; font-size: .88rem; }
.pasos li.hecho { background: var(--ok-fondo); color: var(--ok); }
.pasos li.actual { background: var(--org); color: var(--org-texto); font-weight: 700; }
@media (max-width: 560px) { .pasos li:not(.actual) .pasos-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }   /* p033 — escondido a la vista, no al lector */

/* ---- portada */
.portada h1 { margin-top: .6rem; }
.cifras { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.cifra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1.2rem; min-width: 150px; text-align: center; box-shadow: var(--sombra); }
.cifra-num { display: block; font-size: 1.9rem; font-weight: 800; color: var(--org-tinta); line-height: 1.1; }
.cifra-txt { color: var(--tenue); font-size: .9rem; }
/* p045 — la cifra de las circunscripciones abre su lista. */
.cifra-boton { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: center; width: 100%; }
.cifra-boton:hover .cifra-ver, .cifra-boton:focus-visible .cifra-ver { text-decoration: underline; }
.cifra-boton:focus-visible { outline: 2px solid var(--org-tinta); outline-offset: 6px; border-radius: 4px; }
.cifra-ver { display: block; font-size: .8rem; color: var(--org-tinta); margin-top: .15rem; }
.lista-circunscripciones { columns: 2 14rem; column-gap: 1.5rem; padding-left: 1.1rem; margin: .4rem 0 0; }
.lista-circunscripciones li { break-inside: avoid; margin: 0 0 .35rem; }
.qr { image-rendering: pixelated; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--borde); }
.qr-grande { width: 240px; height: 240px; }

/* ---- identificación */
/* p001fix18 — centradas: con dos modos (o uno) la rejilla de tres columnas dejaba un hueco a la derecha. */
.modos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.modos > .modo { flex: 1 1 100%; min-width: 0; }
@media (min-width: 900px) { .modos > .modo { flex: 0 1 calc((100% - 2rem) / 3); } }
.modo h2 { font-size: 1.05rem; text-align: center; }
.af-estado { margin: 1rem auto; max-width: 640px; padding: .7rem 1rem; border-radius: 8px; text-align: center; background: var(--info-fondo); }
/* p001fix17 — «¿No se ha abierto Cliente @firma?» con el enlace para tocarlo a mano. */
.af-abrir { margin: .5rem auto 1rem; max-width: 640px; text-align: center; }
.af-abrir .btn { margin-top: .4rem; }
.af-trabajando::before { content: "⏳ "; }
.af-ok { background: var(--ok-fondo); color: var(--ok); }
.af-error { background: var(--mal-fondo); color: var(--mal); }
/* p033 — el estado de AutoFirma está siempre en la página (así el lector de pantalla anuncia el primer mensaje); vacío, no ocupa. */
.af-estado:empty { margin: 0; padding: 0; }

/* ---- formularios */
.formulario .campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; }
.campo-doble { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .campo-doble { grid-template-columns: 1fr 1fr; } }
label, .etiqueta { font-weight: 600; font-size: .95rem; }   /* p033 — .etiqueta: el nombre de un grupo (la fecha de nacimiento) */
input[type=text], input[type=email], input[type=date], input[type=password], input[type=number], input[type=search],
input[type=url], input[type=datetime-local], input[type=tel], input[type=time], input[type=month],   /* p045fix04 — tel, time, month: salían sin estilo */
input:not([type]), select, textarea {
    font: inherit; padding: .6rem .7rem; border: 1px solid #7d8aa0; border-radius: 8px;   /* p033 — 3:1 (antes #b9c3d3, 1,8:1) */ background: #fff; color: var(--texto); width: 100%; min-height: 44px;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--org-tinta); outline-offset: 1px; border-color: var(--org-tinta); box-shadow: none; }
input[readonly].fijo { background: #f1f4f8; color: var(--tenue); }
.ayuda { font-size: .85rem; color: var(--tenue); }
.error-campo { color: var(--mal); font-size: .88rem; }
.error-campo:empty { display: none; }
.input-validation-error { border-color: var(--mal) !important; }
.casillas { border: 0; padding: 0; margin: .5rem 0; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .55rem 0; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--org); }

/* ---- resumen (dl) */
.resumen { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.resumen dt { color: var(--tenue); font-weight: 600; }
.resumen dd { margin: 0; word-break: break-word; }
@media (max-width: 480px) { .resumen { grid-template-columns: 1fr; } .resumen dd { margin-bottom: .4rem; } }
details.xml { margin-top: 1rem; }
details.xml summary { cursor: pointer; color: var(--org-tinta); }

.resultado-icono { font-size: 3.2rem; line-height: 1; margin-top: 1rem; }

/* ---- tablas (en el móvil, cada fila es una ficha) */
.tabla-cont { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid #edf0f5; vertical-align: top; }
.tabla th { background: #f6f8fb; font-weight: 700; color: var(--tenue); position: sticky; top: 0; }
.tabla tr:hover td { background: #fafbfd; }
.tabla td.acciones { white-space: nowrap; text-align: right; }
.tabla td.acciones form { display: inline; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.inactiva td { color: var(--tenue); }
@media (max-width: 640px) {
    .tabla thead { display: none; }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla tr { border-bottom: 1px solid var(--borde); padding: .4rem 0; }
    .tabla td { border: 0; padding: .2rem .7rem; }
    .tabla td[data-titulo]::before { content: attr(data-titulo) ": "; font-weight: 600; color: var(--tenue); }
    .tabla td.acciones { text-align: left; }
}

/* ---- ventanas emergentes (§8.5: subformularios siempre en ventana emergente) */
dialog.modal {
    border: 0; border-radius: 12px; padding: 0; width: min(640px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: var(--texto);
}
/* p001fix06 — un botón de icono que no se puede usar (p. ej. ↗ sin host): se ve, con su explicación en el título. */
.btn.deshabilitado { opacity: .4; cursor: not-allowed; }
dialog.modal::backdrop { background: rgba(15, 22, 35, .45); }
/* p001fix01 — cambios sin guardar y clic en el fondo: se sacude en vez de cerrarse. */
dialog.modal.sacude { animation: sacude .4s ease-in-out; }
@keyframes sacude { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { dialog.modal.sacude { animation: none; outline: 3px solid var(--borde); } }
dialog.modal-ancha { width: min(980px, calc(100vw - 1.5rem)); }
.modal-cab { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
.modal-cab h2 { margin: 0; flex: 1; font-size: 1.1rem; }
.modal-cuerpo { padding: 1rem; overflow: auto; max-height: calc(100vh - 10rem); }
.modal-pie { display: flex; gap: .5rem; justify-content: flex-end; padding: .8rem 1rem; border-top: 1px solid var(--borde); flex-wrap: wrap; }

/* ---- administración */
body.admin { background: #eef1f5; }
.adm-cab {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 1rem;
    background: #1d2430; color: #fff;
}
.adm-cab a { color: #fff; }
.adm-cab .marca { color: #fff; }
.adm-cab .btn-ico { color: #fff; border-color: rgba(255, 255, 255, .3); }
.adm-cab select { width: auto; min-height: 36px; padding: .3rem .5rem; background: #2b3444; color: #fff; border-color: #4a556a; }
.adm-cab .entorno-prod { background: var(--mal); color: #fff; }
.adm-cab .entorno-des { background: #ffd45e; color: #4a3500; }
.adm-usuario { font-size: .9rem; opacity: .9; }
.adm-cab .crece { flex: 1; }
.adm-cab .barra { margin: 0; }
.adm-rejilla { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 52px); }
.adm-menu { display: none; background: var(--tarjeta); border-right: 1px solid var(--borde); padding: .6rem; }
.adm-menu.abierto { display: block; }
.adm-menu ul { list-style: none; margin: 0; padding: 0; }
.adm-menu a { display: flex; gap: .55rem; align-items: center; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--texto); }
.adm-menu a:hover, .adm-menu a.actual { background: var(--info-fondo); color: var(--org-tinta); }
/* p014 — los grupos del menú: el título se pulsa para abrir o cerrar; sus opciones, un poco metidas. */
.adm-menu .menu-grupo { margin-top: .35rem; }
.adm-menu .menu-grupo > summary { display: flex; gap: .55rem; align-items: center; padding: .5rem .7rem; border-radius: 8px; cursor: pointer;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); list-style: none; }
.adm-menu .menu-grupo > summary::-webkit-details-marker { display: none; }
.adm-menu .menu-grupo > summary::after { content: "▸"; margin-left: auto; transition: transform .15s; }
.adm-menu .menu-grupo[open] > summary::after { transform: rotate(90deg); }
.adm-menu .menu-grupo > summary:hover { background: var(--info-fondo); }
.adm-menu .menu-grupo ul { padding-left: .5rem; }
.adm-contenido { padding: 1rem; max-width: 1280px; width: 100%; }
@media (min-width: 900px) {
    .adm-rejilla { grid-template-columns: 240px 1fr; }
    .adm-menu { display: block; }
    .adm-cab .menu-boton { display: none; }
}
.barra { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.barra .crece { flex: 1; }
.barra input[type=search], .barra select { width: auto; min-width: 12rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin: 0; }
.paginacion { display: flex; gap: .4rem; justify-content: center; align-items: center; margin: 1rem 0; }
.cifras-adm { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 1rem 0; }
meter { width: 100%; min-width: 80px; height: 12px; }
.tabla td.ancha { width: 60%; }
.etiqueta-sistema::after { content: " 🔒"; font-size: .8em; }
.regla-codigo { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.secreto { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; font-size: 1.05rem; background: #f3f5f9; padding: .4rem .6rem; border-radius: 6px; display: inline-block; word-break: break-all; }
.codigos { columns: 2; font-family: ui-monospace, Consolas, monospace; }

@media print {
    .cabecera, .pie, .adm-cab, .adm-menu, .botones, .btn { display: none !important; }
    body { background: #fff; }
}

/* p003 — la ayuda bajo un campo (la circunscripción propuesta por la IP) */
.ayuda-campo { margin: .35rem 0 0; font-size: .92em; color: var(--tenue); }
.ayuda-campo strong { color: inherit; }
[data-lugar-avales] { margin-top: .6rem; }
.etiqueta-paso { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: var(--info-fondo); font-weight: 600; }

/* p001fix16 — la fecha de nacimiento en tres desplegables */
.fecha-partes { display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: .5rem; }

/* p004 — correo: lo que depende de otro campo (data-segun) y los grupos del formulario de la cuenta */
[hidden] { display: none !important; }
fieldset.grupo { border: 1px solid #d5dce8; border-radius: 10px; padding: .8rem 1rem .2rem; margin: 0 0 1rem; }
fieldset.grupo > legend { font-weight: 700; padding: 0 .4rem; }
.cifras { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1rem; }
.cifras > div { background: #f3f5f9; border-radius: 10px; padding: .5rem .9rem; min-width: 7.5rem; }
.cifras strong { display: block; font-size: 1.4rem; }
.celda-larga { max-width: 28rem; overflow-wrap: anywhere; }

/* p005 — campañas: secciones plegables, la fila elegida, la vista previa del correo */
details.plegable { margin: .5rem 0 1rem; border: 1px solid #e3e7ee; border-radius: 10px; padding: .4rem .8rem; background: #fafbfd; }
details.plegable > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
details.plegable[open] > summary { margin-bottom: .5rem; }
.tabla tr.elegida > td { background: var(--info-fondo); }
.vista-correo { width: 100%; min-height: 28rem; border: 1px solid #d8dde6; border-radius: 10px; background: #fff; }
.campo textarea.cuerpo-correo { min-height: 18rem; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* p006 — octavillas: las retiradas, atenuadas; la vista previa de una plantilla; el QR de un enlace */
.tabla tr.retirada > td { opacity: .55; }
.vista-octavilla { width: 100%; height: 34rem; border: 1px solid #d8dde6; border-radius: 10px; background: #e9ecf1; }
.qr-enlace { width: 9rem; height: 9rem; image-rendering: pixelated; border: 1px solid #e3e7ee; border-radius: 6px; background: #fff; }

/* p008 — el puesto: sus cuentas, centradas; el modo quiosco (solo el QR, a pantalla completa) */
.cifras-centro { justify-content: center; }
body.quiosco { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; background: #fff; padding: 1rem; }
.quiosco h1 { font-size: clamp(1.6rem, 4vw, 3rem); margin: 0; }
.quiosco .lema { font-size: clamp(1.1rem, 2.5vw, 1.8rem); margin: 0; }
.quiosco .qr-quiosco { width: min(70vh, 80vw); height: min(70vh, 80vw); image-rendering: pixelated; }
.quiosco .enlace { font-family: Consolas, monospace; font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight: 700; }
.quiosco .pie { color: var(--tenue); font-size: .9rem; }
.quiosco .enlace-boton { background: none; border: 0; padding: 0; color: var(--tenue); font: inherit; text-decoration: underline; cursor: pointer; }

/* p009 — la imagen de la organización: la foto de la portada y la página «Imagen» */
/* p019 — la foto se ve ENTERA (antes se recortaba a 340 px) y no tan alta que esconda «Avalar ahora». */
.portada-foto { display: block; width: 100%; height: var(--alto-portada); object-fit: contain; background: var(--tarjeta); border-radius: var(--radio); margin: .2rem 0 1rem; border-bottom: 4px solid var(--org2); }
.imagen-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.imagen-colores input[type=color] { width: 100%; height: 44px; padding: 2px; }
.muestra { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--m-fondo, #f4f6f9); color: #1d2430; }
.muestra-cab { padding: .6rem 1rem; background: #fff; border-bottom: 3px solid var(--m-org2, #1f5fa8); font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.muestra-cab img { max-height: 36px; width: auto; }
.muestra-cuerpo { padding: 1rem; }
.muestra-cuerpo a { color: var(--m-org, #1f5fa8); }
.muestra-boton { display: inline-block; padding: .5rem 1rem; border-radius: 8px; background: var(--m-org, #1f5fa8); color: var(--m-org-texto, #fff); font-weight: 700; }
.foto-previa { max-width: 100%; max-height: 180px; border-radius: var(--radio); display: block; }

/* p010 — la guía para firmar (/AutoFirma, /ayuda, /guia) */
.guia-indice ol { columns: 2 260px; margin: .2rem 0 .6rem; }
.guia h3 { margin-top: 1.1rem; }
/* p037 — los pasos por sistema (Windows, Android…) y los subapartados enlazables (2.c, 6) */
.guia h4 { margin: .9rem 0 .3rem; font-size: 1rem; }
.guia h3[id] { scroll-margin-top: 1rem; }
.guia h3:target { outline: 3px solid color-mix(in srgb, var(--org) 35%, transparent); outline-offset: 2px; }
.guia ol li, .guia ul li { margin-bottom: .35rem; }
.guia:target { outline: 3px solid color-mix(in srgb, var(--org) 35%, transparent); }
@media print {
    .guia-indice .botones { display: none; }
    .guia { break-inside: avoid-page; box-shadow: none; }
    .guia a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; word-break: break-all; }
}

/* p011 — avales en papel: la hoja para imprimir (A4) y las páginas de la recogida en papel */
.hoja-papel { background: #fff; color: #000; max-width: 210mm; margin: 0 auto 1.5rem; padding: 10mm; font-size: 11pt; line-height: 1.35; border: 1px solid var(--borde); }
.hoja-cab { display: flex; gap: 6mm; align-items: flex-start; justify-content: space-between; }
.hoja-titulos { flex: 1; }
.hoja-titulos h1 { font-size: 15pt; margin: 0 0 1mm; }
.hoja-org { margin: 0; font-weight: 700; }
.hoja-ele { margin: .5mm 0; }
.hoja-sello { width: 45mm; min-height: 28mm; border: 1px dashed #000; font-size: 8pt; padding: 2mm; text-align: center; }
.hoja-qr { width: 28mm; text-align: center; font-size: 8pt; }
.hoja-qr img { width: 26mm; height: 26mm; image-rendering: pixelated; display: block; margin: 0 auto 1mm; }
.hoja-texto { font-weight: 600; margin: 3mm 0; }
.hoja-ilp { font-size: 9.5pt; border: 1px solid #000; padding: 2mm 3mm; margin-bottom: 3mm; }
.hoja-ilp h2, .hoja-aut h2 { font-size: 10pt; margin: 0 0 1mm; }
.hoja-ilp p { margin: 0 0 1.5mm; text-align: justify; }
.hoja-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hoja-tabla th, .hoja-tabla td { border: 1px solid #000; padding: 1mm 1.5mm; font-size: 8.5pt; }
.hoja-tabla th { background: #eee; text-align: left; }
.hoja-tabla td { height: 11mm; }
.hoja-tabla .n { width: 9mm; text-align: center; }
.hoja-tabla .doc { width: 25mm; }
.hoja-tabla .fecha { width: 24mm; }
.hoja-tabla .firma { width: 32mm; }
.hoja-nota { font-size: 8.5pt; margin: 2mm 0; }
.hoja-aut { border: 1px solid #000; padding: 2mm 3mm; font-size: 9pt; margin-top: 3mm; }
.hoja-aut p { margin: 1.5mm 0; }
.hoja-pie { font-size: 7.5pt; color: #333; margin-top: 3mm; border-top: 1px solid #999; padding-top: 1.5mm; }
.hoja-pie p { margin: .5mm 0; }
body.impresion-hojas { background: #e9ecf1; padding: 1rem; }
.impresion-barra { max-width: 210mm; margin: 0 auto 1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.papel-filas input { width: 100%; min-width: 6rem; }
.papel-filas td.estado { white-space: nowrap; }
.papel-filas tr.fila-mal td { background: var(--mal-fondo); }
.papel-filas tr.fila-ok td { background: var(--ok-fondo); }
@media print {
    @page { size: A4; margin: 8mm; }
    body.impresion-hojas { background: #fff; padding: 0; }
    .impresion-barra { display: none; }
    .hoja-papel { border: 0; padding: 0; margin: 0; max-width: none; break-after: page; }
    .hoja-papel:last-child { break-after: auto; }
}

/* p012 — recibir hojas con el móvil: el número que se escribe en «HOJA Nº» */
.numero-hoja { font-size: clamp(4rem, 22vw, 8rem); font-weight: 800; line-height: 1; margin: .2rem 0 .6rem; color: var(--org-tinta); }
.cifra-grande { font-size: 2rem; text-align: center; max-width: 8rem; margin: 0 auto; }

/* p018 — la portada de cada organización (Administración → Portada de la organización) */
.bloque-org { display: grid; gap: 1rem; align-items: start; }
.bloque-org h2 { margin-top: 0; }
.bloque-org-ima { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radio); }
@media (min-width: 760px) { .bloque-org.con-imagen { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.portada-grupo { margin: 1.5rem 0; }
.portada-grupo > h2 { margin-bottom: .2rem; }
.rejilla-tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 1rem; }
.tarjeta-org { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-top: 4px solid var(--org2); margin: 0; }
.tarjeta-org-ima { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--fondo); }
.tarjeta-org-cuerpo { padding: 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta-org-cuerpo h3 { margin: 0; }
.tarjeta-org-cuerpo p { margin: 0; }
.tarjeta-org-cuerpo .btn { margin-top: auto; align-self: flex-start; }
.rejilla-personas { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-top: 1rem; }
.persona-org { margin: 0; text-align: center; }
.persona-org img, .persona-org-inicial { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .5rem; border: 3px solid var(--org2); background: var(--tarjeta); }
.persona-org-inicial { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; color: var(--org-tinta); }
.persona-org figcaption { display: flex; flex-direction: column; gap: .1rem; }
.persona-org-texto { font-size: .9rem; color: var(--tenue); }
.redes-org { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.5rem 0; }
/* la administración */
.paleta { list-style: none; padding: 0; margin: .4rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.paleta li { display: flex; align-items: center; gap: .4rem; }
.paleta-color { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--borde); display: inline-block; }
.candidatas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: .5rem 0; }
.candidata { margin: 0; border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem; background: var(--tarjeta); display: flex; flex-direction: column; gap: .4rem; }
.candidata img { width: 100%; height: 140px; object-fit: contain; background: repeating-conic-gradient(#eef1f6 0% 25%, #fff 0% 50%) 50% / 16px 16px; border-radius: 6px; }
.candidata figcaption { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.miniatura { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); }
.cita { border-left: 4px solid var(--org2); margin: .5rem 0 1rem; padding: .5rem .9rem; background: var(--fondo); border-radius: 0 6px 6px 0; }

/* p019/p023 — el carrusel de la portada (_CarruselOrg, carrusel.js). Cada imagen se ve ENTERA; la altura
   la elige la organización (--alto-carrusel), sin pasar de un 60 % de la pantalla. Sin JavaScript se
   desliza (scroll-snap). Dos estilos: TIRA (varias a la vez, puntos debajo) y DIAPOSITIVAS (una a una). */
.carrusel-titulo { margin: 1rem 0 .6rem; }
.carrusel { position: relative; margin: .2rem 0 1rem; }
.carrusel-pista { display: flex; height: min(var(--alto-carrusel, 200px), 60vh); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 3px solid var(--org-tinta); outline-offset: 2px; }
.carrusel-dia { scroll-snap-align: start; display: flex; align-items: center; justify-content: center; position: relative; }
.carrusel-dia > a { display: flex; height: 100%; align-items: center; justify-content: center; }
.carrusel-dia img { display: block; object-fit: contain; }
.carrusel-flecha { position: absolute; top: 50%; transform: translateY(-50%); border: 0; color: #fff; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.carrusel-mandos { display: flex; gap: .45rem; align-items: center; justify-content: center; }
.carrusel-puntos { display: inline-flex; gap: .45rem; align-items: center; }
.carrusel-punto { padding: 0; border: 0; border-radius: 50%; cursor: pointer; position: relative; }
/* p033 — el punto se ve pequeño, pero se toca en 24 × 24 px. */
.carrusel-punto::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.carrusel-pausa { border: 0; background: transparent; cursor: pointer; padding: 0; font-size: .85rem; min-width: 24px; min-height: 24px; }   /* p033 — 24 px para el dedo */

/* TIRA: varias a la vez, con hueco entre ellas, flechas pequeñas a los lados y puntos DEBAJO. */
.carrusel-tira .carrusel-pista { gap: 1rem; padding: .3rem .2rem; scroll-padding: 0 .2rem; }
.carrusel-tira .carrusel-dia { flex: 0 0 auto; height: 100%; }
.carrusel-tira .carrusel-dia img { height: 100%; width: auto; max-width: 85vw; border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .2s ease; }
.carrusel-tira .carrusel-dia a:hover img, .carrusel-tira .carrusel-dia a:focus-visible img { transform: scale(1.03); }
.carrusel-tira .carrusel-flecha { width: 30px; height: 44px; border-radius: 4px; background: rgba(20, 30, 50, .55); font-size: 1.4rem; }
.carrusel-tira .carrusel-flecha:hover, .carrusel-tira .carrusel-flecha:focus-visible { background: rgba(20, 30, 50, .8); }
.carrusel-tira .carrusel-ant { left: -.4rem; }
.carrusel-tira .carrusel-sig { right: -.4rem; }
.carrusel-tira .carrusel-mandos { margin-top: .7rem; }
.carrusel-tira .carrusel-punto { width: 8px; height: 8px; background: var(--org2); opacity: .45; }
.carrusel-tira .carrusel-punto[aria-current="true"] { opacity: 1; background: var(--org); }
.carrusel-tira .carrusel-pausa { color: var(--tenue); }

/* DIAPOSITIVAS: una a una, en una franja; a los lados, la misma imagen desenfocada; puntos encima. */
.carrusel-diapositivas { border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); border-bottom: 4px solid var(--org2); }
@media (max-width: 760px) { .carrusel-diapositivas .carrusel-pista { height: min(var(--alto-carrusel, 320px), 60vh, 60vw); } }
.carrusel-diapositivas .carrusel-dia { flex: 0 0 100%; height: 100%; scroll-snap-stop: always; overflow: hidden; }
.carrusel-diapositivas .carrusel-dia::before { content: ""; position: absolute; inset: -24px; background: var(--fondo-dia, none) center / cover no-repeat; filter: blur(20px) saturate(1.1); opacity: .45; }
.carrusel-diapositivas .carrusel-dia > a, .carrusel-diapositivas .carrusel-dia > img { position: relative; }
.carrusel-diapositivas .carrusel-dia > a { width: 100%; }
.carrusel-diapositivas .carrusel-dia img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.carrusel-diapositivas .carrusel-flecha { width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 30, 50, .55); font-size: 1.6rem; }
.carrusel-diapositivas .carrusel-flecha:hover, .carrusel-diapositivas .carrusel-flecha:focus-visible { background: rgba(20, 30, 50, .8); }
.carrusel-diapositivas .carrusel-ant { left: .5rem; }
.carrusel-diapositivas .carrusel-sig { right: .5rem; }
.carrusel-diapositivas .carrusel-mandos { position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); padding: .2rem .5rem; border-radius: 999px; background: rgba(20, 30, 50, .45); }
.carrusel-diapositivas .carrusel-punto { width: 10px; height: 10px; background: rgba(255, 255, 255, .6); }
.carrusel-diapositivas .carrusel-punto[aria-current="true"] { background: #fff; transform: scale(1.25); }
.carrusel-diapositivas .carrusel-pausa { color: #fff; }
@media (max-width: 480px) { .carrusel-flecha { transform: translateY(-50%) scale(.85); } }
/* p022 — los textos legales traídos de la web de la organización */
.lista-legal { padding-left: 1.1rem; }
.lista-legal li { margin: .35rem 0; }
form.en-linea { display: inline-block; margin-left: .4rem; }
/* p038 — Puesto → Mis octavillas: retirar o borrar, una por línea */
.octavillas-mias { list-style: none; padding: 0; margin: .4rem 0 0; }
.octavillas-mias li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--borde); }
.octavillas-mias li > span { flex: 1 1 10rem; }
.icono-previo { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--borde); border-radius: 6px; padding: 4px; background: #fff; }
/* p032 — lo que escribió alguien en una respuesta (Correo → Respuestas): con sus saltos de línea. */
.texto-pre { white-space: pre-line; word-break: break-word; }
/* p032fix01 — «dar de baja otra dirección» en una fila de Correo → Respuestas. */
details.desplegable > summary { list-style: none; display: inline-flex; }
details.desplegable > summary::-webkit-details-marker { display: none; }
details.desplegable[open] > form { margin-top: .4rem; min-width: 16rem; }
/* p034 — la portada de la plataforma: las recogidas de las organizaciones. */
.recogida-org { display: flex; align-items: center; gap: .5rem; color: var(--tenue); font-weight: 600; font-size: .92rem; }
.recogida-logo { width: auto; height: 32px; max-width: 96px; object-fit: contain; }
/* p035 — las gráficas del panel (GraficasPanel): SVG a lo ancho; el texto, en tinta (nunca en el color de la serie). */
.rejilla-graficas { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.rejilla-graficas > * { min-width: 0; }   /* que la gráfica se deslice dentro de su tarjeta en vez de ensanchar la página */
@media (min-width: 1100px) { .rejilla-graficas { grid-template-columns: 1fr 1fr; } }
.graf-cont { overflow-x: auto; }   /* en el móvil la gráfica no se encoge hasta no leerse: se desliza */
.graf { display: block; width: 100%; min-width: 540px; max-width: 720px; height: auto; overflow: visible; }   /* ni más grande que su tamaño (la letra no crece) ni tan pequeña que no se lea */
.graf text { font-size: 12px; fill: var(--tenue); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.graf .graf-fuerte { fill: var(--texto); }
.leyenda { list-style: none; display: flex; gap: 1rem; flex-wrap: wrap; padding: 0; margin: 0 0 .4rem; font-size: .9rem; color: var(--tenue); }
.leyenda li { display: flex; align-items: center; gap: .4rem; }
.muestra-serie { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }