/* ==================================================================
   PLATAFORMA DE PARTNERS · RSE
   Hoja de estilos única.
   ------------------------------------------------------------------
   Pensada primero para el móvil: los partners entran desde la calle,
   con una mano y a veces con guantes. Los botones son grandes, las
   tablas se convierten en fichas y el menú se recoge en un cajón.

   No carga ninguna tipografía de fuera: la letra del propio sistema
   se ve bien, aparece al instante y funciona sin conexión.
   ================================================================== */

/* ---------- 1. Variables ----------------------------------------- */
:root {
    color-scheme: light;

    /* Azul corporativo y naranja de acento */
    --azul:          #123a6b;
    --azul-oscuro:   #0d2c53;
    --azul-claro:    #e8eef7;
    --naranja:       #f07d20;
    --naranja-suave: #fdf0e3;

    /* Neutros con una pizca de azul, para que peguen con la marca */
    --fondo:      #f4f6fa;
    --papel:      #ffffff;
    --tinta:      #1b2430;
    --tinta-poca: #6b7688;
    --linea:      #dde3ec;

    /* Colores con significado */
    --verde:       #1f7a4d;
    --verde-fondo: #e6f4ec;
    --ambar:       #9a5b06;
    --ambar-fondo: #fdf2dc;
    --rojo:        #b3261e;
    --rojo-fondo:  #fbe9e7;

    --radio:  10px;
    --sombra: 0 1px 3px rgba(20, 40, 80, .08), 0 6px 18px rgba(20, 40, 80, .06);

    /* Alto de la barra de arriba. El cajon del menu y su velo cuelgan de
       este valor, y no siempre es el mismo: en pantallas muy estrechas
       "Area de partners" pasa a dos lineas y la barra crece. Medido: 63px
       en un movil normal y 70px en uno de 320px, contra los 56px que
       habia escritos a mano. Todavia no se notaba, pero el primer enlace
       del menu quedaba a 2px de esconderse debajo de la barra.
       app.js lo mide y lo corrige al cargar. Si el JavaScript no llega,
       queda este 56px, que es exactamente como funciona hoy. */
    --alto-cabecera: 56px;
}

/* ---------- 2. Base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { color: var(--azul); line-height: 1.25; text-wrap: balance; margin: 0 0 12px; }
h1 { font-size: 26px; }
h2 { font-size: 20px; margin-top: 4px; }
h3 { font-size: 17px; }
p  { margin: 0 0 14px; }

a { color: var(--azul); }
a:hover { color: var(--azul-oscuro); }

:focus-visible {
    outline: 3px solid var(--naranja);
    outline-offset: 2px;
}

.salto-contenido {
    position: absolute; left: -9999px;
    background: var(--azul); color: #fff; padding: 12px 18px; z-index: 100;
}
.salto-contenido:focus { left: 8px; top: 8px; }

/* ---------- 3. Barra superior ------------------------------------ */
.barra-superior {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--azul);
    color: #fff;
    box-shadow: 0 2px 10px rgba(18, 58, 107, .25);
}

.marca { display: flex; align-items: baseline; gap: 8px; color: #fff; text-decoration: none; }
.marca strong { font-size: 20px; letter-spacing: .04em; }
.marca span   { font-size: 13px; opacity: .85; }

.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.usuario { font-size: 13px; opacity: .85; display: none; }

.boton-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 9px;
    background: transparent; border: 0; cursor: pointer; border-radius: 8px;
}
.boton-menu span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.boton-menu:hover { background: rgba(255, 255, 255, .12); }

/* ---------- 4. Disposición y menú lateral ------------------------ */
.disposicion { display: block; }

.menu-lateral {
    position: fixed; inset: var(--alto-cabecera) auto 0 0; z-index: 25;
    width: 260px; max-width: 82vw;
    padding: 16px 12px 32px;
    background: var(--papel);
    border-right: 1px solid var(--linea);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
}
.menu-lateral.abierto { transform: translateX(0); }

.menu-titulo {
    margin: 18px 10px 6px; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-poca);
}
.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral a {
    display: block; padding: 11px 12px; border-radius: 8px;
    color: var(--tinta); text-decoration: none; font-weight: 500;
}
.menu-lateral a:hover { background: var(--azul-claro); }
.menu-lateral a.activo {
    background: var(--azul-claro); color: var(--azul); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--naranja);
}

.velo {
    position: fixed; inset: var(--alto-cabecera) 0 0; z-index: 24;
    background: rgba(20, 32, 48, .4);
}

.contenido        { padding: 20px 16px 40px; }
.contenido-suelto { max-width: 560px; margin: 0 auto; padding: 40px 20px; }

.pie {
    padding: 20px 16px; text-align: center;
    color: var(--tinta-poca); font-size: 13px;
    border-top: 1px solid var(--linea);
}
/* Los datos de la sociedad y los tres enlaces legales (16/09/2026).
   Van en el pie porque el art. 24 del Codigo de Comercio pide que el
   domicilio y el Registro consten en el sitio web, y el art. 10 de la
   LSSI que el aviso legal sea facil de encontrar desde cualquier
   pantalla. El texto es pequeno a proposito: tiene que estar, no que
   competir con el contenido. */
.pie-datos {
    margin: 0 0 6px; font-size: 12px; line-height: 1.5;
    max-width: 760px; margin-left: auto; margin-right: auto;
}
.pie-enlaces { margin: 0; font-size: 12px; }
.pie-enlaces a { color: var(--azul); text-decoration: none; }
.pie-enlaces a:hover, .pie-enlaces a:focus-visible { text-decoration: underline; }
.pie-enlaces span { margin: 0 7px; color: var(--linea); }

/* ---------- 5. Avisos -------------------------------------------- */
.aviso {
    padding: 13px 16px; border-radius: var(--radio); margin: 0 0 18px;
    border-left: 4px solid;
}
.aviso-exito { background: var(--verde-fondo); border-color: var(--verde); color: #14532d; }
.aviso-error { background: var(--rojo-fondo);  border-color: var(--rojo);  color: #7f1d1d; }
.aviso-aviso { background: var(--ambar-fondo); border-color: var(--ambar); color: #713f12; }

/* ---------- 6. Tarjetas ------------------------------------------ */
.tarjeta {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 18px; margin: 0 0 18px;
    box-shadow: var(--sombra);
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }
.rejilla-4 { grid-template-columns: repeat(2, 1fr); }

/* Cifras destacadas del panel */
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.cifra .etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-poca); }
.cifra .valor { font-size: 28px; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.cifra.destacada { border-left: 4px solid var(--naranja); }
.cifra.alerta    { border-left: 4px solid var(--rojo); }
.cifra.alerta .valor { color: var(--rojo); }

/* ---------- 7. Formularios --------------------------------------- */
.campo { margin: 0 0 16px; }
.campo label, .etiqueta-campo {
    display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px;
}
.pista { display: block; font-weight: 400; font-size: 13px; color: var(--tinta-poca); margin-top: 2px; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], input[type=search], input[type=file],
select, textarea {
    width: 100%; padding: 11px 12px;
    border: 1px solid var(--linea); border-radius: 8px;
    background: var(--papel); color: var(--tinta);
    font: inherit;
}
textarea { min-height: 110px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--azul); outline: 2px solid var(--azul-claro); outline-offset: 0;
}

.con-error { border-color: var(--rojo) !important; background: #fffafa; }
.error-campo { margin: 5px 0 0; color: var(--rojo); font-size: 13px; font-weight: 500; }

fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin: 0 0 18px; }
legend { padding: 0 6px; font-weight: 700; color: var(--azul); }

.lista-casillas {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--linea); border-radius: 8px; padding: 8px;
}
.lista-casillas label {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 9px; border-radius: 6px; font-weight: 400; margin: 0; cursor: pointer;
}
.lista-casillas label:hover { background: var(--azul-claro); }
.lista-casillas input { width: auto; margin: 0; }

/* Para las listas cortas -dos o tres opciones- que no necesitan barra de
   desplazamiento.
   Antes esto se ponia escribiendo style="max-height:none" en el propio
   HTML, y NO funcionaba: la politica de seguridad de la plataforma
   (`style-src 'self'`, en app/core/seguridad.php) bloquea los estilos
   escritos dentro del HTML. No se veia porque una lista de dos lineas
   nunca llega al tope de 320px, pero dejaba un error en la consola del
   navegador en cada visita. Ahora es una clase y si se aplica. */
.lista-casillas.sin-tope { max-height: none; overflow: visible; }

/* ---------- 8. Botones ------------------------------------------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; min-height: 44px;
    border: 1px solid transparent; border-radius: 8px;
    background: var(--azul); color: #fff;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--azul-oscuro); color: #fff; }

.boton-acento    { background: var(--naranja); }
.boton-acento:hover { background: #d86a12; }
.boton-suave     { background: var(--papel); color: var(--azul); border-color: var(--linea); }
.boton-suave:hover { background: var(--azul-claro); color: var(--azul); }
.boton-peligro   { background: var(--rojo); }
.boton-peligro:hover { background: #8f1e17; }
.boton-fantasma  { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; padding: 8px 14px; min-height: 0; }
.boton-fantasma:hover { background: rgba(255, 255, 255, .14); }
.boton-pequeno   { padding: 7px 13px; min-height: 0; font-size: 14px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Dos botones exactamente del mismo ancho, uno al lado del otro.
   No se usa flex con min-width fijo a proposito: ese ancho dependeria
   del largo del texto y de la tipografia, y se descuadraria al cambiar
   cualquiera de los dos. Con una rejilla de dos columnas iguales, los
   botones miden lo mismo diga lo que diga cada uno.
   El tope de 520px evita que se estiren de lado a lado en pantalla
   grande, que quedaria raro. */
.acciones-parejas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 520px;
    margin-top: 18px;
}
.acciones-parejas .boton { width: 100%; }

/* En movil, uno encima del otro y los dos a todo el ancho de la
   tarjeta: asi miden exactamente lo mismo y ninguno parte el texto en
   dos lineas, que es lo que pasaba al ponerlos en paralelo en una
   pantalla estrecha.
   El corte esta en 560px: por debajo de ahi estan los moviles en
   vertical. De 560 para arriba caben de sobra en paralelo. */
@media (max-width: 560px) {
    .acciones-parejas {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 10px;
    }
    .acciones-parejas .boton { padding: 14px 20px; }
}

/* Las categorias de la portada, con aspecto de boton.
   No son enlaces: solo cuentan lo que hacemos. Por eso no cambian al
   pasar el raton por encima; si lo hicieran, la gente pincharia
   esperando que pasara algo. */
.oficios { display: flex; flex-wrap: wrap; gap: 10px; }
.oficio {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; min-height: 44px;
    background: var(--azul-claro); color: var(--azul);
    border: 1px solid var(--linea); border-radius: 8px;
    font-weight: 600; line-height: 1.2;
}

/* ---------- 9. Insignias de estado ------------------------------- */
.insignia {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.insignia-verde { background: var(--verde-fondo); color: var(--verde); }
.insignia-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.insignia-rojo  { background: var(--rojo-fondo);  color: var(--rojo); }
.insignia-azul  { background: var(--azul-claro);  color: var(--azul); }

/* ---------- 10. Tablas ------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.datos { width: 100%; border-collapse: collapse; font-size: 15px; }
table.datos th, table.datos td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
table.datos th { background: var(--azul-claro); color: var(--azul); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
table.datos tbody tr:hover { background: #fafbfd; }
table.datos .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* En móvil cada fila se convierte en una ficha legible */
@media (max-width: 720px) {
    table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
    table.responsiva thead { display: none; }
    table.responsiva tr {
        background: var(--papel); border: 1px solid var(--linea);
        border-radius: var(--radio); margin-bottom: 12px; padding: 6px 4px;
    }
    table.responsiva td { border: 0; padding: 7px 12px; display: flex; gap: 12px; }
    table.responsiva td::before {
        content: attr(data-etiqueta);
        flex: 0 0 40%; font-size: 13px; font-weight: 700; color: var(--tinta-poca);
    }
    table.responsiva td.numero { text-align: left; }
}

/* Lista de definiciones para las fichas */
.ficha-datos { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ficha-datos > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.ficha-datos dt { flex: 0 0 42%; color: var(--tinta-poca); font-size: 14px; margin: 0; }
.ficha-datos dd { flex: 1; margin: 0; font-weight: 500; }

/* ---------- 11. Filtros y paginación ----------------------------- */
.filtros {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 14px; margin: 0 0 18px;
}
.filtros .campo { margin: 0; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; }
.paginacion .info { color: var(--tinta-poca); font-size: 14px; }

/* ---------- 12. Pasos del alta ----------------------------------- */
.pasos { display: flex; gap: 8px; margin: 0 0 24px; list-style: none; padding: 0; }
.pasos li {
    flex: 1; padding: 9px 6px; text-align: center; font-size: 13px; font-weight: 600;
    background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
    color: var(--tinta-poca);
}
.pasos li.actual { background: var(--azul); border-color: var(--azul); color: #fff; }
.pasos li.hecho  { background: var(--verde-fondo); border-color: var(--verde); color: var(--verde); }

/* ---------- 13. Detalles varios ---------------------------------- */
.cabecera-pagina {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px;
}
.cabecera-pagina h1 { margin: 0; }
.cabecera-pagina .acciones { margin: 0; margin-left: auto; }

.vacio {
    text-align: center; padding: 34px 20px; color: var(--tinta-poca);
    background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--radio);
}

.consulta-texto {
    background: var(--azul-claro); border-radius: 8px; padding: 14px;
    white-space: pre-wrap; word-break: break-word;
}

.destacado-precio { font-size: 24px; font-weight: 700; color: var(--naranja); font-variant-numeric: tabular-nums; }

.hilo { list-style: none; margin: 0; padding: 0; }
.hilo li { border-left: 3px solid var(--azul-claro); padding: 4px 0 14px 14px; margin-left: 4px; }
.hilo .cuando { font-size: 13px; color: var(--tinta-poca); }

.separador { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; }

.nota-legal { font-size: 13px; color: var(--tinta-poca); }


/* ---------- 13b. La campana de avisos (Fase 3) -------------------- */
/* Se abre con <details>, no con JavaScript: funciona con el teclado
   y sigue funcionando si el JavaScript falla o no llega a cargar.   */

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.campana { position: relative; }

.campana > summary {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    width: 40px; height: 40px;
    border-radius: 8px; cursor: pointer; color: #fff;
    list-style: none;
}
.campana > summary::-webkit-details-marker { display: none; }
.campana > summary:hover  { background: rgba(255, 255, 255, .14); }
.campana > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.campana-cuenta {
    position: absolute; top: 2px; right: 0;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--naranja); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    border-radius: 9px;
}

.campana-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    width: min(340px, calc(100vw - 24px));
    background: var(--papel); color: var(--tinta);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
}

