/* Certificados de retención — PAN Corporación Social
   Tres diseños (ver _app/vista.php): .l-acceso (pantalla dividida), .l-app (proveedor), .l-admin (panel).
   Todo cabe en el alto de la ventana (100dvh); lo que sobra se desplaza por dentro, no la página. */

@font-face {
    font-family: "Jakarta";
    src: url("jakarta.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --azul: #0055B8;
    --azul-2: #0a64cf;
    --azul-oscuro: #003a80;
    --azul-noche: #002452;
    --cian: #009FE3;
    --verde: #76BC21;
    --verde-claro: #a6e05c;
    --tinta: #0f1b2d;
    --gris: #5d6b7e;
    --gris-claro: #8a97a8;
    --linea: #e3e9f1;
    --fondo: #f3f6fb;
    --blanco: #fff;
    --rojo: #c0392b;
    --rojo-fondo: #fdeeec;
    --ok: #3d7a0f;
    --ok-fondo: #eef8e4;
    --info: #0b5394;
    --info-fondo: #e9f3fd;
    --radio: 14px;
    --sombra: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
    --sombra-alta: 0 18px 50px rgba(0, 45, 110, .18);
    --fuente: "Jakarta", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* En escritorio todo va al 90 %: así se ve con el navegador al 100 % (pedido del 23-sep). Con zoom,
   las unidades vh también se encogen, así que los contenedores de alto completo lo compensan. */
@media (min-width: 1101px) {
    html { zoom: .9; }
    html .acceso, html .shell { height: calc(100dvh / .9); }
}
body { margin: 0; font: 15.5px/1.55 var(--fuente); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-oscuro); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; margin: 30px 0 12px; }
h3 { font-size: 15.5px; font-weight: 700; margin: 22px 0 10px; }
.sub { margin: 8px 0 22px; color: var(--gris); }
.ico { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid rgba(0, 159, 227, .45); outline-offset: 2px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 7px; color: var(--tinta); }
input, select {
    width: 100%; height: 50px; padding: 0 16px; font: inherit; color: inherit; background: var(--blanco);
    border: 1.5px solid #d3dbe6; border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
input[type=file] { height: auto; padding: 12px 14px; }
input::placeholder { color: var(--gris-claro); }
input:hover, select:hover { border-color: #b7c4d5; }
input:focus, select:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 159, 227, .15); }
button, .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; margin-top: 20px; padding: 0 24px; border: 0; border-radius: 12px; cursor: pointer;
    font: inherit; font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--blanco);
    background: linear-gradient(135deg, var(--azul-2), var(--azul) 55%, var(--azul-oscuro));
    box-shadow: 0 6px 18px rgba(0, 85, 184, .28); transition: transform .15s, box-shadow .15s, filter .15s;
}
button:hover, .boton:hover { color: var(--blanco); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 85, 184, .34); filter: saturate(1.1); }
button:active, .boton:active { transform: translateY(0); }
form > button, .boton.ancho { width: 100%; }
button.secundario { background: var(--blanco); color: var(--azul); border: 1.5px solid var(--azul); box-shadow: none; }
button.secundario:hover { color: var(--azul-oscuro); background: var(--info-fondo); }
button.enlace { background: none; color: var(--azul); min-height: 0; padding: 0; margin: 0; box-shadow: none; text-decoration: underline; font-weight: 600; }
button.enlace:hover { transform: none; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones form > button { width: auto; }
.en-linea { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.en-linea input, .en-linea select { flex: 1 1 220px; width: auto; }
.en-linea button { margin-top: 0; }
.cf-turnstile { margin-top: 18px; }

/* Ingreso con código: WhatsApp o correo. Con :has() se ve solo el campo del canal elegido; un
   navegador sin :has() muestra los dos y el servidor usa el del canal marcado. */
.canal { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.canal legend { padding: 0; margin-bottom: 7px; font-weight: 600; font-size: 14px; }
.canal-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.canal-opciones label {
    display: flex; align-items: center; gap: 10px; margin: 0; min-height: 50px; padding: 0 14px; cursor: pointer;
    border: 1.5px solid #d3dbe6; border-radius: 12px; color: var(--gris); transition: border-color .15s, background .15s;
}
.canal-opciones label:hover { border-color: #b7c4d5; }
.canal-opciones input[type=radio] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--azul); box-shadow: none; }
.canal-opciones .ico { width: 20px; height: 20px; flex: none; }
.canal-opciones label:has(input:checked) { border-color: var(--azul); background: var(--info-fondo); color: var(--azul); }
.canal-opciones label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0, 159, 227, .15); }
.pedir-codigo:has(#canal-whatsapp:checked) .campo-correo,
.pedir-codigo:has(#canal-correo:checked) .campo-whatsapp { display: none; }
.campo-codigo { height: 60px; font-size: 26px; font-weight: 700; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.campo-codigo::placeholder { color: #cfd8e3; }
.destino { color: var(--tinta); white-space: nowrap; }
.acciones-codigo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }
.acciones-codigo form > button { width: auto; }

/* ---------- Mensajes ---------- */
.aviso { padding: 13px 16px; border-radius: 12px; margin: 14px 0; font-size: 14.5px; border: 1px solid transparent; }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); border-color: #f6cdc8; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: #d5ecbd; }
.aviso-info { background: var(--info-fondo); color: var(--info); border-color: #cfe3f8; }
.nota { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #f2f9ea, #eaf6fb); border: 1px solid #dcefcb; font-size: 14.5px; }
.ayuda { color: var(--gris); font-size: 14px; margin-top: 16px; }
code { background: var(--fondo); border: 1px solid var(--linea); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
details { margin-top: 24px; border-top: 1px solid var(--linea); padding-top: 14px; }
details summary { cursor: pointer; color: var(--gris); font-size: 14px; font-weight: 600; }

/* ================================================================
   ACCESO — pantalla dividida, alto exacto de la ventana
   ================================================================ */
.l-acceso { background: var(--blanco); }
.acceso { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.acceso-marca {
    position: relative; overflow: hidden; color: var(--blanco);
    padding: clamp(28px, 4.5vw, 64px); display: flex; flex-direction: column; gap: 28px;
    background:
        url("simbolo-blanco.png") no-repeat right -12% bottom -18% / min(78%, 640px),
        radial-gradient(1200px 600px at -10% -20%, rgba(0, 159, 227, .55), transparent 55%),
        radial-gradient(700px 500px at 110% 110%, rgba(118, 188, 33, .35), transparent 60%),
        linear-gradient(150deg, var(--azul-2) 0%, var(--azul) 38%, var(--azul-oscuro) 75%, var(--azul-noche) 100%);
}
.acceso-logo img { height: clamp(44px, 5vh, 60px); display: block; }
.acceso-texto { margin: auto 0; position: relative; z-index: 1; max-width: 560px; }
.acceso-rotulo {
    display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 99px; font-size: 12.5px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px);
}
.acceso-titulo { font-size: clamp(30px, 3.9vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
.acceso-titulo span { color: var(--verde-claro); }
.acceso-puntos { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid; gap: 12px; }
.acceso-puntos li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.acceso-puntos .ico {
    width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--blanco);
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
}
/* Las tres piezas de color de la papelería de PAN */
.acceso-formas { position: absolute; left: -46px; bottom: -40px; width: 150px; height: 190px; transform: rotate(-14deg); opacity: .95; }
.acceso-formas i { position: absolute; left: 0; width: 100%; height: 34%; border-radius: 22px; }
.acceso-formas i:nth-child(1) { top: 0; background: var(--cian); opacity: .9; }
.acceso-formas i:nth-child(2) { top: 33%; background: #1a73d9; }
.acceso-formas i:nth-child(3) { top: 66%; background: var(--verde); }

.acceso-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--blanco); }
.acceso-contenido { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vh, 56px) clamp(20px, 5vw, 64px); }
.l-acceso .tarjeta { width: 100%; max-width: 430px; }
.l-acceso .tarjeta h1 { font-size: clamp(26px, 2.6vw, 36px); }
.l-acceso .pie { border-top: 1px solid var(--linea); }

/* ================================================================
   APP — el proveedor con sesión
   ================================================================ */
.l-app {
    min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
    background: radial-gradient(900px 380px at 85% -10%, rgba(0, 159, 227, .10), transparent 60%), var(--fondo);
}
.barra {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px clamp(16px, 4vw, 40px); background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
}
.marca img { height: 42px; display: block; }
.barra nav { display: flex; gap: 6px; flex-wrap: wrap; }
.barra nav a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
    font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--gris);
}
.barra nav a:hover { background: var(--info-fondo); color: var(--azul); }
.barra nav a.activo { background: var(--azul); color: var(--blanco); }
.barra nav .ico { width: 18px; height: 18px; }
main.app { width: min(1120px, 100%); margin: 0 auto; padding: clamp(22px, 4vh, 48px) clamp(16px, 4vw, 40px); }
.l-app .tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--sombra); }
.l-app .tarjeta.angosta { max-width: 480px; margin: 0 auto; }
.l-app .tarjeta.limpia { background: none; border: 0; box-shadow: none; padding: 0; }

