/* ============================================================
   EstilosNuevos.css
   Estilos de la nueva estética. Cargado el último en
   Masters/SiteGeneral.Master para poder sobrescribir a
   Site.css / SiteResponsive.css.

   Cubre la cabecera del portal, el pie, el fondo del mapa, el
   login y la cabecera de cliente. La tipografía (Sora) está en
   Fuentes.css. Los estilos de
   voto (lista de votaciones, papeleta, puntos, opciones y resumen)
   están en EstilosNuevosVoto.css, que NO se carga todavía porque
   redefine clases de PapeletaVotacion.css.
   ============================================================ */

/* ------------------------------------------------------------
   Paleta corporativa
   Variables reutilizables en el resto de estilos nuevos.
   ------------------------------------------------------------ */
:root {
    --azulCorporativo: #00255B;
    --verdeCorporativo: #c4ff4d;
    --moradoCorporativo: #bb8cff;
    /* Rojo del acceso al directo. Aclarado para que contraste sobre
       el fondo oscuro de la cabecera. */
    --rojoDirecto: #FFCBBD;
    --azulClaroCorporativo :#1a73e9;
    /* Altura reservada para la cabecera, que va fija sobre el
       contenido. El hueco que la compensa sale de esta variable, así
       que basta cambiarla aquí si la cabecera cambia de alto.
       Medida real de la cabecera: 78px (logo 50 + relleno 2x10 + ...). */
    --altoCabecera: 78px;
}

/* ------------------------------------------------------------
   Fondo compartido por cabecera y pie
   Las dos franjas muestran la MISMA imagen: al anclarla a la
   ventana ("fixed") el navegador la encuadra una sola vez sobre el
   área visible, de modo que la cabecera enseña su parte de arriba y
   el pie la de abajo, como si el degradado continuase por detrás
   del contenido. Ambas son opacas y tapan el fondo de la página.
   ------------------------------------------------------------ */
.cabeceraFija,
.pieNuevo {
    /* Color de respaldo mientras la imagen carga o si no cargara */
    background-color: var(--azulCorporativo);
    background-image: url("../images/03DEGRADADOfondoWeb.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    /* Ambas franjas van por delante del fondo de la página: son
       opacas y nunca dejan ver lo que hay detrás. */
    position: relative;
    z-index: 2;
}

/* En móvil se ancla la imagen al propio elemento: iOS no aplica
   bien "fixed" y, en vertical, el encuadre sobre la ventana recorta
   la imagen hasta dejarla irreconocible. */
@media screen and (max-width: 768px) {
    .cabeceraFija,
    .pieNuevo {
        background-attachment: scroll;
    }
}

/* ------------------------------------------------------------
   Pie pegado al fondo (sticky footer)
   El <form> del master se comporta como columna flexible que
   ocupa como mínimo el alto de la ventana: el contenido crece y
   empuja al pie hacia abajo. Si no hay contenido suficiente, el
   pie queda pegado al fondo de la ventana; si lo hay, el pie
   baja con el scroll de forma natural.
   ------------------------------------------------------------ */
.paginaFlex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* En móvil la barra del navegador aparece y desaparece: dvh mide
       el alto visible real y evita que el pie quede fuera de pantalla.
       Los navegadores que no lo soportan se quedan con el 100vh de arriba. */
    min-height: 100dvh;
}

    /* .page ya sólo envuelve la cabecera: conserva su ancho máximo de
   Site.css para la cabecera de cliente y no crece. Va transparente
   para que se vea el fondo del contenedor de la página, sin dejar
   franjas blancas entre la cabecera y el contenido. */
    .paginaFlex > .page {
        flex: 0 0 auto;
        background-color: transparent;
        /* Site.css usa "margin: auto auto auto auto"; los márgenes
       verticales automáticos anulan el crecimiento en flexbox,
       así que se dejan sólo los horizontales para centrar. */
        margin-top: 0;
        margin-bottom: 0;
    }

/* Definición base de la zona de contenido, la misma que el
   Responsive.css del proyecto de origen: es su relleno superior el que
   separa el contenido de la cabecera y, en el login, el que baja la
   caja del formulario. En este proyecto la clase no estaba definida en
   ningún CSS, así que el hueco venía a cero.
   Los márgenes, el ancho y el fondo los fija la regla de al lado,
   `.paginaFlex > .mainResponsive`, que es más específica. */
.mainResponsive {
    padding: 40px 12px 20px;
    min-height: 520px;
    max-width: 100%;
    display: block;
    clear: left;
}

@media screen and (max-width: 768px) {
    /* El margen con los bordes de la pantalla lo pone .contenidoAncho,
       así que aquí el relleno lateral se retira para no sumarlo dos veces. */
    .mainResponsive {
        padding-left: 0;
        padding-right: 0;
    }
}

    /* Zona de contenido: es la que absorbe el espacio sobrante y empuja
   el pie hacia abajo. Ocupa todo el ancho de la ventana. */
    .paginaFlex > .mainResponsive {
        flex: 1 0 auto;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        background-color: transparent;
    }

/* El contenido de las páginas ocupa todo el ancho de la ventana: las
   pantallas de gestión (censos, listados, rejillas) necesitan sitio y
   antes quedaban limitadas a 1200px.
   El relleno lateral es el que separa el contenido de los bordes de
   la pantalla; coincide con el de la cabecera y el pie, así que todo
   el portal queda alineado sobre el mismo margen.
   Las pantallas que quieran el ancho contenido de antes envuelven su
   contenido en .contenidoLimitado (lo hace Account/Entrar.aspx). */
.contenidoAncho {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}

/* Ancho contenido, el que tenía .contenidoAncho antes de pasar a ancho
   completo: 1200px menos su relleno lateral de 32px a cada lado. Va
   dentro de .contenidoAncho y centra el bloque en la pantalla, para las
   pantallas de formulario corto que no deben estirarse (el login). */