.campana-titulo {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; font-weight: 600; font-size: 15px;
}

.campana-lista { list-style: none; margin: 0; padding: 0; }
.campana-lista li { border-top: 1px solid var(--linea); }
.campana-lista li:first-child { border-top: 0; }
.campana-lista a {
    display: block; padding: 10px 0; text-decoration: none; color: var(--tinta);
}
.campana-lista a:hover strong { text-decoration: underline; }
.campana-lista strong { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; }
.campana-lista .cuando { font-size: 12px; color: var(--tinta-poca); }
.campana-lista li.sin-leer a { border-left: 3px solid var(--naranja); padding-left: 10px; }

.campana-todos {
    display: block; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--linea);
    font-size: 14px; font-weight: 600; text-align: center;
}

/* En movil el panel NO puede colgar de la campana.
   El motivo: `right: 0` lo pega al borde derecho de la campana, y la
   campana no esta pegada al borde de la pantalla, porque a su derecha
   esta el boton "Salir". Un panel de casi el ancho de la pantalla
   colocado ahi se sale por la IZQUIERDA justo lo que mide ese boton y se
   come el principio de cada linea. Medido en un movil de 360px: el panel
   empezaba en -65px, o sea 65px fuera.
   La solucion NO es estrechar el panel (los asuntos quedarian ilegibles)
   sino cambiar de que cuelga: con la campana en `static`, el ancla pasa a
   ser la barra superior, que si ocupa todo el ancho. Asi el panel se pega
   a los dos bordes de la pantalla y deja de depender de cuanto mida
   "Salir", que ademas cambia de tamano segun el texto.
   El corte es 560px, el mismo que ya usa el resto de la hoja. */
@media (max-width: 560px) {
    .campana { position: static; }
    .campana-panel {
        left: 12px; right: 12px; width: auto;
        top: calc(100% + 4px);
    }
}

