/* Pantallas publicas de firma - SIAG */

/*
 * Estas pantallas se abren desde un enlace de correo, casi siempre en telefono,
 * para hacer una sola cosa: firmar. El diseno se ordena alrededor de eso.
 *
 * Comparten el lenguaje visual del login moderno (mismo radio, misma escala de
 * grises, misma tarjeta sobre fondo suave) pero no su CSS: el login es una
 * pantalla autonoma y estas se montan sobre el template administrativo, del que
 * heredan Bootstrap, DataTables y los botones de firma.
 *
 * El color de marca sale de --siag-brand*, que estiloMarcaTemplate() emite en
 * cada pagina. No se escribe ningun color de marca aqui.
 */

:root {
    --siag-firma-texto: #172033;
    --siag-firma-muted: #607086;
    --siag-firma-borde: #d8dee8;
    --siag-firma-suave: #f5f7fb;
    --siag-firma-panel: #ffffff;
    --siag-firma-radio: 8px;
    --siag-firma-logo-ancho: 260px;
    /* Franja de marca que sustituye a la barra del template */
    --siag-firma-franja-alto: 14px;
    /*
     * Ancho del panel lateral en escritorio. Es el mismo reparto que el grid del
     * login -1fr / .9fr, o sea 52.63%- con su mismo suelo de 460px para el
     * contenido. Lo usan el panel y el margen del contenido, asi que se declara
     * una sola vez.
     */
    --siag-firma-panel-ancho: min(52.63%, calc(100% - 460px));
}

/* ---------------------------------------------------------------------------
   Sin menu, pero con la marca
   ---------------------------------------------------------------------------
   Estas pantallas se montan sobre el template administrativo y heredan su barra
   superior. A un visitante anonimo le sale casi vacia, con un boton de menu que
   no lleva a ninguna parte; y a alguien que si tiene la sesion de la plataforma
   abierta le sale el menu completo del sistema, que en una pantalla publica
   desorienta todavia mas: son dos contextos distintos mezclados.
   Se oculta en los dos casos.

   Esta regla depende de que esta hoja solo se cargue en las pantallas publicas
   -lo hacen los constructores de Api_firma, Home_public y Encuesta_publica-.
   **Antes de enlazarla en otra pantalla, comprobar que ahi tampoco se quiere la
   barra**, porque se la llevaria por delante.

   Quitar la barra dejaba la pagina sin ningun rastro del color del dominio, asi
   que su sitio lo ocupa una franja fina con el color de la marca. Cumple la
   misma funcion identitaria sin ofrecer una navegacion que aqui no aplica.
*/
/*
 * Se oculta con un selector directo y no con uno contextual: la barra va antes
 * del contenido de la vista, asi que no hay forma de alcanzarla desde el
 * contenido sin :has(), que no existe en los navegadores antiguos de varios
 * clientes corporativos. Lo que acota la regla es la hoja misma, que solo se
 * carga en estas pantallas.
 */
.navbar.main {
    display: none;
}

/*
 * La franja recupera el color de la marca que se iba con la barra.
 *
 * El degradado usa el color del dominio y su tono oscuro, los dos calculados por
 * paletaMarcaTemplate(). Con un solo color plano una franja ancha parece un
 * bloque suelto; con el degradado se lee como parte del diseño.
 *
 * La altura esta en una variable para poder ajustarla en un unico sitio.
 */