.contenidoLimitado {
    width: 100%;
    max-width: 1136px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    .contenidoAncho {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .contenidoAncho {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Fondo con el mapa corporativo, atenuado. Se aplica desde el código
   (Login.aspx.vb) al <form>, o sea al contenedor de toda la página,
   en las pantallas que lo piden: así cubre por completo la banda que
   queda entre la cabecera y el pie, incluido el hueco que reserva la
   cabecera fija, sin franjas blancas.
   El blanco de aquí es la base sobre la que se mezcla la capa
   translúcida de ::before; los dos mandos del efecto son ese color y
   la "opacity" de la capa. */
.fondoMapa {
    position: relative;
    z-index: 0;
    background-color: #ffffff;
}

    /* La imagen va en una capa propia por detrás del contenido, con su
   propia opacidad. Así se atenúa la imagen de verdad, en lugar de
   taparla con un velo blanco, y el formulario conserva todo su
   contraste (un "opacity" sobre el contenedor lo apagaría también). */
    .fondoMapa::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        opacity: 0.15;
        background-image: url("../images/fondo-web-home.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        pointer-events: none;
    }

    /* Ningún contenedor intermedio puede pintar blanco por encima del
   fondo: son los que dejaban la franja clara bajo la cabecera. */
    .fondoMapa .page,
    .fondoMapa .InicioCabecera,
    .fondoMapa .margenSuperiorCabecera,
    .fondoMapa .mainResponsive,
    .fondoMapa .contenidoAncho {
        background-color: transparent;
    }

@media screen and (max-width: 768px) {
    /* Igual que en cabecera y pie: iOS no aplica bien "fixed". La capa
       pasa a acompañar al scroll cubriendo el alto del contenedor. */
    .fondoMapa::before {
        position: absolute;
    }
}

/* El pie nunca se comprime ni se estira */
.paginaFlex > .pieNuevo {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Cabecera del portal
   Clases propias que sustituyen a .fijoArriba y .LogoAplicacion
   (Responsive.css / Site.css), que ya no usa ninguna otra página.
   ------------------------------------------------------------ */
.cabeceraFija {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    /* La cabecera mide EXACTAMENTE lo que reserva el hueco que la
       compensa: así nunca puede tapar el contenido, crezca lo que
       crezca lo que lleve dentro. */
    height: var(--altoCabecera);
    box-sizing: border-box;
    /* Sin sombra inferior */
    box-shadow: none;
}

/* Hueco que compensa la cabecera fija.
   Responsive.css lo resolvía con "margin-top: 100px" sobre un div
   vacío. Al no tener contenido ni relleno, ese margen COLAPSA y se
   propaga fuera del <header> (que queda con 0 de alto): el espacio
   deja de pertenecer al bloque y se ve como una franja blanca bajo
   la cabecera. Aquí se sustituye por altura real, que sí ocupa sitio
   dentro del header y hereda su fondo. */
.margenSuperiorCabecera {
    margin-top: 0;
    height: var(--altoCabecera);
}

/* Sobre el fondo oscuro, los enlaces de la cabecera en blanco */
.cabeceraFija a,
.cabeceraFija a:link,
.cabeceraFija a:visited {
    color: #ffffff;
    font-weight: 400;
    text-decoration: none;
}

    .cabeceraFija a:hover {
        color: #ffffff;
        font-weight: 400;
        text-decoration: underline;
    }

/* Fila de la cabecera: logotipo pegado al margen izquierdo y las
   acciones (streaming, sesión) al derecho, como en la maqueta. */
.cabeceraContenido {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 32px;
    display: flex;
    /* Una sola fila siempre: si envolviera, la cabecera crecería y
       dejaría de cuadrar con el hueco que la compensa. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

/* Bloque del logotipo, a la izquierda del todo */
.cabeceraLogo {
    flex: 0 0 auto;
}

/* Enlaces de la derecha de la cabecera */
.cabeceraAcciones {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
    font-size: 0.85rem;
}

/* Fila con todo el bloque de sesión que inyecta
   SiteFormularios.master: créditos, accesos, nombre y salir. */
.cabeceraSesion {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Acción de la cabecera con aspecto de botón, en el mismo estilo de
   píldora que los sellos del pie. Sigue siendo un enlace. */
.cabeceraBoton,
a.cabeceraBoton:link,
a.cabeceraBoton:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    color: #e6f1fb;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    text-decoration: none;
}

a.cabeceraBoton:hover {
    color: #ffffff;
    font-weight: 400;
    text-decoration: none;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Acceso al directo: texto y borde en rojo, para distinguirlo como
   la acción de emisión en vivo. */
.cabeceraBotonDirecto,
a.cabeceraBotonDirecto:link,
a.cabeceraBotonDirecto:visited {
    color: var(--rojoDirecto);
    border-color: var(--rojoDirecto);
}

a.cabeceraBotonDirecto:hover {
    color: var(--rojoDirecto);
    border-color: var(--rojoDirecto);
    background-color: rgba(255, 90, 90, 0.15);
}

/* Cierre de sesión, en el verde corporativo */
.cabeceraBotonSalir,
a.cabeceraBotonSalir:link,
a.cabeceraBotonSalir:visited {
    color: var(--verdeCorporativo);
    border-color: var(--verdeCorporativo);
}

a.cabeceraBotonSalir:hover {
    color: var(--verdeCorporativo);
    border-color: var(--verdeCorporativo);
    background-color: rgba(196, 255, 77, 0.15);
}

.cabeceraBotonIcono {
    display: block;
    flex: 0 0 auto;
}

/* Nombre del usuario: a la derecha, junto al cierre de sesión. */
.cabeceraUsuario {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    /* Un nombre largo se recorta con puntos suspensivos en vez de
       partir la cabecera en varias líneas. */
    max-width: 22em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logoCabecera {
    height: 50px;
    width: auto;
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    /* El logotipo baja a 40px, así que la cabecera mide menos y el
       hueco que la compensa se reduce en la misma proporción. */
    :root {
        --altoCabecera: 60px;
    }

    .cabeceraContenido {
        padding: 0 14px;
        gap: 6px 8px;
    }

    .logoCabecera {
        height: 36px;
    }

    /* No hay sitio para los rótulos: los botones se quedan sólo con
       el icono, redondos. El texto sigue disponible en el "title" y
       para los lectores de pantalla. */
    .cabeceraBotonTexto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cabeceraBoton,
    a.cabeceraBoton:link,
    a.cabeceraBoton:visited {
        gap: 0;
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        flex: 0 0 auto;
    }

    /* En móvil no hay sitio: el nombre del usuario se oculta y la
       cabecera se queda con el logotipo y los dos botones. */
    .cabeceraUsuario {
        display: none;
    }
}

/* Móviles estrechos: la cabecera ocupa menos alto todavía. */
@media screen and (max-width: 480px) {
    :root {
        --altoCabecera: 54px;
    }

    .logoCabecera {
        height: 30px;
    }

    .cabeceraContenido {
        padding: 0 10px;
        gap: 4px 6px;
    }

    .cabeceraBoton,
    a.cabeceraBoton:link,
    a.cabeceraBoton:visited {
        width: 32px;
        height: 32px;
    }
}

/* ------------------------------------------------------------
   Pie del portal
   Sellos de certificación en texto a la izquierda y enlaces a la
   derecha, siguiendo la maqueta de acceso del elector.
   ------------------------------------------------------------ */
.pieNuevo {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

/* Sellos: lista sin viñetas, en línea */
.pieSellos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pieSellos li {
        display: block;
    }

/* Cada sello, en forma de píldora. Sobre el fondo oscuro se usa
   texto claro y un borde tenue, en lugar del azul de la maqueta. */
.pieSello,
a.pieSello:link,
a.pieSello:visited {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
    color: #e6f1fb;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    text-decoration: none;
}

a.pieSello:hover {
    color: #ffffff;
    font-weight: 400;
    border-color: #ffffff;
    text-decoration: none;
}

/* Bloque de la derecha del pie */
.pieEnlaces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 12px;
    color: #c3d3e8;
}

.pieEnlace,
a.pieEnlace:link,
a.pieEnlace:visited {
    font-size: 12px;
    font-weight: 400;
    color: #c3d3e8;
    text-decoration: none;
}

a.pieEnlace:hover {
    color: #ffffff;
    font-weight: 400;
    text-decoration: underline;
}

/* La versión comparte aspecto con el enlace y el copyright */
.versionPie {
    font-size: 12px;
    color: #c3d3e8;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .pieNuevo {
        padding: 14px 20px;
        justify-content: center;
        text-align: center;
    }

    .pieSellos {
        justify-content: center;
    }

    .pieEnlaces {
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   Login
   Formulario sin caja de color, sobre el fondo de la zona de
   contenido. Clases propias: no usa nada de Site.css / Botones.css.
   ------------------------------------------------------------ */
.loginPanel {
    width: 100%;
    max-width: 400px;
    /* Pegado al margen izquierdo del contenido, no centrado. */
    margin: 48px 0;
    padding: 0 16px 0 0;
    box-sizing: border-box;
    text-align: left;
    /* El line-height fijo de 18px que impone el body de Site.css aprieta
       el panel. Se corrige sólo aquí, para no cambiar el del resto del
       portal. La tipografía es la general del portal: los campos y
       botones llevan `font-family: inherit`, así que la heredan de este
       contenedor. */
    line-height: 1.5;
}

.loginTitulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--azulCorporativo);
}

.loginSubtitulo {
    margin: 6px 0 24px 0;
    font-size: 0.85rem;
    color: #2f2f2f;
}

.loginCampo {
    margin-bottom: 16px;
}

.loginEtiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--azulCorporativo);
}

/* Etiqueta del campo y enlace de recuperación en la misma línea,
   encima del campo de clave. */
.loginFilaEtiqueta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 6px;
}

    .loginFilaEtiqueta .loginEtiqueta {
        margin-bottom: 0;
    }

.loginEnlaceSuave,
a.loginEnlaceSuave:link,
a.loginEnlaceSuave:visited {
    font-size: 12px;
    font-weight: 400;
    color: #185fa5;
    text-decoration: none;
}

    .loginEnlaceSuave:hover,
    a.loginEnlaceSuave:hover {
        color: #185fa5;
        font-weight: 400;
        text-decoration: underline;
    }

/* Campos de texto */
.loginTexto {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 1rem;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c9d2dd;
    border-radius: 8px;
    outline: none;
}

    .loginTexto:hover {
        border-color: #9aa9bd;
    }

    /* El foco se marca con el color corporativo y un halo suave para
   que también se vea al navegar con el teclado. */
    .loginTexto:focus {
        border-color: var(--azulCorporativo);
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

/* Campo de clave con el botón de ver/ocultar dentro */
.loginCampoClave {
    position: relative;
}

/* Hueco a la derecha para que el texto no pase por debajo del botón */
.loginTextoClave {
    padding-right: 48px;
}

    /* Edge e IE añaden su propio icono de revelar clave: se oculta para
   no tener dos ojos en el mismo campo. */
    .loginTextoClave::-ms-reveal,
    .loginTextoClave::-ms-clear {
        display: none;
    }

.loginAlternarClave {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #8a94a3;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    /* Evita que un toque prolongado en móvil seleccione el icono */
    -webkit-tap-highlight-color: transparent;
}

    .loginAlternarClave:hover {
        color: #5a6478;
    }

    .loginAlternarClave:focus {
        outline: none;
        color: var(--azulCorporativo);
        box-shadow: 0 0 0 2px rgba(0, 37, 91, 0.25);
    }

.loginIcono {
    display: block;
    pointer-events: none;
}

/* Casillas de las posiciones del móvil (RecordarClave). Van en fila,
   se reparten el ancho disponible y saltan de línea en pantallas
   estrechas en vez de desbordar. */
.loginPosiciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

input.loginPosicion {
    flex: 1 1 36px;
    width: auto;
    min-width: 32px;
    max-width: 48px;
    height: 44px;
    box-sizing: border-box;
    padding: 0;
    font-family: inherit;
    font-size: 1.1rem;
    text-align: center;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c9d2dd;
    border-radius: 8px;
    outline: none;
}

    input.loginPosicion:focus {
        border-color: var(--azulCorporativo);
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

    /* Las casillas que no toca rellenar se ven claramente inactivas */
    input.loginPosicion:disabled {
        color: #b0b8c4;
        background-color: #f2f4f7;
        border-color: #dde3ea;
    }

/* Botón de acceso, a todo el ancho del formulario */
.loginBoton {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 8px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--azulCorporativo);
    border: 1px solid var(--azulCorporativo);
    border-radius: 8px;
    cursor: pointer;
}

    .loginBoton:hover {
        background-color: #001a42;
        border-color: #001a42;
    }

    .loginBoton:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.25);
    }

/* Acceso con certificado: es un enlace, pero se presenta como un
   botón secundario, igual que en la maqueta. */
.loginBotonSecundario,
a.loginBotonSecundario:link,
a.loginBotonSecundario:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 16px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #14213a;
    background-color: #ffffff;
    border: 1px solid #c7d0db;
    border-radius: 8px;
}

    .loginBotonSecundario:hover,
    a.loginBotonSecundario:hover {
        color: #14213a;
        font-weight: 500;
        text-decoration: none;
        background-color: #fafbfc;
        border-color: #8a94a3;
    }

/* Separador "o" entre los dos accesos */
.loginSeparador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

    .loginSeparador::before,
    .loginSeparador::after {
        content: "";
        flex: 1;
        border-top: 1px solid #d8dee6;
    }

    .loginSeparador span {
        font-size: 12px;
        color: #8a94a3;
    }

/* Nota de seguridad bajo el formulario */
.loginNotaSeguridad {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 22px 0 16px 0;
    font-size: 12px;
    color: #2f2f2f;
}

/* Mensajes de error de los validadores */
.loginError {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #c00000;
}

/* Caja de mensaje. El div sólo se pinta cuando hay algo que decir:
   lo hace visible mostrarMensaje() desde el código. */
.loginMensaje {
    text-align: center;
    background-color: #ebd0d0;
    padding: 8px;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   Validación telemática (validacion.aspx)
   Resultado de la consulta de un código, debajo del formulario y
   dentro del mismo panel que usa el login.
   ------------------------------------------------------------ */
.validacionResultado {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #d9e0ea;
}

/* Rótulo de documento válido, con la marca de verificación al lado */
.validacionValido {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--azulCorporativo);
}

.validacionIcono {
    flex: 0 0 auto;
    color: #1f8a4c;
}

/* Tipo de documento: es el dato principal del resultado */
.validacionTipo {
    margin: 6px 0 22px 0;
    font-size: 1.05rem;
    color: #2f2f2f;
}

.validacionFila {
    margin-bottom: 14px;
}

.validacionRotulo {
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7583;
}

.validacionValor {
    display: block;
    font-size: 0.95rem;
    color: #1a1e2a;
}

/* Mensaje informativo, para distinguirlo de los de error */
.loginAviso {
    display: block;
    font-size: 0.9rem;
    color: var(--azulCorporativo);
}

.loginMensaje > span {
    color: #811212 !important;
}


@media screen and (max-width: 768px) {
    /* En pantallas pequeñas el formulario ocupa el ancho disponible
       y deja de ir desplazado. */
    /* El margen con los bordes de la pantalla lo pone ya
       .contenidoAncho: aquí sólo se quita el relleno propio. */
    .loginPanel {
        margin: 24px 0;
        padding: 0;
        max-width: 100%;
    }

    /* 16px reales en el campo: por debajo de esa medida los
       navegadores de iOS hacen zoom automático al enfocarlo y
       descuadran la página. */
    .loginTexto {
        height: 48px;
        font-size: 16px;
    }

    .loginBoton,
    .loginBotonSecundario,
    a.loginBotonSecundario:link,
    a.loginBotonSecundario:visited {
        height: 48px;
        font-size: 16px;
    }

    /* Área táctil más amplia para el dedo */
    .loginAlternarClave {
        width: 44px;
        height: 44px;
    }

    .loginTextoClave {
        padding-right: 52px;
    }
}

@media screen and (max-width: 480px) {
    .loginPanel {
        padding: 0;
    }

    .loginTitulo {
        font-size: 1.3rem;
        margin-bottom: 18px;
    }
}

/* ------------------------------------------------------------
   Cabecera de cliente (nombre, descripción y logotipo)
   Aparece sobre la papeleta y el resto de pantallas del elector.
   Es una banda del azul corporativo que ocupa todo el ancho, con
   el contenido alineado con el del resto de la página.
   ------------------------------------------------------------ */

.headerVoto {
    /* El hueco de la cabecera fija ya lo reserva
       .margenSuperiorCabecera: aquí sólo queda el aire que separa
       la banda de cliente de la cabecera del portal. */
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    .headerVoto {
        margin-top: 14px;
    }
}

.clienteContenedor {
    box-sizing: border-box;
    padding: 22px 32px;
    background-color: transparent;
    color: var(--azulCorporativo);
    /* Nombre a la izquierda y logotipo a la derecha, centrados
       entre sí sea cual sea el alto de cada uno. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    border-radius: 4px;
}

    /* Los anchos fijos (79% / 20%) de Site.css los sustituye el
       reparto flexible. */
    .clienteContenedor .titleVoto {
        flex: 1 1 320px;
        width: auto;
        min-width: 0;
    }

    .clienteContenedor .headerVotoLogo {
        flex: 0 0 auto;
        width: auto;
        text-align: right;
    }

    /* El <br> entre el nombre y la descripción deja de hacer falta:
       cada uno es ya un bloque con su propia separación. */
    .clienteContenedor .titleVoto br {
        display: none;
    }

.clienteNombre {
    display: block;
    margin-bottom: 4px;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--azulCorporativo);
    overflow-wrap: break-word;
}

.clienteDescripcion {
    display: block;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.45;
    /* Un gris azulado marca la jerarquía frente al nombre */
    color: #5a6478;
    overflow-wrap: break-word;
}

/* El logotipo del cliente va directamente sobre el azul, sin caja.
   El control lo pinta con "height: 78px" en línea (atributo Height
   del asp:Image), así que hace falta !important para que la imagen
   se pueda encoger: se limita el alto y el ancho manda cuando la
   pantalla es estrecha. */
.clienteImagen {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 78px;
    object-fit: contain;
    background-color: transparent;
}

@media screen and (max-width: 768px) {
    .clienteImagen {
        max-height: 60px;
        /* Responsive.css lo dejaba en 400px, demasiado para móvil */
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .clienteImagen {
        max-height: 48px;
    }
}

@media screen and (max-width: 768px) {
    .clienteContenedor {
        padding: 18px 20px;
        gap: 14px;
    }

        /* En vertical el logotipo baja debajo del nombre, alineado
       con él en lugar de a la derecha. */
        .clienteContenedor .titleVoto,
        .clienteContenedor .headerVotoLogo {
            flex: 1 1 100%;
            text-align: left;
            margin-top: 0;
        }

    .clienteNombre {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 480px) {
    .clienteContenedor {
        padding: 16px 14px;
    }
}

/* ------------------------------------------------------------
   Cabecera de pantalla (título + acciones)
   Sustituye al h2 con línea inferior de MenusTitulos.css: el
   título queda a la izquierda y las acciones a la derecha.
   ------------------------------------------------------------ */
.pantallaCabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

/* El título es un h2 en unas pantallas y un asp:Label (o sea un
   span) en otras: la clase vale para los dos. */
h2.pantallaTitulo,
.pantallaTitulo {
    display: block;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--azulCorporativo);
    /* MenusTitulos.css pinta una línea gris bajo todos los h2 */
    border-bottom: none;
}

    /* Algunos títulos llevan delante un icono de Font Awesome */
    h2.pantallaTitulo i,
    .pantallaTitulo i {
        margin-right: 8px;
        font-size: 0.85em;
        color: inherit;
        vertical-align: baseline;
    }

    h2.pantallaTitulo .EditTituloVotaciones {
        color: inherit;
    }

/* Bloque de la izquierda de .pantallaCabecera cuando bajo el título
   va más información (el resumen de la votación en
   Masters/EditVotacion.master). Ocupa todo el ancho que dejan libre
   las acciones, que siguen a la derecha con su propio tamaño. */
.pantallaCabeceraTexto {
    /* Base de 320px: cuando no caben ese ancho y las acciones en la
       misma fila, las acciones bajan a la siguiente en lugar de
       estrujar el título y el resumen en una columna estrecha. */
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* Nombres de votación largos, sin espacios, parten la línea en
       vez de desbordar la pantalla. */
    .pantallaCabeceraTexto .pantallaTitulo {
        overflow-wrap: anywhere;
    }

    /* .texto-info de Site.css trae margen inferior: aquí la separación
       la pone el gap del bloque. */
    .pantallaCabeceraTexto .texto-info {
        margin: 0;
        overflow-wrap: anywhere;
    }

@media screen and (max-width: 768px) {
    .pantallaCabeceraTexto {
        flex-basis: 100%;
    }

        .pantallaCabeceraTexto .pantallaTitulo {
            font-size: 1.25rem;
        }

        .pantallaCabeceraTexto .texto-info {
            font-size: 0.85rem;
        }
}

/* Variante de .pantallaCabecera alineada por abajo: la última línea
   del bloque de la izquierda (el resumen de la votación), los botones
   de acción y la gráfica de participación comparten la misma base.
   La usa Masters/EditVotacion.master. */
.pantallaCabeceraAbajo,
.pantallaCabeceraAbajo .pantallaAcciones {
    align-items: flex-end;
}

/* ------------------------------------------------------------
   Edición de votación (Masters/EditVotacion.master)
   Menú lateral a la izquierda y contenido de la pantalla a la
   derecha.
   El HTML de las opciones lo genera OpcionVotacion.getHtml en
   EditVotacion.master.vb.
   ------------------------------------------------------------ */
.edicionVotacion {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    /* Aire extra respecto a la cabecera de la votación (título,
       resumen y gráfica): se suma al gap de .pantallaGestion. */
    margin-top: 16px;
}

.edicionVotacionContenido {
    flex: 1 1 auto;
    min-width: 0;
}

/* El menú va en una tarjeta blanca, como las rejillas nuevas */
.menuEdicion {
    flex: 0 0 240px;
    box-sizing: border-box;
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.menuEdicionLista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .menuEdicionLista li {
        display: block;
        margin: 0;
        padding: 0;
    }

/* Separador entre grupos de opciones */
.menuEdicionLista .menuEdicionSeparador {
    height: 0;
    margin: 6px 4px;
    border-top: 1px solid #eef1f5;
}

.menuEdicionOpcion,
a.menuEdicionOpcion:link,
a.menuEdicionOpcion:visited {
    display: block;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
}

a.menuEdicionOpcion:hover {
    color: var(--azulCorporativo);
    font-weight: 400;
    text-decoration: none;
    background-color: #f4f7fb;
}

/* Opción de la pantalla actual: fondo azul claro y marca a la
   izquierda en el azul corporativo */
.menuEdicionOpcionActiva,
a.menuEdicionOpcionActiva:link,
a.menuEdicionOpcionActiva:visited,
a.menuEdicionOpcionActiva:hover {
    font-weight: 600;
    color: var(--azulCorporativo);
    background-color: #eaf2fd;
    box-shadow: inset 3px 0 0 var(--azulCorporativo);
}

/* Opciones aún no disponibles (votación nueva sin guardar) */
.menuEdicionOpcionInactiva,
a.menuEdicionOpcionInactiva:link,
a.menuEdicionOpcionInactiva:visited,
a.menuEdicionOpcionInactiva:hover {
    color: #b0b8c4;
    background-color: transparent;
    cursor: default;
}

/* Aviso de votación de pruebas, en la cabecera del menú. Mismo tono
   rojo que el icono de error de los modales. */
.menuEdicionPruebas {
    margin-bottom: 8px;
    padding: 10px 12px;
    text-align: center;
    background-color: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 8px;
}

.menuEdicionPruebasTitulo {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #b42318;
}

.menuEdicionPruebasEnlace,
a.menuEdicionPruebasEnlace:link,
a.menuEdicionPruebasEnlace:visited {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #b42318;
    text-decoration: underline;
}

a.menuEdicionPruebasEnlace:hover {
    color: #8a1a12;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    /* No hay ancho para dos columnas: el menú pasa encima del
       contenido y ocupa todo el ancho. */
    .edicionVotacion {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .menuEdicion {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Acción secundaria con aspecto de botón sencillo con icono.
   .botonAccion es el mismo aspecto con nombre genérico, para las
   acciones de cabecera de cualquier pantalla (descargar, exportar,
   nuevo registro…); .botonRecargar se queda como estaba para las
   pantallas que ya la usan. */
.botonAccion,
a.botonAccion:link,
a.botonAccion:visited,
.botonRecargar,
a.botonRecargar:link,
a.botonRecargar:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--azulCorporativo);
    background-color: #ffffff;
    border: 1px solid #c7d0db;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

a.botonAccion:hover,
a.botonRecargar:hover {
    color: var(--azulCorporativo);
    font-weight: 500;
    text-decoration: none;
    background-color: #f4f7fb;
    border-color: var(--azulCorporativo);
}

/* Dentro del botón, el icono y el rótulo toman su color */
.botonAccion i,
.botonAccion span {
    color: inherit;
}

.botonRecargarIcono {
    display: block;
    flex: 0 0 auto;
}


@media screen and (max-width: 480px) {
    /* En pantallas estrechas el botón se queda sólo con el icono */
    .botonRecargarTexto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .botonRecargar,
    a.botonRecargar:link,
    a.botonRecargar:visited {
        gap: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   Bloque de usuario que SiteFormularios.master inyecta en la
   cabecera (ContentPlaceHolderHeader)
   Va todo en una fila, `.cabeceraSesion`: créditos, los accesos a
   «Mi cuenta» y «Mis datos» —píldoras `.cabeceraBoton`, para que se
   vean pulsables—, el nombre del usuario y el cierre de sesión.
   Lo único que llega de Site.css son las clases `divGridNumCreditos*`
   que el code-behind pone a la cifra de créditos, reajustadas aquí
   para el fondo azul de la cabecera.
   ------------------------------------------------------------ */

/* Nombre del cliente y del cliente administrador. Site.css los pinta
   en azul oscuro (#00384b) y el primero a 16pt: sobre el azul
   corporativo no se leen y no caben en el alto de la cabecera fija.
   Van uno debajo del otro, como cuando los separaba un <br>. */
.cabeceraFija .nombreCliente,
.cabeceraFija .nombreClienteAdministrador {
    display: block;
    color: #ffffff;
    line-height: 1.3;
}

.cabeceraFija .nombreCliente {
    font-size: 0.95rem;
    font-weight: 600;
}

.cabeceraFija .nombreClienteAdministrador {
    font-size: 0.75rem;
    font-weight: 300;
    color: #cfdcee;
}

/* Al llevar dos líneas, este bloque no puede forzar una sola */
.cabeceraFija .cabeceraUsuario {
    white-space: normal;
    text-align: right;
}

/* Todo el texto del bloque, en blanco: cubre las etiquetas (que son
   <span>) y los iconos de Font Awesome, que heredaban el gris del
   body. Los enlaces ya los pone en blanco `.cabeceraFija a`. */
.cabeceraFija .cabeceraSesion,
.cabeceraFija .cabeceraSesion span,
.cabeceraFija .cabeceraSesion i {
    color: #ffffff;
}

/* Dentro de las píldoras el rótulo y el icono toman el color del
   propio botón, que se aclara al pasar el ratón. */
.cabeceraFija .cabeceraBoton span,
.cabeceraFija .cabeceraBoton i {
    color: inherit;
}

/* Los dos accesos («Mi cuenta» y «Mis datos»), juntos y algo más
   apretados entre sí que con el resto de la fila, para que se lean
   como un grupo. */
.cabeceraSesionAccesos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

/* Créditos disponibles: rótulo tenue y cifra en píldora, para que no
   compita con los accesos ni con el nombre del cliente. */
.cabeceraCreditos {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cabeceraFija .cabeceraCreditosRotulo {
    font-size: 12px;
    font-weight: 300;
    color: #cfdcee;
}

/* La cifra: la clase real la pone mostrarCreditos() en el code-behind
   (`divGridNumCreditos` o `divGridNumCreditosNegativos`, de Site.css:
   caja azul o roja a 12pt). Sobre el azul de la cabecera resultan
   demasiado pesadas, así que aquí se rebajan a píldora; se mantiene
   el aviso en rojo cuando los créditos se agotan. */
.cabeceraFija .cabeceraCreditos .divGridNumCreditos,
.cabeceraFija .cabeceraCreditos .divGridNumCreditosNegativos {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

.cabeceraFija .cabeceraCreditos .divGridNumCreditosNegativos {
    color: #ffffff;
    background: rgba(224, 62, 45, 0.85);
}

/* Nombre del usuario de la sesión: dato secundario, en tono tenue y
   recortado con puntos suspensivos si es largo. */
.cabeceraFija .cabeceraSesionUsuario {
    max-width: 14em;
    overflow: hidden;
    font-size: 12px;
    color: #cfdcee;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cerrar sesión: mismo aspecto de píldora verde que el botón de
   salir de la maqueta (`.cabeceraBotonSalir`). Es un LinkButton, o
   sea un <a>, así que hay que repetir los estados. */
.cabeceraFija .lnkCabecera,
.cabeceraFija a.lnkCabecera:link,
.cabeceraFija a.lnkCabecera:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    color: var(--verdeCorporativo);
    border: 1px solid var(--verdeCorporativo);
    border-radius: 999px;
    text-decoration: none;
}

.cabeceraFija a.lnkCabecera:hover {
    color: var(--verdeCorporativo);
    text-decoration: none;
    border-color: var(--verdeCorporativo);
    background-color: rgba(196, 255, 77, 0.15);
}

.cabeceraFija .lnkCabecera i {
    color: inherit;
}

/* El desplegable de idiomas (oculto salvo en votaciones
   multiidioma) no debe heredar el blanco del texto: va sobre fondo
   claro propio del control. */
.cabeceraFija #DIVIdiomas select {
    color: #333333;
}

@media screen and (max-width: 768px) {
    /* No hay sitio para los rótulos: se dejan sólo los iconos de los
       accesos (de eso se encarga `.cabeceraBotonTexto`) y se retiran
       los créditos y el nombre del usuario. El texto sigue en el
       `title` y disponible para los lectores de pantalla. */
    .cabeceraFija .cabeceraSesionUsuario,
    .cabeceraFija #divInfoCreditos {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.botonEmitirCertificado
{
    display: inline-block;
    margin: 18px 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500 !important;
    color: #fff !important;
    background-color: #00255b;
    background-image: none;
    border: 1px solid #00255b;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.botonEmitirCertificado:hover
{
    color: #00255b !important;
    background-color: #fff;
}

.divMensaje
{
    padding: 10px;
    border-radius: 4px;
}

.divMensajeError
{
    background-color: #ebd0d0;
    color: #811212;
}

.divMensajeOK
{
    background-color: #D0EBDB;
    color: #12813E;
}

.botonConfirmarCodigo
{
    display: inline-block;
    width: 48%;
    height: 46px;
    margin: 8px 0px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #00255B;
    border: 1px solid #00255B;
    border-radius: 8px;
    cursor: pointer;
}

.botonConfirmarCodigo:hover
{
    background-color: #001a42;
    border-color: #001a42;
}

.txtConfirmarCodigo
{
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 1rem;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c9d2dd;
    border-radius: 8px;
    outline: none;
}

.txtConfirmarCodigo:hover
{
    border-color: #9aa9bd;
}

.botonReenviarCodigo
{
    display: inline-block;
    /*width: 48%;*/
    height: 46px;
    margin: 8px 0px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #bb8cff;
    background-color: #fff;
    border: 1px solid #bb8cff;
    border-radius: 8px;
    cursor: pointer;
}

.botonReenviarCodigo:hover
{
    background-color: #bb8cff;
    color: #fff;
}

.contenedorBotonesVotar
{
    display: flex;
    gap: 4px;
}

.contenedorBotonesVotar > .botonConfirmarCodigo, .botonReenviarCodigo
{
    flex:1;
}

@media screen and (max-width: 768px)
{

    .botonConfirmarCodigo
    {
        height: 48px;
        font-size: 16px;
        padding: 0px 8px;
    }

    .botonReenviarCodigo
    {
        height: 48px;
        font-size: 16px;
        padding: 0px 8px;
    }

    .txtConfirmarCodigo
    {
        height: 48px;
        font-size: 16px;
    }
}

.LabelErrorVoto
{
    font-size: 10pt;
    font-size: bold;
    color: #ff0000;
    /*font-family: 'Open Sans' , sans-serif;*/
}
.LabelMensajeVoto
{
    font-size: 10pt;
    font-size: bold;
    color: blue;
    /*font-family: 'Open Sans' , sans-serif;*/
}

/* ------------------------------------------------------------
   Pantalla de participación (Votaciones/Participacion.aspx)
   Una sola tarjeta blanca sobre el fondo del portal, dividida en
   bandas: cabecera, alcance del dato, cifras y gráfica, frecuencia
   de actualización, nota y pie legal.
   ------------------------------------------------------------ */
.participacionPantalla {
    max-width: 900px;
    margin: 0 auto;
}

.participacionTarjeta {
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    /* Las bandas llegan a sangre: el recorte las ajusta a las esquinas */
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.participacionCabecera {
    padding: 28px 32px 0 32px;
}

.participacionTitulo {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
    /* Los títulos del portal llevan una línea inferior que aquí sobra */
    border-bottom: none;
    overflow-wrap: break-word;
}

.participacionPeriodo {
    margin: 8px 0 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #6b7280;
}

/* Alcance del dato: tono cálido, para distinguirlo del resto de la
   tarjeta sin llegar a leerse como una advertencia de error. */
.participacionAviso {
    margin: 22px 32px 0 32px;
    padding: 16px 18px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #7a5a12;
    background-color: #fdf1de;
    border: 1px solid #f0dcb8;
    border-radius: 8px;
}

.participacionAvisoTitulo {
    font-weight: 700;
}

/* Cifras a la izquierda y gráfica a la derecha */
.participacionDatos {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px 32px 28px 32px;
}

.participacionCifras {
    flex: 1 1 auto;
    min-width: 0;
}

.participacionFila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f5;
}

.participacionFilaEtiqueta {
    font-size: 0.95rem;
    color: #4b5563;
}

.participacionFilaValor {
    font-size: 0.95rem;
    color: #1f2937;
    white-space: nowrap;
}

/* El total cierra el bloque: sin línea inferior y resaltado */
.participacionFilaTotal {
    border-bottom: none;
}

    .participacionFilaTotal .participacionFilaEtiqueta,
    .participacionFilaTotal .participacionFilaValor {
        font-weight: 700;
        color: #1f2937;
    }

.participacionGrafica {
    flex: 0 0 auto;
    text-align: center;
}

.participacionGraficaImagen {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Banda de la frecuencia de refresco: separada del cuerpo por líneas
   y con un fondo apenas distinto, porque es control, no dato. */
.participacionRefresco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 16px 32px;
    background-color: #faf9f7;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
}

.participacionRefrescoControl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.participacionRefrescoEtiqueta {
    font-size: 1rem;
    color: #374151;
}

select.participacionRefrescoSelector {
    box-sizing: border-box;
    min-width: 200px;
    height: 34px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #c7d0db;
    border-radius: 6px;
    cursor: pointer;
}

    select.participacionRefrescoSelector:focus {
        outline: none;
        border-color: var(--azulClaroCorporativo);
        box-shadow: 0 0 0 3px rgba(26, 115, 233, 0.15);
    }

.participacionRefrescoMomento {
    font-size: 0.9rem;
    color: #9aa3af;
}

/* Nota sobre qué implica la frecuencia elegida: texto secundario */
.participacionNota {
    padding: 16px 32px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #9aa3af;
    border-bottom: 1px solid #eef1f5;
}

.participacionPie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px 32px;
}

.participacionPieTexto {
    flex: 1 1 420px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
}

.participacionPieEnlace,
a.participacionPieEnlace:link,
a.participacionPieEnlace:visited {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--azulClaroCorporativo);
    text-decoration: none;
}

a.participacionPieEnlace:hover {
    color: var(--azulClaroCorporativo);
    text-decoration: underline;
}

/* Marca: fila propia del pie, nunca a continuación del texto legal */
.participacionPieMarca {
    flex: 1 1 100%;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b7280;
}

@media screen and (max-width: 768px) {
    .participacionCabecera {
        padding: 20px 18px 0 18px;
    }

    .participacionTitulo {
        font-size: 1.4rem;
    }

    .participacionAviso {
        margin: 16px 18px 0 18px;
    }

    /* No hay ancho para las dos columnas: la gráfica pasa debajo de
       las cifras, centrada. */
    .participacionDatos {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 18px 18px 22px 18px;
    }

    .participacionRefresco {
        padding: 14px 18px;
    }

    .participacionNota,
    .participacionPie {
        padding: 14px 18px;
    }
}

/* Cuenta atrás hasta el próximo refresco, junto al desplegable */
.participacionCuenta {
    font-size: 0.9rem;
    color: #6b7280;
    /* Los segundos cambian cada tick: sin ancho mínimo el texto que
       tiene al lado bailaría al pasar de dos cifras a una. */
    min-width: 200px;
}

/* ------------------------------------------------------------
   Recuento presencial (Votaciones/RecuentoPresencial.aspx)
   Los puntos y opciones los generan PuntoCls.getDivDatosPunto y
   OpcionCls.getDivOpcion, con las mismas clases que la papeleta de
   voto (PapeletaVotacion.css). Por eso todo va limitado a
   .recuentoPresencial: la papeleta no cambia.
   Cada punto es una tarjeta; cada opción, una fila con su nombre a
   la izquierda y las cifras a la derecha.
   ------------------------------------------------------------ */
.recuentoPresencial .TablaContenidoPuntos {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
}

    .recuentoPresencial .TablaContenidoPuntos td {
        padding: 0;
    }

/* También en la visualización en cuadrícula: el recuento siempre va
   en columna, un punto debajo de otro. */
.recuentoPresencial .contenedorPuntos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recuentoPresencial .contenedorPunto {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.recuentoPresencial .cabeceraPunto {
    padding: 14px 18px;
    background-color: #faf9f7;
    border-bottom: 1px solid #eef1f5;
}

.recuentoPresencial .FilaPunto {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

/* La raya que precede al título en la papeleta sobra aquí */
.recuentoPresencial .resaltarPunto {
    display: none;
}

.recuentoPresencial .PuntoVotacion {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--azulCorporativo);
}

.recuentoPresencial .contenedorOpcionRecuento {
    min-height: 0;
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid #eef1f5;
}

    .recuentoPresencial .contenedorOpcionRecuento:last-child {
        border-bottom: none;
    }

/* El voto en blanco (OpcionCls.getDivOpcionTextBlanco) llega como un
   .FilaOpcion suelto, sin el .contenedorOpcionRecuento que envuelve al
   resto de opciones: se le da el mismo relleno aquí. */
.recuentoPresencial .contenedorPunto > .FilaOpcion {
    box-sizing: border-box;
    padding: 10px 18px;
}

/* El code-behind pinta primero las cifras y después el nombre de la
   opción: el nombre se adelanta con "order" para leerse a la izquierda. */
.recuentoPresencial .FilaOpcion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
}

    .recuentoPresencial .FilaOpcion .Voto {
        order: -1;
        flex: 1 1 220px;
        min-width: 0;
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.4;
        color: #374151;
    }

    /* Rótulo "Nº de papeletas" delante de la segunda cifra (clientes
       con recuento sin peso) */
    .recuentoPresencial .FilaOpcion > span:not(.Voto) {
        font-size: 0.8rem;
        color: #6b7280;
        white-space: nowrap;
    }

.recuentoPresencial .txtRecuento {
    box-sizing: border-box;
    width: 110px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: right;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #c9d2dd;
    border-radius: 8px;
    outline: none;
}

    .recuentoPresencial .txtRecuento:hover {
        border-color: #9aa9bd;
    }

    .recuentoPresencial .txtRecuento:focus {
        border-color: var(--azulCorporativo);
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

    /* Fuera del periodo de recuento las cifras son de sólo lectura */
    .recuentoPresencial .txtRecuento:disabled {
        color: #6b7280;
        background-color: #f2f4f7;
        border-color: #dde3ea;
    }

@media screen and (max-width: 768px) {
    .recuentoPresencial .cabeceraPunto,
    .recuentoPresencial .contenedorOpcionRecuento,
    .recuentoPresencial .contenedorPunto > .FilaOpcion {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* 16px reales: por debajo iOS hace zoom al enfocar el campo */
    .recuentoPresencial .txtRecuento {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   Resultados (Votaciones/Resultados.aspx)
   Arriba, la tarjeta de participación (clases .participacion*
   compartidas con Participacion.aspx). Debajo, una tarjeta por punto
   que genera el code-behind: gráficas de recuento y tablas con el
   aspecto de las rejillas nuevas (.gridNuevo).
   ------------------------------------------------------------ */

/* Rótulo de sección dentro de una tarjeta ("PARTICIPACIÓN") */
.resultadosSeccionTitulo {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--azulCorporativo);
}

.resultadosPuntos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    /* Votación sin finalizar: no hay resultados que mostrar */
    .resultadosPuntos:empty {
        display: none;
    }

.resultadosPunto {
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.resultadosPuntoCabecera {
    padding: 14px 20px;
    background-color: #faf9f7;
    border-bottom: 1px solid #eef1f5;
}

.resultadosPuntoTitulo {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--azulCorporativo);
}

.resultadosPuntoCuerpo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 20px 20px;
}

/* Las tres gráficas de recuento, repartidas en columnas que se
   apilan cuando no caben. */
.resultadosGraficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}

.resultadosGrafica {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid #eef1f5;
    border-radius: 10px;
}

    .resultadosGrafica figcaption {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-align: center;
        text-transform: uppercase;
        color: #6b7280;
    }

    /* La imagen se genera con un ancho fijo en píxeles: nunca desborda */
    .resultadosGrafica img {
        display: block;
        max-width: 100%;
        height: auto;
    }

.resultadosSubtitulo {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--azulCorporativo);
    /* MenusTitulos.css pinta una línea bajo los títulos */
    border-bottom: none;
}

.resultadosNota {
    margin: -6px 0 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: #6b7280;
}

/* Cifras de las tablas de resultados, alineadas a la derecha */
.gridNuevo .resultadosNumero {
    text-align: right;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .resultadosPuntoCabecera {
        padding: 12px 14px;
    }

    .resultadosPuntoCuerpo {
        padding: 14px;
    }
}

/* ------------------------------------------------------------
   Auditoría (Votaciones/Auditoria.aspx)
   Tarjeta con la explicación y el botón y, debajo, una tarjeta por
   comprobación. El HTML de las comprobaciones lo genera
   VotacionCls.AuditarVotación.
   ------------------------------------------------------------ */
.auditoriaPanel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    padding: 20px 24px;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.auditoriaTexto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}

.auditoriaAcciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Tarjetas de resultado, en columnas que se reparten el ancho y se
   apilan cuando no caben. */
.auditoriaResultado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
}

    /* Antes de auditar el contenedor está vacío: no ocupa sitio */
    .auditoriaResultado:empty {
        display: none;
    }

.auditoriaBloque {
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

/* Título de la comprobación a la izquierda, distintivo a la derecha */
.auditoriaCabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 14px 18px;
    background-color: #faf9f7;
    border-bottom: 1px solid #eef1f5;
}

.auditoriaTitulo {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--azulCorporativo);
}

.auditoriaDatos {
    margin: 0;
    padding: 4px 18px;
    list-style: none;
}

    .auditoriaDatos li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        font-size: 0.9rem;
        line-height: 1.45;
        color: #4b5563;
        border-bottom: 1px solid #eef1f5;
    }

        .auditoriaDatos li:last-child {
            border-bottom: none;
        }

.auditoriaValor {
    flex: 0 0 auto;
    font-weight: 700;
    color: #1f2937;
}

/* ------------------------------------------------------------
   Aviso informativo
   Caja en el azul de información, con un rótulo en negrita y, a
   continuación, el texto. Genérica: la usan el aviso de refresco
   desactivado de Participacion.aspx y la nota de uso restringido
   de CensoInterventores.aspx.
   No lleva márgenes propios: los pone cada pantalla, porque no
   todas lo colocan igual.
   ------------------------------------------------------------ */
.avisoInfo {
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1f5fa8;
    background-color: #eaf2fd;
    border: 1px solid #cfe0f7;
    border-radius: 8px;
}

.avisoInfoTitulo {
    display: block;
    font-weight: 700;
    color: #12457f;
}

/* Dentro de la tarjeta de participación las bandas llegan a sangre,
   así que este aviso necesita su propio margen para alinearse con
   ellas. Acompaña a .avisoInfo, que es quien le da el aspecto. */
.participacionAvisoManual {
    margin: 18px 32px 0 32px;
}

@media screen and (max-width: 768px) {
    .participacionAvisoManual {
        margin: 14px 18px 0 18px;
    }
}

/* ------------------------------------------------------------
   Ventanas modales (aspecto común)
   Juego de clases genérico, pensado para ir migrando los modales
   del portal uno a uno. Lo usan ya:
     - ControlesPersonalizados/AlertaConfirmacion.ascx
     - ControlesPersonalizados/InfoEnvioSES.ascx (resultado de envíos)
     - Votaciones/Censo.aspx (listados e importación desde fichero)
     - Votaciones/PreRegistros.aspx (imagen e importación desde fichero)
     - Votaciones/CensoInterventores.aspx (emisión de listados)
     - Votaciones/Participacion.aspx (información legal)
   No reutiliza .btn-formu de Site.css, que sigue sirviendo a
   las pantallas aún sin migrar y no debe cambiar de aspecto.
   Hay dos formas de mostrar la ventana:
     - Con un ModalPopupExtender, que coloca el panel él mismo y
       pinta el velo en un div propio: .modalFondo.
     - Con marcado propio de la página, donde el velo es además el
       que centra la ventana: .modalCapa, que se abre añadiéndole
       la clase "abierto" desde JavaScript.
   Estructura esperada dentro del Panel .modalPanel:
     .modalCabecera -> .modalIcono (más su clase de tipo),
                       .modalTitulo y .modalCerrar
     .modalCuerpo   -> el contenido. En AlertaConfirmacion ese div
                       lo marca el code-behind con
                       .contenedorMensaje o .contenedorMensajeCentrado
                       según la propiedad "centrado", así que las
                       dos se reajustan aquí, sólo cuando van
                       dentro de un .modalPanel.
     .modalPie      -> los botones, .modalBoton
   ------------------------------------------------------------ */

/* Velo oscuro sobre la página. El ModalPopupExtender lo pinta en
   un div propio a pantalla completa. */
.modalFondo {
    background-color: rgba(17, 24, 39, 0.45);
}

/* Velo de los modales que monta la propia página: además de
   oscurecer, centra la ventana sobre la pantalla. */
.modalCapa {
    /* Oculta hasta que la página le añade la clase "abierto" */
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Por encima de la cabecera fija del portal */
    z-index: 100;
}

    .modalCapa.abierto {
        display: flex;
    }

.modalPanel {
    box-sizing: border-box;
    /* El ancho lo fija cada pantalla en el atributo Width del
       Panel (600px la alerta, 700px el listado de electores): aquí
       sólo se limita para que nunca desborde la pantalla. */
    max-width: 92vw;
    padding: 0;
    /* Los Panel llevan Wrap="False", que impediría el salto de
       línea del texto. */
    white-space: normal !important;
    /* El line-height de 18px del body de Site.css aprieta el texto */
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    /* Las bandas de cabecera y pie llegan a sangre: el recorte las
       ajusta a las esquinas */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
}

/* Dentro de .modalCapa no hay atributo Width que fije el ancho: la
   ventana ocupa lo que le deja el velo hasta su tope y nunca pasa
   del alto de la pantalla, porque el que se desplaza es el cuerpo. */
.modalCapa > .modalPanel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
}

.modalCapa .modalCabecera,
.modalCapa .modalPie {
    flex: 0 0 auto;
}

.modalCapa .modalCuerpo {
    flex: 1 1 auto;
    max-height: none;
}

/* Cabecera: icono del tipo de aviso, título y aspa de cierre */
.modalCabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background-color: #faf9f7;
    border-bottom: 1px solid #eef1f5;
}

/* El icono va en un círculo tenue del color de su tipo. Font Awesome
   aporta la familia y el glifo; el tamaño se fija aquí para que los
   cuatro tipos midan lo mismo. */
.modalIcono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 16px;
    line-height: 1;
    border-radius: 999px;
}

.modalIconoError {
    color: #b42318;
    background-color: #fdecea;
}

.modalIconoAlerta {
    color: #a86a08;
    background-color: #fdf1de;
}

.modalIconoInfo,
.modalIconoNormal {
    color: var(--azulCorporativo);
    background-color: #eaf2fd;
}

/* El título es un h2 o un h3 según la pantalla: la clase manda
   sobre los dos. */
.modalPanel .modalTitulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--azulCorporativo);
    /* MenusTitulos.css pinta una línea bajo los títulos */
    border-bottom: none;
    overflow-wrap: break-word;
}