/* La lista completa de /avisos */
.aviso-fila {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.aviso-fila:last-child { border-bottom: 0; }
.aviso-fila.sin-leer { background: var(--naranja-suave); margin: 0 -16px; padding: 14px 16px; }
.aviso-fila .cuerpo { flex: 1; min-width: 0; }
.aviso-fila .cuerpo p { margin: 4px 0 0; font-size: 14px; color: var(--tinta-poca); }
.aviso-fila .cuando { font-size: 12px; color: var(--tinta-poca); white-space: nowrap; }

/* ---------- 14. Pantalla grande ---------------------------------- */
@media (min-width: 900px) {
    .boton-menu { display: none; }
    .usuario    { display: inline; }
    .velo       { display: none; }

    .disposicion { display: grid; grid-template-columns: 260px 1fr; align-items: start; }

    .menu-lateral {
        /* OJO CON EL ORDEN. `inset` es un atajo de top/right/bottom/left,
           asi que escribirlo DESPUES de `top` lo borra y lo deja en auto.
           Y un `position: sticky` con `top: auto` no se pega a nada: el
           menu se iba con el resto de la pagina al bajar. Estaba asi
           desde el principio, sin que se notara mas que como "el menu
           se va". Primero se limpia el inset del movil, y luego se pone
           el top: ese orden es lo que hace que funcione. */
        position: sticky; inset: auto; top: var(--alto-cabecera);
        height: calc(100vh - var(--alto-cabecera));
        transform: none; max-width: none;
    }

    .contenido { padding: 28px 32px 56px; max-width: 1180px; }

    .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
    .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
    .rejilla-4 { grid-template-columns: repeat(4, 1fr); }

    .filtros { grid-template-columns: repeat(4, 1fr); align-items: end; }

    .ficha-datos { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
    .ficha-datos dt { flex: 0 0 45%; }

    .lista-casillas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 15. Movimiento e impresión --------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .barra-superior, .menu-lateral, .pie, .acciones, .filtros { display: none !important; }
    .disposicion { display: block; }
    body { background: #fff; }
    .tarjeta { box-shadow: none; break-inside: avoid; }
}


/* ==================================================================
   16. PANTALLAS DE ACCESO
   ------------------------------------------------------------------
   La puerta de la plataforma: bienvenida, entrar, darse de alta,
   recuperar contrasena y cambiar la provisional. Van en OSCURO y a
   pantalla completa, con el logo ocupando media pantalla, mientras que
   el panel de dentro sigue siendo claro. Es a proposito y es una
   decision de marca: fuera esta la marca, dentro esta el trabajo.
   Fuera tampoco aparece la palabra "Partners", porque esta puerta es la
   misma para un partner y para administracion; "Partners" sale ya
   dentro, en la barra de arriba.

   TODO lo de esta seccion cuelga de `.acceso`, que se pone en el <body>.
   Ninguna regla de aqui puede alcanzar al panel aunque comparta nombre
   de clase (.campo, .boton, .aviso...). Eso es lo que permite cambiar el
   aspecto de los formularios del alta sin tocar ni una linea de sus
   vistas, que tienen veinte campos entre las tres.

   Los colores NO usan las variables de arriba (--azul, --papel...): son
   otra paleta entera. Mezclarlas terminaria con alguien cambiando
   --azul para el panel y rompiendo el login sin enterarse. Se declaran
   aqui y solo valen aqui.
   ================================================================== */

/* La tipografia se sirve desde nuestro propio servidor, no desde Google
   Fonts. No es una preferencia: la CSP de la plataforma dice
   `font-src 'self'` (ver app/core/seguridad.php), asi que una fuente de
   fuera quedaria BLOQUEADA y caeria a la del sistema sin dar ningun
   error visible. Es un archivo variable por subconjunto, con todos los
   pesos del 400 al 800 dentro. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fuentes/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fuentes/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.acceso {
    /* Paleta del acceso. Los nombres llevan "ac-" delante para que no se
       confundan nunca con las del panel. */
    --ac-fondo:      #161826;   /* fondo de la pantalla */
    --ac-portada:    #101320;   /* fondo de la mitad del logo */
    --ac-campo:      #1b1e30;   /* fondo de las cajas de texto */
    --ac-linea:      #2d3350;   /* bordes */
    --ac-linea-viva: #3a4162;   /* borde de casillas y campo en foco */
    --ac-texto:      #e9e9ed;
    --ac-texto-alto: #f2f3f7;   /* solo el "RSE" */
    --ac-texto-poco: #8b93ab;   /* subtitulos y pies */
    --ac-etiqueta:   #a8afc4;   /* etiquetas de los campos */
    --ac-rotulo:     #93aed6;   /* "RAPID SERVICES ENTERPRISE, S.L." */
    --ac-azul:       #2f5c9e;   /* boton principal */
    --ac-azul-mas:   #3d70bd;   /* al pasar el raton */
    --ac-azul-menos: #284e87;   /* pulsado */
    --ac-linea-azul: #5b86c9;   /* barras de acento y foco */
    --ac-enlace:     #a9c2e6;
    --ac-enlace-mas: #cadcf3;
    --ac-sobre-azul: #f2f5fb;
    --ac-hueco:      #6a7290;   /* texto de ejemplo dentro del campo */
    --ac-rojo:       #e88b8b;   /* errores: un rojo que se lee sobre oscuro */

    background: var(--ac-fondo);
    color: var(--ac-texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* AVISA AL NAVEGADOR DE QUE ESTA PANTALLA ES OSCURA.
       No es decorativo. Hay trozos que dibuja el navegador y que el CSS
       no puede pintar: el cuadrado de las casillas, el redondel de los
       botones de opcion, la lista que se despliega en un <select>, las
       barras de desplazamiento y el fondo amarillo que Chrome le pone a
       un campo autorrellenado. Sin esta linea todos salen en claro y
       cantan como una nota blanca sobre el fondo azul oscuro.
       Solo afecta al acceso: el panel de dentro es claro de verdad. */
    color-scheme: dark;
}

/* LO QUE ESTA ESCONDIDO TIENE QUE SEGUIR ESCONDIDO.
   Cuando el JavaScript esconde un bloque le pone el atributo `hidden`, y
   quien lo hace desaparecer es una regla del propio navegador:
   [hidden] { display: none }. Pero esa regla es debil, y en cuanto aqui
   abajo se dice `.acceso fieldset { display: flex }` la pisa y el bloque
   vuelve a verse.
   Paso exactamente eso: en el alta, el recuadro "Datos de la empresa"
   -que solo tiene que salir si eliges Empresa- se le quedaba puesto a un
   autonomo. Detectado en el sitio en vivo el 10/09/2026, a los cinco
   minutos de subirlo.
   El !important esta justificado: no compite con nada, solo devuelve al
   navegador un comportamiento que le habiamos quitado sin querer. */
.acceso [hidden] { display: none !important; }

/* El anillo de foco del panel es naranja de 3px. Aqui es azul de 2px,
   que es el del diseno. Sigue estando en TODOS los controles: nunca se
   quita, solo cambia de color. */
.acceso :focus-visible { outline: 2px solid var(--ac-linea-azul); outline-offset: 2px; }

.acceso a { color: var(--ac-enlace); text-decoration: none; }
.acceso a:hover { color: var(--ac-enlace-mas); }
.acceso a:not(.boton) { font-weight: 600; }

/* ---- El armazon: portada + panel ---- */
/* En movil van uno debajo del otro; a partir de 900px, uno al lado del
   otro. El `100dvh` (y no `100vh`) es por la barra del navegador del
   movil, que aparece y desaparece: con vh la pantalla daba un salto. */
.acceso-marco {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* LA BIENVENIDA EN MOVIL SE AJUSTA A LA PANTALLA, NO AL REVES.
   `min-height` deja crecer: el marco se estiraba con el contenido, asi
   que nunca faltaba sitio, la portada no llegaba a encoger NUNCA y en un
   movil bajo habia que bajar con el dedo para ver el boton. Con `height`
   el marco mide exactamente la pantalla, falta sitio de verdad, y
   entonces si entra en juego el `flex-shrink` de la portada.
   Solo en la bienvenida (es la unica con acceso-con-portada) y solo en
   movil: el alta necesita crecer y desplazarse. */
@media (max-width: 899px) {
    body.acceso-con-portada .acceso-marco { height: 100vh; height: 100dvh; }
}

.acceso-portada {
    position: relative;

    /* SIN FONDO PROPIO: EL COLOR ES UNO SOLO EN TODA LA PANTALLA.
       Antes esta mitad iba en #101320 y la del formulario en #161826, y
       aunque son dos tonos muy parecidos se veia la raya donde se
       juntaban, como una franja mas oscura detras del logo. Se quita el
       fondo y se hereda el de la pagina: un unico color de borde a
       borde. Peticion de Felix, 10/09/2026.
       La variable --ac-portada se conserva por si algun dia se quiere
       recuperar el contraste, pero hoy no la usa nadie. */
    background: transparent;

    /* 322px es la medida del diseno, PERO la portada puede encoger.
       El motivo: en un movil bajo -un iPhone SE, o cualquiera con la
       barra del navegador a la vista- 322px de logo mas el panel no
       caben en la pantalla, y para llegar al boton de entrar habia que
       bajar con el dedo. La bienvenida es una pantalla de dos botones:
       tiene que verse entera de un vistazo.
       Con `flex: 0 1 auto` la portada cede solo lo justo que falte, y
       nunca baja de 140px, que es donde el logo dejaria de reconocerse.
       El panel no encoge porque su contenido marca su minimo. */
    flex: 0 1 auto;
    height: 322px;
    min-height: 140px;

    /* En movil solo se ve en la bienvenida. En las demas pantallas el
       sitio hace falta para el formulario: un logo de 322px de alto
       dejaria el boton de entrar por debajo del teclado. */
    display: none;
}
body.acceso-con-portada .acceso-portada { display: block; }

.acceso-portada img {
    position: absolute; inset: 0; margin: auto;
    width: min(300px, 76%); height: auto;
    /* Si la portada encoge, el logo encoge con ella en vez de salirse
       por arriba y por abajo. El `object-fit` es lo que impide que se
       deforme al toparse con el tope de altura. */
    max-height: 80%;
    object-fit: contain;
}

/* AQUI HABIA UN DEGRADADO Y SE HA QUITADO.
   Servia para fundir el fondo oscuro del logo con el del panel. Ahora el
   fondo es uno solo, asi que no hay nada que fundir: el degradado ya no
   uniria dos colores, seria el UNICO responsable de que se viera una
   franja mas clara sobre un fondo liso. Justo lo contrario de lo que se
   busca. */

/* La marca pequena arriba a la izquierda de la portada. Solo en
   escritorio y solo en las pantallas que no son la bienvenida: alli la
   marca ya esta en grande dentro del panel. */
.acceso-portada-marca { display: none; }

.acceso-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- La cabecera de volver (solo movil) ---- */
.acceso-volver {
    display: flex; align-items: center; gap: 14px;
    padding: 26px 28px 0;
}
.acceso-volver a {
    display: inline-flex; align-items: center; justify-content: center;
    /* 38px es lo que pide el diseno, pero se le anade un area de toque
       de 44px con el ::after: el dedo no falla y el dibujo no cambia. */
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--ac-linea); border-radius: 10px;
    color: var(--ac-texto-poco); font-size: 17px; line-height: 1;
    position: relative;
}
.acceso-volver a::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.acceso-volver a:hover { color: var(--ac-texto); border-color: var(--ac-linea-viva); }
.acceso-volver span {
    font-size: 9.5px; font-weight: 600; letter-spacing: .15em; color: var(--ac-rotulo);
}

/* ---- El cuerpo del panel ---- */
.acceso-cuerpo {
    flex: 1;
    display: flex; flex-direction: column;
    padding: 34px 28px 32px;
    gap: 22px;
}
/* La bienvenida es la unica que va centrada en vertical en movil: marca,
   titulo y botones forman UN SOLO grupo en medio. Fue una correccion
   expresa: no repartir el contenido ni empujar los botones abajo. */
.acceso-cuerpo.centrado { justify-content: center; gap: 16px; padding: 26px 28px 30px; }

/* El alta ocupa mas de una pantalla, asi que ni se centra ni se estira:
   empieza arriba y se baja con el dedo. */
.acceso-cuerpo.largo { justify-content: flex-start; gap: 0; padding: 24px 28px 40px; }

/* ---- La marca grande ---- */
/* Es una rejilla de dos columnas -la barrita azul y el texto- y no dos
   cajas anidadas, porque asi el HTML puede ser un <h1> con dos hijos
   sueltos. Un <div> dentro de un <h1> no es HTML valido, y este bloque
   ES el titulo de la bienvenida: si fuera un parrafo, esa pantalla se
   quedaria sin encabezado y quien navegue con lector de pantalla no
   encontraria por donde empieza. */
.acceso-marca {
    display: grid; grid-template-columns: 3px 1fr;
    align-items: center; column-gap: 14px;
}
.acceso-marca::before {
    content: ""; grid-row: 1 / span 2; align-self: stretch;
    background: var(--ac-linea-azul); border-radius: 2px;
}
.acceso-marca strong {
    grid-column: 2;
    font-size: 40px; font-weight: 800; letter-spacing: -.02em;
    line-height: .85; color: var(--ac-texto-alto);
}
.acceso-marca span {
    grid-column: 2; margin-top: 7px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .15em;
    line-height: 1.2; color: var(--ac-rotulo);
}

/* Los dos botones de la bienvenida, uno debajo del otro y del mismo
   ancho: son las dos unicas cosas que se pueden hacer ahi y ninguna
   manda sobre la otra. */
.acceso-acciones { display: flex; flex-direction: column; gap: 10px; }

/* La fila que va justo debajo de los campos al iniciar sesion. */
.acceso-fila {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font-size: 13.5px; color: var(--ac-etiqueta);
}
.acceso-fila.a-la-derecha { justify-content: flex-end; }

/* La rayita que se desvanece por los dos lados. */
.acceso-regla {
    height: 1px; border: 0; margin: 0;
    background: linear-gradient(to right,
        rgba(45, 51, 80, 0), var(--ac-linea) 20%, var(--ac-linea) 80%, rgba(45, 51, 80, 0));
}

/* La barrita azul que abre cada pantalla que no es la bienvenida.
   El :not() es imprescindible: en la bienvenida el <h1> ES la marca, y
   la marca ya tiene su propia barra vertical puesta en su ::before. Sin
   el :not(), esta regla ganaria por especificidad y la sustituiria por
   una rayita horizontal encima. */
.acceso-cuerpo h1 { margin: 0; }
.acceso-cuerpo h1:not(.acceso-marca)::before {
    content: ""; display: block;
    width: 32px; height: 3px; margin-bottom: 10px;
    background: var(--ac-linea-azul);
}
.acceso-titulo, .acceso-cuerpo h1 {
    font-size: 26px; font-weight: 600; letter-spacing: -.015em;
    color: var(--ac-texto); line-height: 1.25;
}
.acceso-subtitulo { margin: 0; font-size: 15px; color: var(--ac-texto-poco); line-height: 1.55; }

/* Titulo y subtitulo van juntos, mas cerca entre ellos que del resto. */
.acceso-encabezado { display: flex; flex-direction: column; gap: 8px; }

/* El bloque "Bienvenido / Accede a tu cuenta" no lleva barrita: la marca
   grande esta justo encima y serian dos acentos pegados. */
.acceso-bienvenida { display: flex; flex-direction: column; gap: 6px; }
.acceso-bienvenida .acceso-titulo { font-size: 23px; letter-spacing: -.01em; }

/* ---- Formularios ---- */
.acceso .campo { margin: 0; }
.acceso .campo label,
.acceso .etiqueta-campo { font-size: 13px; font-weight: 600; color: var(--ac-etiqueta); margin-bottom: 8px; }

.acceso input[type=text], .acceso input[type=email], .acceso input[type=password],
.acceso input[type=tel], .acceso input[type=date], .acceso input[type=number],
.acceso input[type=search], .acceso input[type=file], .acceso select, .acceso textarea {
    height: 52px; padding: 0 16px;
    background: var(--ac-campo); color: var(--ac-texto);
    border: 1px solid var(--ac-linea); border-radius: 6px;
    font-size: 16px;   /* menos de 16 y el iPhone hace zoom solo al escribir */
}
.acceso textarea { height: auto; min-height: 110px; padding: 14px 16px; }
.acceso input[type=file] { padding: 12px 14px; height: auto; }
.acceso select {
    /* La flechita del sistema sale negra sobre negro en algunos
       navegadores; se dibuja una a mano. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ac-etiqueta) 50%),
                      linear-gradient(135deg, var(--ac-etiqueta) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.acceso ::placeholder { color: var(--ac-hueco); opacity: 1; }

.acceso input:focus, .acceso select:focus, .acceso textarea:focus {
    border-color: var(--ac-linea-viva); outline: none;
}
.acceso input:focus-visible, .acceso select:focus-visible, .acceso textarea:focus-visible {
    outline: 2px solid var(--ac-linea-azul); outline-offset: 2px;
}

.acceso .pista { font-size: 13px; color: var(--ac-texto-poco); margin-top: 6px; }
.acceso .error-campo { color: var(--ac-rojo); font-size: 13px; margin-top: 6px; }
.acceso .con-error { border-color: var(--ac-rojo) !important; background: var(--ac-campo); }

.acceso input[type=checkbox], .acceso input[type=radio] {
    width: 19px; height: 19px; flex: none; margin: 0;
    accent-color: var(--ac-linea-azul);
}

.acceso fieldset {
    border: 1px solid var(--ac-linea); border-radius: 10px;
    padding: 18px 18px 20px; margin: 0 0 18px;
    display: flex; flex-direction: column; gap: 16px;
}
.acceso legend {
    padding: 0 8px; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ac-rotulo);
}

.acceso .lista-casillas {
    border: 1px solid var(--ac-linea); border-radius: 8px;
    background: var(--ac-campo); padding: 8px; gap: 2px;
}
.acceso .lista-casillas label {
    font-size: 15px; font-weight: 400; color: var(--ac-texto);
    margin: 0; padding: 9px 10px; border-radius: 6px; gap: 10px;
    min-height: 44px;   /* que se pueda marcar con el dedo */
}
.acceso .lista-casillas label:hover { background: rgba(91, 134, 201, .14); }

/* Casilla a la izquierda y texto al lado, sin negrita: la de aceptar el
   contrato y las de "como trabajas". */
.acceso .casilla-linea {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--ac-etiqueta);
    font-weight: 400; margin: 0;
    /* El cuadradito mide 19px, pero se marca pulsando en cualquier sitio
       de la etiqueta, asi que el objetivo de toque es la fila entera.
       Con dos lineas de texto se quedaba en 41px; el minimo la sube a
       44, que es lo recomendado para el dedo. */
    min-height: 44px;
}
.acceso .casilla-linea input { margin-top: 1px; }

/* ---- Botones ---- */
.acceso .boton {
    min-height: 56px; padding: 0 22px;
    border: none; border-radius: 6px;
    background: var(--ac-azul); color: var(--ac-sobre-azul);
    font-size: 17px; font-weight: 700;
}
.acceso .boton:hover  { background: var(--ac-azul-mas); color: var(--ac-sobre-azul); }
.acceso .boton:active { background: var(--ac-azul-menos); }
.acceso .boton-acento { background: var(--ac-azul); }
.acceso .boton-acento:hover { background: var(--ac-azul-mas); }

.acceso .boton-suave {
    background: transparent; color: var(--ac-enlace);
    border: 1.5px solid var(--ac-linea-azul);
}
.acceso .boton-suave:hover { background: rgba(91, 134, 201, .14); color: var(--ac-enlace); }
.acceso .boton-suave:active { background: rgba(91, 134, 201, .22); }
.acceso .boton[disabled] { opacity: .45; }

/* Un boton solo, a todo el ancho: asi van todos los principales. */
.acceso .boton-ancho { width: 100%; }
.acceso .acciones { gap: 10px; margin-top: 0; }
/* Dos botones caben al lado si hay sitio, y si no se ponen uno debajo
   del otro y a todo el ancho.
   El `min-width` es lo que decide cuando se parten, y por eso son 180px
   y no 140: con 140 cabian dos en un movil de 390px, pero entonces el
   texto era el que se partia en dos lineas. Se veia en "Pedir otro
   enlace" / "Volver a entrar", que quedaban en cuatro renglones. Mas
   vale un boton por linea que un boton con el nombre partido. */
.acceso .acciones .boton { flex: 1; min-width: 180px; }
.acceso .acciones-parejas { max-width: none; margin-top: 0; gap: 10px; grid-template-columns: 1fr; }

/* ---- El pie de cada pantalla ("Ya tienes cuenta? Iniciar sesion") ---- */
.acceso-pie {
    margin: 0; text-align: center;
    font-size: 14px; font-weight: 400; color: var(--ac-texto-poco);
}

/* LOS ENLACES DE TEXTO SE PUEDEN PULSAR CON EL DEDO.
   Un enlace suelto dentro de un parrafo mide lo que mide su linea: aqui
   eran 22px el de "Olvidaste tu contrasena" y 17px el de "Crear cuenta",
   cuando lo recomendado son 44px. En un movil eso es fallar el toque una
   de cada tres veces, y justo en la pantalla de entrar.
   No se arregla con padding, que separaria las lineas y cambiaria el
   diseno: se le pone encima una capa invisible de 44px de alto, centrada
   sobre el texto. Se ve exactamente igual y el dedo acierta.
   La capa mide solo lo ancho que el propio enlace, asi que no se traga
   los clics del texto que tiene al lado. */
.acceso-pie a, .acceso-fila a { position: relative; }
.acceso-pie a::after, .acceso-fila a::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
}
/* En movil se pega abajo del todo; en escritorio se queda junto al
   contenido, que va centrado. */
.acceso-cuerpo > .acceso-pie:last-child { margin-top: auto; padding-top: 20px; }
.acceso-cuerpo.centrado > .acceso-pie:last-child { margin-top: 0; padding-top: 6px; }

/* ---- La caja de aviso con la barrita azul ---- */
.acceso-nota {
    display: flex; gap: 12px;
    padding: 16px; border: 1px solid var(--ac-linea); border-radius: 6px;
    background: var(--ac-campo);
    font-size: 13.5px; line-height: 1.55; color: var(--ac-etiqueta);
}
.acceso-nota::before {
    content: ""; flex: none; width: 3px; align-self: stretch;
    background: var(--ac-linea-azul); border-radius: 2px;
}
.acceso-nota p { margin: 0; }
.acceso-nota p + p { margin-top: 8px; }

/* ---- Los avisos de siempre (exito, error, aviso), en oscuro ---- */
.acceso .aviso {
    border-radius: 6px; padding: 14px 16px; margin: 0;
    font-size: 14px; line-height: 1.55;
    background: var(--ac-campo); border: 1px solid var(--ac-linea); color: var(--ac-etiqueta);
    border-left-width: 3px;
}
.acceso .aviso-exito { border-left-color: #4f9d76; }
.acceso .aviso-error { border-left-color: var(--ac-rojo); color: #f0c3c3; }
.acceso .aviso-aviso { border-left-color: #c9a25f; }

/* ---- La tarjeta no existe aqui ---- */
/* Las vistas del alta y las de contrasena vienen envueltas en .tarjeta,
   que en el panel es un rectangulo blanco con sombra. En el acceso el
   contenido va suelto sobre el fondo, asi que se le quita el envoltorio
   entero en vez de ir tocando las vistas una por una. */
.acceso .tarjeta {
    background: transparent; border: 0; box-shadow: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 22px;
}
.acceso .tarjeta > h1 { margin: 0; }
.acceso .tarjeta > h2 {
    margin: 0; font-size: 17px; font-weight: 600; color: var(--ac-texto);
}
.acceso .tarjeta > p { margin: 0; color: var(--ac-texto-poco); font-size: 15px; line-height: 1.55; }
.acceso .tarjeta > ol, .acceso .tarjeta > ul {
    margin: 0; padding-left: 20px; color: var(--ac-etiqueta);
    font-size: 14.5px; line-height: 1.6;
}
.acceso .tarjeta > ol li + li, .acceso .tarjeta > ul li + li { margin-top: 8px; }
.acceso .nota-legal { font-size: 13px; color: var(--ac-texto-poco); }
.acceso .separador { border: 0; height: 1px; margin: 4px 0; background: var(--ac-linea); }
.acceso form { display: flex; flex-direction: column; gap: 18px; margin: 0; }

/* ---- La barra de pasos del alta ---- */
.acceso .pasos { gap: 8px; margin: 0 0 24px; }
.acceso .pasos li {
    background: var(--ac-campo); border: 1px solid var(--ac-linea);
    color: var(--ac-texto-poco); border-radius: 6px;
    font-size: 12.5px; padding: 10px 6px;
}
.acceso .pasos li.actual {
    background: var(--ac-azul); border-color: var(--ac-azul); color: var(--ac-sobre-azul);
}
.acceso .pasos li.hecho {
    background: transparent; border-color: var(--ac-linea-azul); color: var(--ac-enlace);
}

/* ==================================================================
   16b. EL ACCESO EN PANTALLA GRANDE
   ------------------------------------------------------------------
   A partir de 900px deja de ser una columna y pasa a dos: el logo a la
   izquierda, ocupando 780px, y el formulario a la derecha. El corte es
   el mismo 900px que ya usa el resto de la hoja para el menu lateral.
   ================================================================== */
@media (min-width: 900px) {
    /* LOGO Y FORMULARIO SON UN SOLO GRUPO, CENTRADO EN LA PANTALLA.
       Antes eran dos mitades: la portada se llevaba el 55% y el
       formulario el resto, cada uno centrado en SU mitad. Eso dejaba una
       franja oscura enorme entre los dos y, en un monitor grande, el
       formulario flotando solo por la derecha.
       Ahora las dos columnas miden lo que necesitan -nada mas- y el
       conjunto se centra con `justify-content: center`. En cualquier
       pantalla, de 900px a 2560, el grupo se ve igual de recogido y en
       medio. Peticion de Felix, 10/09/2026: "un poquito mas compacto y
       centrado". */
    .acceso-marco {
        flex-direction: row;
        justify-content: center;
        gap: clamp(16px, 4vw, 72px);
        padding-inline: 24px;
    }

    /* La portada se ve SIEMPRE en escritorio, tambien en las pantallas
       donde el movil la esconde. */
    .acceso-portada,
    body.acceso-con-portada .acceso-portada {
        display: block;

        /* Mide lo que mide el logo y un respiro, no media pantalla.
           Puede encoger (`0 1`) para que en un portatil de 900px el
           grupo entero siga cabiendo sin desbordarse. */
        flex: 0 1 480px;
        width: 480px;
        min-width: 200px;

        /* Se queda quieta mientras el alta se desplaza al lado. */
        position: sticky; top: 0; align-self: flex-start;
        height: 100vh; height: 100dvh;

        /* En rejilla, con el logo y el nombre uno debajo del otro y el
           grupo centrado. Antes el nombre iba suelto arriba a la
           izquierda con `position: absolute`, que tenia sentido cuando
           esta mitad ocupaba 780px y hacia de portada. Ahora que es una
           columna estrecha, ahi quedaba flotando sin alinearse con nada.
           Debajo del logo se lee como lo que es: la marca. */
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 22px;
    }
    /* EL TAMANO DEL LOGO.
       Ha ido 520 -> 440 -> 340 -> 440. Al hacer todo lo demas mas
       pequeno lo encogi tambien, y ahi me pase: a Felix le gustaba
       grande (10/09/2026). Vuelve a 440, que es la medida que ya habia
       visto y le parecia bien.
       El `max-width: 100%` no sobra aunque lo parezca: en un portatil de
       900px la columna encoge por debajo de 440 y sin ese tope el logo
       se saldria por los lados. Y tiene que ser 100 y no 92: con 92 el
       logo se quedaba en 405px, o sea que el tope mandaba siempre y los
       440 no llegaban a verse nunca. */
    /* El logo deja de ir en posicion absoluta: ahora es una fila mas de
       la rejilla, encima del nombre. */
    .acceso-portada img {
        position: static; margin: 0;
        width: 440px; max-width: 100%; max-height: none;
    }
    /* Aqui iba el degradado lateral de la portada. Fuera, por lo mismo
       que el de arriba: el fondo es uno solo y no hay dos colores que
       fundir. */

    .acceso-portada-marca {
        display: block; position: static;
        text-align: center; pointer-events: none;
    }
    /* El nombre crece con el logo: debajo de un dibujo de 440px, un
       "RSE" de 26 se quedaba pequeno y el conjunto no parecia una marca,
       parecia un logo con un pie de foto. */
    .acceso-portada-marca strong {
        display: block; font-size: 32px; font-weight: 800;
        letter-spacing: -.02em; line-height: .85; color: var(--ac-texto-alto);
    }
    .acceso-portada-marca span {
        display: block; margin-top: 8px;
        font-size: 10.5px; font-weight: 600; letter-spacing: .15em; color: #9db6dd;
    }

    /* En escritorio la marca chica de la portada sobra en la bienvenida,
       que ya lleva la grande en el panel. Y la cabecera de volver sobra
       en todas: para volver esta el pie de cada pantalla. */
    body.acceso-con-portada .acceso-portada-marca { display: none; }
    .acceso-volver { display: none; }

    /* EL FORMULARIO NO SE ESTIRA: MIDE LO QUE TIENE QUE MEDIR Y VA
       CENTRADO.
       Antes ocupaba TODO el ancho de la columna derecha -unos 520px de
       contenido a 1440px- y con eso los botones salian de medio palmo y
       los campos parecian de escaparate. Un formulario de acceso se lee
       mejor estrecho: la vista no tiene que recorrer la linea entera
       para ir de la etiqueta al campo.
       Se le pone un ancho maximo y `margin-inline: auto`, que reparte el
       hueco sobrante a los dos lados. El alta se deja algo mas ancha
       porque tiene veinte campos y muchas etiquetas largas.
       Peticion de Felix, 10/09/2026: "mas compacto y centrado". */
    /* La columna del formulario mide lo que mide el formulario, y es
       eso lo que hace que el grupo se pueda centrar de verdad. Si el
       panel siguiera siendo `flex: 1` se comeria todo el hueco sobrante
       y no habria nada que centrar. */
    .acceso-panel { flex: 0 1 auto; min-width: 0; justify-content: center; }
    .acceso-cuerpo {
        justify-content: center;
        width: 412px;
        max-width: 100%;
        padding: 40px 36px;
        gap: 20px;
    }
    .acceso-cuerpo.centrado { justify-content: center; gap: 20px; padding: 40px 36px; }
    .acceso-cuerpo.largo    {
        justify-content: flex-start;
        width: 540px;
        padding: 40px 36px 56px;
    }

    .acceso-marca strong { font-size: 34px; letter-spacing: -.025em; }
    .acceso-marca span { margin-top: 7px; font-size: 10px; letter-spacing: .16em; }
    .acceso-acciones { gap: 10px; }

    /* LOS CONTROLES, UN PUNTO MAS PEQUENOS QUE EN EL MOVIL.
       En un movil se pulsan con el dedo y por eso miden 52 y 56px. En un
       ordenador se pulsan con el raton, que acierta en un pixel, y esas
       medidas se ven desproporcionadas. Se bajan a 44 y 46px, que siguen
       siendo comodos y dejan de gritar.
       Los 16px de letra del campo tampoco hacen falta aqui: eran para
       que el iPhone no hiciera zoom solo al escribir, y eso en un
       ordenador no pasa. */
    .acceso input[type=text], .acceso input[type=email], .acceso input[type=password],
    .acceso input[type=tel], .acceso input[type=date], .acceso input[type=number],
    .acceso input[type=search], .acceso select {
        height: 42px; font-size: 14.5px; padding: 0 13px;
    }
    .acceso select { padding-right: 36px; }
    .acceso .boton { min-height: 44px; font-size: 14.5px; }
    .acceso .campo label, .acceso .etiqueta-campo { font-size: 12.5px; margin-bottom: 6px; }
    .acceso .pista { font-size: 12.5px; margin-top: 5px; }
    .acceso form { gap: 16px; }
    .acceso fieldset { padding: 16px 16px 18px; gap: 14px; margin: 0 0 16px; }
    .acceso legend { font-size: 12px; }
    .acceso .acciones .boton { min-width: 150px; }
    .acceso-pie { font-size: 13.5px; }
    .acceso-nota { font-size: 13px; padding: 14px; }
    .acceso .aviso { font-size: 13.5px; padding: 12px 14px; }
    .acceso-regla {
        background: linear-gradient(to right,
            rgba(45, 51, 80, 0), var(--ac-linea) 12%, var(--ac-linea) 88%, rgba(45, 51, 80, 0));
    }

    .acceso-titulo, .acceso-cuerpo h1 { font-size: 24px; letter-spacing: -.02em; }
    /* Mismo :not() que arriba y por el mismo motivo: sin el, este
       `width: 36px` le caeria encima a la barra VERTICAL de la marca y
       la convertiria en un rectangulo de 36px de ancho. */
    .acceso-cuerpo h1:not(.acceso-marca)::before { width: 36px; margin-bottom: 12px; }
    .acceso-bienvenida .acceso-titulo { font-size: 24px; letter-spacing: -.02em; }
    .acceso-subtitulo { font-size: 14.5px; }

    .acceso-cuerpo > .acceso-pie:last-child { margin-top: 0; padding-top: 6px; }
    .acceso-nota { border-radius: 10px; }

    /* El diseno dibujaba los campos del alta de dos en dos, pero esa
       maqueta tenia CUATRO campos y el alta de verdad tiene veinte
       repartidos en tres pasos, con direccion fiscal, provincia, zonas y
       documentos. Puestos de dos en dos, un desplegable de provincia
       acabaria al lado de una direccion larga y cada fila mediria una
       cosa. Se quedan en una columna, que es como esta escrito el
       formulario. Si algun dia se quiere en dos, se decide por fieldset
       y no de golpe. */
    .acceso .lista-casillas { grid-template-columns: repeat(2, 1fr); }
    .acceso .acciones-parejas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Aqui habia un tope de 1440px para las pantallas muy anchas. Ya no hace
   falta: el grupo de logo y formulario mide lo mismo en todas y va
   centrado, asi que en un monitor de 2560 se ve igual de recogido que en
   un portatil. Ademas aquel tope era justo lo que dibujaba las dos
   franjas de los lados que a Felix no le gustaban. */

/* ---- Tablets y moviles grandes ----------------------------------- */
/* Entre 600 y 900px seguimos con la disposicion de movil -una columna,
   sin logo al lado- pero a lo ancho ya sobra sitio: en una tablet de
   768px los campos se estiraban hasta 712px, que es una barbaridad para
   escribir un correo. Se recogen y se centran, igual que en escritorio.
   Por debajo de 600px se dejan a todo el ancho, que es lo correcto en un
   movil. */
@media (min-width: 600px) and (max-width: 899px) {
    .acceso-cuerpo,
    .acceso-cuerpo.centrado,
    .acceso-cuerpo.largo {
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
    }
    .acceso-volver { max-width: 480px; margin-inline: auto; width: 100%; }
}

/* ---- Moviles bajos ----------------------------------------------- */
/* Aqui se aprieta el aire de la bienvenida para que quepa entera sin
   tener que bajar con el dedo. Lo pidio Felix el 10/09/2026: "que no
   haya que hacer scroll, y se vea todo en la pantalla".
   Solo toca la bienvenida (.centrado) y solo en movil: el ancho maximo
   de 899px deja fuera al escritorio, que tiene su propia regla abajo. */
@media (max-width: 899px) and (max-height: 720px) {
    .acceso-cuerpo.centrado { gap: 12px; padding: 20px 28px 22px; }
    .acceso-cuerpo.centrado .acceso-marca strong { font-size: 34px; }
    .acceso-cuerpo.centrado .acceso-bienvenida .acceso-titulo { font-size: 21px; }
    .acceso-cuerpo.centrado .boton { min-height: 50px; }
    .acceso-cuerpo.centrado .acceso-acciones { gap: 8px; }
}

/* Y en uno muy bajo, un punto mas. */
@media (max-width: 899px) and (max-height: 600px) {
    .acceso-cuerpo.centrado { gap: 10px; padding: 16px 24px 18px; }
    .acceso-cuerpo.centrado .acceso-marca strong { font-size: 30px; }
    .acceso-cuerpo.centrado .boton { min-height: 46px; font-size: 16px; }
}

/* Una pantalla muy baja (un portatil pequeno, o un movil apaisado) no
   puede centrar nada: hay que poder llegar al boton bajando. */
@media (min-width: 900px) and (max-height: 620px) {
    .acceso-cuerpo, .acceso-cuerpo.centrado { justify-content: flex-start; }
    .acceso-portada { position: static; height: auto; }
}

/* ---------- 17. Retoques sueltos del panel ------------------------
   Estas clases no existen por gusto: sustituyen a los style="..."
   que estaban escritos dentro del HTML de las vistas.

   La politica de seguridad manda style-src 'self' (ver
   app/core/seguridad.php), asi que el navegador BLOQUEA cualquier
   style="..." puesto en el HTML y no lo aplica nunca. El fallo es
   invisible: la pagina se pinta igual y el estilo sencillamente no
   esta, dejando ademas un error en la consola por cada uno.

   Regla para el futuro: si hace falta un ajuste puntual en una
   vista de app/vistas/, se crea aqui una clase y se usa. Las vistas
   de app/vistas/correo/ son la unica excepcion: los correos no
   pasan por la politica y ahi el estilo en linea es lo correcto.
   ---------------------------------------------------------------- */

/* Grupos de botones que van pegados a lo de arriba, sin su hueco. */
.acciones.sin-margen  { margin: 0; }
.acciones.pegada      { margin-top: 8px; }
.acciones.solo-abajo  { margin: 0 0 18px; }

/* Un dato suelto en grande dentro de un aviso: ABIERTA, MODO REAL... */
.rotulo-grande { font-size: 18px; }

/* Parrafo que va justo debajo de un titulo y no necesita separacion. */
.sin-hueco-arriba { margin-top: 0; }

/* Titulo de seccion con aire por arriba, cuando no abre la pagina. */
.titulo-suelto { margin: 26px 0 14px; }

/* Rejilla de cifras seguida de mas contenido. */
.rejilla.con-hueco-abajo { margin-bottom: 18px; }

/* Fichas de una sola columna aunque haya sitio para dos: se usa
   cuando los valores son largos (direcciones, notas, motivos) y
   partirlos en dos columnas los deja ilegibles. Lleva dos clases a
   proposito, para ganarle a la regla de dos columnas de pantalla
   ancha sin depender del orden. */
.ficha-datos.una-columna { grid-template-columns: 1fr; }

/* Botones o campos en fila dentro de una celda de tabla. */
.fila-controles          { display: flex; gap: 8px; }
.fila-controles.junta    { gap: 6px; }
.fila-controles.envuelve { align-items: center; flex-wrap: wrap; }

/* Cada documento de un partner, separado del siguiente por una linea. */
.bloque-listado { border-bottom: 1px solid var(--linea); padding: 14px 0; }

/* Formulario que aparece debajo de otra cosa y necesita respirar. */
.form-separado { margin-top: 10px; }

/* El ejemplo de peticion a la API, para copiar y pegar. */
.bloque-codigo {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 14px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- 18. RSE INVOICE · la grafica de facturacion ------------
   La grafica de app/vistas/invoice/_grafica.php es un SVG escrito por
   PHP. Las ALTURAS y POSICIONES van en atributos de geometria del SVG
   (x, y, width, height), que no son CSS y por tanto la politica de
   seguridad no los bloquea. Los COLORES y los tamanos de letra van
   aqui, en clases, por el mismo motivo que toda la seccion 17: un
   style="..." dentro del HTML no se aplica nunca.

   Se dibuja en el servidor y no con JavaScript porque `script-src
   'self'` no deja cargar ninguna libreria de graficas de fuera.
   ---------------------------------------------------------------- */

.grafica { margin: 0 0 18px; }

/* El lienzo se estira al ancho del hueco y la altura la pone el
   viewBox. Asi funciona igual en un movil de 360px que en un monitor,
   sin una sola media query. */
.grafica-lienzo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Las lineas de referencia horizontales: presentes, pero calladas. */
.grafica-rejilla   { stroke: var(--linea); stroke-width: 1; }
.grafica-eje-linea { stroke: var(--tinta-poca); stroke-width: 1; }

/* Los numeros del eje de la izquierda. */
.grafica-eje {
    fill: var(--tinta-poca);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Las dos partes de cada barra: abajo lo que se queda RSE, arriba el
   impuesto que hay que ingresar. Azul corporativo y naranja de acento,
   los mismos de toda la plataforma. */
.grafica-base     { fill: var(--azul); }
.grafica-impuesto { fill: var(--naranja); }

/* El total encima de la barra, y el mes debajo. */
.grafica-valor {
    fill: var(--azul-oscuro);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.grafica-mes    { fill: var(--tinta); font-size: 11px; }
.grafica-cuenta { fill: var(--tinta-poca); font-size: 10px; }

/* La leyenda, debajo del dibujo. */
.grafica-leyenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--tinta-poca);
    margin-top: 4px;
}
.grafica-marca {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
}
.grafica-marca-base     { background: var(--azul); }
.grafica-marca-impuesto { background: var(--naranja); }

/* La aclaracion del final de la leyenda, que se va sola a la derecha
   cuando cabe y baja de linea cuando no. */
.grafica-nota { margin-left: auto; font-size: 12px; }

/* El descuadre apuntado en una factura. Va en rojo y en linea aparte
   debajo de la insignia, porque casi siempre esta vacio y cuando no lo
   esta hay que verlo sin tener que buscarlo. */
.nota-factura {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rojo);
}

/* Aclaracion al pie de una tabla: por que los datos dicen lo que dicen. */
.nota-pie {
    font-size: 13px;
    color: var(--tinta-poca);
    line-height: 1.5;
    margin: 10px 0 0;
}

/* ---------- 19. RSE AFILIADOS · el cuarto panel --------------------
   Las clases del area de afiliados. Van todas con el prefijo `afil-`
   por lo mismo que las tablas llevan `afil_`: para que se vea de un
   vistazo que son del programa nuevo y no se mezclen con las de los
   tres paneles que ya funcionan.

   Ni un color ni una medida inventados: todo sale de las variables de
   la seccion 1, que son las que dan a la plataforma su aspecto. Y ni
   un style="..." en las vistas, que la politica de seguridad bloquea
   sin avisar (ver la seccion 17 y app/core/seguridad.php).
   ---------------------------------------------------------------- */

/* La tira de arriba con el estado del alta. Es flex y envuelve, para
   que en un movil estrecho la insignia y el numero bajen de linea en
   vez de salirse. */
.afil-estado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 14px;
    margin: 0 0 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.afil-estado-titulo {
    font-weight: 700;
    color: var(--azul-oscuro);
}

/* El numero de afiliado se va solo a la derecha cuando cabe, y baja de
   linea cuando no. Tabular para que no baile al cambiar de cifra. */
.afil-estado-numero {
    margin-left: auto;
    font-size: 13px;
    color: var(--tinta-poca);
    font-variant-numeric: tabular-nums;
}

/* Los titulos de cada bloque de la pantalla. Menos que un h1 y con aire
   por encima, para que se vea donde empieza cada cosa. */
.afil-subtitulo {
    margin: 26px 0 10px;
    font-size: 17px;
    color: var(--azul-oscuro);
}

/* El recuadro de «esto todavia esta en obras». En azul claro y no en
   ambar a proposito: no es un aviso de que algo va mal, es una
   explicacion de por que la pantalla esta casi vacia. */
.afil-obra {
    padding: 14px 16px;
    background: var(--azul-claro);
    border-radius: var(--radio);
    color: var(--tinta);
    line-height: 1.55;
}

.afil-obra p { margin: 0 0 10px; }

/* El ultimo hijo no siempre es un parrafo: cuando las condiciones ya
   estan publicadas, la vista no pinta la nota final y el ultimo es la
   lista. Con `p:last-child` ese caso se quedaba con 10px de mas por
   debajo y el recuadro salia descuadrado. Se apunta al ultimo hijo, sea
   lo que sea. */
.afil-obra > :last-child { margin-bottom: 0; }

.afil-pendiente {
    margin: 0 0 10px;
    padding-left: 20px;
}

.afil-pendiente li { margin-bottom: 4px; }

.afil-pendiente-nota {
    font-size: 13px;
    color: var(--tinta-poca);
}


/* ------------------------------------------------------------------
   19b. RSE AFILIADOS · lo que anade la FASE 1
   ------------------------------------------------------------------
   El alta, el enlace, el QR, el contrato archivado y las cuentas del
   pago. Mismas normas que arriba: ni un color inventado y ni un
   style="..." en las vistas.
   ---------------------------------------------------------------- */

/* UN AVISO NEUTRO. Los tres de siempre (exito, error, aviso) son verde,
   rojo y ambar, y los tres significan algo: bien, mal, cuidado. Hacia
   falta uno que no significara nada de eso y solo dijera un dato -que
   version de las condiciones se esta leyendo-, porque en ambar parecia
   una advertencia. Va en el azul de la casa. */
.aviso-dato {
    background: var(--azul-claro);
    border-color: var(--azul);
    color: var(--azul-oscuro);
}

/* EL ENLACE DEL AFILIADO, EN UN CAMPO DE SOLO LECTURA.
   No es un adorno: es lo que permite copiarlo sin JavaScript. En el
   movil se mantiene pulsado y sale «copiar»; en el ordenador, un clic
   dentro y Ctrl+C. Va en letra de maquina de escribir para que no se
   confundan el 0 y la O ni el 1 y la l, aunque el alfabeto de los
   codigos ya los tiene quitados a proposito. */
.afil-enlace-campo {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    font-size: 15px;
    background: var(--fondo);
}

/* EL MARCO DEL QR. El dibujo ya trae su propio fondo blanco dentro del
   SVG, asi que aqui solo se centra y se le da sitio. El marco es claro
   incluso si algun dia el panel se oscurece: un QR necesita contraste
   entre el dibujo y el papel, y el papel es blanco. */
.afil-qr-marco {
    display: flex;
    justify-content: center;
    padding: 14px;
    margin: 0 0 4px;
    background: #ffffff;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

/* El <svg> ya sale de Qr::svg() con esta clase puesta. Se le deja
   encoger en pantallas estrechas: sin esto, en un movil de 320px un QR
   de 260px mas los margenes de la tarjeta se salen por la derecha. */
.afil-qr {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
}

/* EL CONTRATO ARCHIVADO. Se pinta tal cual lo escribio el abogado, con
   los saltos de linea convertidos y nada mas. Medida de linea comoda,
   fondo distinto del de la tarjeta para que se vea donde empieza y
   donde acaba el documento, y una barra azul a la izquierda.
   NO lleva `max-height`: tiene que poder imprimirse entero para
   guardarlo en PDF, que es lo que exige la LSSI, y una caja con barra
   de desplazamiento se imprime cortada. */
.afil-contrato {
    padding: 16px 18px;
    margin: 14px 0 0;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* LAS CUENTAS DE UN PAGO. Es una `ficha-datos` normal; lo unico propio
   es la ultima fila, la del neto, que es la cifra que de verdad le
   importa a quien mira. Se le quita la linea de debajo y se le pone
   una raya gruesa encima, como en una suma de toda la vida. */
.afil-cuentas { margin: 0 0 4px; }

/* Se escribe `.ficha-datos > .afil-cuentas-total` y NO un
   `.afil-cuentas-total` a secas con !important: la regla que hay que
   pisar es `.ficha-datos > div`, que vale dos puntos de especificidad.
   Con el mismo peso y estando mas abajo en el archivo, esta gana sin
   necesidad de ningun !important. */
.ficha-datos > .afil-cuentas-total {
    border-bottom: 0;
    border-top: 2px solid var(--azul);
    padding-top: 12px;
}
.afil-cuentas-total dt { color: var(--tinta); font-weight: 700; }
.afil-cuentas-total dd {
    font-size: 19px;
    font-weight: 700;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}


/* ---------- 19b. La fase 2: los partners traidos -------------------
   Las tres cifras de arriba de /afiliados/partners y la tira de
   botones de cada fila en la ficha de administracion. Siguen siendo
   clases de la seccion 19 y con el mismo prefijo; van al final para
   no mover nada de lo que ya estaba.
   ---------------------------------------------------------------- */

/* LAS TRES CIFRAS. Es una rejilla que se reparte sola: con sitio salen
   las tres en fila, y en un movil estrecho pasan a dos y luego a una,
   sin ningun punto de corte escrito a mano. `minmax(140px, 1fr)` es
   todo lo que hace falta. */
.afil-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.afil-cifra {
    padding: 14px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    text-align: center;
}

/* Tabular para que un 9 y un 11 ocupen lo mismo y las tarjetas no
   bailen al cambiar los numeros. */
.afil-cifra-numero {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.afil-cifra-texto {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--tinta-poca);
}

/* LOS BOTONES DE CADA ATRIBUCION. Dos formularios distintos dentro de
   la misma celda de la tabla: sin esto se pegan uno al otro y el campo
   del motivo sale tan ancho como la columna entera. */
.afil-linea-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
}

.afil-linea-acciones:last-child { margin-bottom: 0; }

.afil-linea-acciones input[type="text"] {
    flex: 1 1 140px;
    min-width: 0;
    margin: 0;
}


/* ---------- 19c. La fase 3: el dinero ------------------------------
   La cifra grande de «lo que llevas este mes», las cuatro lineas de la
   liquidacion, el aviso del siguiente tramo, el libro de movimientos y
   la tabla de la escala en administracion.

   SIGUEN SIENDO CLASES DE LA SECCION 19 y con el mismo prefijo `afil-`.
   Van al final del bloque para no mover ni una regla de lo que ya
   estaba funcionando.

   TODOS LOS NUMEROS VAN EN CIFRA TABULAR (`tabular-nums`). No es un
   adorno: en una columna de importes, con la fuente normal, el 1 ocupa
   menos que el 8 y las comas de los decimales no quedan alineadas, asi
   que una columna de dinero se lee mal y se comparan mal dos cifras.
   ---------------------------------------------------------------- */

/* --- LA CIFRA GRANDE DEL MES EN CURSO ----------------------------- */
.afil-mes-vivo {
    padding: 18px;
    margin: 0 0 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.afil-mes-vivo-rotulo {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-poca);
    margin: 0 0 4px;
}

.afil-mes-vivo-cifra {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

.afil-mes-vivo-pie {
    display: block;
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--tinta-poca);
}

/* --- «TE FALTAN 400 EUR PARA EL 4 %» ------------------------------
   Un aviso, no una barra de progreso: una barra invitaria a calcular
   cuanto falta mirandola, y lo que hace falta es el numero exacto. */
.afil-siguiente-tramo {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--verde-fondo);
    border: 1px solid var(--verde);
    border-radius: var(--radio);
    font-size: 14px;
    line-height: 1.55;
    color: #14532d;
}

.afil-siguiente-tramo strong { font-variant-numeric: tabular-nums; }

/* --- EL LIBRO DE MOVIMIENTOS -------------------------------------- */

/* La columna del importe, siempre a la derecha y con cifra tabular. */
.afil-importe {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Entra dinero (comision, diferencia a favor, pago devuelto). */
.afil-importe-mas   { color: #14532d; font-weight: 700; }
/* Sale dinero (coste del pago, retencion, retirada, pago hecho). */
.afil-importe-menos { color: #7f1d1d; font-weight: 700; }

/* La fila del saldo, debajo del libro: raya gruesa encima, como la
   suma de una libreta de toda la vida. */
.afil-saldo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 2px solid var(--azul);
}

.afil-saldo-texto { font-weight: 700; }

.afil-saldo-cifra {
    font-size: 22px;
    font-weight: 700;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* --- LA ESCALA EN ADMINISTRACION ---------------------------------- */

/* Cada version de la escala, una debajo de otra. */
.afil-escala {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}

.afil-escala-vigente {
    border-color: var(--azul);
    background: var(--papel);
}

.afil-escala-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
}

.afil-escala-titulo { font-weight: 700; }

.afil-escala-fecha {
    font-size: 13px;
    color: var(--tinta-poca);
}

/* Los tramos de una version, uno por linea y sin tabla: son tres datos
   cortos y una tabla aqui pesa mas de lo que aclara. */
.afil-escala-tramos {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.afil-escala-tramos li {
    padding: 3px 0;
    border-bottom: 1px dashed var(--linea);
}

.afil-escala-tramos li:last-child { border-bottom: 0; }

/* --- EL FORMULARIO DE LA ESCALA NUEVA ------------------------------
   Una rejilla de tres columnas (desde, hasta, porcentaje) que en un
   movil se convierte en una sola, sin punto de corte escrito a mano. */
.afil-tramo-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
    align-items: end;
}

.afil-tramo-fila label {
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--tinta-poca);
}

.afil-tramo-fila input { margin: 2px 0 0; }

/* La tira de botones del simulador y el guardado. */
.afil-escala-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

/* --- EL RESULTADO DEL SIMULADOR ----------------------------------- */
.afil-simulacion {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--azul);
    border-radius: var(--radio);
    background: var(--azul-claro);
}

.afil-simulacion h3 { margin-top: 0; }

/* La diferencia total: verde si sube lo que se paga, rojo si baja.
   Los dos colores son deliberados y NO estan al reves: aqui se mira
   desde el lado del afiliado, que es quien cobra. */
.afil-diferencia-sube { color: #14532d; font-weight: 700; font-variant-numeric: tabular-nums; }
.afil-diferencia-baja { color: #7f1d1d; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 19d. La fase 4: el pago --------------------------------
   La pantalla de la tarjeta, la lista de pagos del afiliado y las dos
   de administracion.

   SIGUEN SIENDO CLASES DE LA SECCION 19 y con el mismo prefijo
   `afil-`. Van al final del bloque para no mover ni una regla de lo
   que ya estaba funcionando, igual que hizo la 19c.

   TODOS LOS NUMEROS EN CIFRA TABULAR, por lo mismo que en la 19c: en
   una columna de importes el 1 ocupa menos que el 8 y las comas dejan
   de estar alineadas.

   LAS INSIGNIAS USAN LOS CUATRO COLORES DE LA CASA Y NI UNO MAS
   -verde, ambar, rojo y azul-, que son los que tiene la seccion 9.
   Inventarse un quinto nombre no da error: da una insignia sin ningun
   estilo, y eso no se ve hasta que esta en produccion.
   ---------------------------------------------------------------- */

/* --- LA TARJETA YA REGISTRADA ------------------------------------- */

/* Es la unica caja de esta pantalla con el filete verde: es la que
   dice «ya esta, no tienes que hacer nada mas». */
.afil-tarjeta-lista {
    padding: 18px;
    margin: 0 0 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--verde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.afil-tarjeta-numero {
    margin: 10px 0 6px;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

/* --- EL PASO QUE FALTA -------------------------------------------- */
.afil-tarjeta-paso {
    padding: 18px;
    margin: 0 0 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--naranja);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.afil-tarjeta-paso h2 { margin: 10px 0 8px; }

/* --- LOS TRES PASOS ----------------------------------------------- */
.afil-pasos-tarjeta {
    margin: 0 0 18px;
    padding-left: 22px;
}

.afil-pasos-tarjeta li {
    margin-bottom: 12px;
    line-height: 1.55;
}

/* EL NOMBRE, EXACTO Y EN GRANDE.
   Es el dato que hace fallar estos enlaces mas que ningun otro: el
   banco exige que el nombre coincida letra por letra con el del
   documento. Va en fuente de anchura fija para que se vean los
   espacios y las mayusculas tal y como hay que escribirlas. */
.afil-nombre-exacto {
    margin: 8px 0;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--tinta);
    background: var(--papel);
    border: 1px dashed var(--naranja);
    border-radius: 6px;
    /* Un nombre largo no puede desbordar la caja en un movil. */
    overflow-wrap: anywhere;
}

/* --- EL BOTON QUE LLEVA AL BANCO ---------------------------------- */

/* Centrado y separado del resto: es el final del camino y no tiene que
   competir con nada que este al lado. */
.afil-tarjeta-accion {
    margin: 0 0 22px;
    padding: 18px;
    text-align: center;
    background: var(--azul-claro);
    border-radius: var(--radio);
}

.afil-tarjeta-accion .nota-legal {
    display: block;
    margin-top: 12px;
}

.afil-tarjeta-pie { margin: -8px 0 18px; }

/* --- LA LISTA DE PAGOS DEL AFILIADO -------------------------------- */
.afil-pagos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.afil-pago {
    padding: 14px 0;
    border-bottom: 1px solid var(--linea);
}

.afil-pago:last-child { border-bottom: 0; padding-bottom: 0; }

/* El mes a la izquierda, la cifra y la insignia a la derecha. En un
   movil se apila solo, sin ninguna consulta de medios: lo hace el
   `flex-wrap`. */
.afil-pago-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.afil-pago-mes {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--tinta);
}

.afil-pago-cifra {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--azul);
}

/* QUE HA PASADO CON ESE PAGO, EN CRISTIANO. Una insignia que ponga
   «revisar» y nada mas deja al afiliado sin saber si ha perdido su
   dinero; esta linea es la que le dice que no. */
.afil-pago-que-pasa {
    margin: 8px 0 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--tinta-poca);
}

/* --- EL DESGLOSE PLEGABLE ------------------------------------------ */

/* Es un <details>, no un menu de JavaScript: se abre y se cierra
   aunque el JavaScript falle y el teclado lo maneja solo. Es lo mismo
   que ya hace la campana de avisos. */
.afil-pago-detalle { margin-top: 10px; }

.afil-pago-detalle > summary {
    cursor: pointer;
    padding: 4px 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--azul);
    list-style: none;
}

.afil-pago-detalle > summary::-webkit-details-marker { display: none; }

/* La flechita, dibujada con texto: sin imagen que cargar y sin
   `style=` dentro del HTML. */
.afil-pago-detalle > summary::before {
    content: "\25B8\00a0";   /* triangulito a la derecha */
    display: inline-block;
    transition: transform .15s ease;
}

.afil-pago-detalle[open] > summary::before {
    transform: rotate(90deg);
}

.afil-pago-detalle > summary:hover,
.afil-pago-detalle > summary:focus-visible {
    text-decoration: underline;
}

.afil-pago-detalle .afil-cuentas { margin-top: 10px; }

/* Con el movimiento reducido activado, la flechita salta en vez de
   girar. Es la misma regla que ya usa el resto de la hoja. */
@media (prefers-reduced-motion: reduce) {
    .afil-pago-detalle > summary::before { transition: none; }
}

/* ---------- 19e. La fase 5: los cambios de tipo ---------------------
   Las pantallas de quien es partner Y afiliado, y de quien deja de ser
   una de las dos cosas.

   SIGUEN SIENDO CLASES DE LA SECCION 19 y con el mismo prefijo
   `afil-`, porque viven en el mismo panel y usan la misma paleta.

   LO QUE MAS IMPORTA DE TODA LA SECCION es `.afil-fecha-grande`. En la
   pantalla de dejar de ser partner, el numero que hay que entender es
   uno solo: el dia en que deja de recibir avisos de clientes. Si esa
   fecha se lee como una linea mas del parrafo, alguien va a creer que
   deja de recibirlos hoy, va a dejar de atender los que le lleguen, y
   quien se queda tirado es un cliente de verdad.
   ------------------------------------------------------------------ */

/* La frase que va debajo del titulo, antes de las tarjetas. */
.afil-entradilla {
    margin: -8px 0 18px;
    max-width: 70ch;
    color: var(--tinta-poca);
    line-height: 1.6;
}

/* Una tarjeta que hay que leer antes de pulsar nada. El borde de la
   izquierda es lo unico que la separa de una tarjeta normal: ni fondo
   de color chillon ni icono, porque no es una alarma, es un aviso. */
.afil-aviso-fuerte {
    border-left: 4px solid var(--naranja);
}

.afil-aviso-fuerte h2 { margin-top: 0; }

/* La fecha del cambio. Tabular para que no baile, y grande para que se
   lea antes que el boton que hay debajo. */
.afil-fecha-grande {
    margin: 4px 0 14px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* Las listas de «lo que cambia» y «lo que no». Son listas de verdad y
   no parrafos con guiones: un lector de pantalla las cuenta y dice
   cuantas cosas hay. */
.afil-lista {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
}

.afil-lista li + li { margin-top: 6px; }

/* La frase de los dos lados, en la portada del Partner-afiliado:
   «En agosto pagaste X en avisos y cobraste Y de comisiones». */
.afil-dos-lados {
    margin: 14px 0 6px;
    padding: 12px 14px;
    background: var(--azul-claro);
    border-radius: 8px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

/* El historial plegable de las bajas pedidas. Mismo <details> que el
   desglose de los pagos, con la misma flechita de texto: sin imagen
   que cargar y sin `style=` dentro del HTML. */
.afil-detalle { margin-top: 18px; }

.afil-detalle > summary {
    cursor: pointer;
    padding: 4px 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--azul);
    list-style: none;
}

.afil-detalle > summary::-webkit-details-marker { display: none; }

.afil-detalle > summary::before {
    content: "\25B8\00a0";   /* triangulito a la derecha */
    display: inline-block;
    transition: transform .15s ease;
}

.afil-detalle[open] > summary::before { transform: rotate(90deg); }

.afil-detalle > summary:hover,
.afil-detalle > summary:focus-visible { text-decoration: underline; }

.afil-detalle .tabla-envoltorio { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    .afil-detalle > summary::before { transition: none; }
}


/* ---------- 19f. La fase 6: lo fiscal -------------------------------
   SIGUEN SIENDO CLASES DE LA SECCION 19 y con el mismo prefijo
   `afil-`, salvo las de administracion, que llevan `admin-` porque
   solo existen en una pantalla que el afiliado no ve nunca.

   TRES COSAS QUE PINTAR Y NADA MAS:

     1. La PROPUESTA DE FACTURA del panel del afiliado: una lista de
        parejas «esto se llama asi, y vale esto». Es una <dl> y no una
        tabla a proposito: no son filas comparables entre si, son datos
        sueltos que hay que copiar uno a uno en otro programa. Una
        tabla invita a leerla en diagonal, que es justo lo que no puede
        hacer quien esta copiando un NIF.

     2. Las FACTURAS RECIBIDAS de administracion: una ficha por
        factura, con quien, cuanto y los dos botones.

     3. Los dos TRAMITES anuales (el 7 % y la confirmacion de enero),
        con un borde de color a la izquierda para que se distingan de
        las tarjetas normales: son las unicas dos pantallas de todo el
        panel que le PIDEN algo al afiliado.

   Lo del documento imprimible -las dos partes enfrentadas y las filas
   de suma y total- NO esta aqui: va en la seccion 24, con el resto de
   la hoja de documento, porque tiene que imprimirse igual.
   ---------------------------------------------------------------- */

/* --- 1. La propuesta de factura --------------------------------- */

.afil-propuesta { margin: 0 0 4px; }

.afil-propuesta > div {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    padding: 10px 0; border-bottom: 1px solid var(--linea);
}

.afil-propuesta > div:last-child { border-bottom: 0; }

.afil-propuesta dt {
    flex: 0 0 190px;
    font-size: 13px; font-weight: 700; color: var(--tinta-poca);
    text-transform: uppercase; letter-spacing: .04em;
}

.afil-propuesta dd {
    flex: 1 1 260px; margin: 0;
    font-size: 15px; line-height: 1.5; color: var(--tinta);
}

/* Las menciones fiscales son texto que hay que COPIAR LITERAL, y por
   eso van en un recuadro aparte y con el mismo aspecto en las dos
   pantallas donde salen. Sin el recuadro se leen como un comentario
   nuestro, y lo que son es el texto exacto de su factura. */
.afil-menciones {
    margin: 10px 0 0; padding: 12px 14px 12px 30px;
    list-style: disc;
    background: var(--azul-claro); border-radius: var(--radio);
    font-size: 14px; line-height: 1.55; color: var(--tinta);
}

.afil-menciones li + li { margin-top: 8px; }

.afil-propuestas-viejas,
.afil-certificados { margin: 0; padding-left: 20px; }

.afil-propuestas-viejas li,
.afil-certificados li { margin-bottom: 8px; }

/* --- 2. Los dos tramites anuales -------------------------------- */

.afil-tramite { border-left: 4px solid var(--azul); }

.afil-tramite-pregunta {
    margin: 14px 0; font-size: 17px; line-height: 1.5; color: var(--tinta);
}

/* --- 3. Las facturas recibidas (administracion) ------------------ */

.admin-facturas { list-style: none; margin: 0; padding: 0; }

.admin-factura { padding: 14px 0; border-bottom: 1px solid var(--linea); }

.admin-factura:last-child { border-bottom: 0; }

.admin-factura-cabeza {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-bottom: 6px;
}

.admin-factura-quien { display: flex; flex-direction: column; gap: 2px; }

.admin-factura-mes {
    font-variant-numeric: tabular-nums;
    font-size: 14px; color: var(--tinta-poca);
}

.admin-factura-cifras {
    margin: 4px 0; font-size: 14px; line-height: 1.55; color: var(--tinta-poca);
}

/* El motivo del rechazo se pinta en rojo suave: es lo unico de la
   ficha que el afiliado ha recibido por correo, palabra por palabra, y
   conviene poder releerlo de un vistazo antes de escribir otro. */
.admin-factura-motivo {
    margin: 6px 0; padding: 8px 12px;
    background: var(--rojo-fondo); border-radius: var(--radio);
    font-size: 14px; line-height: 1.5; color: var(--rojo);
}

.admin-factura-acciones { margin-top: 10px; }

@media (max-width: 640px) {
    .afil-propuesta dt { flex-basis: 100%; }
}


/* ==================================================================
   20. RSE AFILIADOS EN LA PUERTA
   ------------------------------------------------------------------
   El bloque «¿No eres profesional?» de la bienvenida, y solo ese.

   VA APARTE DE LA SECCION 19 Y NO ES CAPRICHO. La 19 esta pintada con
   la paleta del panel -papel blanco, tinta oscura, --azul-claro-, y la
   puerta es oscura y usa otra paleta entera, la de las variables
   `--ac-*` de la seccion 16. Una clase de la 19 puesta en la portada
   daria un recuadro blanco en mitad del azul oscuro, sin que nada
   fallara ni avisara.

   TODO CUELGA DE `.acceso`, igual que la seccion 16, para que ninguna
   de estas reglas pueda alcanzar al panel de dentro.

   El bloque solo se pinta cuando el interruptor `afil_altas_abiertas`
   esta puesto. Mientras este cerrado, la bienvenida es exactamente la
   de siempre y estas reglas no las usa nadie.
   ================================================================== */

.acceso .acceso-afiliados {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--ac-linea);
    border-radius: 6px;
    background: var(--ac-campo);
}

.acceso .acceso-afiliados-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ac-texto);
}

.acceso .acceso-afiliados-texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ac-texto-poco);
}