.rotulo { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cian); }
.saludo h1 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; }
.saludo .sub { display: flex; flex-wrap: wrap; gap: 8px; }
.chip .ico { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 99px; background: var(--blanco); border: 1px solid var(--linea); font-size: 14px; font-weight: 600; color: var(--gris); }

.anos-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ano-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sombra);
    transition: transform .2s, box-shadow .2s;
}
.ano-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.ano-card .etq { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-claro); }
.ano-card .ano-num {
    font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--azul), var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ano-card .det { color: var(--gris); font-size: 14px; }
.ano-card .boton { margin-top: 14px; width: 100%; }
.ano-card.reciente { color: var(--blanco); border: 0; background: linear-gradient(150deg, var(--azul-2), var(--azul) 50%, var(--azul-oscuro)); }
.ano-card.reciente .etq { color: rgba(255, 255, 255, .7); }
.ano-card.reciente .ano-num { background: none; color: var(--blanco); }
.ano-card.reciente .det { color: rgba(255, 255, 255, .82); }
.ano-card.reciente .boton { background: var(--blanco); color: var(--azul); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.ano-card.reciente::after {
    content: ""; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px;
    background: url("simbolo-blanco.png") no-repeat center / contain; opacity: .9; pointer-events: none;
}
.vacio { margin-top: 26px; }

/* ================================================================
   ADMIN — menú lateral fijo, contenido con desplazamiento propio
   ================================================================ */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.lateral {
    display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; color: var(--blanco); min-height: 0;
    background:
        url("simbolo-blanco.png") no-repeat left -60px bottom 70px / 330px,
        linear-gradient(180deg, var(--azul) 0%, var(--azul-oscuro) 70%, var(--azul-noche) 100%);
}
.lateral-logo img { height: 44px; display: block; margin: 0 8px; }
.lateral-rotulo { margin: 14px 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lateral-nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
    color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s;
}
.lateral-nav a:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); }
.lateral-nav a.activo { background: var(--blanco); color: var(--azul); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.lateral-usuario {
    margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 600;
}
.lateral-usuario span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario a { color: var(--blanco); display: inline-flex; padding: 4px; border-radius: 8px; }
.lateral-usuario a:hover { background: rgba(255, 255, 255, .16); color: var(--blanco); }
.lateral-usuario { padding: 6px; gap: 4px; }
.lateral-usuario a.lateral-perfil { flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 6px 8px; text-decoration: none; }
.lateral-perfil span { display: flex; flex-direction: column; line-height: 1.25; }
.lateral-perfil small { color: rgba(255, 255, 255, .7); font-size: 11.5px; font-weight: 500; }
.lateral-usuario a.lateral-perfil.activo { background: var(--blanco); color: var(--azul); }
.lateral-perfil.activo small { color: var(--gris); }
/* El contenido ocupa todo el ancho y el alto: la página no se desplaza; si algo no cabe, se desplaza
   dentro de su tarjeta (páginas sencillas) o dentro de su panel (tablero, con .ajustada). */
.contenido {
    min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 18px 22px 18px;
    background: radial-gradient(900px 400px at 100% -10%, rgba(0, 159, 227, .08), transparent 60%), var(--fondo);
}
.l-admin .tarjeta { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.l-admin .tarjeta > * { flex-shrink: 0; }
.l-admin .tarjeta.ajustada { overflow: hidden; }
.l-admin .tarjeta.angosta { flex: none; width: 100%; margin: auto; overflow: visible; }
.selector-ano { flex-wrap: nowrap; align-items: center; }
.selector-ano select { flex: none; width: 110px; height: 42px; }
.selector-ano button { flex: none; width: auto; min-height: 42px; }
.l-admin .tarjeta.ajustada > .vista { flex: 1 1 auto; min-height: 0; }
.vista { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.vista > .rejilla-2 { flex: 1; min-height: 0; margin: 0; }
.vista > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vista-resumen > .cifras { margin: 0; }
.rejilla-2 > .panel { display: flex; flex-direction: column; min-height: 0; }
.panel-cuerpo { flex: 1; min-height: 0; overflow: auto; }
.panel-cuerpo > h3:first-child { margin-top: 0; }
.panel-grafico { flex: 1; min-height: 140px; display: flex; align-items: center; justify-content: center; }
.panel-grafico .grafico { width: 100%; height: 100%; max-height: min(100%, 440px); }
/* El embudo escala su texto con el ancho: se le pone techo para que no crezca de más. */
.panel-grafico .grafico.embudo { width: min(100%, 620px); height: auto; }
.pestanas { display: flex; gap: 4px; padding: 4px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; }
.pestanas a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--gris); text-decoration: none; }
.pestanas a:hover { background: var(--info-fondo); color: var(--azul); }
.pestanas a.activa { background: var(--azul); color: var(--blanco); }
.pestanas .ico { width: 17px; height: 17px; }
.encabezado .buscador { margin-left: auto; }
.l-admin .tarjeta.angosta { max-width: 520px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; padding: 30px; box-shadow: var(--sombra); }
.l-admin h1 { font-size: clamp(24px, 2.4vw, 32px); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.cifras div {
    position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: 16px; color: var(--gris); font-size: 13.5px;
    background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.cifras div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cian); }
.cifras div:nth-child(2)::before { background: var(--azul); }
.cifras div:nth-child(3)::before { background: var(--verde); }
.cifras div:nth-child(4)::before { background: #f0a500; }
.cifras span { display: block; margin-bottom: 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }

/* Tabla normal (no display:block): así encabezado y filas comparten columnas. Si no cabe, se desplaza
   el contenedor (.panel-cuerpo o la tarjeta), no la tabla. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); }
thead th:first-child { border-top-left-radius: 13px; }
thead th:last-child { border-top-right-radius: 13px; }
.panel-cuerpo thead th { position: sticky; top: 0; z-index: 1; }
tr > * { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
th { background: #f7f9fc; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
tbody tr:hover > td { background: #fafcff; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.compacta { font-size: 13.5px; }
table.compacta tr > * { padding: 8px 12px; }
.ev-ingreso_fallido td, .ev-bloqueado td { color: var(--rojo); }
.estado { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--fondo); color: var(--gris); }
.estado-activa { background: var(--ok-fondo); color: var(--ok); }
.estado-borrador { background: #fff4d6; color: #7a5600; }
.avisos { font-size: 14px; max-height: 260px; overflow: auto; }

/* ---------- Tablero ---------- */
.encabezado { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.buscador { display: flex; align-items: center; width: min(380px, 100%); background: var(--blanco); border: 1.5px solid #d3dbe6; border-radius: 12px; padding-left: 4px; }
.buscador:focus-within { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 159, 227, .15); }
.buscador input { border: 0; height: 46px; box-shadow: none; }
.buscador input:focus { box-shadow: none; }
.buscador button { width: auto; flex: none; margin: 0 4px; min-height: 38px; padding: 0 12px; border-radius: 9px; box-shadow: none; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 20px 22px; box-shadow: var(--sombra); min-width: 0; }
.panel h2 { margin: 0 0 4px; font-size: 16.5px; }
.panel .ayuda { margin: 0 0 12px; font-size: 13.5px; }
.panel table { box-shadow: none; border-radius: 12px; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.boton.chico, button.chico { min-height: 36px; margin: 0; padding: 0 14px; font-size: 13.5px; border-radius: 10px; gap: 7px; box-shadow: none; }
.boton.chico .ico { width: 16px; height: 16px; }
.boton.secundario { background: var(--blanco); color: var(--azul); border: 1.5px solid var(--linea); }
.boton.secundario:hover { color: var(--azul); background: var(--info-fondo); }
.acciones-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.acciones-fila form { margin: 0; }
.centro { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr > * { vertical-align: middle; }
.estado-error { background: #fde8e8; color: var(--rojo); }

/* Encabezados que ordenan */
th.ordenable { padding: 0; }
th.ordenable a { display: block; padding: 8px 12px; color: inherit; text-decoration: none; white-space: nowrap; }
th.ordenable a:hover { color: var(--azul); background: var(--info-fondo); }
th.ordenada { color: var(--azul); }
th.num.ordenable a { text-align: right; }
th.centro.ordenable a { text-align: center; }
.flecha-orden { display: inline-block; min-width: 1.1em; }
.enlace-fila { color: var(--tinta); font-weight: 600; text-decoration: none; }
.enlace-fila:hover { color: var(--azul); text-decoration: underline; }

/* Botón PDF y su ventana (popover nativo: sin JavaScript, se cierra con Esc o clic afuera) */
.boton-pdf { min-height: 32px; margin: 0; padding: 0 10px 0 9px; gap: 6px; font-size: 13px; border-radius: 9px; box-shadow: none;
    background: var(--blanco); color: var(--azul); border: 1.5px solid var(--linea); }
.boton-pdf:hover { color: var(--azul); background: var(--info-fondo); border-color: var(--azul); box-shadow: none; }
.boton-pdf .ico { width: 16px; height: 16px; }
.boton-pdf span { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--azul); color: var(--blanco); font-size: 11.5px; }
.ventana { width: min(440px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 32px)); padding: 0; overflow: auto;
    border: 1px solid var(--linea); border-radius: 18px; background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 60px rgba(10, 30, 60, .28); text-align: left; }
.ventana::backdrop { background: rgba(10, 25, 50, .38); backdrop-filter: blur(2px); }
.ventana-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--linea); }
.ventana-cab h2 { margin: 0; font-size: 16.5px; }
.ventana-cab p { margin: 4px 0 0; color: var(--gris); font-size: 13px; }
.ventana .cerrar { min-height: 32px; width: 32px; margin: 0; padding: 0; border-radius: 9px; font-size: 22px; line-height: 1; box-shadow: none; background: var(--fondo); color: var(--gris); }
.ventana .cerrar:hover { background: var(--info-fondo); color: var(--azul); transform: none; }
.ventana-anos { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; }
.ventana-anos a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.ventana-anos a:hover { border-color: var(--azul); background: var(--info-fondo); }
.ventana-anos a > .ico { width: 22px; height: 22px; color: var(--azul); flex: none; }
.ventana-anos a > span { flex: 1; display: flex; flex-direction: column; }
.ventana-anos small { color: var(--gris); font-size: 12.5px; }
.ventana-anos em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--azul); white-space: nowrap; }
.ventana-pie { display: block; padding: 12px 20px 16px; font-size: 13px; font-weight: 600; }