/* Aspa de cierre: es un LinkButton, o sea un <a>, así que hay que
   repetir los estados para ganar a los enlaces generales. */
.modalPanel .modalCerrar,
.modalPanel a.modalCerrar:link,
.modalPanel a.modalCerrar:visited {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 1;
    color: #9aa3af;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
}

.modalPanel a.modalCerrar:hover {
    color: #4b5563;
    background-color: #eef1f5;
    border-color: #e3e8ef;
    text-decoration: none;
}

.modalPanel .modalCerrar i {
    color: inherit;
}

/* Cuerpo de la ventana. En AlertaConfirmacion el div lleva
   .contenedorMensaje o .contenedorMensajeCentrado, que le pone el
   code-behind según la propiedad "centrado"; el resto de modales
   usan .modalCuerpo. El contenido se desplaza dentro de la ventana
   cuando es más alto que la pantalla. */
.modalPanel .modalCuerpo,
.modalPanel .contenedorMensaje,
.modalPanel .contenedorMensajeCentrado {
    box-sizing: border-box;
    padding: 22px 24px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
}

/* Site.css lo deja justificado; el texto corto de estos avisos se
   lee mejor alineado a la izquierda. */
.modalPanel .contenedorMensaje {
    text-align: left;
}

/* Campos de datos de la ventana (texto, entero, decimal, fecha y
   desplegable), con el mismo aspecto que los del login.
   .formularioCampo es el mismo campo para los formularios que van en
   la propia pantalla, fuera de un modal (ConfigPreRegistro.aspx). */