/* EL ENLACE ES UN BLOQUE Y NO UN ENLACE SUELTO DENTRO DEL PARRAFO.
   Mismo motivo que en `.acceso-pie a`: un enlace de texto mide lo que
   mide su linea, unos 20px, y en un movil eso es fallar el toque una de
   cada tres veces. Aqui se resuelve con relleno propio -llega a los
   44px de alto recomendados- en vez de con la capa invisible, porque
   este va solo en su linea y no tiene texto al lado que tapar. */
.acceso .acceso-afiliados-enlace {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-enlace);
}
.acceso .acceso-afiliados-enlace:hover { color: var(--ac-enlace-mas); }

/* ==================================================================
   21. LA PAGINA PUBLICA DE PARTNERS  (/partners/como-funciona)
   ------------------------------------------------------------------
   Todo lo que necesita la pagina que explica la plataforma a quien
   todavia no es partner. Prefijo `pp-` para que se vea de un vistazo
   que es de ahi y no se mezcle con las clases del panel.

   La animacion de las flechas es DECORATIVA: si no se mueven, la
   pagina se entiende igual, porque el orden lo dicen los numeros. Por
   eso no hace falta guarda propia aqui -la seccion 15 ya apaga todas
   las animaciones a quien las tenga desactivadas en su movil-.
   ============================================================== */