/* Ficha del proveedor */
.ficha-titulo { min-width: 0; flex: 1 1 360px; }
.ficha-titulo h1 { font-size: clamp(20px, 1.9vw, 26px); }
.pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.panel h3 { margin: 18px 0 8px; font-size: 14.5px; }
.en-linea.compacto { gap: 8px; }
.en-linea.compacto input { height: 38px; font-size: 14px; border-radius: 10px; }
.en-linea > button { width: auto; flex: none; }
.acciones form > button.chico { width: auto; }
.encabezado-derecha { margin-left: auto; }
.celda-correo { min-width: 12em; }
.selector-ano-ancho select { width: 172px; }
.encabezado .buscador { width: min(320px, 100%); }
.boton-alterno { margin-top: 10px; box-shadow: none; }
/* El buscador se encoge antes de bajar de línea. */
.encabezado .buscador { flex: 1 1 220px; max-width: 320px; }

/* Formularios de la pantalla dividida, compactos: con un aviso arriba y el botón de entrar sin
   clave, todo debe caber en el alto de una laptop sin desplazarse. */
.acceso-contenido label { margin: 12px 0 6px; }
.acceso-contenido input { height: 46px; }
.acceso-contenido button, .acceso-contenido .boton { min-height: 46px; margin-top: 16px; }
.acceso-contenido .boton-alterno { margin-top: 8px; }
.acceso-contenido .nota { margin-top: 14px; padding: 11px 14px; font-size: 13.5px; }
.acceso-contenido .sub { margin: 6px 0 16px; }
.acceso-contenido .ayuda { margin-top: 12px; font-size: 13.5px; }