.modalPanel .modalCampo,
.formularioCampo {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin-top: 14px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 1rem;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c9d2dd;
    border-radius: 8px;
    outline: none;
}

    .modalPanel .modalCampo:hover,
    .formularioCampo:hover {
        border-color: #9aa9bd;
    }

    .modalPanel .modalCampo:focus,
    .formularioCampo:focus {
        border-color: var(--azulCorporativo);
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

/* La fecha se escribe en formato corto: no necesita todo el ancho */
.modalPanel .modalCampoFecha {
    max-width: 200px;
}

    /* En el mensaje centrado los campos se centran con él */
    .modalPanel .contenedorMensajeCentrado .modalCampo {
        margin-left: auto;
        margin-right: auto;
    }

/* Campo deshabilitado (el code-behind los bloquea cuando no se
   puede editar): se ve claramente inactivo. */
.modalPanel .modalCampo:disabled,
.modalPanel .modalCampo[disabled],
.formularioCampo:disabled,
.formularioCampo[disabled] {
    color: #6b7280;
    background-color: #f2f4f7;
    border-color: #dde3ea;
    cursor: default;
}

/* Anchos reducidos para datos cortos (identificador, teléfono, peso) */
.modalPanel .modalCampoMedio,
.formularioCampoMedio {
    max-width: 260px;
}

.modalPanel .modalCampoCorto,
.formularioCampoCorto {
    max-width: 120px;
}

/* ------------------------------------------------------------
   Formulario (datos del elector en Censo.aspx, del interventor…)
   Cada .modalFila lleva la etiqueta encima y debajo el campo, con
   su texto de ayuda a continuación. .modalFilaDoble pone dos
   .modalFila en la misma línea; en pantallas estrechas se apilan.
   Las mismas reglas valen, con prefijo .formulario, para los
   formularios de la propia pantalla (fuera de un modal):
     .formulario / .formularioFila / .formularioFilaDoble /
     .formularioEtiqueta / .formularioControl /
     .formularioControlConmutador / .formularioAyuda
   ------------------------------------------------------------ */
.modalPanel .modalFormulario,
.formulario {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modalPanel .modalFila,
.formularioFila {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.modalPanel .modalFilaDoble,
.formularioFilaDoble {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.modalPanel .modalEtiqueta,
.formularioEtiqueta {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--azulCorporativo);
}

.modalPanel .modalFilaControl,
.formularioControl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    /* Fila con un interruptor (el-checkbox): el interruptor mantiene
       su tamaño en vez de estirarse a todo el ancho de la columna. */
    .modalPanel .modalFilaConmutador,
    .formularioControlConmutador {
        align-items: flex-start;
    }

    /* Dentro de la fila la separación la pone el gap, no el margen
       que .modalCampo trae para los modales de un solo campo. */
    .modalPanel .modalFilaControl .modalCampo,
    .formularioCampo {
        margin-top: 0;
    }

/* Texto de ayuda bajo el campo */
.modalPanel .modalAyuda,
.formularioAyuda {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7280;
}

    /* Suelta dentro de un bloque (nota bajo el título, antes de las
       opciones) necesita separarse de lo que viene detrás. */
    .modalPanel .modalSeccion > .modalAyuda,
    .formularioSeccion > .formularioAyuda {
        margin-bottom: 8px;
    }

/* Prefijo fijo delante del campo (el del identificador).
   .formularioCampoConPrefijo es el mismo fuera de un modal
   (PreRegistro.aspx). */
.modalPanel .modalCampoConPrefijo,
.formularioCampoConPrefijo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modalPanel .modalPrefijo:not(:empty),
.formularioPrefijo:not(:empty) {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

    /* Sin prefijo el span sigue siendo un elemento del flex y el gap
       desplaza el campo: se retira para que quede alineado con el
       resto. */
    .modalPanel .modalPrefijo:empty,
    .formularioPrefijo:empty {
        display: none;
    }

@media screen and (max-width: 768px) {
    .modalPanel .modalFilaDoble,
    .formularioFilaDoble {
        grid-template-columns: minmax(0, 1fr);
    }

    .modalPanel .modalCampoMedio,
    .modalPanel .modalCampoCorto,
    .formularioCampoMedio,
    .formularioCampoCorto {
        max-width: none;
    }
}

/* ------------------------------------------------------------
   Formulario de pantalla (fuera de un modal)
   Tarjeta blanca dividida en .formularioSeccion, con las filas del
   bloque de arriba (.formularioFila…). La usa ConfigPreRegistro.aspx.
   ------------------------------------------------------------ */
.formularioTarjeta {
    box-sizing: border-box;
    padding: 22px 24px;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

/* Varias .formularioFila seguidas en la misma línea, cada una con su
   ancho natural (a diferencia de .formularioFilaDoble, que reparte
   el ancho en dos columnas iguales). Saltan de línea si no caben. */
.formularioFilaEnLinea {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 32px;
}

/* Dos .formularioFila en la misma línea: la primera con el ancho de
   .formularioCampoMedio y la segunda con el resto (NIF/CIF y nombre
   en EditClientes.aspx). En pantallas estrechas se apilan. */
.formularioFilaMedioResto {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

@media screen and (max-width: 768px) {
    .formularioFilaMedioResto {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Varias .formularioFila en columnas iguales, tantas como quepan
   (cuatro en una pantalla ancha); en pantallas estrechas bajan a
   menos columnas hasta quedar una debajo de otra. */
.formularioCuadricula {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    align-items: start;
    gap: 16px 24px;
}

/* Texto de varias líneas: crece con el contenido en vez de tener la
   altura fija de un campo de una línea. El segundo selector es el
   mismo campo dentro de un modal, donde .modalPanel .modalCampo fija
   la altura con más peso (modal de la opción en EditPuntoAVotar). */
.formularioCampoArea,
.modalPanel .modalCampo.formularioCampoArea {
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Fecha y hora en la misma línea. Los validadores de la máscara
   (MaskedEditValidator) se pintan a continuación. */
.formularioCamposFecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .formularioCamposFecha .formularioCampo {
        width: 150px;
    }

        .formularioCamposFecha .formularioCampoHora {
            width: 100px;
        }

/* Plantilla de comunicación (Votaciones/ConfigComunicaciones.aspx y
   pestaña de comunicaciones de Clientes/EditClientes.aspx): el título
   del bloque encima y, debajo, las etiquetas que se pueden usar en el
   texto a la izquierda, en línea con el asunto, y el asunto y el
   editor a la derecha. En pantallas estrechas las etiquetas quedan
   encima del asunto. */
.plantillaComunicacion {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

/* El título del bloque es un asp:Label (span): debe ocupar su línea */
.formularioSeccion > .formularioSeccionTitulo {
    display: block;
    margin: 0 0 12px 0;
}

.formularioSeccion > .formularioFila > .formularioSeccionTitulo {
    display: block;
    margin: 0;
}

.etiquetasPlantilla {
    box-sizing: border-box;
    padding: 14px 16px;
    background-color: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
}

/* Rótulo "Etiquetas": mismo aspecto que .formularioEtiqueta (el del
   asunto, con el que va alineado) pero en gris, porque no es un campo. */
.formularioEtiqueta.etiquetasPlantillaTitulo {
    color: #6b7280;
}

    /* Dos grupos: datos del elector y datos de la votación */
    .etiquetasPlantilla ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .etiquetasPlantilla ul + ul {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e3e8ef;
        }

    .etiquetasPlantilla li {
        padding: 2px 0;
        font-size: 0.8rem;
        color: #374151;
        overflow-wrap: anywhere;
    }

@media screen and (max-width: 768px) {
    .plantillaComunicacion {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Casilla de verificación con su texto (asp:CheckBox, que se pinta
   como span > input + label). La marca, en el azul corporativo. */
.formularioCasilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #374151;
}

    .formularioCasilla input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--azulCorporativo);
        cursor: pointer;
    }

    .formularioCasilla label {
        cursor: pointer;
    }

/* Casilla seguida de un campo de texto en la misma línea ("Habilitar
   la opción de VOTO EN BLANCO con el texto: [____]") */
.formularioCasillaTexto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

    .formularioCasillaTexto .formularioCampo {
        flex: 1 1 240px;
        max-width: 360px;
    }

/* Zona de un fichero (adjunto o imagen): el Uploader cuando no hay
   fichero; el enlace o la miniatura y el botón de eliminar cuando lo
   hay. */
.formularioArchivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.formularioArchivoEnlace,
a.formularioArchivoEnlace:link,
a.formularioArchivoEnlace:visited {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--azulClaroCorporativo);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    a.formularioArchivoEnlace:hover {
        text-decoration: underline;
    }

.formularioImagen {
    display: block;
    max-width: 160px;
    max-height: 120px;
    height: auto;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
}

/* Enlace con icono junto a unos campos ("Inicio rápido" al lado de
   la fecha de inicio de votaciones). */
.formularioEnlaceIcono {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    font-size: 0.85rem;
    color: var(--azulClaroCorporativo);
}

    .formularioEnlaceIcono a,
    .formularioEnlaceIcono a:link,
    .formularioEnlaceIcono a:visited {
        font-weight: 500;
        color: var(--azulClaroCorporativo);
        text-decoration: none;
    }

    .formularioEnlaceIcono a:hover {
        text-decoration: underline;
    }

/* Interruptor (el-checkbox) delante de su rótulo, en la misma línea:
   activa o desactiva lo que dice el rótulo ("Pedir teléfono móvil"). */
.formularioConmutadorEtiqueta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .formularioConmutadorEtiqueta .formularioEtiqueta {
        min-width: 0;
    }

/* Opción de configuración: el interruptor delante y, a su derecha, el
   rótulo con su explicación debajo (pestaña de configuración de
   EditClientes.aspx). El interruptor queda a la altura del rótulo
   aunque la explicación ocupe varias líneas. */
.formularioOpcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

    .formularioOpcion > .el-switch {
        flex: 0 0 auto;
    }

.formularioOpcionTexto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Campo que acompaña a la opción ("Créditos por SMS"): rótulo y campo
   corto en la misma línea, bajo la explicación. */
.formularioOpcionCampo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* Opciones en dos columnas; en pantallas estrechas, en una. */
.formularioOpciones2Columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px 40px;
}

@media screen and (max-width: 900px) {
    .formularioOpciones2Columnas {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .formularioTarjeta {
        padding: 18px 16px;
    }
}

/* Pie con los botones, alineados a la derecha */
.modalPie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background-color: #faf9f7;
    border-top: 1px solid #eef1f5;
}

/* El texto del pie que acompaña a los botones (la marca, una nota),
   pegado al margen izquierdo. */
.modalPanel .modalPieMarca {
    margin-right: auto;
    font-size: 0.85rem;
    color: #9aa3af;
}

/* Los botones son <input type="button"> en unos modales y <a> en
   otros: los estados del enlace se repiten para ganar a los enlaces
   generales del portal. */
.modalPanel .modalBoton,
.modalPanel a.modalBoton:link,
.modalPanel a.modalBoton:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Separa el icono del rótulo en los botones que son enlaces */
    gap: 8px;
    box-sizing: border-box;
    min-width: 120px;
    height: 42px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}

    /* El icono y el rótulo toman el color del botón */
    .modalPanel .modalBoton i,
    .modalPanel .modalBoton span {
        color: inherit;
    }

/* Aceptar: acción principal, en el azul corporativo */
.modalPanel .modalBotonPrimario,
.modalPanel a.modalBotonPrimario:link,
.modalPanel a.modalBotonPrimario:visited {
    color: #ffffff;
    background-color: var(--azulCorporativo);
    border: 1px solid var(--azulCorporativo);
}

    .modalPanel .modalBotonPrimario:hover,
    .modalPanel a.modalBotonPrimario:hover {
        color: #ffffff;
        font-weight: 500;
        text-decoration: none;
        background-color: #001a42;
        border-color: #001a42;
    }

    .modalPanel .modalBotonPrimario:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.25);
    }

/* Cancelar: acción secundaria, sobre fondo blanco */
.modalPanel .modalBotonSecundario,
.modalPanel a.modalBotonSecundario:link,
.modalPanel a.modalBotonSecundario:visited {
    color: #14213a;
    background-color: #ffffff;
    border: 1px solid #c7d0db;
}

    .modalPanel .modalBotonSecundario:hover,
    .modalPanel a.modalBotonSecundario:hover {
        color: #14213a;
        font-weight: 500;
        text-decoration: none;
        background-color: #f4f7fb;
        border-color: #8a94a3;
    }

    .modalPanel .modalBotonSecundario:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

/* Al pulsarlos, el control los deshabilita y les cambia el rótulo
   por "Trabajando...": deben verse claramente inactivos. */
.modalPanel .modalBoton:disabled {
    color: #9aa3af;
    background-color: #eef1f5;
    border-color: #e3e8ef;
    cursor: default;
}

/* Bloques en que se divide el cuerpo de un modal con varias
   opciones (ordenación, tipo de salida, descargas…). Cada uno va
   separado del anterior por una línea. .formularioSeccion es el
   mismo bloque dentro de una .formularioTarjeta de pantalla. */
.modalPanel .modalSeccion,
.formularioSeccion {
    padding: 18px 0;
    border-top: 1px solid #eef1f5;
}

    .modalPanel .modalSeccion:first-child,
    .formularioSeccion:first-child {
        padding-top: 0;
        border-top: none;
    }

    .modalPanel .modalSeccion:last-child,
    .formularioSeccion:last-child {
        padding-bottom: 0;
    }

/* Título del bloque. Sirve para cualquier nivel de encabezado: lo
   que manda es la clase. */
.modalPanel .modalSeccionTitulo,
.formularioSeccionTitulo {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--azulCorporativo);
    /* MenusTitulos.css pinta una línea bajo los títulos */
    border-bottom: none;
}

/* Texto corrido del bloque (avisos, información legal…) */
.modalPanel .modalSeccion p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}

/* Lista numerada dentro de un bloque (columnas de un fichero de
   importación, pasos a seguir…) */
.modalPanel .modalLista {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
}

    .modalPanel .modalLista li {
        margin: 2px 0;
    }

/* Imagen a tamaño grande dentro del modal (imagen del pre-registro
   en PreRegistros.aspx). Nunca pasa del ancho de la ventana ni del
   alto de la pantalla. */
.modalPanel .modalImagen {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    margin: 0 auto;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
}

/* Zona de arrastre para subir ficheros (importación de electores en
   Censo.aspx y de pre-registros en PreRegistros.aspx). .formularioZonaSubida es
   la misma zona fuera de un modal (logotipo en EditClientes.aspx). */
.modalPanel .modalZonaSubida,
.formularioZonaSubida {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 22px 16px;
    text-align: center;
    background-color: #f8fafc;
    border: 2px dashed #c7d0db;
    border-radius: 12px;
    transition: border-color .15s linear, background-color .15s linear;
}

    .modalPanel .modalZonaSubida:hover,
    .formularioZonaSubida:hover {
        border-color: var(--azulClaroCorporativo);
        background-color: #f4f7fb;
    }

.modalPanel .modalZonaSubidaIcono,
.formularioZonaSubidaIcono {
    display: block;
    width: 40px;
    height: auto;
    fill: #9aa3af;
}

.modalPanel .modalZonaSubidaTexto,
.formularioZonaSubidaTexto {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Fuera del modal el hueco con el Uploader lo pone el gap de
   .formularioSubida, no el margen. */
.formularioZonaSubida {
    margin-top: 0;
}

/* Uploader y zona de arrastre, uno debajo del otro */
.formularioSubida {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

    .formularioSubida .formularioZonaSubida {
        align-self: stretch;
    }

/* ------------------------------------------------------------
   Datos principales del cliente (Clientes/EditClientes.aspx)
   Formulario a la izquierda y, en una columna lateral, la vista
   previa de la cabecera de la papeleta y el logotipo. En el móvil
   la columna lateral baja debajo del formulario.
   ------------------------------------------------------------ */
.datosCliente {
    display: grid;
    /* El mismo reparto que tenía la pantalla antes (c-7 / c-5) */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 32px;
}

.datosClienteLateral {
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    padding: 20px;
    background-color: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
}

/* Marco de la vista previa: la cabecera real (.clienteContenedor)
   sobre el blanco de la papeleta. Como la columna es estrecha, el
   logotipo baja debajo del nombre en cuanto no caben juntos. */
.vistaPreviaCabecera {
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
}

    .vistaPreviaCabecera .clienteContenedor {
        padding: 16px 18px;
    }

        .vistaPreviaCabecera .clienteContenedor .titleVoto {
            flex-basis: 180px;
        }

    .vistaPreviaCabecera .clienteNombre {
        font-size: 1.2rem;
    }

    .vistaPreviaCabecera .clienteImagen {
        max-height: 60px;
    }

/* Miniatura del logotipo: el padding separa la imagen del borde y el
   fondo blanco la destaca sobre el gris de la columna. */
.logoCliente {
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff;
}

@media screen and (max-width: 768px) {
    .datosCliente {
        grid-template-columns: minmax(0, 1fr);
    }

    .datosClienteLateral {
        padding: 16px;
    }
}

/* Grupo de opciones de un RadioButtonList o un CheckBoxList, que
   ASP.NET pinta como una tabla. .formularioOpciones es el mismo grupo
   en los formularios de pantalla (EditDatosPrincipales.aspx). */
.modalPanel .modalOpciones,
.formularioOpciones {
    border-collapse: collapse;
}

    .modalPanel .modalOpciones td,
    .formularioOpciones td {
        padding: 3px 20px 3px 0;
    }

    .modalPanel .modalOpciones input,
    .formularioOpciones input {
        margin: 0 6px 0 0;
        vertical-align: middle;
        /* La marca de la opción elegida, en el azul corporativo en
           lugar del azul propio del navegador. */
        accent-color: var(--azulCorporativo);
    }

    .modalPanel .modalOpciones label,
    .formularioOpciones label {
        font-size: 0.95rem;
        color: #374151;
        vertical-align: middle;
        cursor: pointer;
    }

/* Lista de enlaces de descarga: uno debajo de otro, sin necesidad
   de los <br> que los separaban. */
.modalPanel .modalEnlaces {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.modalPanel .modalEnlace,
.modalPanel a.modalEnlace:link,
.modalPanel a.modalEnlace:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--azulClaroCorporativo);
    text-decoration: none;
}

.modalPanel a.modalEnlace:hover {
    color: var(--azulCorporativo);
    font-weight: 400;
    text-decoration: underline;
}

/* Mensaje de error dentro de la ventana. Sólo ocupa sitio cuando
   el code-behind le pone texto. */
.modalPanel .modalError:not(:empty) {
    display: block;
    margin-top: 16px;
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #811212;
    background-color: #ebd0d0;
    border-radius: 8px;
}

@media screen and (max-width: 768px) {
    .modalCapa {
        padding: 12px;
    }

    /* El ancho en píxeles del Panel deja de mandar: la ventana se
       ajusta a la pantalla. */
    .modalPanel {
        width: 92vw !important;
        max-width: 92vw;
    }

    .modalCabecera,
    .modalPanel .modalCuerpo,
    .modalPanel .contenedorMensaje,
    .modalPanel .contenedorMensajeCentrado,
    .modalPie {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* 16px reales en los campos: por debajo de esa medida iOS hace
       zoom al enfocarlos y descuadra la ventana. */
    .modalPanel .modalCampo,
    .formularioCampo {
        height: 48px;
        font-size: 16px;
    }

    /* Los dos botones se reparten el ancho del pie */
    .modalPanel .modalBoton {
        flex: 1 1 140px;
        min-width: 0;
        height: 48px;
        font-size: 16px;
    }
}

/* Enlaces de descarga inhabilitados mientras se procesa un postback asíncrono:
   evita que se pulsen cuando su URL todavía no se ha regenerado en el servidor. */
.enlaceBloqueado {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}

/* ------------------------------------------------------------
   Pantallas de gestión (listado con filtros sobre una rejilla)
   Juego de clases genérico, pensado para ir migrando las pantallas
   de gestión una a una. Lo usa ya:
     - Votaciones/CensoInterventores.aspx
   Sustituye a las antiguas .zonaContenedorEdicion y .zonaContenidoEdicion,
   .formu-contenedor-control, .enLinea, .floatDcha y compañía de
   Site.css, que siguen sirviendo a las pantallas sin migrar.
   Estructura esperada:
     .pantallaGestion
       .pantallaCabecera -> .pantallaTitulo y las acciones
       .gridNuevoBarra   -> filtros y buscador
       .gridNuevoContenedor -> la rejilla
   El contenido ya no va sobre una caja blanca: la única tarjeta de
   la pantalla es la de la rejilla, como en Participacion.aspx.
   ------------------------------------------------------------ */
.pantallaGestion {
    /* Separación uniforme entre cabecera, filtros y rejilla, sin
       depender de los márgenes de cada bloque. */
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Ruta de navegación sobre el título (Inicio > Lista de votaciones).
   Sustituye a .separadorSiteMap de Site.css. */
.rutaNavegacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

    .rutaNavegacion a,
    .rutaNavegacion a:link,
    .rutaNavegacion a:visited {
        font-weight: 400;
        color: var(--azulClaroCorporativo);
        text-decoration: none;
    }

    .rutaNavegacion a:hover {
        font-weight: 400;
        color: var(--azulClaroCorporativo);
        text-decoration: underline;
    }

    /* El separador entre pasos, más pequeño y apagado que el texto */
    .rutaNavegacion i {
        font-size: 10px;
        color: #9aa3af;
    }

/* Gráfica de participación en la cabecera de una pantalla, enlazada
   a Participacion.aspx. El contenedor lo rellena el code-behind con
   el HTML de VotacionUtilsCls.dameHtmlImagenParticipacion. */
.imagenParticipacion {
    display: flex;
    align-items: center;
}

    .imagenParticipacion a {
        display: block;
        line-height: 0;
    }

/* La imagen. Site.css tiene .imagenParticipacionGridVotaciones (50px)
   para la rejilla de votaciones; ésta es la de la cabecera de las
   pantallas nuevas. */
.imagenParticipacionCabecera {
    display: block;
    width: 128px;
    height: auto;
    max-width: 100%;
}

/* Bloque de acciones a la derecha del título, cuando hay más de una */
.pantallaAcciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Grupo de acciones que se queda pegado al margen derecho aunque la
   cabecera salte de línea (con space-between, un grupo que baja solo
   a la fila siguiente se iría a la izquierda). */
.pantallaAccionesDerecha {
    margin-left: auto;
    justify-content: flex-end;
}

/* Mensaje de error junto al título de la pantalla */
.textoError {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #c00000;
}

/* ------------------------------------------------------------
   Campos de formulario de las pantallas de gestión
   Equivalen a los del login, pero más bajos: aquí van en línea
   dentro de barras de filtros, no en un formulario en columna.
   ------------------------------------------------------------ */
.campoEtiqueta {
    font-size: 0.85rem;
    color: #4b5563;
    white-space: nowrap;
}

select.campoSelect,
input.campoTexto {
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #c7d0db;
    border-radius: 8px;
    outline: none;
}

select.campoSelect {
    /* El ancho lo da el contenido: estos desplegables van en línea */
    width: auto;
    cursor: pointer;
}

    select.campoSelect:hover,
    input.campoTexto:hover {
        border-color: #9aa9bd;
    }

    select.campoSelect:focus,
    input.campoTexto:focus {
        border-color: var(--azulCorporativo);
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.15);
    }

/* Interruptor (el-checkbox) con su rótulo al lado. El aspecto del
   interruptor lo pone checkbox.css, que es de terceros: aquí sólo
   se coloca junto a su etiqueta. El interruptor va primero en el
   marcado, así que queda a la izquierda del rótulo. */
.campoConmutador {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Varios interruptores seguidos van uno debajo de otro, alineados
   por su lado izquierdo. */
.campoConmutadores {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Botones de acción (buscar, crear, guardar, aceptar). Los dos
   miden igual y sólo cambian de color: el principal va en azul
   macizo y el secundario, en blanco con borde.
   Valen para un asp:Button, que es un <input>, así que la
   geometría va con display inline-block y line-height, y no con
   flex (que en un input no coloca el texto igual en todos los
   navegadores). Para las acciones que son enlaces está
   .botonAccion. */
.botonPrimario,
.botonSecundario,
.botonPeligro {
    display: inline-block;
    box-sizing: border-box;
    height: 36px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
}

.botonPrimario {
    color: #ffffff;
    background-color: var(--azulCorporativo);
    border: 1px solid var(--azulCorporativo);
}

    .botonPrimario:hover {
        background-color: #001a42;
        border-color: #001a42;
    }

/* El mismo botón cuando es un enlace (LinkButton, como "Añadir" de
   LogCreditos.ascx): se repiten los estados del enlace para que los
   enlaces generales del portal no pinten el texto en azul sobre el
   fondo azul. */
a.botonPrimario,
a.botonPrimario:link,
a.botonPrimario:visited,
a.botonPrimario:hover {
    color: #ffffff;
    text-decoration: none;
}

.botonSecundario {
    color: var(--azulCorporativo);
    background-color: #ffffff;
    border: 1px solid #c7d0db;
}

    .botonSecundario:hover {
        background-color: #f4f7fb;
        border-color: var(--azulCorporativo);
    }

/* Acción sin vuelta atrás (eliminar la votación): contorno y texto
   en rojo, relleno sólo al pasar el ratón. */
.botonPeligro {
    color: #b42318;
    background-color: #ffffff;
    border: 1px solid #f0b4ae;
}

    .botonPeligro:hover {
        color: #ffffff;
        background-color: #b42318;
        border-color: #b42318;
    }

/* El mismo botón cuando es un enlace con icono y rótulo (LinkButton,
   como "Eliminar TODOS los electores" de Censo.aspx): se repiten los
   estados del enlace para ganar a los enlaces generales del portal. */
a.botonPeligro,
a.botonPeligro:link,
a.botonPeligro:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #b42318;
    text-decoration: none;
}

a.botonPeligro:hover {
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
}

    /* El icono y el rótulo toman el color del botón (rojo, y blanco
       al pasar el ratón) */
    .botonPeligro i,
    .botonPeligro span {
        color: inherit;
    }

    .botonPrimario:focus,
    .botonSecundario:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 37, 91, 0.25);
    }

    .botonPeligro:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25);
    }

    /* Mientras se procesa la acción el botón se inhabilita desde
       JavaScript: debe notarse que no responde. */
    .botonPrimario:disabled,
    .botonSecundario:disabled,
    .botonPeligro:disabled {
        color: #eef1f5;
        background-color: #8a94a3;
        border-color: #8a94a3;
        cursor: default;
    }

/* ------------------------------------------------------------
   Barra de filtros sobre la rejilla
   Los controles de la izquierda gobiernan la propia rejilla
   (paginación, total de registros) y los de la derecha filtran el
   contenido; en pantallas estrechas los dos grupos se apilan.
   ------------------------------------------------------------ */
.gridNuevoBarra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}

.gridNuevoBarraGrupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

/* Total de registros y demás datos de apoyo de la barra */
.gridNuevoInfo {
    font-size: 12px;
    color: #6b7280;
}

/* Buscador: los tres controles (campo, texto y botón) se leen como
   un bloque, sobre una caja propia. */
.cajaBusqueda {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
}

    .cajaBusqueda input.campoTexto {
        width: 220px;
    }

/* Indicador de proceso de los postbacks asíncronos */
.gridNuevoCargando img {
    display: block;
    height: 20px;
    width: auto;
}

@media screen and (max-width: 768px) {
    /* Sin ancho para las dos columnas, cada grupo ocupa una fila
       completa y el buscador se estira. */
    .gridNuevoBarraGrupo {
        flex: 1 1 100%;
    }

    .cajaBusqueda {
        flex: 1 1 100%;
    }

        .cajaBusqueda input.campoTexto {
            flex: 1 1 140px;
            width: auto;
        }

    /* 16px reales: por debajo, iOS hace zoom al enfocar el campo */
    select.campoSelect,
    input.campoTexto {
        height: 40px;
        font-size: 16px;
    }

    .botonPrimario {
        height: 40px;
        line-height: 38px;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   Distintivos de estado
   Etiqueta corta que resume la situación de un registro dentro de
   una rejilla (estado de la votación, visibilidad, entorno de
   pruebas…). Genéricos: se escribe .distintivo junto a la clase
   del color que corresponda, por ejemplo
     .distintivo .distintivoVerde
   Admiten un icono delante, que se separa solo.
   Los usa ya Votaciones/ListaVotaciones.aspx (estado y visible).
   No sustituyen a .VotacionEstadoGrid ni a .colorVerde de
   Site.css, que siguen sirviendo a las pantallas sin migrar.
   ------------------------------------------------------------ */
.distintivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    /* El borde va siempre, transparente en la versión de fondo
       tenue, para que las dos variantes midan exactamente igual. */
    border: 1px solid transparent;
    border-radius: 999px;
}

    /* El icono toma el color del distintivo */
    .distintivo i {
        color: inherit;
        font-size: 12px;
        line-height: 1;
    }

        /* El icono de la votación en curso va más grande que el resto:
           es el estado que hay que localizar de un vistazo en la
           rejilla. Se apunta al propio icono (fa-podcast) porque el
           marcado lo genera el code-behind. */
        .distintivo i.fa-podcast {
            font-size: 16px;
        }

.distintivoAzul {
    color: #12457f;
    background-color: #eaf2fd;
}

.distintivoVerde {
    color: #1f8a4c;
    background-color: #e7f6ec;
}

.distintivoRojo {
    color: #b42318;
    background-color: #fdecea;
}

.distintivoGris {
    color: #4b5563;
    background-color: #eef1f5;
}

/* ------------------------------------------------------------
   Marca de estado sin caja: un punto de color y el texto al lado.
   Más discreta que el distintivo, para los datos que sólo
   matizan la fila (el entorno de pruebas, por ejemplo).
   ------------------------------------------------------------ */
.marcaEstado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: #374151;
}

/* El punto toma el color de su propia clase, no el del texto */
.marcaPunto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: currentColor;
}