/* --- El esquema de cuatro pasos ---------------------------------- */
.pp-flujo {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 26px;
    grid-template-columns: 1fr;
}
/* UNA SOLA COLUMNA, SIEMPRE, Y LAS CAJAS APAISADAS.
   Aqui no valen cuatro columnas aunque la pantalla sea enorme: el
   contenedor de estas paginas (`.contenido-suelto`) mide 560 px y no
   crece, porque una linea de texto mas larga se lee peor. Metidas a la
   fuerza, las cuatro cajas salian de 95 px y «El cliente nos llama»
   se partia en cuatro lineas. Asi cada paso es una fila: el icono a la
   izquierda y el texto al lado. */
.pp-paso {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    align-items: start;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
}
.pp-paso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--azul-claro);
    color: var(--azul);
}
.pp-paso-icono svg { width: 24px; height: 24px; }

/* El numero grande y palido detras, para que se lea el orden sin
   tener que contar. No estorba al texto porque va en la esquina. */
.pp-paso-numero {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--azul-claro);
}
.pp-paso-titulo {
    margin: 2px 0 4px;
    padding-right: 34px;      /* deja sitio al numero de la esquina */
    font-size: 16px;
    color: var(--azul);
}
.pp-paso-texto {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
}

/* La flecha que une un paso con el siguiente. Va en el hueco del
   `gap`, asi que no empuja el contenido ni se le monta encima. En
   movil apunta hacia abajo, que es como se leen las cajas. */