/* Contabilidad viendo el portal como un proveedor */
.banda-vista { display: flex; align-items: center; gap: 10px; padding: 10px clamp(16px, 4vw, 40px); background: #fff4d6; color: #5c4200; font-size: 14px; font-weight: 600; }
.banda-vista span { flex: 1; }
.banda-vista .ico { width: 18px; height: 18px; flex: none; }
.banda-vista a { color: #5c4200; font-weight: 800; white-space: nowrap; }
/* Con JavaScript, el selector de año se aplica al elegirlo y el botón sobra (filtro.js lo esconde). */
.con-js [data-sin-js] { display: none; }
.rejilla-2.ancha-izq { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.panel-cab .acciones-fila { flex-wrap: nowrap; }
.panel h3 small { font-weight: 500; }
.salud li .boton { flex: none; }
small { color: var(--gris-claro); font-size: 12px; }
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .g-eje { font-size: 13px; fill: var(--gris-claro); font-weight: 600; }
.grafico .g-valor { font-size: 15px; fill: var(--tinta); font-weight: 800; }
.grafico .g-etiqueta { font-size: 15px; fill: var(--tinta); font-weight: 600; }
.grafico .g-pct { fill: var(--gris); font-weight: 600; }
.grafico .punto:hover path { fill-opacity: 1; filter: brightness(1.12); }
.salud { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.salud li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); font-size: 14px; font-weight: 600; }
.salud li span { flex: 1; }
.salud li b { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; }
.salud li.bien .ico { color: var(--ok); }
.salud li.bien b { background: var(--ok-fondo); color: var(--ok); }
.salud li.mal .ico { color: #b86e00; }
.salud li.mal b { background: #fff4d6; color: #7a5600; }

/* ---------- Pie ---------- */
.pie { text-align: center; color: var(--gris-claro); font-size: 13px; padding: 16px; }
.pie a { color: var(--gris); }

/* ================================================================
   Pantallas pequeñas y bajas
   ================================================================ */
/* Pantalla baja de verdad. El umbral cuenta con el zoom de .9 del escritorio: una laptop de 1080 px
   con escala de Windows al 125 % deja ~720 px de alto, y ahí sí cabe todo. */
@media (max-height: 640px) and (min-width: 881px) {
    .acceso-puntos { display: none; }
    .acceso-titulo { font-size: clamp(28px, 3.3vw, 46px); }
}
@media (max-width: 1100px) {
    .rejilla-2 { grid-template-columns: 1fr; }
    /* En una sola columna ya no cabe todo: vuelve el desplazamiento de la tarjeta completa. */
    .l-admin .tarjeta.ajustada { overflow-y: auto; }
    .l-admin .tarjeta.ajustada > .vista, .vista > .rejilla-2 { flex: none; }
    .panel-cuerpo { max-height: 60vh; }
    .panel-grafico { min-height: 220px; }
}
@media (max-width: 880px) {
    .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; min-height: 100dvh; }
    .acceso-marca { padding: 18px 20px 22px; gap: 14px; background-size: 60%, auto, auto, auto; background-position: right -40px bottom -60px, 0 0, 0 0, 0 0; }
    .acceso-logo img { height: 38px; }
    .acceso-rotulo { margin-bottom: 10px; font-size: 11px; padding: 4px 10px; }
    .acceso-titulo { font-size: 24px; }
    .acceso-puntos, .acceso-formas { display: none; }
    .acceso-panel { overflow: visible; }
    .acceso-contenido { align-items: flex-start; padding: 26px 20px; }

    .shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .lateral { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(90deg, var(--azul), var(--azul-oscuro)); }
    .lateral-logo img { height: 32px; margin: 0 4px; }
    .lateral-rotulo { display: none; }
    .lateral-nav { flex-direction: row; overflow-x: auto; flex: 1; scrollbar-width: none; }
    .lateral-nav a { padding: 8px 10px; white-space: nowrap; }
    .lateral-nav a span { display: none; }
    .lateral-nav a.activo span { display: inline; }
    .lateral-usuario { margin: 0; padding: 4px; background: none; }
    .lateral-usuario > .ico, .lateral-usuario span { display: none; }
}
@media (max-width: 560px) {
    .barra nav a span { display: none; }
    .barra nav a { padding: 9px; }
    .marca img { height: 34px; }
    .ano-card .ano-num { font-size: 50px; }
    .l-app .tarjeta { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}
.acceso-contenido .aviso { margin: 10px 0; padding: 10px 14px; font-size: 14px; }

/* ---------- Inscripción y actualización de proveedores (inscripcion.php) ---------- */
textarea {
    width: 100%; min-height: 96px; padding: 12px 16px; font: inherit; color: inherit; background: var(--blanco);
    border: 1.5px solid #d3dbe6; border-radius: 12px; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 159, 227, .15); }
.sol-seccion { border: 1px solid var(--linea); border-radius: 16px; padding: 6px 20px 20px; margin: 18px 0 0; min-width: 0; }
.sol-seccion legend { padding: 0 8px; font-weight: 800; font-size: 16px; color: var(--azul); }
.sol-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.sol-rejilla .ancho, .sol-rejilla .doble { grid-column: 1 / -1; }
.sol-sino { display: flex; gap: 18px; margin-top: 4px; }
.sol-sino label { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-weight: 500; }
.sol-sino input { width: 18px; height: 18px; accent-color: var(--azul); box-shadow: none; }
.sol-error { display: block; margin-top: 6px; color: var(--rojo); font-size: 13px; font-weight: 600; }
.sol-invalido input, .sol-invalido select, .sol-invalido textarea { border-color: var(--rojo); }
.sol-contactos label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 8px 0 0; border: 1.5px solid #d3dbe6;
    border-radius: 12px; font-weight: 500; cursor: pointer; }
.sol-contactos label:has(input:checked) { border-color: var(--azul); background: var(--info-fondo); color: var(--azul); }
.sol-contactos input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--azul); box-shadow: none; }
.sol-casilla { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.5; }
.sol-casilla input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--azul); box-shadow: none; }
.sol-numero { font-size: 22px; font-weight: 800; letter-spacing: .08em; color: var(--azul); font-variant-numeric: tabular-nums; }
select:disabled { background: var(--fondo); color: var(--gris-claro); cursor: not-allowed; }
/* Banco: «Otra entidad» abre el campo para escribirla, sin JavaScript. */
.sol-otra { display: none; }
.sol-otra label { margin-top: 10px; }
.sol-campo:has(option[value="Otra entidad"]:checked) .sol-otra { display: block; }