.puntoAzul {
    color: var(--azulClaroCorporativo);
}

.puntoVerde {
    color: #1f8a4c;
}

.puntoRojo {
    color: #cd2026;
}

.puntoGris {
    color: #9aa3af;
}

/* ------------------------------------------------------------
   Grids de datos (GridView)
   Juego de clases genérico, pensado para ir migrando los grids
   del portal uno a uno. Lo usa ya:
     - Votaciones/CensoInterventores.aspx
   No reutiliza .gridRegistros, .gridHeaderStyle, .gridRowStyle ni
   .gridAlternatingRowStyle de Site.css, que servían a los
   grids aún sin migrar y no deben cambiar de aspecto.
   Estructura esperada:
     .gridNuevoContenedor -> div que envuelve al GridView
       .gridNuevo         -> CssClass del propio GridView
         .gridNuevoCabecera    -> HeaderStyle
         .gridNuevoFila        -> RowStyle
         .gridNuevoFilaAlterna -> AlternatingRowStyle
         .gridNuevoFilaVacia   -> EmptyDataRowStyle
         .gridNuevoPaginador   -> PagerStyle
   El pie (FooterStyle) y las filas de selección y edición
   (SelectedRowStyle, EditRowStyle) no entran todavía en este juego:
   ninguna pantalla migrada los usa.
   ------------------------------------------------------------ */