.pp-paso + .pp-paso::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -19px;
    margin-left: -6px;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--naranja);
    border-bottom: 2px solid var(--naranja);
    transform: translateY(-3px) rotate(45deg);
    animation: pp-baja 2.4s ease-in-out infinite;
}
.pp-flujo .pp-paso:nth-child(3)::before { animation-delay: .25s; }
.pp-flujo .pp-paso:nth-child(4)::before { animation-delay: .5s; }

@keyframes pp-baja {
    0%, 55%, 100% { opacity: .3; transform: translateY(-3px) rotate(45deg); }
    28%           { opacity: 1;  transform: translateY(3px)  rotate(45deg); }
}

/* --- La lista de lo que hace falta tener a mano ------------------- */
.pp-requisitos {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.pp-requisitos li {
    position: relative;
    padding: 0 0 12px 30px;
    line-height: 1.55;
}
/* La marca de verificado, dibujada con dos bordes: ni imagen ni
   tipografia de iconos, asi que no hay nada que cargar. */
.pp-requisitos li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--verde);
    border-bottom: 2px solid var(--verde);
    transform: rotate(-45deg);
}

/* --- Las listas de «lo que marca tu precio» y los descuentos ----- */
/*  Viñeta normal, pero con aire entre lineas: son frases de dos
    renglones y pegadas se leen como un parrafo. */
.pp-factores {
    margin: 0 0 22px;
    padding-left: 22px;
}
.pp-factores li {
    padding: 0 0 10px;
    line-height: 1.55;
}