/* Adjuntos: el input nativo (que habla en el idioma del navegador) queda oculto pero enfocable; la zona es
   su segunda <label>. inscripcion.js pone el nombre del archivo y acepta arrastrarlo. */
.sol-archivo { position: relative; }
.sol-archivo input[type=file] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.archivo-zona {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 0; min-height: 50px;
    padding: 8px 14px; border: 1.5px dashed #b7c4d5; border-radius: 12px; background: var(--fondo); cursor: pointer;
    font-weight: 500; line-height: 1.35; color: var(--gris); transition: border-color .15s, background .15s;
}
.archivo-zona > * { pointer-events: none; }
.archivo-zona .ico { grid-row: span 2; color: var(--azul); }
.archivo-texto strong { color: var(--azul); }
.archivo-nombre { font-size: 13px; color: var(--gris-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-zona:hover, .arrastrando .archivo-zona { border-color: var(--cian); background: var(--info-fondo); }
.sol-archivo input:focus-visible + .archivo-zona { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 159, 227, .15); }
.con-archivo .archivo-zona { border-style: solid; border-color: #b9dc8f; background: var(--ok-fondo); }
.con-archivo .archivo-nombre { color: var(--ok); font-weight: 600; }
.con-problema .archivo-zona, .sol-invalido .archivo-zona { border-color: var(--rojo); }
.con-problema .archivo-nombre { color: var(--rojo); font-weight: 600; white-space: normal; }

/* Pasos del formulario (inscripcion.js pone .con-pasos). Sin JavaScript no hay barra ni «Siguiente»: se ve
   todo el formulario, como antes, con el botón de enviar al final. */
.sol-pasos [hidden] { display: none !important; }
.pasos-barra, .pasos-nav [data-atras], .pasos-nav [data-siguiente], .revision { display: none; }
.sol-pasos:not(.con-pasos) .pasos-nav button[type=submit] { width: 100%; }
.con-pasos .paso:not(.activo) { display: none; }
.paso:focus { outline: none; }
.con-pasos .pasos-barra { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pasos-barra li { flex: 1 1 0; min-width: 0; }
button.paso-boton {
    display: flex; width: 100%; min-height: 0; margin: 0; padding: 8px 2px 0; justify-content: flex-start; gap: 9px; border-radius: 0;
    border-top: 4px solid var(--linea); background: none; box-shadow: none; color: var(--gris-claro); font-size: 14px; font-weight: 600;
}
button.paso-boton:hover { transform: none; box-shadow: none; filter: none; color: var(--azul); }
button.paso-boton:disabled { cursor: default; }
button.paso-boton:disabled:hover { color: var(--gris-claro); }
.paso-num {
    display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--linea); color: var(--gris); font-size: 12.5px; font-weight: 800;
}
.paso-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso-boton[aria-current] { border-top-color: var(--azul); color: var(--azul); }
.paso-boton[aria-current] .paso-num { background: var(--azul); color: var(--blanco); }
.paso-boton.hecho { border-top-color: var(--verde); color: var(--tinta); }
.paso-boton.hecho .paso-num { background: var(--verde); color: var(--blanco); font-size: 0; }
.paso-boton.hecho .paso-num::after { content: "✓"; font-size: 13px; }
.paso-boton.con-error { border-top-color: var(--rojo); }
.paso-boton.con-error .paso-num { background: var(--rojo); color: var(--blanco); font-size: 12.5px; }
.paso-boton.con-error .paso-num::after { content: none; }
/* Con pasos, cada uno cabe en la pantalla (1536x715 al 125 %): menos marco alrededor, y en pantalla ancha
   los campos cortos van de a tres por fila. En celular, uno debajo del otro. */
main.app:has(.con-pasos) { padding-block: 16px; }
.l-app .tarjeta:has(.con-pasos) { padding: 22px 30px 24px; }
.tarjeta:has(.con-pasos) > h1 { font-size: 26px; }
.tarjeta:has(.con-pasos) > .sub { margin: 4px 0 12px; font-size: 14.5px; }
.con-pasos .sol-seccion { border: 0; border-radius: 0; padding: 0; margin: 14px 0 0; }
.con-pasos .sol-seccion legend { padding: 0; font-size: 15px; }
.con-pasos .sol-seccion + .sol-seccion { margin-top: 18px; }
.con-pasos .sol-seccion > .ayuda:first-of-type { margin-top: 4px; }
.con-pasos label { margin: 10px 0 5px; }
.con-pasos input:not([type=radio]):not([type=checkbox]), .con-pasos select { height: 42px; }
.con-pasos textarea { min-height: 58px; padding: 8px 14px; }
.con-pasos .archivo-zona { min-height: 46px; padding: 6px 14px; }
.con-pasos .sol-sino label { margin-top: 2px; }
.pasos-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.con-pasos .pasos-nav { margin-top: 16px; }
.con-pasos .pasos-nav button { min-height: 46px; }
@media (min-width: 1101px) {
    .con-pasos .paso:not(.paso-soportes) .sol-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .con-pasos .sol-rejilla .doble { grid-column: span 2; }
    .con-pasos .sol-rejilla > .ayuda.ancho { grid-column: span 2; align-self: end; margin: 0 0 2px; }
}
.pasos-nav button { margin: 0; }
.con-pasos .pasos-nav [data-atras] { display: inline-flex; }
.con-pasos .pasos-nav [data-siguiente] { display: inline-flex; }
.pasos-nav [data-siguiente], .pasos-nav button[type=submit] { margin-left: auto; min-width: 240px; }
button.enviando { opacity: .75; cursor: progress; }

/* «Revisar y enviar»: lo diligenciado a la izquierda (se desplaza por dentro) y las declaraciones a la derecha. */
.con-pasos .revision {
    display: block; margin-top: 18px; padding: 14px 18px; overflow: auto;
    border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo);
}
.revision h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--azul); }
.revision-grupo + .revision-grupo { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.revision-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.revision-cabeza h3 { margin: 0; font-size: 14px; }
button.paso-editar {
    min-height: 0; margin: 0; padding: 2px 6px; background: none; box-shadow: none; color: var(--azul);
    font-size: 13px; font-weight: 600; text-decoration: underline;
}
button.paso-editar:hover { transform: none; box-shadow: none; color: var(--azul-oscuro); }
.revision dl { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; }
.revision dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 2px 0; }
.revision dt { color: var(--gris); }
.revision dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
@media (min-width: 900px) {
    .con-pasos .paso-final.activo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: stretch; }
    /* contain: size hace que la altura la ponga la columna de las declaraciones; el resumen se desplaza por dentro. */
    .con-pasos .paso-final .revision { contain: size; }
}