/* La rejilla va en una tarjeta blanca, como .participacionTarjeta.
   En pantallas estrechas se desplaza en horizontal dentro de la
   tarjeta en lugar de romper el ancho de la página. */
.gridNuevoContenedor {
    overflow-x: auto;
    /* Sin esto el navegador convierte también el eje vertical en
       "auto" —no admite un eje recortado y el otro visible— y saca
       una barra de desplazamiento vertical aunque la rejilla quepa
       entera. La tabla nunca se sale de alto, así que no se recorta
       nada. */
    overflow-y: hidden;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 37, 91, 0.06);
}

.gridNuevo {
    width: 100%;
    /* El GridView renderiza la tabla con cellspacing="0" pero sin
       colapsar los bordes: sin esto las líneas de separación se
       ven dobles. */
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

    .gridNuevo th,
    .gridNuevo td {
        text-align: left;
        vertical-align: middle;
    }

    /* Los rótulos de la cabecera son cortos y no deben partirse */
    .gridNuevo .gridNuevoCabecera th {
        white-space: nowrap;
    }

    /* Las celdas SÍ parten línea: si no, la tabla se hace más ancha
       que la pantalla y aparece el desplazamiento horizontal aunque
       haya sitio de sobra. Las columnas que no deben partirse lo
       piden uno a uno en el .aspx (Wrap="False" / ItemStyle-Wrap),
       que ASP.NET renderiza como estilo en línea o como atributo
       nowrap: lo segundo lo recoge la regla de abajo. */
    .gridNuevo th[nowrap],
    .gridNuevo td[nowrap] {
        white-space: nowrap;
    }

    /* Las alineaciones por columna (HorizontalAlign de HeaderStyle e
       ItemStyle) las renderiza el GridView como atributo align, que
       cualquier regla CSS gana: hay que recogerlas a mano o el
       text-align de arriba las anularía. El valor lo escribe ASP.NET
       con la inicial en mayúscula, de ahí las dos variantes. */
    .gridNuevo th[align="center"],
    .gridNuevo th[align="Center"],
    .gridNuevo td[align="center"],
    .gridNuevo td[align="Center"] {
        text-align: center;
    }

    .gridNuevo th[align="right"],
    .gridNuevo th[align="Right"],
    .gridNuevo td[align="right"],
    .gridNuevo td[align="Right"] {
        text-align: right;
    }

    /* Lo mismo con la alineación vertical (VerticalAlign) */
    .gridNuevo th[valign="top"],
    .gridNuevo th[valign="Top"],
    .gridNuevo td[valign="top"],
    .gridNuevo td[valign="Top"] {
        vertical-align: top;
    }

    .gridNuevo th[valign="bottom"],
    .gridNuevo th[valign="Bottom"],
    .gridNuevo td[valign="bottom"],
    .gridNuevo td[valign="Bottom"] {
        vertical-align: bottom;
    }

/* Cabecera: azul corporativo rematado con la línea verde de marca */
.gridNuevo .gridNuevoCabecera th {
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    background-color: var(--azulCorporativo);
    border-bottom: 3px solid var(--verdeCorporativo);
}

/* Las esquinas no se redondean aquí: el GridView pinta el paginador
   superior POR ENCIMA de la cabecera, así que la primera fila de la
   tabla no siempre es ésta. Del redondeo se encarga el recorte del
   contenedor, que lo aplica a lo que quede arriba del todo. */

/* Enlaces de ordenación: toman el color de la cabecera y se
   subrayan al pasar el ratón. */
.gridNuevo .gridNuevoCabecera a,
.gridNuevo .gridNuevoCabecera a:link,
.gridNuevo .gridNuevoCabecera a:visited {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.gridNuevo .gridNuevoCabecera a:hover {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
}

/* Filas: cebra suave entre blanco y un gris azulado muy claro */
.gridNuevo .gridNuevoFila td,
.gridNuevo .gridNuevoFilaAlterna td {
    padding: 12px 14px;
    color: #1f2937;
    border-bottom: 1px solid #eef1f5;
}

.gridNuevo .gridNuevoFila td {
    background-color: #ffffff;
}

.gridNuevo .gridNuevoFilaAlterna td {
    background-color: #f7f9fc;
}

/* Fila marcada como aviso: entorno de pruebas, registro caducado…
   Un ámbar muy claro, el de la familia de avisos del portal, que
   tiñe la fila entera sin tapar el texto. Lo usa
   Clientes/ListaClientes.aspx con los clientes de pruebas.
   Repite el relleno y el separador de las filas normales porque la
   clase se pone desde el code-behind (RowDataBound) y, en cuanto
   ahí se toca CssClass, el GridView ya no añade la del RowStyle:
   la fila se quedaría sin .gridNuevoFila y, con ella, sin relleno.
   Va después de la cebra para poder sustituir su fondo. */
.gridNuevo .gridNuevoFilaAviso td {
    padding: 12px 14px;
    color: #1f2937;
    background-color: #fdf4e3;
    border-bottom: 1px solid #eef1f5;
}

/* El resalte se limita a las filas de datos: las del paginador
   también son <tr> y no deben reaccionar. */
.gridNuevo .gridNuevoFila:hover td,
.gridNuevo .gridNuevoFilaAlterna:hover td {
    background-color: #eef4fb;
}

    /* En las filas de aviso el resalte mantiene el ámbar, sólo que
       más marcado: si virase a azul se perdería la marca. */
    .gridNuevo .gridNuevoFilaAviso:hover td {
        background-color: #fbebcf;
    }

/* Marca verde de la fila sobre la que está el ratón. Va como sombra
   interior y no como borde izquierdo: con border-collapse el
   navegador resuelve un único borde para toda la columna y, al no
   declararlo también la cabecera, th y td quedaban desalineados
   entre sí. La sombra no ocupa sitio en la maquetación, así que se
   pinta sobre el relleno de la celda sin mover nada. */
.gridNuevo .gridNuevoFila:hover td:first-child,
.gridNuevo .gridNuevoFilaAlterna:hover td:first-child {
    box-shadow: inset 3px 0 0 0 var(--verdeCorporativo);
}

/* Miniatura de la imagen de una opción (rejilla de opciones de
   EditPuntoAVotar.aspx). El ancho de 50px lo da Site.css. */
.gridNuevo .ImagenDentroGrid {
    display: block;
    height: auto;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
}

/* Subtabla dentro de una celda: las opciones de cada punto en
   ListaPuntosAVotar.aspx. Sus celdas son descendientes de la fila de
   la rejilla, así que heredarían su relleno, fondo, resalte y marca
   verde: se anulan aquí (los selectores con tr:hover y :first-child
   igualan o superan a los de la fila). Una línea fina separa cada
   opción de la siguiente. */
.gridNuevo .gridOpcionesPunto {
    width: 100%;
    border-collapse: collapse;
}

    .gridNuevo .gridOpcionesPunto td {
        padding: 4px 0;
        font-size: 12px;
        color: #374151;
        border-bottom: 1px solid #eef1f5;
    }

    .gridNuevo .gridOpcionesPunto td,
    .gridNuevo tr:hover .gridOpcionesPunto td,
    .gridNuevo tr:hover .gridOpcionesPunto td:first-child {
        background-color: transparent;
        box-shadow: none;
    }

    .gridNuevo .gridOpcionesPunto tr:last-child td {
        border-bottom: none;
    }

    /* Miniatura de la imagen de la opción, a la derecha del texto */
    .gridNuevo .gridOpcionesPunto img {
        display: block;
        margin-left: auto;
        border-radius: 4px;
    }

/* Columnas de voto emitido (eVoto y Voto Presencial).
   El icono lo pinta el code-behind de la pantalla (ImageneVoto e
   ImagenVotoPresencial) y la fecha, FechaHoraVoto. Van los dos en
   la misma línea, el icono delante del sello de tiempo. */
.iconoVoto {
    display: inline-block;
    margin-right: 6px;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

/* Voto por internet, en verde; voto en mesa, en azul. El color es
   refuerzo: las dos columnas ya se distinguen por la forma del
   icono, así que siguen leyéndose en blanco y negro. */
.iconoVotoOnline {
    color: #1f8a4c;
}

.iconoVotoPresencial {
    color: var(--azulClaroCorporativo);
}

/* El sello de tiempo, junto al icono. Site.css define
   .infoGridVotoFecha como inline-block de 10px para los grids sin
   migrar: aquí sólo se reajusta dentro de la rejilla nueva. */
.gridNuevo .infoGridVotoFecha {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
    color: #6b7280;
    vertical-align: middle;
}

/* Resultado de los envíos de correo (ControlesPersonalizados/
   InfoEnvioSES.ascx). El icono y la fecha los pintan
   GetHtmlEventoGrid y GetHtmlEventoErrorGrid del code-behind.
   Mismo esquema que las columnas de voto: icono delante y sello de
   tiempo al lado. */
.iconoEventoCorreo {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 6px;
    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
}

/* Evento registrado (enviado, abierto, click), en verde */
.iconoEventoCorreoOK {
    color: #1f8a4c;
}

/* Reclamación o rebote, en rojo */
.iconoEventoCorreoError {
    color: #b42318;
}

/* Site.css define .infoGridSESFecha a 10px para el aspecto antiguo:
   aquí sólo se reajusta dentro de la rejilla nueva. */
.gridNuevo .infoGridSESFecha {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
    color: #6b7280;
    vertical-align: middle;
}

/* En la columna de errores el detalle puede ser largo: dentro de
   .celdaConIcono ya separa el gap, así que sobra el margen. */
.gridNuevo .celdaConIcono .iconoEventoCorreo {
    margin-right: 0;
}

/* Icono de la acción de borrar, en rojo: es la única acción de la
   fila que no tiene vuelta atrás y conviene que se distinga del
   resto, que van en el color de enlace. */
.iconoEliminar {
    color: #b42318;
}

/* Icono de valor afirmativo en una columna sí/no (permiso de acceso,
   notificación activa…), en verde. */
.iconoSi {
    color: #1f8a4c;
}

/* Icono de dato ausente (sin imagen, sin fichero…) o de valor
   negativo en una columna sí/no: apagado, para que no compita con
   los datos reales de la fila. */
.iconoSinDato {
    color: #c3cad4;
}

/* Miniatura de la imagen del pre-registro (PreRegistros.aspx).
   Site.css la dibuja con un borde gris de 1px: aquí se suaviza y
   se redondea como el resto de la rejilla nueva. Pulsarla abre la
   imagen grande en un modal. */
.gridNuevo .ImagenPreRegistroGrid {
    display: block;
    margin: 0 auto;
    max-width: 60px;
    max-height: 60px;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    cursor: pointer;
}

/* Celda que lleva un icono de acción delante del dato, como el
   acceso a las votaciones junto al nombre del cliente. El icono no
   se separa del texto al partirse éste en varias líneas. */
.gridNuevo .celdaConIcono {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .gridNuevo .celdaConIcono a {
        flex: 0 0 auto;
    }

/* Número de créditos del cliente. Site.css lo pinta como un cuadro
   azul de 12pt (.divGridNumCreditos), demasiado pesado para una
   celda: aquí se rebaja a la misma píldora que luce en la cabecera
   del portal, con el aviso en rojo cuando se agotan. */
.gridNuevo .divGridNumCreditos,
.gridNuevo .divGridNumCreditosNegativos,
.creditosCliente .divGridNumCreditos,
.creditosCliente .divGridNumCreditosNegativos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    margin: 0;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    border-radius: 999px;
}

.gridNuevo .divGridNumCreditos,
.creditosCliente .divGridNumCreditos {
    background-color: var(--azulClaroCorporativo);
}

.gridNuevo .divGridNumCreditosNegativos,
.creditosCliente .divGridNumCreditosNegativos {
    background-color: #cd2026;
}

/* Historial de cambios (ControlesPersonalizados/HistorialCambios.ascx,
   dentro del modal pnlModalControlCambios): subtítulo, barra con el
   buscador y los filtros, y la rejilla. */
.historialCambios {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.historialCambiosSubtitulo {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
}

    /* Si la pantalla no le da texto, no deja hueco */
    .historialCambiosSubtitulo:empty {
        display: none;
    }

/* Añadir y quitar créditos (ControlesPersonalizados/LogCreditos.ascx,
   pestaña de créditos de EditClientes.aspx): una tarjeta por
   operación, con un filete de color a la izquierda (verde para
   añadir, rojo para quitar). En pantallas estrechas se apilan. */
.ajusteCreditos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-bottom: 20px;
}

.ajusteCreditosTarjeta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid #e3e8ef;
    border-left-width: 4px;
    border-radius: 12px;
}

.ajusteCreditosSumar {
    border-left-color: #1f8a4c;
}

.ajusteCreditosRestar {
    border-left-color: #c0392b;
}

.ajusteCreditosTitulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--azulCorporativo);
}