/* --- Los tres pasos del alta, con su captura --------------------- */
.pp-alta {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.pp-alta > li {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 18px;
    margin: 0 0 18px;
    box-shadow: var(--sombra);
}
.pp-alta > li > h3 { margin-top: 0; color: var(--azul); }

.pp-captura { margin: 14px 0 0; }
/* El ancho y el alto van tambien en el HTML: sin ellos el navegador no
   sabe cuanto sitio reservar y el texto da un salto cuando la imagen
   termina de cargar, justo mientras se esta leyendo. */
/* Las capturas estan hechas a ancho de movil (430 px) porque es con lo
   que se va a dar de alta un fontanero. Se enseñan a tamaño real y
   centradas: estiradas a 700 px saldrian borrosas, y encogidas no se
   leerian. En una pantalla estrecha el max-width no estorba, porque
   manda el 100%. */
.pp-captura img {
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
}
.pp-captura figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--tinta-poca);
}

/* --- Lo que pasa despues del alta -------------------------------- */
.pp-despues {
    margin: 0 0 26px;
    padding-left: 22px;
}
.pp-despues li {
    padding: 0 0 10px;
    line-height: 1.55;
}

/* ==================================================================
   22. EL CONTRATO QUE SE FIRMA EN LA PLATAFORMA
   ------------------------------------------------------------------
   Tres pantallas: el candado con lo que falta, el formulario que se
   rellena y el recuadro donde se firma con el dedo.

   Quien usa esto es un fontanero o un electricista con el movil en la
   mano, muchas veces a pie de obra. De ahi que todo sea grande: los
   botones no bajan de 48px de alto, que es lo que mide un dedo, y el
   recuadro de firma ocupa el ancho entero.
   ================================================================== */

/* --- El candado: todavia no puede firmar -------------------------- */
.contrato-candado,
.contrato-hecho {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0 0 20px;
}
.contrato-candado-icono {
    flex: 0 0 auto;
    color: var(--tinta-poca);
}
.contrato-hecho-icono {
    flex: 0 0 auto;
    color: var(--verde);
}
.contrato-candado h2,
.contrato-hecho h2 {
    margin: 0 0 6px;
}
.contrato-candado p,
.contrato-hecho p {
    margin: 0;
    line-height: 1.55;
}

/* --- La lista de lo que falta ------------------------------------ */
.req-lista {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
.req-lista li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--linea);
}
.req-lista li:last-child {
    border-bottom: 0;
}

/* La marca: un circulo con un palito. Verde si esta hecho, hueco si no. */
.req-marca {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    position: relative;
}
.req-si .req-marca {
    background: var(--verde);
}
.req-si .req-marca::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.req-no .req-marca {
    border: 2px solid var(--linea);
    background: var(--papel);
}

.req-texto {
    flex: 1 1 auto;
}
.req-texto strong {
    display: block;
    margin-bottom: 2px;
}
.req-texto p {
    margin: 4px 0 10px;
    color: var(--tinta-poca);
    line-height: 1.5;
}
.req-estado {
    font-size: 14px;
    color: var(--verde);
    font-weight: 600;
}

/* --- Los pasos y los botones de accion --------------------------- */
.contrato-pasos {
    margin: 0 0 22px;
    padding-left: 22px;
}
.contrato-pasos li {
    padding: 0 0 12px;
    line-height: 1.55;
}
.contrato-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

/* --- El boton gordo de enviar ------------------------------------ */
.boton-grande {
    display: inline-block;
    min-height: 52px;
    padding: 15px 26px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}
.boton-enviar {
    width: 100%;
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    margin-bottom: 12px;
}
.boton-enviar:hover,
.boton-enviar:focus {
    background: #19643e;
    border-color: #19643e;
    color: #fff;
}
.contrato-envio .boton-suave {
    width: 100%;
    min-height: 48px;
    text-align: center;
}

/* --- El recuadro de firma ---------------------------------------- */
.firma-caja {
    position: relative;
    margin: 0 0 12px;
    border: 2px dashed var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    overflow: hidden;
}
.firma-lienzo {
    display: block;
    width: 100%;
    height: auto;
    /* Sin esto, arrastrar el dedo para firmar mueve la pagina entera
       en vez de dibujar. Es la linea que hace que se pueda firmar en
       un movil. */
    touch-action: none;
    cursor: crosshair;
    background: var(--papel);
}
.firma-pie {
    margin: 0;
    padding: 6px 12px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--tinta-poca);
}
.firma-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
/* El «subir foto» es una etiqueta que envuelve un input escondido,
   para que parezca un boton mas y no el feo de siempre. */
.firma-subir {
    cursor: pointer;
    margin: 0;
}
.firma-sitios {
    margin: 8px 0 12px;
    padding-left: 20px;
    columns: 2;
    font-size: 14px;
    line-height: 1.7;
}

/* --- Campos que van en fila (dia, mes, ano) ---------------------- */
.fila-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.fila-campos .campo {
    flex: 1 1 90px;
    min-width: 90px;
}

/* --- Elegir entre autonomo y empresa ----------------------------- */
.opcion-radio {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    cursor: pointer;
    line-height: 1.45;
}
.opcion-radio:hover {
    border-color: var(--azul);
    background: var(--azul-claro);
}
.opcion-radio input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* --- El enlace que se comparte ----------------------------------- */
.enlace-copiable {
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    /* Un enlace largo no puede ensanchar la pagina en un movil. */
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* --- En pantallas estrechas -------------------------------------- */
@media (max-width: 560px) {
    .firma-sitios {
        columns: 1;
    }
    .contrato-acciones .boton {
        width: 100%;
        text-align: center;
    }
}

/* ==================================================================
   23. LA FIRMA DE LA EMPRESA
   ------------------------------------------------------------------
   La tarjeta de «Catalogo y ajustes -> Contrato» donde se guarda la
   firma de RSE. Reutiliza el lienzo de la seccion 22 -es el mismo
   firma.js- y solo anade como se ensena la firma que ya hay puesta.

   La imagen va sobre un cuadro de cuadritos claros, no sobre blanco,
   porque una firma es casi toda blanco: sin ese fondo no se sabria si
   la imagen esta ahi y es grande o si no ha cargado.
   ================================================================== */

.firma-guardada {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    /* Los cuadritos se dibujan con el propio fondo: ni una imagen que
       cargar ni un `style=` dentro del HTML, que la CSP bloquearia. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
        linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.firma-guardada-imagen {
    display: block;
    max-width: 100%;
    /* Se limita el alto para que una firma escaneada a 1200 puntos por
       pulgada no ocupe media pantalla. */
    max-height: 160px;
    width: auto;
    height: auto;
}


/* ==================================================================
   24. EL DOCUMENTO LEGAL
   ------------------------------------------------------------------
   Las condiciones de RSE Afiliados, en las tres pantallas donde se
   leen: la pagina publica, la caja de administracion y la copia que
   el afiliado tiene archivada en su panel.

   POR QUE NO SE PARECE AL RESTO DEL PANEL, Y ES A PROPOSITO. Todo lo
   demas de esta hoja esta pensado para trabajar: letra de pantalla,
   botones grandes, tarjetas. Esto es un contrato, y un contrato se
   lee de otra manera. Por eso va con letra de libro, en columna
   estrecha, justificado y con el texto por delante del envoltorio.

   DE DONDE SALE EL ASPECTO. Del contrato de colaboracion que firman
   los partners, que lo escribio un abogado: el filete azul de arriba,
   el membrete con el nombre de la empresa en versalitas a la
   izquierda y el rotulo del documento en cursiva a la derecha, el
   numero de la clausula en naranja delante de su titulo en azul
   marino, los apartados numerados colgando en el margen y el pie con
   el NIF. No es una copia: aquel es un PDF de siete paginas con
   recuadros de firma, y este se lee en un movil.

   LOS APARTADOS SE NUMERAN COMPUESTOS -7.1, 7.2, 9.4- y eso lo hace
   documento.php, no el CSS. Aqui solo se les reserva el margen.

   EL OCRE NO ES EL NARANJA DE LA MARCA, Y ES A PROPOSITO. El naranja
   #f07d20 sobre papel blanco da 2,74 de contraste, y el minimo para
   texto pequeno son 4,5. En un panel eso es discutible; en un
   contrato no: el numero de la clausula es informacion, no adorno, y
   tiene que poder leerlo cualquiera. Se usa `--ambar` (#9a5b06), que
   ya estaba en la paleta de la casa y da 5,37. De paso se parece mas
   al ocre del contrato de partners que el naranja vivo.

   NI UN ESTILO DENTRO DEL HTML. La politica de seguridad los bloquea
   sin avisar, asi que hasta los cuadros de color viven aqui.
   ================================================================== */

/* ---------- 24a. La hoja ------------------------------------------ */

/* EL CONTENEDOR DE LAS PAGINAS PUBLICAS MIDE 560px Y AQUI SE QUEDA
   CORTO. Esos 560 estan pensados para un formulario de acceso, y con
   ellos el documento se quedaba en 520: unos 60 caracteres por linea,
   el indice a dos columnas apretado y el texto justificado abriendo
   zanjas. Un contrato de 25.000 letras necesita mas aire.

   Se ensancha SOLO cuando dentro hay un documento, con `:has()`. Asi
   no se toca la regla original -que la usan el acceso, el registro y
   la pagina del programa- y un navegador que no entienda `:has()` se
   queda con los 560 de siempre, que siguen funcionando. */
.contenido-suelto:has(.doc) {
    max-width: 860px;
}

/* Ancho medido, no elegido: 780px con letra de 16px dan unos 78
   caracteres por linea, que es la medida comoda de lectura larga. Mas
   ancho cansa la vista, y un contrato son 25.000 letras. */
.doc {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 40px 26px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-top: 3px solid var(--azul);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    color: var(--tinta);
    font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
    font-size: 16px;
    line-height: 1.62;
}

/* LA MISMA HOJA, PERO DENTRO DE UNA TARJETA. En la caja de leer de
   administracion y en el panel del afiliado el documento ya va metido
   en un recuadro, y dos recuadros con sombra uno dentro de otro
   quedan como una caja de bombones. Se le quita el envoltorio y se le
   deja el filete azul, que es lo que dice "esto es el documento". */
.doc-archivado {
    /* NO se pone `none`: en el panel de administracion la tarjeta mide
       1.180px, y un contrato a ese ancho es ilegible. 820 deja la
       misma medida de linea que en la pagina publica. */
    max-width: 820px;
    margin: 14px 0 0;
    padding: 24px 26px 20px;
    background: var(--fondo);
    box-shadow: none;
    font-size: 15px;
}

/* La nota de "para guardarte una copia". Va FUERA de la hoja y no se
   imprime: es una instruccion de la plataforma, no parte del
   contrato, y no tiene por que salir en el PDF de nadie. */
.doc-ayuda {
    max-width: 780px;
    margin: 0 auto 16px;
    padding: 11px 15px;
    background: var(--azul-claro);
    border-radius: var(--radio);
    font-size: 13px;
    line-height: 1.55;
    color: var(--azul-oscuro);
}

/* ---------- 24b. El membrete y la portada ------------------------- */

.doc-membrete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0 0 30px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--linea);
}

.doc-membrete-empresa {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--azul);
}

.doc-membrete-rotulo {
    font-size: 13px;
    font-style: italic;
    color: var(--tinta-poca);
}

/* La raya doble de debajo del titulo es de la familia de las que
   cierran el encabezamiento de un contrato. Se hace con "double", que
   es una sola propiedad y no dos elementos vacios. */
.doc-portada {
    margin: 0 0 30px;
    padding-bottom: 20px;
    border-bottom: 3px double #c6d3e6;
    text-align: center;
}

.doc-sobretitulo {
    margin: 0 0 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ambar);
}

.doc-titulo {
    margin: 0 0 11px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--azul-oscuro);
    text-wrap: balance;
}

.doc-subtitulo {
    max-width: 32em;
    margin: 0 auto;
    font-size: 15px;
    font-style: italic;
    color: var(--tinta-poca);
}

/* Los datos de la version. REJILLA DE DOS COLUMNAS Y NO UNA FILA QUE
   SE PARTE SOLA. Con `flex-wrap` las cuatro parejas caian 3+1 en una
   pantalla ancha y 2+2 en una estrecha: el mismo bloque se veia
   ordenado o descuidado segun el ancho de la ventana. Con dos
   columnas siempre son 2+2, y ademas quedan alineadas por la
   izquierda de cada columna, como la ficha de datos de un documento.
   En un movil pasan a una sola columna (24j). */
.doc-datos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 10px 32px;
    margin: 18px 0 0;
    padding: 0;
}

.doc-datos > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.doc-datos dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-poca);
}

.doc-datos dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* ---------- 24c. El indice --------------------------------------- */

/* Sale del propio texto, asi que no puede quedarse desfasado. En
   pantalla grande va a dos columnas; en un movil, a una. */
.doc-indice {
    margin: 0 0 32px;
    padding: 17px 20px 13px;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.doc-indice h2 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ambar);
}

.doc-indice ol {
    columns: 2;
    column-gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.45;
}

.doc-indice li {
    break-inside: avoid;
    margin: 0 0 7px;
}

.doc-indice a {
    display: flex;
    gap: 9px;
    color: var(--tinta);
    text-decoration: none;
}

.doc-indice a:hover,
.doc-indice a:focus-visible {
    color: var(--azul);
    text-decoration: underline;
}

.doc-indice-numero {
    min-width: 1.7em;
    font-weight: 700;
    color: var(--ambar);
    font-variant-numeric: tabular-nums;
}

/* ---------- 24d. Las clausulas ----------------------------------- */

/* "scroll-margin-top" es lo que hace que al saltar desde el indice el
   titulo no quede escondido debajo de la barra de arriba. Sin el, se
   pulsa una clausula y aparece su segundo parrafo. */
/* Los selectores son de CLASE y no de etiqueta a proposito: el mismo
   documento se pinta con h1/h2 en la pagina publica y con h3/h4 cuando
   va metido en una tarjeta, y tiene que verse igual en los dos sitios. */
.doc-clausula {
    margin: 34px 0 14px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--linea);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--azul-oscuro);
    scroll-margin-top: 84px;
}

.doc-clausula-numero {
    color: var(--ambar);
}

/* ---------- 24e. El cuerpo --------------------------------------- */

/* `overflow-wrap` LO TENIA LA CLASE VIEJA y aqui se habia perdido. Sin
   el, una direccion web larga sin espacios -y el contrato lleva dos- se
   sale de la caja en una pantalla estrecha en vez de partirse. No se
   hereda, asi que hay que declararlo en cada sitio donde hay texto
   corrido. Lo cazo la revision del 15/09/2026. */
.doc-parrafo,
.doc-apartado-texto,
.doc-sangrado,
.doc-lista li,
.doc-tabla td,
.doc-titulo,
.doc-clausula {
    overflow-wrap: break-word;
}

.doc-parrafo {
    margin: 0 0 12px;
    text-align: justify;
    hyphens: auto;
}