/* Ventana (<dialog>): la política de datos sin salir del formulario. */
.dialogo {
    width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0;
    border-radius: 20px; color: var(--tinta); background: var(--blanco); box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgba(0, 36, 82, .45); }
body:has(.dialogo[open]) { overflow: hidden; }
.dialogo-cuerpo { padding: 24px 28px; }
.dialogo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialogo-cabeza h2 { margin: 0; font-size: 20px; }
button.dialogo-cerrar {
    flex: none; width: 36px; min-height: 36px; margin: -6px -10px 0 0; padding: 0; font-size: 26px; font-weight: 400; line-height: 1;
    color: var(--gris); background: none; box-shadow: none;
}
button.dialogo-cerrar:hover { color: var(--tinta); background: var(--fondo); transform: none; box-shadow: none; }
.dialogo .sub { margin: 6px 0 16px; font-size: 14px; }
.politica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; margin: 0; font-size: 13.5px; line-height: 1.5; }
.politica dt { margin-bottom: 2px; font-weight: 700; color: var(--azul); }
.politica dd { margin: 0; }
.dialogo-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px;
}
.dialogo-pie button { margin: 0; }
@media (min-width: 1101px) {
    .dialogo { max-height: calc(100dvh / .9 - 36px); }
}
@media (max-width: 560px) {
    .sol-rejilla { grid-template-columns: minmax(0, 1fr); }
    .sol-seccion { padding: 4px 14px 16px; }
    .politica { grid-template-columns: minmax(0, 1fr); }
    .dialogo-cuerpo { padding: 20px 18px; }
    .pasos-barra li:has([aria-current]) { flex-grow: 3; }
    .paso-boton:not([aria-current]) .paso-nombre { display: none; }
    .pasos-nav [data-siguiente], .pasos-nav button[type=submit] { min-width: 0; flex: 1; }
    .revision dl div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0; }
}