.ajusteCreditosSumar .ajusteCreditosTitulo i {
    color: #1f8a4c;
}

.ajusteCreditosRestar .ajusteCreditosTitulo i {
    color: #c0392b;
}

/* Nº de créditos, motivo (el resto del ancho) y botón en una línea,
   con el botón a la altura de los campos. */
.ajusteCreditosCampos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

    .ajusteCreditosCampos .ajusteCreditosMotivo {
        flex: 1 1 200px;
    }

    .ajusteCreditosCampos .formularioCampoCorto {
        width: 100px;
    }

@media screen and (max-width: 900px) {
    .ajusteCreditos {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Créditos disponibles del cliente bajo el título de la ficha
   (Clientes/EditClientes.aspx): rótulo y cifra en píldora, la misma
   de la rejilla de clientes. */
.creditosCliente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    /* La cifra mide lo que su contenido: Site.css la define como
       bloque con margin auto, que la estiraba a todo el ancho. */
    .creditosCliente .divGridNumCreditos,
    .creditosCliente .divGridNumCreditosNegativos {
        flex: 0 0 auto;
        width: auto;
    }

/* Celda con varias acciones de fila seguidas (editar, duplicar,
   descargas…). Los iconos son enlaces uno detrás de otro y se
   tocaban entre sí: el hueco los separa y agranda el área que se
   puede pulsar sin cambiar el tamaño del icono. */
.gridNuevo .gridNuevoAcciones {
    white-space: nowrap;
}

    .gridNuevo .gridNuevoAcciones a {
        display: inline-block;
        margin-right: 10px;
    }

        .gridNuevo .gridNuevoAcciones a:last-child {
            margin-right: 0;
        }

        /* Acción que cierra el grupo separada del resto, para que no se
           pulse por error: la de borrar. */
        .gridNuevo .gridNuevoAcciones a.gridNuevoAccionAparte {
            margin-left: 14px;
        }

/* Fila que el GridView pinta cuando no hay registros, con el texto
   de EmptyDataText. No es una fila de datos, así que no lleva cebra
   ni resalte: el mensaje va centrado y con aire, como un aviso. */
.gridNuevo .gridNuevoFilaVacia td {
    padding: 14px 14px;
    font-size: 0.9rem;
    text-align: center;
    color: #6b7280;
    background-color: #ffffff;
}

/* Paginador.
   El GridView lo renderiza como una fila más de la tabla: un <tr>
   con la clase del PagerStyle, una única celda a todo el ancho y,
   dentro, OTRA tabla con un <td> por página. Los números son
   enlaces y la página actual, un <span> sin enlace: de ahí que el
   aspecto de "página actual" se defina sobre el span.
   La banda lleva línea arriba y abajo para que valga igual esté
   donde esté: debajo de la última fila, encima de la cabecera o en
   los dos sitios (PagerSettings-Position). */
.gridNuevo .gridNuevoPaginador > td {
    padding: 10px 12px;
    background-color: #faf9f7;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
}

/* La tabla interna no debe heredar nada de la rejilla: ni relleno,
   ni fondo, ni separadores. El espacio entre botones lo pone el
   border-spacing. */
.gridNuevo .gridNuevoPaginador table {
    width: auto;
    margin: 0;
    border-collapse: separate;
    border-spacing: 4px 0;
}

    .gridNuevo .gridNuevoPaginador table td {
        padding: 0;
        background-color: transparent;
        border: none;
    }

/* Cada página, un botón cuadrado redondeado. El <span> es la página
   en la que se está; el <a>, las demás. */
.gridNuevo .gridNuevoPaginador a,
.gridNuevo .gridNuevoPaginador a:link,
.gridNuevo .gridNuevoPaginador a:visited,
.gridNuevo .gridNuevoPaginador span {
    display: inline-block;
    box-sizing: border-box;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--azulCorporativo);
    background-color: #ffffff;
    border: 1px solid #d7dfea;
    border-radius: 8px;
}

.gridNuevo .gridNuevoPaginador a:hover {
    color: var(--azulCorporativo);
    font-weight: 500;
    text-decoration: none;
    background-color: #eef4fb;
    border-color: var(--azulCorporativo);
}

/* Página actual: en azul corporativo, como el botón principal */
.gridNuevo .gridNuevoPaginador span {
    color: #ffffff;
    background-color: var(--azulCorporativo);
    border-color: var(--azulCorporativo);
}

/* ------------------------------------------------------------
   Aviso de advertencia: variante en rojo de .avisoInfo para lo que
   el usuario NO debe hacer. Mismo tamaño y forma que .avisoInfo.
   ------------------------------------------------------------ */
.avisoAlerta {
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #b42318;
    background-color: #fdecea;
    border: 1px solid #f6cbc6;
    border-radius: 8px;
}

.avisoAlertaTitulo {
    display: block;
    font-weight: 700;
    color: #8f1c13;
}

/* ------------------------------------------------------------
   Manual de la mesa electoral (Votaciones/ManualMesaElectoral.aspx)
   Una tarjeta (.formularioTarjeta) por sección, con pasos
   numerados y capturas de pantalla.
   ------------------------------------------------------------ */
/* Columna de lectura centrada en la pantalla */
.manualMesa {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.manualIntroduccion {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
}

.manualSeccion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Anula el h3 de Site.css (14px, gris, interlineado fijo) */
h3.manualSeccionTitulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--azulCorporativo);
    border-bottom: none;
}