/* Los apartados numerados. La rejilla de dos columnas es lo que deja
   el numero colgando en el margen y todo el texto alineado por la
   izquierda, como en el contrato de partners. 3.1em da sitio de sobra
   para "13.5" sin que se pegue al texto. */
.doc-apartados {
    margin: 0 0 4px;
}

.doc-apartado {
    display: grid;
    grid-template-columns: 3.1em 1fr;
    margin: 0 0 11px;
}

.doc-apartado-numero {
    padding-top: 1px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

.doc-apartado-texto {
    text-align: justify;
    hyphens: auto;
}

/* El ejemplo de la clausula 7: sangrado y sobre fondo azul claro,
   para que se vea de un vistazo que es una cuenta de ejemplo y no una
   obligacion mas. */
.doc-sangrado {
    margin: 2px 0 15px 3.1em;
    padding: 11px 15px;
    background: var(--azul-claro);
    border-radius: 8px;
    font-size: 15px;
}

/* ---------- 24f. Las listas -------------------------------------- */

/* Sin bolita: una raya corta naranja, que es lo que usa el contrato
   de partners en sus enumeraciones. */
.doc-lista {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.doc-lista li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 1.2em;
    text-align: justify;
    hyphens: auto;
}

.doc-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .66em;
    width: .6em;
    height: 2px;
    background: var(--ambar);
}

/* Las de dentro de un apartado ya traen su letra escrita, "a)" o
   "b)", asi que no llevan raya: serian dos marcas para lo mismo.
   Cuelgan la letra con una sangria negativa, igual que los numeros. */
.doc-lista-dentro {
    margin: -2px 0 15px 3.1em;
}

.doc-lista-dentro li {
    padding-left: 1.6em;
    text-indent: -1.6em;
}

.doc-lista-dentro li::before {
    content: none;
}

/* ---------- 24g. La tabla ---------------------------------------- */

/* Sangrada como el texto de los apartados, porque la del contrato
   cuelga de la clausula 7.3. El envoltorio permite deslizarla en un
   movil sin que la pagina entera se mueva de lado. */
.doc-tabla-envoltorio {
    margin: 4px 0 16px 3.1em;
    overflow-x: auto;
}

.doc-tabla {
    min-width: 58%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.doc-tabla th {
    padding: 9px 18px 8px;
    background: var(--azul-claro);
    border-bottom: 2px solid var(--azul);
    color: var(--azul-oscuro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.doc-tabla td {
    padding: 9px 18px;
    border-bottom: 1px solid var(--linea);
}

.doc-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.doc-tabla .doc-tabla-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.doc-tabla td.doc-tabla-numero {
    font-weight: 700;
    color: var(--azul);
}

/* ---------- 24h. Detalles de dentro de una linea ----------------- */

/* Una direccion web o un dato literal. Ni monoespaciado ni recuadro:
   en un contrato eso parece un trozo de programa. Azul y algo mas
   pequeno, y que pueda partirse para no desbordar en un movil. */
.doc-dato {
    font-size: .93em;
    font-weight: 600;
    color: var(--azul);
    overflow-wrap: break-word;
}

.doc strong {
    font-weight: 700;
    color: var(--tinta);
}

/* ---------- 24i. El pie ------------------------------------------ */

.doc-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 5px 18px;
    margin: 34px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--linea);
    font-size: 11.5px;
    color: var(--tinta-poca);
}

/* ---------- 24i-bis. Lo que anade la fase 6 ----------------------
   Dos piezas, y las dos son de los documentos fiscales -la liquidacion
   del particular, la propuesta de factura y el certificado anual-, no
   del contrato. Van aqui y no en la 19f porque tienen que IMPRIMIRSE
   igual que el resto de la hoja, y la 19f es de pantalla.

     - `.doc-partes`: las dos partes del documento, una al lado de la
       otra. En un papel A4, emisor y destinatario van enfrentados: es
       como esta puesta cualquier factura, y es lo que hace que quien la
       recibe encuentre su NIF sin leer.

     - `.doc-tabla-suma` y `.doc-tabla-total`: la linea de la base y la
       del total. Sin ellas, el numero que de verdad importa -lo que se
       cobra- se pinta igual que el coste del envio del dinero, en un
       documento donde la gente busca UNA cifra.
   ---------------------------------------------------------------- */

.doc-partes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    margin: 14px 0 0;
}

.doc-parte {
    flex: 1 1 240px;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.doc-parte-rotulo {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-poca);
}

.doc-parte-nombre {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tinta);
}

.doc-parte-linea {
    margin: 0 0 2px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tinta);
}

.doc-tabla tbody tr.doc-tabla-suma td {
    border-top: 1px solid var(--linea);
    background: transparent;
}

.doc-tabla tbody tr.doc-tabla-total td {
    border-top: 2px solid var(--tinta);
    font-size: 15.5px;
}

/* ---------- 24j. En un movil ------------------------------------- */

@media (max-width: 620px) {
    .doc {
        padding: 22px 18px 18px;
        font-size: 15.5px;
    }

    .doc-titulo   { font-size: 22px; }
    .doc-clausula { font-size: 14px; }

    /* El margen que cuelga se recorta: en 320px de ancho, 3.1em de
       sangria se comen una quinta parte de la linea. */
    .doc-apartado { grid-template-columns: 2.6em 1fr; }

    .doc-sangrado,
    .doc-lista-dentro,
    .doc-tabla-envoltorio { margin-left: 0; }

    .doc-indice ol { columns: 1; }

    /* "EN VIGOR DESDE 15/09/2026" mide 200px el solo: dos columnas no
       caben en 320px de ancho. */
    .doc-datos { grid-template-columns: auto; }

    /* Justificar en columnas estrechas abre zanjas blancas entre
       palabras. En el movil se alinea a la izquierda y se lee mejor. */
    .doc-parrafo,
    .doc-apartado-texto,
    .doc-lista li { text-align: left; }
}

/* ---------- 24k. Al imprimir o guardar en PDF --------------------- */

/* Lo exige la LSSI: el afiliado tiene que poder guardarse el contrato
   antes de aceptarlo. Lo que sale por la impresora es el documento y
   nada mas: sin la nota de ayuda, sin sombras y sin fondos de color,
   que en papel salen grises y ensucian. */
@media print {
    .doc {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 10.5pt;
    }

    .doc-ayuda { display: none !important; }

    /* La variante archivada lleva fondo gris en pantalla para separarse
       de la tarjeta. En papel ese gris sale sucio y se come la tinta de
       una pagina entera. */
    .doc-archivado {
        max-width: none;
        padding: 0;
        background: transparent;
    }

    .doc-indice {
        background: transparent;
        border-color: #bbb;
    }

    .doc-sangrado {
        background: transparent;
        border-left: 3px solid #bbb;
        border-radius: 0;
    }

    .doc-tabla th {
        background: transparent;
        border-bottom: 1.5pt solid #333;
    }

    /* TODOS LOS TAMANOS EN PUNTOS, no solo el del cuerpo. Estaba el
       cuerpo a 10,5pt y el resto en pixeles: en papel el navegador
       convierte los pixeles a su manera y el titulo salia
       desproporcionado respecto al texto. */
    .doc-titulo          { font-size: 18pt; }
    .doc-subtitulo       { font-size: 10pt; }
    .doc-clausula        { font-size: 10pt; }
    .doc-apartado-numero { font-size: 9.5pt; }
    .doc-sangrado        { font-size: 10pt; }
    .doc-tabla           { font-size: 9.5pt; }
    .doc-tabla th        { font-size: 8pt; }
    .doc-indice ol       { font-size: 9pt; }
    .doc-membrete-empresa,
    .doc-sobretitulo     { font-size: 8pt; }
    .doc-membrete-rotulo { font-size: 9pt; }
    .doc-datos dt        { font-size: 7.5pt; }
    .doc-datos dd        { font-size: 9.5pt; }
    .doc-pie             { font-size: 7.5pt; }

    /* Que no se parta un apartado ni una clausula entre dos hojas, y
       que un titulo no se quede solo al final de una pagina. */
    .doc-clausula            { break-after: avoid; }
    .doc-apartado,
    .doc-lista li,
    .doc-sangrado,
    .doc-tabla               { break-inside: avoid; }

    /* (Fase 6) Los datos de una de las dos partes no pueden quedarse
       partidos entre dos hojas: media direccion al final de una pagina
       y media al principio de la siguiente hace ilegible justo lo que
       un documento fiscal tiene que decir sin dudas. */
    .doc-partes,
    .doc-parte               { break-inside: avoid; }
    .doc-parte               { padding: 8px 10px; }
    .doc-parte-rotulo        { font-size: 7.5pt; }
    .doc-parte-nombre        { font-size: 10.5pt; }
    .doc-parte-linea         { font-size: 9.5pt; }
}


/* ==================================================================
   25. VER LA CONTRASEÑA
   ------------------------------------------------------------------
   El botoncito que enseña lo que se esta escribiendo en un campo de
   contrasena. Anadido el 16/09/2026.

   TODO ESTO LO MONTA app.js, NO EL HTML
   -------------------------------------
   Ninguna de las cinco pantallas con campo de contrasena tiene ni una
   linea de mas: el guion recorre los `input[type=password]` que haya,
   los envuelve y les cuelga el boton. Asi no hay nueve trozos de HTML
   repetidos que se desincronicen, y una pantalla nueva con contrasena
   lo tiene sin hacer nada.

   Si app.js no llega a cargarse, no aparece el boton y el campo se
   comporta como siempre. Es la regla de oro de ese archivo: la
   plataforma funciona entera sin JavaScript.

   POR QUE PONE «Ver» Y NO UN DIBUJO DE UN OJO
   -------------------------------------------
   Un ojo tachado es ambiguo -mucha gente no sabe si significa «esta
   oculta» o «pulsa para ocultar»- y obligaria a meter un SVG o una
   fuente de iconos. Con dos palabras no hay duda, se lee igual en
   cualquier movil y el lector de pantalla lo dice tal cual.
   ================================================================== */

/* El envoltorio que crea el guion alrededor del campo. */
.campo-clave { position: relative; }

/* Hueco a la derecha para que el texto escrito no pase por debajo del
   boton. Va sobre el input de dentro, no sobre todos los de la pagina. */
.campo-clave input[type=password],
.campo-clave input[type=text] { padding-right: 82px; }

/* El boton se estira de arriba abajo del envoltorio en vez de llevar
   una altura escrita a mano. Hace falta: el campo mide 44px en el
   panel y 52px en la pantalla de acceso, y con una altura fija
   quedaria descentrado en una de las dos. */
.ver-clave {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--azul);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.ver-clave:hover { background: var(--azul-claro); }

.ver-clave:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

/* En la pantalla de acceso, que es oscura, el azul del panel se
   perderia contra el fondo. Se usan los colores de esa pantalla.
   El campo alli lleva 16px de hueco lateral, asi que el de la
   derecha tiene que ser algo mayor. */
.acceso .campo-clave input[type=password],
.acceso .campo-clave input[type=text] { padding-right: 86px; }

.acceso .ver-clave {
    right: 6px;
    color: var(--ac-enlace);
    font-size: 14px;
}

.acceso .ver-clave:hover {
    background: var(--ac-linea);
    color: var(--ac-texto);
}

.acceso .ver-clave:focus-visible {
    outline: 2px solid var(--ac-linea-azul);
}


/* ==================================================================
   26 · LA CINTA DEL ENTORNO DE PRUEBAS            (16/09/2026)
   ------------------------------------------------------------------
   Solo se ve en la plataforma de pruebas, que es otra instalacion con
   otra base de datos y otra direccion. En la de verdad este bloque no
   se usa nunca: la plantilla solo pinta la cinta si el entorno dice
   «pruebas».

   Es fea A PROPOSITO. No es un aviso discreto de esos que se dejan de
   ver a los dos dias: tiene que cantar en cada pantalla, porque el dia
   malo es aquel en que alguien cree estar en pruebas y esta en la de
   verdad. O al reves, y da de alta a un partner real en la de pruebas.
   ============================================================== */

.cinta-pruebas {
    background: #8a1020;
    color: #fff;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .02em;
}

.cinta-pruebas strong {
    display: inline-block;
    margin-right: 10px;
    letter-spacing: .08em;
}

.cinta-pruebas span { opacity: .92; }

/* En movil, el texto largo se va a su propia linea en vez de
   apretujarse contra el titulo. */
@media (max-width: 560px) {
    .cinta-pruebas span { display: block; margin-top: 2px; font-size: 13px; }
}


/* ==================================================================
   26. EL AVISO DE LA COOKIE DE AFILIACION   (16/09/2026)
   ------------------------------------------------------------------
   Solo lo ve quien llega por el enlace de un afiliado, y solo hasta
   que contesta. No hay banner de cookies para todo el mundo porque no
   hay nada mas que preguntar: la unica otra cookie de la casa es la de
   sesion, que es tecnica y esta exenta (art. 22.2 LSSI).

   VA FIJO ABAJO Y NO TAPA NADA IMPORTANTE. Abajo porque el enlace del
   afiliado cae en el alta, y arriba taparia el primer campo del
   formulario justo cuando la persona va a escribir.

   LOS DOS BOTONES SE VEN IGUAL DE BIEN. Un «Aceptar» grande y verde
   con un «rechazar» gris y pequeno seria pedir el permiso con trampa.
   Los dos usan las clases de boton de siempre, el mismo tamano.

   EL FONDO ES OSCURO A PROPOSITO: este aviso sale tanto en el panel
   (claro) como en las pantallas de la puerta (oscuras), y un recuadro
   claro sobre la puerta oscura desaparecia.
   ============================================================== */

.aviso-cookie {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--azul-oscuro);
    color: #eaf0f8;
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap;
    box-shadow: 0 -2px 14px rgba(10, 25, 50, .35);
    font-size: 14px; line-height: 1.5;
}

.aviso-cookie-texto { max-width: 680px; }
.aviso-cookie-texto strong { color: #fff; }
.aviso-cookie-texto a { color: #ffd9b0; }

.aviso-cookie-botones {
    display: flex; gap: 10px; flex-shrink: 0;
}

/* El boton suave de la plataforma es claro sobre claro; aqui el fondo
   es oscuro, asi que se le da su propio borde para que se vea. */
.aviso-cookie .boton-suave {
    background: transparent; color: #eaf0f8;
    border: 1px solid rgba(234, 240, 248, .45);
}
.aviso-cookie .boton-suave:hover { background: rgba(234, 240, 248, .12); }

/* En movil, el texto arriba y los botones debajo, cada uno a la mitad:
   dos botones en linea con el texto no caben y parten las palabras. */
@media (max-width: 620px) {
    .aviso-cookie { flex-direction: column; align-items: stretch; gap: 12px; }
    .aviso-cookie-botones .boton { flex: 1; text-align: center; }
}

/* Al imprimir no pinta nada: no es parte del documento. */
@media print { .aviso-cookie { display: none !important; } }