.siag-firma-marca-franja {
    background: linear-gradient(
        100deg,
        var(--siag-brand, #4888be),
        var(--siag-brand-dark-3, #356894)
    );
    height: var(--siag-firma-franja-alto);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
}

/* ---------------------------------------------------------------------------
   Panel lateral (solo escritorio)
   ---------------------------------------------------------------------------
   El panel es el componente del login, cargado tal cual desde
   application/views/publico/hero.php: mismas figuras, mismo carrusel, mismas
   medidas. Su aspecto lo define login-modern.css, que los controladores
   publicos tambien cargan.

   Aqui solo se resuelve donde va. En el login el panel es una columna de un
   grid; en estas pantallas se fija a la izquierda, porque son siete vistas con
   estructuras distintas y envolverlas todas en un grid habria obligado a
   reescribirlas.

   En telefono no se pinta: el espacio es para la tarea.
*/
.siag-firma-hero {
    display: none;
}

@media (min-width: 992px) {

    /*
     * Mismo reparto que el login: su grid es 1fr / .9fr, o sea 52.63% para el
     * panel. Se replica aqui para que las dos pantallas se vean iguales en
     * escritorio, y con el mismo suelo de 460px para el contenido que documenta
     * login-modern.css: por debajo de eso el formulario queda apretado.
     */
    .siag-firma-hero {
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        top: 0;
        width: var(--siag-firma-panel-ancho);
        z-index: 1;
    }

    /*
     * El hero del login se estira para llenar su columna del grid. Fuera de ese
     * grid no tiene altura propia, asi que se le da la del contenedor.
     */
    .siag-firma-hero .siag-login-hero {
        height: 100%;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Lienzo
   ---------------------------------------------------------------------------
   El template pinta su propio fondo y reserva el ancho del menu lateral. En
   estas pantallas no hay menu -quien entra no ha iniciado sesion- asi que el
   contenido se centra y respira.
*/
.siag-firma-page {
    color: var(--siag-firma-texto);
    margin: 0 auto;
    max-width: 720px;
    /* La franja esta fija y no ocupa sitio en el flujo: se le reserva aqui,
       o se superpondria al primer elemento de la pagina */
    padding: calc(var(--siag-firma-franja-alto) + clamp(10px, 2vh, 18px)) 16px clamp(24px, 5vh, 48px);
    width: 100%;
}

.siag-firma-page--ancha {
    max-width: 980px;
}

/* ---------------------------------------------------------------------------
   Logo
   ---------------------------------------------------------------------------
   Misma regla que el login: ancho fijo para todas las marcas y alto derivado de
   la proporcion de cada archivo. Limitar por altura haria que un logo 4:1 se
   viera al doble que uno 2:1.

   El max-height es solo una red de seguridad para un logo casi cuadrado; con
   las proporciones habituales no llega a actuar. Nunca combinar un width fijo
   con max-height sin object-fit: deforma la imagen.
*/
/*
 * El logo se pega mas al borde superior que en el login: alli es el unico
 * contenido de su panel, aqui abre una lista de opciones y cada pixel de
 * cabecera es uno menos de contenido visible sin desplazar, sobre todo en
 * telefono.
 */
.siag-firma-marca {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: clamp(14px, 2.4vh, 22px);
}

.siag-firma-logo {
    display: block;
    height: auto;
    max-height: 150px;
    max-width: 100%;
    object-fit: contain;
    width: var(--siag-firma-logo-ancho);
}

/* ---------------------------------------------------------------------------
   Tarjeta
*/
.siag-firma-card {
    background: var(--siag-firma-panel);
    border: 1px solid var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio);
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    margin-bottom: 18px;
    padding: clamp(18px, 3vh, 28px);
}

.siag-firma-titulo {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    margin: 0 0 4px;
}

.siag-firma-instruccion {
    color: var(--siag-firma-muted);
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 clamp(14px, 2.4vh, 22px);
}

/* ---------------------------------------------------------------------------
   Formulario
   ---------------------------------------------------------------------------
   El tema declara .form-control { border-radius: 0 !important }, de modo que
   recuperar las esquinas exige !important. Es la misma pelea que documenta el
   login moderno.
*/
.siag-firma-card .form-control {
    background: #fff;
    border: 1px solid #aeb6c4;
    border-radius: var(--siag-firma-radio) !important;
    box-shadow: none;
    color: var(--siag-firma-texto);
    font-size: 16px; /* 16px evita que iOS haga zoom al enfocar el campo */
    height: 48px;
    padding: 11px 14px;
    width: 100%;
}

.siag-firma-card .form-control:focus {
    border-color: var(--siag-brand, #4888be);
    box-shadow: 0 0 0 3px rgba(var(--siag-brand-rgb, 72, 136, 190), .16);
}

.siag-firma-campo {
    margin-bottom: 16px;
}

.siag-firma-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.siag-firma-label .required {
    color: #b3352f;
}

.siag-firma-ayuda {
    color: var(--siag-firma-muted);
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 5px;
}

/*
 * Errores de validacion. form-validatorCA.init.js no genera label.error: pone
 * .has-error en el .form-group e inyecta un <p class="has-error help-block">.
 * Estilar las clases de la libreria aqui no tendria ningun efecto.
 */
.siag-firma-campo.has-error .form-control {
    border-color: #b3352f;
}

.siag-firma-campo .help-block.has-error {
    color: #b3352f;
    font-size: 13px;
    font-weight: 600;
    margin: 7px 0 0;
}

/* ---------------------------------------------------------------------------
   Campo de codigo con mostrar/ocultar
*/
.siag-firma-clave {
    position: relative;
}

.siag-firma-clave .form-control {
    padding-right: 50px;
}

.siag-firma-clave-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--siag-firma-radio);
    color: var(--siag-firma-muted);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 40px;
}

.siag-firma-clave-toggle:hover,
.siag-firma-clave-toggle.is-visible {
    background: var(--siag-firma-suave);
    color: var(--siag-brand-dark-3, #356894);
}

/*
 * La barra diagonal solo aparece cuando el codigo esta a la vista: el icono
 * anuncia el estado al que se pasaria, que es la convencion habitual.
 */
.siag-firma-ojo-tachado {
    opacity: 0;
}

.siag-firma-clave-toggle.is-visible .siag-firma-ojo-tachado {
    opacity: 1;
}


.siag-firma-clave-toggle:focus-visible {
    outline: 3px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Acciones
*/
.siag-firma-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.siag-firma-btn {
    border: 1px solid transparent;
    border-radius: var(--siag-firma-radio);
    cursor: pointer;
    flex: 1 1 160px;
    font-size: 15px;
    font-weight: 600;
    min-height: 48px;
    padding: 12px 18px;
    text-align: center;
}

/*
 * El texto sobre el color de marca no se fija en blanco: --siag-brand-contraste
 * lo resuelve por luminancia, porque una marca amarilla no admite blanco encima.
 */
.siag-firma-btn--principal {
    background: var(--siag-brand-solido, #376e9c);
    color: var(--siag-brand-contraste, #fff);
}

.siag-firma-btn--principal:hover,
.siag-firma-btn--principal:focus {
    background: var(--siag-brand-dark-3, #356894);
    color: var(--siag-brand-contraste, #fff);
}

.siag-firma-btn--secundario {
    background: #fff;
    border-color: var(--siag-firma-borde);
    color: var(--siag-firma-texto);
    flex: 0 1 auto;
}

.siag-firma-btn--secundario:hover,
.siag-firma-btn--secundario:focus {
    border-color: var(--siag-brand, #4888be);
    color: var(--siag-brand-dark-3, #356894);
}

.siag-firma-btn:focus-visible,
.siag-firma-opcion:focus-visible {
    outline: 3px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Menu publico
   ---------------------------------------------------------------------------
   Antes eran seis botones azules identicos a pantalla completa: sin jerarquia,
   nada indicaba a donde llevaba cada uno. Ahora cada opcion dice que hace, y la
   principal se distingue del resto.
*/
.siag-firma-opciones {
    display: grid;
    gap: 10px;
}

.siag-firma-opcion {
    align-items: center;
    background: var(--siag-brand-solido, #376e9c);
    border: 1px solid var(--siag-brand-solido, #376e9c);
    border-radius: var(--siag-firma-radio);
    /* El texto sobre el color se resuelve por luminancia: una marca clara no
       admite blanco encima. El icono hereda este color con currentColor. */
    color: var(--siag-brand-contraste, #fff);
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.siag-firma-opcion:hover,
.siag-firma-opcion:focus {
    background: var(--siag-brand-dark-4, #2d597e);
    border-color: var(--siag-brand-dark-4, #2d597e);
    box-shadow: 0 2px 10px rgba(var(--siag-brand-rgb, 72, 136, 190), .26);
    color: var(--siag-brand-contraste, #fff);
    text-decoration: none;
}

/*
 * La primera opcion es la que mas se usa. Con todas las tarjetas pintadas, la
 * jerarquia ya no puede venir del color: la da un borde mas marcado, que
 * destaca sin romper la uniformidad.
 */
.siag-firma-opcion--principal {
    box-shadow: 0 0 0 2px rgba(var(--siag-brand-rgb, 72, 136, 190), .35);
}

/*
 * El circulo del icono: fondo translucido sobre el color de la tarjeta y el
 * simbolo en currentColor, de modo que siempre coincide con el texto.
 */
.siag-firma-opcion-icono {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: currentColor;
    display: flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    /* La clase .glyphicons del tema agrega un padding para dejar sitio al icono
       posicionado en absoluto; aqui el centrado lo hace el flex */
    padding: 0;
    width: 40px;
}

/*
 * El tema dibuja el icono en un pseudo-elemento colocado en absoluto respecto
 * de .glyphicons, pensado para ir junto a un texto a su derecha. Dentro de un
 * circulo eso lo deja descentrado. Devolviendolo al flujo, el flex del
 * contenedor lo centra en los dos ejes.
 */
.siag-firma-opcion-icono i {
    display: block;
    height: 20px;
    line-height: 1;
    width: 20px;
}

.siag-firma-opcion-icono i:before {
    /* Sin color propio: hereda el del texto de la tarjeta */
    color: currentColor;
    display: block;
    left: auto;
    line-height: 20px;
    margin: 0;
    position: relative;
    text-align: center;
    top: auto;
    width: 20px;
}

.siag-firma-opcion-nombre {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/*
 * El detalle va con el mismo color que el nombre, a plena opacidad.
 *
 * Se probo atenuarlo -que es lo natural para un texto secundario- y no llega:
 * medido sobre las marcas reales, con opacidad .85 el contraste baja a 3.93:1 y
 * ni siquiera .95 alcanza el 4.5:1 que pide la AA. La jerarquia la dan el tamano
 * y el peso, que no cuestan contraste.
 */
.siag-firma-opcion-detalle {
    color: var(--siag-brand-contraste, #fff);
    display: block;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Estado de la busqueda
   ---------------------------------------------------------------------------
   La pantalla pide los componentes uno a uno -hasta 48 peticiones en paralelo-
   y los bloques sin datos se eliminan despues de llegar. No se puede saber de
   antemano cuantos habra, asi que el estado acompana mientras quede alguna
   peticion en vuelo y solo entonces se afirma que no hay nada.
*/
.siag-firma-estado {
    align-items: center;
    background: var(--siag-firma-suave);
    border: 1px solid var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio);
    color: var(--siag-firma-muted);
    display: flex;
    font-size: 14px;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.siag-firma-estado[hidden] {
    display: none;
}

.siag-firma-spinner {
    animation: siag-firma-giro 640ms linear infinite;
    border: 2px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .25);
    border-radius: 50%;
    border-top-color: var(--siag-brand, #4888be);
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

@keyframes siag-firma-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .siag-firma-spinner { animation-duration: 2.4s; }
}

.siag-firma-estado--vacio .siag-firma-spinner {
    display: none;
}

.siag-firma-estado-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Barra de progreso. Las peticiones salen en paralelo, asi que avanza a saltos
 * segun van volviendo; es una medida real de cuantas faltan, no una animacion
 * decorativa que finja un avance constante.
 */
.siag-firma-progreso {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .14);
    border-radius: 999px;
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    width: 100%;
}

.siag-firma-progreso-relleno {
    background: var(--siag-brand, #4888be);
    border-radius: 999px;
    height: 100%;
    width: 0;
}

@media (prefers-reduced-motion: no-preference) {

    .siag-firma-progreso-relleno {
        transition: width .25s ease;
    }
}

/* ---------------------------------------------------------------------------
   Bloques de firmas
   ---------------------------------------------------------------------------
   Cada componente llega en su propio bloque. Se presentan como tarjetas con un
   encabezado que nombra el tipo de documento y cuenta cuantos hay pendientes.
*/
.siag-firma-grupo {
    background: var(--siag-firma-panel);
    border: 1px solid var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio);
    margin-bottom: 14px;
    overflow: hidden;
}

.siag-firma-grupo-cabecera {
    align-items: center;
    background: var(--siag-firma-suave);
    border-bottom: 1px solid var(--siag-firma-borde);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 16px;
}

.siag-firma-grupo-titulo {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    margin: 0;
}

/*
 * El lapiz del disenio original. Mismo ajuste que los iconos del menu: el tema
 * dibuja el glyphicon en un pseudo-elemento colocado en absoluto, pensado para
 * ir junto a un texto; devolviendolo al flujo se alinea con el titulo.
 */
.siag-firma-grupo-icono {
    color: var(--siag-brand-dark-3, #356894);
    flex: 0 0 20px;
    height: 20px;
    padding: 0;
    width: 20px;
}

.siag-firma-grupo-icono i {
    display: block;
    height: 20px;
    width: 20px;
}

.siag-firma-grupo-icono i:before {
    display: block;
    left: auto;
    line-height: 20px;
    margin: 0;
    position: relative;
    text-align: center;
    top: auto;
    width: 20px;
}

.siag-firma-contador {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .12);
    border-radius: 999px;
    color: var(--siag-brand-dark-3, #356894);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    white-space: nowrap;
}

/*
 * La tabla se conserva porque DataTables y los botones de firma del template
 * dependen de ella, pero se desborda dentro de su propio contenedor: el cuerpo
 * de la pagina nunca debe desplazarse en horizontal.
 */
.siag-firma-tabla-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/*
 * El reparto de columnas lo decide DataTables a partir de los anchos en linea
 * del <thead>. Se probo table-layout: fixed para igualar todos los bloques,
 * pero choca con el plugin Responsive del template: el plugin mide las columnas
 * para decidir cuales colapsa, y un reparto fijo por encima comprimia la
 * descripcion hasta partir las palabras y sacaba dos barras de desplazamiento.
 */
.siag-firma-grupo table {
    margin: 0;
    width: 100%;
}




/*
 * La barra de avance no necesita mas sitio del que ocupa su porcentaje, y el
 * boton de diligenciar no debe partirse en dos lineas.
 */
.siag-firma-grupo--encuestas .progress {
    margin-bottom: 4px;
}

.siag-firma-grupo--encuestas .btn {
    white-space: nowrap;
}

.siag-firma-grupo table > thead > tr > th {
    background: #fff;
    border-bottom: 1px solid var(--siag-firma-borde);
    color: var(--siag-firma-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * El tema aplica table-condensed, que deja las celdas en 5px: demasiado justo
 * para leer una descripcion larga o pulsar un boton de firma.
 */
.siag-firma-grupo table > tbody > tr > td {
    border-top: 1px solid #eef1f5;
    font-size: 14px;
    padding: 10px 12px;
    vertical-align: middle;
}

.siag-firma-grupo table > thead > tr > th {
    padding: 10px 12px;
}

.siag-firma-doc {
    font-weight: 500;
    line-height: 1.4;
    min-width: 240px;
}

.siag-firma-meta {
    color: var(--siag-firma-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/*
 * Enlace al PDF. Era un icono suelto sin area propia: en un telefono, acertarle
 * costaba varios intentos. Se le da un area de 40px, que es el minimo comodo
 * para el dedo, y color de marca para que se lea como accion.
 */
.siag-firma-grupo .glyphicons-filetype.pdf {
    align-items: center;
    border-radius: var(--siag-firma-radio);
    color: var(--siag-brand-dark-3, #356894);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.siag-firma-grupo .glyphicons-filetype.pdf:hover,
.siag-firma-grupo .glyphicons-filetype.pdf:focus {
    background: var(--siag-firma-suave);
}

.siag-firma-grupo .glyphicons-filetype.pdf:focus-visible {
    outline: 3px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Controles de DataTables
   ---------------------------------------------------------------------------
   El dom se reordena en formatTable(): los controles superiores en una fila y
   el resumen y la paginacion abajo. Aqui solo se les da el aspecto del resto de
   la pantalla, porque los que trae el tema son de otra epoca visual.
*/
/*
 * Contenedores del dom personalizado que arma formatTable(). Solo existen en
 * las tablas de firmas: las de encuestas las inicializa datatablesCA.init.js
 * con su propia configuracion, sin este dom. Por eso el espaciado no vive aqui
 * sino en los propios controles, que si estan siempre.
 */
.siag-firma-tabla-top,
.siag-firma-tabla-pie {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.siag-firma-tabla-top {
    border-bottom: 1px solid #eef1f5;
}

.siag-firma-tabla-pie {
    border-top: 1px solid #eef1f5;
}

/*
 * Con pocas filas el buscador, el selector de cantidad y la paginacion no
 * aportan nada y estorban. La clase la pone formatTable() al inicializar: no se
 * resuelve en CSS porque haria falta :has(), que no existe en los navegadores
 * antiguos que todavia usan varios clientes.
 */
.siag-firma-grupo.is-tabla-corta .siag-firma-tabla-top,
.siag-firma-grupo.is-tabla-corta .siag-firma-tabla-pie {
    display: none;
}

/*
 * Espaciado de los controles. Va en cada uno y no en un contenedor comun porque
 * ese contenedor solo existe cuando la tabla pasa por formatTable().
 */
.siag-firma-grupo .dataTables_filter,
.siag-firma-grupo .dataTables_length {
    float: none;
    margin: 0;
    padding: 12px 16px;
}

.siag-firma-grupo .dataTables_info,
.siag-firma-grupo .dataTables_paginate {
    padding: 12px 16px;
}


.siag-firma-grupo .dataTables_filter label,
.siag-firma-grupo .dataTables_length label {
    align-items: center;
    color: var(--siag-firma-muted);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    margin: 0;
}

.siag-firma-grupo .dataTables_filter input,
.siag-firma-grupo .dataTables_length select {
    background: #fff;
    border: 1px solid var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio) !important;
    color: var(--siag-firma-texto);
    font-size: 14px;
    height: 38px;
    margin: 0;
    padding: 6px 10px;
    width: auto;
}

.siag-firma-grupo .dataTables_filter input {
    min-width: 190px;
}

.siag-firma-grupo .dataTables_filter input:focus,
.siag-firma-grupo .dataTables_length select:focus {
    border-color: var(--siag-brand, #4888be);
    box-shadow: 0 0 0 3px rgba(var(--siag-brand-rgb, 72, 136, 190), .16);
    outline: none;
}

.siag-firma-grupo .dataTables_info {
    color: var(--siag-firma-muted);
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.siag-firma-grupo .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 0;
}

.siag-firma-grupo .dataTables_paginate .paginate_button {
    background: #fff !important;
    border: 1px solid var(--siag-firma-borde) !important;
    border-radius: var(--siag-firma-radio) !important;
    color: var(--siag-firma-texto) !important;
    cursor: pointer;
    margin-left: 4px;
    min-width: 36px;
    padding: 7px 11px !important;
    text-align: center;
}

.siag-firma-grupo .dataTables_paginate .paginate_button:hover {
    background: var(--siag-firma-suave) !important;
    border-color: var(--siag-brand, #4888be) !important;
    color: var(--siag-firma-texto) !important;
}

.siag-firma-grupo .dataTables_paginate .paginate_button.current,
.siag-firma-grupo .dataTables_paginate .paginate_button.current:hover {
    background: var(--siag-brand-solido, #376e9c) !important;
    border-color: var(--siag-brand-solido, #376e9c) !important;
    color: var(--siag-brand-contraste, #fff) !important;
}

.siag-firma-grupo .dataTables_paginate .paginate_button.disabled,
.siag-firma-grupo .dataTables_paginate .paginate_button.disabled:hover {
    background: #fff !important;
    border-color: #eef1f5 !important;
    color: #b6becb !important;
    cursor: default;
}

/* La cabecera ordenable necesita sitio para la flecha */
.siag-firma-grupo table > thead > tr > th.sorting,
.siag-firma-grupo table > thead > tr > th.sorting_asc,
.siag-firma-grupo table > thead > tr > th.sorting_desc {
    cursor: pointer;
    padding-right: 22px;
}

@media (max-width: 640px) {

    .siag-firma-tabla-top,
    .siag-firma-tabla-pie {
        padding: 10px 12px;
    }

    /* Apilados y a todo el ancho: en una columna estrecha, uno al lado del otro
       deja el buscador inservible */
    .siag-firma-tabla-top > div,
    .siag-firma-tabla-pie > div {
        width: 100%;
    }

    .siag-firma-grupo .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Barra de sesion y filtros
   ---------------------------------------------------------------------------
   Lo que queda del formulario una vez identificada la persona. Ocupa una linea
   en lugar de media pantalla y deja el sitio a los documentos.
*/
.siag-firma-sesion {
    align-items: center;
    background: var(--siag-firma-panel);
    border: 1px solid var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px 16px;
}

.siag-firma-sesion[hidden],
.siag-firma-filtros[hidden] {
    display: none;
}

.siag-firma-sesion-dato {
    color: var(--siag-firma-muted);
    font-size: 14px;
}

.siag-firma-sesion-dato strong {
    color: var(--siag-firma-texto);
}

.siag-firma-sesion-acciones {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Salir cierra el acceso: se distingue de cambiar de documento, que no lo cierra */
.siag-firma-sesion-acciones a.siag-firma-enlace {
    color: var(--siag-firma-muted);
    text-decoration: none;
}

.siag-firma-sesion-acciones a.siag-firma-enlace:hover {
    color: #b3352f;
    text-decoration: underline;
}

.siag-firma-filtros {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.siag-firma-filtros-acciones {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/*
 * Resumen de lo encontrado. Dos cifras y nada mas: cuantos documentos quedan
 * por firmar y en cuantos tipos se reparten. Es la respuesta a la pregunta con
 * la que se entra a esta pantalla.
 */
.siag-firma-resumen {
    align-items: center;
    display: flex;
    gap: 12px;
}

.siag-firma-resumen[hidden] {
    display: none;
}

.siag-firma-kpi {
    align-items: baseline;
    color: var(--siag-firma-muted);
    display: flex;
    font-size: 13px;
    gap: 6px;
}

.siag-firma-kpi strong {
    color: var(--siag-brand-dark-3, #356894);
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/*
 * Destello al descontar una firma. Dura lo justo para que la vista lo capte al
 * volver del modal de firma; sin el, la cifra cambia en una esquina y pasa
 * desapercibida.
 */
@keyframes siag-firma-descuento {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28); color: #2f7d4f; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {

    .siag-firma-kpi strong.is-descontando {
        animation: siag-firma-descuento .45s ease;
    }
}

/*
 * Con animaciones reducidas no se mueve nada, pero el cambio se sigue marcando
 * con color: la informacion no puede depender solo del movimiento.
 */
@media (prefers-reduced-motion: reduce) {

    .siag-firma-kpi strong.is-descontando {
        color: #2f7d4f;
    }
}

.siag-firma-kpi-sep {
    background: var(--siag-firma-borde);
    height: 20px;
    width: 1px;
}

.siag-firma-filtros #ampliarBusqueda {
    flex: 0 1 auto;
    font-size: 14px;
    min-height: 42px;
    padding: 10px 16px;
}

.siag-firma-filtros #ampliarBusqueda[hidden],
.siag-firma-filtros #ampliarNota[hidden] {
    display: none;
}

/* Accion secundaria: se lee como enlace, no compite con nada */
.siag-firma-enlace {
    background: none;
    border: 0;
    border-radius: var(--siag-firma-radio);
    color: var(--siag-brand-dark-3, #356894);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 40px;
    padding: 8px 10px;
}

.siag-firma-enlace:hover {
    text-decoration: underline;
}

.siag-firma-enlace:focus-visible {
    outline: 3px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
    outline-offset: 2px;
}

@media (max-width: 560px) {

    /* En una columna estrecha, resumen y acciones se apilan a todo el ancho */
    .siag-firma-resumen,
    .siag-firma-filtros-acciones {
        width: 100%;
    }

    .siag-firma-filtros #ampliarBusqueda {
        flex: 1 1 100%;
    }
}

/* El QR se genera al salir del campo; centrado y con aire cuando aparece */
.siag-firma-qr {
    display: flex;
    justify-content: center;
}

.siag-firma-qr:not(:empty) {
    margin-top: 8px;
}

.siag-firma-qr img,
.siag-firma-qr canvas {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Listas desplegables
   ---------------------------------------------------------------------------
   Criterio: la fila sobre la que se pasa el raton se marca en gris neutro y solo
   la opcion elegida lleva el color de marca. Pintar de marca todo lo que se
   sobrevuela compite con la accion principal de la pantalla y, con marcas muy
   saturadas, deja el texto ilegible mientras se recorre la lista.
*/
.siag-firma-page .select2-drop {
    border-color: var(--siag-firma-borde);
    border-radius: var(--siag-firma-radio);
    box-shadow: 0 6px 18px rgba(23, 32, 51, .1);
}

.siag-firma-page .select2-results .select2-highlighted {
    background: var(--siag-firma-suave);
    color: var(--siag-firma-texto);
}

.siag-firma-page .select2-results .select2-result.select2-selected,
.siag-firma-page .select2-results [aria-selected="true"] {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .12);
    color: var(--siag-brand-dark-3, #356894);
    font-weight: 600;
}

/*
 * El desplegable de un <select> nativo lo dibuja el sistema operativo y no
 * admite estilos. accent-color es lo unico que el navegador respeta, y sirve
 * ademas para casillas y radios.
 */
.siag-firma-page {
    accent-color: var(--siag-brand, #4888be);
}

.siag-firma-page ::selection {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .22);
}

/* ---------------------------------------------------------------------------
   Pie y vuelta al inicio
   ---------------------------------------------------------------------------
   Todas las pantallas publicas vuelven al inicio de la misma forma: un enlace
   discreto al pie. Antes cada una lo resolvia a su manera -unas con un boton
   azul a todo el ancho, otras con un enlace- y el boton grande competia con la
   accion real de la pantalla siendo la salida, no el objetivo.
*/
.siag-firma-pie {
    color: var(--siag-firma-muted);
    font-size: 13px;
    margin-top: 22px;
    text-align: center;
}

.siag-firma-pie a {
    color: var(--siag-brand-dark-3, #356894);
}

/*
 * La salida iba separada por una linea divisoria y un margen amplio, y quedaba
 * flotando lejos del contenido, como si perteneciera a otra seccion. Ahora va
 * pegada a lo que cierra la pantalla: sigue siendo secundaria por su peso, no
 * por la distancia.
 */
.siag-firma-volver {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: center;
    margin-top: 14px;
    text-align: center;
}

.siag-firma-volver a {
    align-items: center;
    border-radius: var(--siag-firma-radio);
    color: var(--siag-brand-dark-3, #356894);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    min-height: 44px; /* objetivo tactil comodo */
    padding: 6px 14px;
    text-decoration: none;
}

.siag-firma-volver a:hover {
    background: var(--siag-firma-suave);
}

/*
 * La casita. Mismo ajuste que los demas glyphicons de estas pantallas: el tema
 * los dibuja en un pseudo-elemento colocado en absoluto, pensado para ir junto a
 * un texto a su derecha; devolviendolo al flujo se alinea con la linea de base.
 */
.siag-firma-volver .glyphicons {
    display: inline-block;
    height: 18px;
    padding: 0;
    width: 18px;
}

.siag-firma-volver .glyphicons i {
    display: block;
    height: 18px;
    width: 18px;
}

.siag-firma-volver .glyphicons i:before {
    display: block;
    font-size: 16px;
    left: auto;
    line-height: 18px;
    margin: 0;
    position: relative;
    text-align: center;
    top: auto;
    width: 18px;
}

.siag-firma-volver a:hover,
.siag-firma-volver a:focus {
    text-decoration: underline;
}

.siag-firma-volver a:focus-visible {
    border-radius: var(--siag-firma-radio);
    outline: 3px solid rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Telefono
   ---------------------------------------------------------------------------
   Es el caso principal, no la excepcion: se llega desde un enlace de correo.
*/
@media (max-width: 640px) {

    :root {
        --siag-firma-logo-ancho: 200px;
    }

    .siag-firma-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .siag-firma-btn {
        flex: 1 1 100%;
    }

    .siag-firma-grupo table > thead > tr > th,
    .siag-firma-grupo table > tbody > tr > td {
        padding: 10px 8px;
    }

    /*
     * En telefono el reparto de columnas lo decide el plugin DataTables
     * Responsive con las clases "all" y "desktop" del <thead>: lo que no cabe
     * pasa a la fila de detalle en vez de perderse. Aqui solo se libera el
     * ancho minimo para que no aparezca la barra horizontal.
     */
    .siag-firma-grupo table { min-width: 0; }


    /*
     * Encuestas: se queda lo necesario para decidir y actuar -que encuesta es,
     * cuanto llevas y el boton. El numero de fila, la empresa y las dos fechas
     * llevan la clase "desktop" y el plugin las mueve a la fila de detalle, de
     * donde se pueden desplegar; no se ocultan con CSS.
     */
}

/* ---------------------------------------------------------------------------
   Ajustes del contenido cuando hay panel lateral
   ---------------------------------------------------------------------------
   Va al final del archivo a proposito: la definicion base de .siag-firma-page
   aparece antes y, al tener las media queries la misma especificidad, la que
   gana es la ultima en el orden. Colocarlo junto al panel dejaba estas reglas
   sin efecto.
*/
@media (min-width: 992px) {

    /*
     * El margen solo se aplica cuando hay panel: se selecciona por el hermano
     * anterior, no con una clase, para que la vista no tenga que declarar dos
     * veces lo mismo. Las pantallas de firmas y encuestas no incluyen el panel
     * -sus tablas necesitan todo el ancho- y por tanto tampoco reciben margen.
     *
     * El contenido se centra en el espacio que deja el panel, no se pega a el:
     * un margin-left fijo anula el "margin: 0 auto" y lo dejaria alineado a la
     * izquierda con todo el hueco sobrante a la derecha. La cuenta reparte ese
     * sobrante a partes iguales.
     */
    .siag-firma-hero ~ .siag-firma-page {
        margin-left: calc(
            var(--siag-firma-panel-ancho)
            + max(0px, (100% - var(--siag-firma-panel-ancho) - 720px) / 2)
        );
        /* Sin la reserva de la franja, que con panel no se ve */
        padding-top: clamp(10px, 2vh, 18px);
    }

    /* Con panel, la franja sobra: el color de marca ya lo aporta el panel */
    .siag-firma-hero + .siag-firma-marca-franja {
        display: none;
    }