.manualTexto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #374151;
}

    /* Los distintivos citan elementos de la pantalla dentro del texto */
    .manualTexto .distintivo {
        vertical-align: middle;
    }

/* Lista de pasos: el número va en un círculo a la izquierda, unido
   al del paso siguiente por una línea vertical. */
.manualPasos {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manualPaso {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

    .manualPaso:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 36px;
        bottom: -20px;
        left: 15px;
        width: 2px;
        background-color: #e3e8ef;
    }

.manualPasoNumero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--azulCorporativo);
    background-color: var(--verdeCorporativo);
    border-radius: 50%;
}

.manualPasoContenido {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manualPasoTitulo {
    margin: 4px 0 0 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--azulCorporativo);
    border-bottom: none;
}

.manualCaptura {
    margin: 0;
}

.manualCapturaImagen {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 37, 91, 0.08);
}

.manualCapturaPie {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #6b7280;
}

@media screen and (max-width: 768px) {
    h3.manualSeccionTitulo {
        font-size: 1.05rem;
    }

    .manualPaso {
        gap: 12px;
    }

    .manualPasoNumero {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .manualPaso:not(:last-child)::before {
        top: 32px;
        left: 13px;
    }
}

/* ------------------------------------------------------------
   Pre-registro de votantes (PreRegistro.aspx)
   Página pública: cabecera del cliente (.clienteContenedor), datos
   de la votación y una tarjeta (.formularioTarjeta) con el
   formulario o con el resultado del pre-registro. La ventana del
   código de confirmación es un .modalPanel normal.
   ------------------------------------------------------------ */
.preRegistro {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    /* La cabecera del cliente, con un relleno más ajustado que el
       que trae para la papeleta. */
    .preRegistro .clienteContenedor {
        padding: 16px 24px;
    }

/* El h1 sólo da la semántica: el aspecto lo pone .clienteNombre */
h1.preRegistroCliente {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    border-bottom: none;
}

/* Nombre, periodo y descripción de la votación. El HTML (y sus
   clases) lo genera VotacionUtilsCls; aquí se ajusta el tamaño que
   PapeletaVotacion.css le da para la papeleta. */
.preRegistroVotacion .NombreVotacion {
    margin: 0 0 8px 0;
}

    .preRegistroVotacion .NombreVotacion h2 {
        margin: 0 0 4px 0;
        font-size: 1.35rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--azulCorporativo);
        border-bottom: none;
    }

.preRegistroVotacion .PeriodoVotacion {
    font-size: 0.9rem;
    color: #4b5563;
}

.preRegistroVotacion .DescripcionVotacion {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
}

    /* getDivDescripcionVotacion cierra la descripción con un <br/> */
    .preRegistroVotacion .DescripcionVotacion > br:last-child {
        display: none;
    }

.preRegistroTarjeta {
    padding: 28px 32px;
}

.preRegistroFormulario {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Título a la izquierda y periodo de apertura a la derecha */
.preRegistroCabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f5;
}

.preRegistroPeriodo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #12457f;
    background-color: #eaf2fd;
    border-radius: 999px;
}

/* Texto configurado en ConfigPreRegistro.aspx (puede traer HTML) */
.preRegistroTexto {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
}

    .preRegistroTexto p {
        margin: 0 0 8px 0;
    }

/* El contenedor del error no genera caja propia: así, sin mensaje,
   no deja un hueco más entre los bloques del formulario. */
.preRegistroErrorContenedor {
    display: contents;
}

/* Acompaña a .avisoAlerta. Es un span (asp:Label) y va vacío hasta
   que validar encuentra algún error. */
.preRegistroError {
    display: block;
}

    .preRegistroError:empty {
        display: none;
    }

/* Campos en dos columnas. Los opcionales que no pide la votación no
   se pintan, y los demás ocupan su hueco. */
.preRegistroCampos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px 20px;
}

.preRegistroCampoAncho {
    grid-column: 1 / -1;
}

.preRegistroObligatorio {
    margin-left: 3px;
    color: #b42318;
}

.preRegistroAcciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding-top: 18px;
    border-top: 1px solid #eef1f5;
}

.preRegistroEnlace,
a.preRegistroEnlace:link,
a.preRegistroEnlace:visited {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--azulClaroCorporativo);
    text-decoration: none;
}

    a.preRegistroEnlace:hover {
        color: var(--azulClaroCorporativo);
        text-decoration: underline;
    }

/* El error de envío del código sólo ocupa sitio si hay mensaje */
.preRegistroFormulario > .textoError:empty {
    display: none;
}

/* Resultado del pre-registro o aviso de cerrado: icono, título y
   mensaje centrados en la tarjeta. */
.preRegistroEstado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 8px;
    text-align: center;
}

.preRegistroEstadoIcono {
    font-size: 2.75rem;
    line-height: 1;
}

h2.preRegistroEstadoTitulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    border-bottom: none;
}

.preRegistroEstadoRealizado {
    color: #1f8a4c;
}

.preRegistroEstadoCerrado {
    color: #b42318;
}

    /* El mensaje (con la clase error o correcto que le pone
       preRegistrar) no se estira a todo el ancho de la tarjeta. */
    .preRegistroEstado .error,
    .preRegistroEstado .correcto {
        max-width: 560px;
        font-size: 0.95rem;
        line-height: 1.6;
    }

@media screen and (max-width: 768px) {
    .preRegistroTarjeta {
        padding: 20px 18px;
    }

    .preRegistroCampos {
        grid-template-columns: minmax(0, 1fr);
    }

    .preRegistroVotacion .NombreVotacion h2 {
        font-size: 1.15rem;
    }
}