.navbar-jne {
    background-color: #952F17;
}

a {
    color: #ffffff;
}
a:hover {
    color: #ffffff;
    /*color: #0d0d0d;*/
    text-decoration: none;
}

.linkjne {
    color: #952F17;
}

    .linkjne:hover {
        color: #000;
    }

.label-rojo {
    color: #952F17;
}
.label-rojo:hover {
    color: #952F17;
}

.content-wrapper {
    background: #e5e5e5;
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused, .sidebar-mini.sidebar-collapse .main-sidebar:hover {
    width: 21% !important;
}

.vi-wrapper-op-white {
    background: white;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 30px;
}

.container-404 {
    display: flex;
    background: url(../images/fondo-lineas-curvas.png);
}

.titulo-404 {
    color: #3C3C3B;
    font-size: 63px;
    font-family: 'Fjalla One', sans-serif;
    line-height: 63px;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    justify-content: center;
    margin-left: 13%;
    width: 35%;
}

.titulo-404 span {
    color: #952F17;
    font-size: 84px;
    display: block;
    margin-bottom: 30px;
}

.vi-btn-principal {
    background: #952F17;
    color: white;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 0;
    display: inline-block;
    height: 48px;
    padding: 0 20px;
    text-transform: uppercase;
    line-height: 17px;
    font-family: 'Poppins', sans-serif;
}

.vi-btn-principal:focus {
    outline: 0;
}

.vi-btn-principal:hover {
    background: #952F17;
}

.vi-btn-principal:disabled {
    background: #B78583;
    cursor: not-allowed;
}

.vi-btn-principal--black {
    background: #3C3C3B;
}

.vi-btn-principal--black:hover {
    background: #1D1D1C;
}

.loader {
    position: fixed;
    top: 50%;
    left: 48%;
    text-align: center;
    display: none;
}

#tblConsulta_length {
    display: block;
}

.dataTables_length {
    display: none;
}

/* Grillas de los formatos (FIVI / monitor): los textos largos se parten y no desbordan la tabla */
table.dataTable td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* Grilla de observaciones: fechas, estados y acciones al ancho de su título; la observación ocupa el resto */
#tblObsCae {
    table-layout: auto !important;
}

/* Botón "Ir a Consulta de Formatos": al abrir un formato existente (URL con ?id=, ver generales.js)
   se muestra para todos los perfiles; solo navega, no guarda. El !important se impone a los .hide()
   de cada formato. */
.formato-existente #finalizar,
.formato-existente #btnfinalizar {
    display: block !important;
}

.formato-existente #btnFinalizar {
    display: inline-block !important;
}

/* Registro nuevo (entrada desde el menú, URL sin ?id=): sin botones de regreso */
.formato-nuevo #finalizar,
.formato-nuevo #btnfinalizar,
.formato-nuevo #btnFinalizar,
.formato-nuevo #btnVolverSuperior {
    display: none !important;
}

/* Botones de acción centrados de los formularios (Generar Formato, Guardar, Volver...): mismo ancho
   para que queden alineados uno debajo del otro. No afecta a los botones dentro de las grillas. */
div.text-center > .btn.btn-primary,
div.text-center > #btnFinalizar,
#btnVolverSuperior {
    min-width: 140px;
}

/* Barra de título del formato con el botón "Volver" a la derecha (ver AgregarVolverSuperior) */
.card-header.sae-cabecera-con-volver {
    display: flex;
    align-items: center;
}

.card-header.sae-cabecera-con-volver > .card-tools {
    margin: 0 0 0 auto;
    float: none;
}

/* Títulos de todas las grillas: centrados, fondo gris suave y línea inferior marcada */
table.table > thead > tr > th {
    text-align: center;
    vertical-align: middle;
    background-color: #f4f6f9;
    color: #343a40;
    border-bottom: 2px solid #adb5bd;
}

/* Filas alternas suaves (las tablas table-striped conservan las de Bootstrap) */
table.table:not(.table-striped) > tbody > tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

/* El resaltado al pasar el ratón se mantiene sobre las filas alternas */
table.table.table-hover > tbody > tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

#tblObsCae .obs-col-ajustada {
    width: 1% !important;
}

/* el contenido (fecha, estado, botones) en una línea; el título puede ocupar dos */
#tblObsCae td.obs-col-ajustada {
    white-space: nowrap !important;
}

#tblObsCae th.obs-col-ajustada {
    white-space: normal !important;
    min-width: 70px;
}

/* las fechas mantienen su ancho aunque la columna esté vacía: el título ocupa como máximo dos líneas */
#tblObsCae th.obs-col-fecha {
    min-width: 130px;
}

#tblObsCae .obs-col-persona {
    width: 180px !important;
    min-width: 140px;
}

#tblObsCae th.obs-col-observacion,
#tblObsCae td.obs-col-observacion {
    width: auto !important;
    max-width: none !important;
}

/* Anchos de columna reutilizables en las grillas (se asignan con columnDefs className en cada script).
   !important porque DataTables escribe su propio ancho en línea en cada título.
   Se usan en F02B (V. Actores altamente influyentes) y F01 (III. Instituciones). */
table.dataTable th.col-telefono {
    width: 105px !important;
}

table.dataTable td.col-telefono {
    white-space: nowrap !important;
}

table.dataTable th.col-ubigeo {
    width: 105px !important;
}

table.dataTable th.col-texto-ancho {
    width: 180px !important;
}

table.dataTable th.col-dni {
    width: 85px !important;
}

table.dataTable td.col-dni {
    white-space: nowrap !important;
}

table.dataTable th.col-corta {
    width: 95px !important;
}

table.dataTable th.col-mediana {
    width: 130px !important;
}

/* Columna de numeración (1, 2, 3...) */
table.dataTable th.col-numero {
    width: 50px !important;
}

/* Datos que no deben partirse (códigos, fechas, estados): sin esto la regla general de las celdas
   corta palabras como "REGISTRA / DO" */
table.dataTable td.col-sin-corte {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

table.dataTable th.col-fecha {
    width: 110px !important;
}

table.dataTable td.col-fecha {
    white-space: nowrap !important;
}

/* Columna de botones: todos en una sola fila */
table.dataTable th.col-acciones {
    width: 160px !important;
}

table.dataTable td.col-acciones {
    white-space: nowrap !important;
}

table.dataTable th.col-email {
    width: 150px !important;
}

table.dataTable th.col-direccion {
    width: 260px !important;
}

table.dataTable th.col-texto-extra-ancho {
    width: 240px !important;
}

/* Estados en la grilla de observaciones (mismos colores que la consulta de formatos) */
#tblObsCae td.estado-observado {
    color: red;
}

#tblObsCae td.estado-subsanado {
    color: orange;
}

#tblObsCae td.estado-aprobado {
    color: green;
}

/* Estado como etiqueta de color en las grillas (ver EtiquetaEstado en generales.js). Mismos colores de
   siempre (azul, rojo, naranja, verde) sobre un fondo suave, con texto oscuro para que se lea mejor. */
.estado-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.5;
    white-space: nowrap;
    background-color: #e9ecef;
    color: #495057;
}

.estado-pill.estado-registrado {
    background-color: #e3edfd;
    color: #1c4f9c;
}

.estado-pill.estado-observado {
    background-color: #fde2e2;
    color: #9b1c1c;
}

.estado-pill.estado-subsanado {
    background-color: #ffeacc;
    color: #8a4b00;
}

.estado-pill.estado-aprobado {
    background-color: #dcf3e3;
    color: #1d6b34;
}

/* Celdas con mucho texto (p. ej. OBSERVACIÓN): altura máxima con scroll propio */
table.dataTable td .celda-texto-largo {
    max-height: 120px;
    overflow-y: auto;
    padding-right: 4px;
}

/* ===== Estilo de botones y campos (opción A: redondeado suave con foco visible) ===== */

/* Botones: esquinas de 6 px y texto algo más marcado */
.btn {
    border-radius: 6px;
    font-weight: 600;
}

.btn-sm {
    border-radius: 4px;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #2f80ed;
    border-color: #2f80ed;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #1c6fd9;
    border-color: #1c6fd9;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.3);
}

/* Icono de guardar en el botón principal de los modales. Va en CSS (no en el HTML) porque varios
   scripts reescriben el texto del botón con .text("Guardar") y borrarían un icono del HTML.
   Los botones principales que no son "Guardar" llevan la clase sin-icono, y no se añade si el botón
   ya trae un icono propio (p. ej. el giratorio de "Guardando..."). */
.modal-footer .btn-primary:not(.sin-icono):not(:has(i))::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c7";
    margin-right: 6px;
}

/* "Cancelar" de los modales (clase antigua btn-default): mismo gris que "Volver" */
.btn-default {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:not(:disabled):not(.disabled):active {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}

/* Pie de los modales: "Guardar" y "Cancelar" con la misma forma (píldora). "Cancelar" va en contorno
   claro con icono de cerrar, para que no compita con la acción principal. */
.modal-footer .btn-primary,
.modal-footer .btn-default {
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 700;
}

.modal-footer .btn-default {
    background-color: #fff;
    border: 1px solid #D1D5DB;
    color: #374151;
}

.modal-footer .btn-default:hover,
.modal-footer .btn-default:focus,
.modal-footer .btn-default:not(:disabled):not(.disabled):active {
    background-color: #F3F4F6;
    border-color: #9CA3AF;
    color: #111827;
}

.modal-footer .btn-default:focus {
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.35);
}

.modal-footer .btn-default:not(:has(i))::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d"; /* cerrar */
    margin-right: 6px;
}

/* Combos, cajas de texto y áreas de texto */
.form-control {
    border-radius: 6px;
}

.form-control:focus {
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.2);
}

/* Campos bloqueados o de solo lectura: gris más suave */
.form-control:disabled,
.form-control[readonly] {
    background-color: #f4f6f9;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Combos con buscador (Select2). select2.css se carga después de este archivo: se usa "body" para
   que estas reglas tengan prioridad. */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    border-color: #ced4da;
    border-radius: 6px;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.2);
}

body .select2-container--default.select2-container--disabled .select2-selection--single,
body .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #f4f6f9;
    border-color: #dee2e6;
}

body .select2-dropdown {
    border-color: #2f80ed;
    border-radius: 6px;
}

/* ===== Títulos de sección de los formatos ("I. DATOS GENERALES", "II. PARTICIPANTES"...) =====
   Barra con el rojo institucional en lugar del subrayado. "body" para imponerse a las hojas de cada
   formato (pactosocial.css, rebote.medio.css...), que se cargan después y definen el subrayado. */
body .sub-rayado-label {
    display: inline-block;
    text-decoration: none;
    border-left: 3px solid #952F17;
    padding-left: 8px;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ===== Iconos en los botones que no los traen (mismo mecanismo que "Guardar" de los modales) =====
   No se añade si el botón ya tiene un icono propio. */
#btnBuscar:not(:has(i))::before,
#BtnBuscarDni:not(:has(i))::before,
#btnConsultar:not(:has(i))::before,
#btnNuevo:not(:has(i))::before,
#open-modulo:not(:has(i))::before,
#open-perfil:not(:has(i))::before,
#open-proceso:not(:has(i))::before,
#open-sistema:not(:has(i))::before,
#open-usuario:not(:has(i))::before,
#btnFinalizar:not(:has(i))::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

#btnBuscar:not(:has(i))::before,
#BtnBuscarDni:not(:has(i))::before,
#btnConsultar:not(:has(i))::before {
    content: "\f002"; /* lupa */
}

#btnNuevo:not(:has(i))::before,
#open-modulo:not(:has(i))::before,
#open-perfil:not(:has(i))::before,
#open-proceso:not(:has(i))::before,
#open-sistema:not(:has(i))::before,
#open-usuario:not(:has(i))::before {
    content: "\f067"; /* más */
}

#btnFinalizar:not(:has(i))::before {
    content: "\f060"; /* flecha atrás */
}

/* ===== Botones dentro de las grillas: todos del mismo tamaño (hoy hay btn-sm, btn-md y normales) ===== */
table.dataTable td .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 4px;
}

/* ===== Campos obligatorios en formularios y modales =====
   Se marca la etiqueta con la clase "obligatorio"; la leyenda va con la clase "leyenda-obligatorio". */
label.obligatorio::after {
    content: " *";
    color: #dc3545;
}

.leyenda-obligatorio {
    font-size: 0.8rem;
    color: #6c757d;
}

.leyenda-obligatorio::before {
    content: "* ";
    color: #dc3545;
}


/* Mensaje de validación debajo del campo (ver MarcarCampoInvalido en generales.js) */
.msg-campo {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.leyenda-obligatorio.en-modal {
    display: block;
    margin-bottom: 0.75rem;
}

/* Número de formato en la cabecera de los formatos (azul acero) */
.txt-nro-formato,
.txt-nro-formato:disabled {
    color: #4682B4 !important;
    font-weight: 600;
}

/* Consulta de formatos: anchos propios y detalle centrado */
table.dataTable th.cf-col-n { width: 42px !important; }          /* N°: hasta 4 dígitos */
table.dataTable th.cf-col-proceso { width: 300px !important; }
table.dataTable th.cf-col-nro { width: 120px !important; }
table.dataTable th.cf-col-fecha { width: 80px !important; }
#tblConsulta tbody td { text-align: center; vertical-align: middle; }

/* ===== Consulta de formatos: estilo del portal DNE (solo en esta vista, clase cf-moderna) =====
   Rojo institucional para la marca y los avisos; azul para las acciones. */
.cf-moderna {
    --cf-rojo: #BE1717;
    --cf-azul: #2563EB;
    --cf-azul-oscuro: #1D4ED8;
    --cf-gris-texto: #4B5563;
    --cf-gris-suave: #6B7280;
    --cf-borde: #E5E7EB;
    font-family: 'Lato', 'Source Sans Pro', sans-serif;
}
.content-header.cf-moderna { padding-bottom: 4px; }
.cf-moderna .cf-barra { height: 6px; background: var(--cf-rojo); border-radius: 999px; margin-bottom: 14px; width: 72px; }
.cf-moderna .cf-chip {
    display: inline-block; background: rgba(190, 23, 23, .1); color: var(--cf-rojo);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
}
.cf-moderna .cf-titulo { font-size: 26px; font-weight: 900; color: #374151; margin: 8px 0 0; }
.cf-moderna .cf-ruta { background: transparent; margin: 0; padding: 0; font-size: 13px; }
.cf-moderna .cf-ruta .breadcrumb-item, .cf-moderna .cf-ruta .breadcrumb-item a, .cf-moderna .cf-ruta .breadcrumb-item + .breadcrumb-item::before { color: var(--cf-gris-suave) !important; }

.cf-moderna .cf-tarjeta {
    background: #fff; border: 1px solid var(--cf-borde); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05); margin-bottom: 16px;
}
.cf-moderna .cf-filtros { padding: 18px 20px 14px; }
.cf-moderna .cf-campo { margin-bottom: 12px; }
.cf-moderna .cf-etiqueta { display: block; font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.cf-moderna .cf-campo .form-control,
.cf-moderna .cf-campo .select2-container--default .select2-selection--single {
    border-radius: 10px; border-color: var(--cf-borde); height: 38px;
}
.cf-moderna .cf-campo .form-control:focus { border-color: var(--cf-azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.cf-moderna .cf-acciones { display: flex; justify-content: flex-end; }

/* Botones: azul para la acción principal, contorno para exportar */
.cf-moderna .cf-btn-principal {
    background: var(--cf-azul); color: #fff; border: none; border-radius: 999px;
    padding: 8px 22px; font-weight: 700; box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}
.cf-moderna .cf-btn-principal:hover, .cf-moderna .cf-btn-principal:focus { background: var(--cf-azul-oscuro); color: #fff; }
.cf-moderna .dt-buttons .btn.cf-btn-contorno {
    background: #fff; color: var(--cf-gris-texto); border: 1px solid var(--cf-borde);
    border-radius: 999px !important; padding: 5px 14px; margin-left: 6px; font-size: 13px; font-weight: 700;
}
.cf-moderna .dt-buttons .btn.cf-btn-contorno:hover { border-color: var(--cf-azul); color: var(--cf-azul); }

/* Resultados */
.cf-moderna .cf-resultados { padding: 14px 16px; }
.cf-moderna table.cf-tabla { border-collapse: collapse !important; }
.cf-moderna table.cf-tabla thead th {
    background: #F3F4F6; color: #111827; font-size: 12px; font-weight: 700; vertical-align: middle;
    text-transform: none; border-top: none; border-bottom: 2px solid #D1D5DB !important;
}
.cf-moderna table.cf-tabla tbody td { border-top: 1px solid var(--cf-borde); color: #374151; font-size: 13px; }
.cf-moderna table.cf-tabla tbody tr:hover { background: #F3F4F6; }
.cf-moderna table.cf-tabla .btn-primary { background: transparent; color: var(--cf-azul); border: 1px solid var(--cf-borde); border-radius: 999px; }
.cf-moderna table.cf-tabla .btn-primary:hover { background: var(--cf-azul); color: #fff; }
.cf-moderna table.cf-tabla .btn-info { border-radius: 999px; }
.cf-moderna table.cf-tabla .btn-danger { background: transparent; color: var(--cf-rojo); border: 1px solid var(--cf-borde); border-radius: 999px; }
.cf-moderna table.cf-tabla .btn-danger:hover { background: var(--cf-rojo); color: #fff; }
.cf-moderna table.cf-tabla .btn-success { background: transparent; color: #15803D; border: 1px solid var(--cf-borde); border-radius: 999px; }
.cf-moderna table.cf-tabla .btn-success:hover, .cf-moderna table.cf-tabla .btn-success:focus { background: #15803D; border-color: #15803D; color: #fff; }
/* Consultas con botón "Agregar" sobre la grilla (p. ej. Encuestas) y botón para limpiar un filtro de fecha */
.cf-moderna .cf-barra-resultados { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.cf-moderna .cf-btn-limpiar { background: #fff; color: var(--cf-gris-texto); border: 1px solid #D1D5DB; border-left: 0; }
.cf-moderna .cf-btn-limpiar:hover, .cf-moderna .cf-btn-limpiar:focus { color: var(--cf-rojo); background: #FEF2F2; }

/* Paginación: números redondos, la página activa en azul */
.cf-moderna .dataTables_paginate .page-link { border: none; border-radius: 999px !important; color: var(--cf-gris-texto); margin: 0 2px; min-width: 32px; text-align: center; }
.cf-moderna .dataTables_paginate .page-item.active .page-link { background: var(--cf-azul); color: #fff; }
.cf-moderna .dataTables_info, .cf-moderna .dataTables_length { color: var(--cf-gris-suave); font-size: 13px; }

/* ===== Formatos con el estilo del portal DNE (clase fm-moderna; por ahora F04A) =====
   Usa las variables y el encabezado de cf-moderna. Cada sección del formato es una tarjeta. */
.fm-moderna .fm-contenedor { background: transparent; border: none; box-shadow: none; margin-bottom: 0; }
.fm-moderna .fm-contenedor > .card-body { padding: 0; }
.fm-moderna .leyenda-obligatorio { margin-bottom: 8px; }
.fm-moderna .fm-seccion {
    background: #fff; border: 1px solid var(--cf-borde); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05); padding: 16px 18px; margin-bottom: 14px;
}
/* Títulos de sección: barra roja institucional y texto oscuro */
.fm-moderna .sub-rayado-label {
    border-left: 4px solid var(--cf-rojo); border-radius: 2px; padding-left: 10px;
    font-size: 15px; font-weight: 900; color: #1F2937; margin-bottom: 10px;
}
/* Etiquetas de los campos en negro */
.fm-moderna .col-form-label label, .fm-moderna .form-group > label, .fm-moderna label.col-form-label { color: #111827; font-weight: 700; }
.fm-moderna .form-control { border-radius: 10px; border-color: var(--cf-borde); }
.fm-moderna .form-control:focus { border-color: var(--cf-azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.fm-moderna .form-control:disabled, .fm-moderna .form-control[readonly] { background: #F3F4F6; }

/* Botones: azul tipo píldora para las acciones (Agregar, Guardar, Generar, Finalizar) */
.fm-moderna .btn-primary {
    background: var(--cf-azul); border-color: var(--cf-azul); color: #fff; border-radius: 999px;
    padding-left: 16px; padding-right: 16px; font-weight: 700;
}
.fm-moderna .btn-primary:hover, .fm-moderna .btn-primary:focus { background: var(--cf-azul-oscuro); border-color: var(--cf-azul-oscuro); }
.fm-moderna .btn-primary:disabled { background: #93B4F5; border-color: #93B4F5; }

/* Grillas: encabezado oscuro, datos centrados, editar en azul y eliminar en rojo */
.fm-moderna table.dataTable { border-collapse: collapse !important; }
.fm-moderna table.dataTable thead th {
    background: #F3F4F6; color: #111827; font-size: 12px; font-weight: 700; vertical-align: middle; text-align: center;
    border-top: none; border-bottom: 2px solid #D1D5DB !important; border-left: none; border-right: none;
}
.fm-moderna table.dataTable tbody td { border-left: none; border-right: none; border-top: 1px solid var(--cf-borde); color: #374151; font-size: 13px; text-align: center; vertical-align: middle; }
.fm-moderna table.dataTable tbody tr:hover { background: #F3F4F6; }
.fm-moderna table.dataTable td .btn-primary { background: transparent; color: var(--cf-azul); border: 1px solid var(--cf-borde); padding: 0.25rem 0.5rem; }
.fm-moderna table.dataTable td .btn-primary:hover { background: var(--cf-azul); color: #fff; }
.fm-moderna table.dataTable td .btn-danger { background: transparent; color: var(--cf-rojo); border: 1px solid var(--cf-borde); border-radius: 999px; }
.fm-moderna table.dataTable td .btn-danger:hover { background: var(--cf-rojo); color: #fff; }
/* Ver (lupa): mismo contorno redondo que Editar y Eliminar, en gris */
.fm-moderna table.dataTable td .btn-secondary { background: transparent; color: #4B5563; border: 1px solid var(--cf-borde); border-radius: 999px; }
.fm-moderna table.dataTable td .btn-secondary:hover, .fm-moderna table.dataTable td .btn-secondary:focus { background: #4B5563; border-color: #4B5563; color: #fff; }
/* Ver certificado (lupa verde de Voluntariado): mismo contorno, en verde */
.fm-moderna table.dataTable td .btn-success.btn-sm { background: transparent; color: #15803D; border: 1px solid var(--cf-borde); }
.fm-moderna table.dataTable td .btn-success.btn-sm:hover, .fm-moderna table.dataTable td .btn-success.btn-sm:focus { background: #15803D; border-color: #15803D; color: #fff; }
/* Botones de acción de las grillas: círculos del mismo tamaño. El !important se impone a .rounded-0
   de Bootstrap (border-radius: 0 !important), que tienen muchos botones de las grillas. */
.fm-moderna table.dataTable td .btn-primary.btn-sm,
.fm-moderna table.dataTable td .btn-secondary.btn-sm,
.fm-moderna table.dataTable td .btn-danger.btn-sm,
.fm-moderna table.dataTable td .btn-success.btn-sm {
    width: 30px; height: 30px; padding: 0; border-radius: 999px !important;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; vertical-align: middle;
}
.fm-moderna table.dataTable td .btn-danger,
.fm-moderna table.dataTable td .btn-secondary { border-radius: 999px !important; }
.fm-moderna table.dataTable td .btn:disabled { opacity: 0.45; }
.fm-moderna table.table-bordered { border: none; }
.fm-moderna .dataTables_paginate .page-link { border: none; border-radius: 999px !important; color: var(--cf-gris-texto); margin: 0 2px; }
.fm-moderna .dataTables_paginate .page-item.active .page-link { background: var(--cf-azul); color: #fff; }
.fm-moderna .dataTables_info { color: var(--cf-gris-suave); font-size: 13px; }

/* Archivos: marca de adjuntado como etiqueta verde */
.fm-moderna .archivo-adjuntado.badge-success { background: #DCFCE7; color: #166534; border-radius: 999px; padding: 4px 10px; font-weight: 700; }

/* Formatos (fm-moderna): tipo de formato y título más visibles */
.fm-moderna .cf-chip, .content-header.cf-moderna .cf-chip { font-size: 13px; padding: 5px 14px; }
.content-header.cf-moderna .cf-titulo { font-size: 28px; }

/* Encabezado oscuro también en las tablas antes de que DataTables las inicialice */
.fm-moderna table.table thead th {
    background: #F3F4F6; color: #111827; font-size: 12px; font-weight: 700; vertical-align: middle; text-align: center;
    border-top: none; border-bottom: 2px solid #D1D5DB !important; border-left: none; border-right: none;
}

/* Botón "Elegir archivo": contorno tipo píldora (el texto lo pone el navegador) */
.fm-moderna input[type="file"] { font-size: 13px; color: var(--cf-gris-texto); }
.fm-moderna input[type="file"]::file-selector-button {
    background: #fff; color: var(--cf-azul); border: 1px solid var(--cf-azul); border-radius: 999px;
    padding: 5px 14px; margin-right: 10px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.fm-moderna input[type="file"]::file-selector-button:hover { background: var(--cf-azul); color: #fff; }
.fm-moderna input[type="file"]:disabled::file-selector-button { color: #9CA3AF; border-color: var(--cf-borde); background: #F3F4F6; cursor: default; }
.fm-moderna input[type="file"]::-webkit-file-upload-button {
    background: #fff; color: var(--cf-azul); border: 1px solid var(--cf-azul); border-radius: 999px;
    padding: 5px 14px; margin-right: 10px; font-weight: 700; cursor: pointer;
}

/* Título del formato en una línea: el código (Formato F04A) en rojo y del mismo tamaño que el nombre */
.content-header.cf-moderna .fm-titulo { font-size: 28px; line-height: 1.25; }
.content-header.cf-moderna .fm-titulo .fm-codigo { color: var(--cf-rojo); font-weight: 900; margin-right: 6px; }
.content-header.cf-moderna .fm-titulo .fm-codigo::after { content: ":"; }

/* Formatos: horas angostas y acciones de la grilla en una sola línea */
table.dataTable th.fm-col-hora { width: 70px !important; }
.fm-moderna table.dataTable td.fm-col-acciones, .fm-moderna table.dataTable td:last-child { white-space: nowrap; }
.fm-moderna table.dataTable td:last-child .btn { margin: 0 2px; }

/* Botón Ver del archivo adjuntado (todos los formatos): contorno azul tipo píldora, junto a la marca Adjuntado */
.btn.ver-archivo-adjuntado {
    background: #fff; color: #2563EB; border: 1px solid #2563EB; border-radius: 999px;
    padding: 1px 12px; font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: middle;
}
.btn.ver-archivo-adjuntado:hover, .btn.ver-archivo-adjuntado:focus { background: #2563EB; color: #fff; }
.badge.archivo-adjuntado { vertical-align: middle; }

/* Formatos: botón "Ir a Consulta de Formatos" al pie de la tarjeta de datos del formato (contorno, no azul) */
.fm-moderna .fm-volver { display: flex; justify-content: flex-end; margin-top: 4px; }
.fm-moderna .fm-volver .btn-secondary, .fm-moderna #finalizar .btn-secondary {
    background: #fff; color: var(--cf-gris-texto); border: 1px solid #D1D5DB; border-radius: 999px; padding: 6px 16px; font-weight: 700;
}
.fm-moderna .fm-volver .btn-secondary:hover, .fm-moderna #finalizar .btn-secondary:hover { border-color: var(--cf-azul); color: var(--cf-azul); background: #fff; }

/* Formatos: dentro de cada sección el texto no supera al título de la sección (la cabecera queda igual) */
.fm-moderna .fm-seccion .sub-rayado-label { font-size: 16px !important; }
.fm-moderna .fm-seccion:not(.fm-cabecera) label:not(.sub-rayado-label),
.fm-moderna .fm-seccion:not(.fm-cabecera) .col-form-label,
.fm-moderna .fm-seccion:not(.fm-cabecera) .form-control,
.fm-moderna .fm-seccion:not(.fm-cabecera) small { font-size: 13px; }
.fm-moderna .fm-seccion:not(.fm-cabecera) small { font-size: 12px; }

/* ===== Formatos con el estilo nuevo en una sola tarjeta (fm-unica): las demás vistas de formato =====
   El cuerpo es una tarjeta blanca y los <hr /> que separan las secciones se ven como franjas del fondo. */
.fm-moderna .fm-unica > .card-body {
    background: #fff; border: 1px solid var(--cf-borde); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05); padding: 16px 18px;
}
.fm-moderna .fm-unica > .card-body hr {
    border: 0; height: 14px; background: #e5e5e5; margin: 18px -19px; opacity: 1;
}
.fm-moderna .fm-unica > .card-body .sub-rayado-label { font-size: 16px !important; }
.fm-moderna .fm-unica > .card-body label:not(.sub-rayado-label),
.fm-moderna .fm-unica > .card-body .form-control { font-size: 14px; }
.fm-moderna .fm-unica > .card-body small { font-size: 12px; }
.fm-encabezado-interno { padding: 0 0 12px; }
.content-header.cf-moderna .fm-titulo label { font: inherit; color: inherit; margin: 0; }

/* Dos separadores seguidos se ven como uno solo */
.fm-moderna .fm-unica > .card-body hr + hr, .fm-moderna .fm-unica > .card-body hr + br + hr { display: none; }

/* ===== Avisos del sistema (Scripts/SAE/mensajes.js): reemplazan al alert() del navegador ===== */
#sae-avisos {
    position: fixed; top: 16px; right: 16px; z-index: 20000;
    display: flex; flex-direction: column; gap: 10px;
    width: 380px; max-width: calc(100vw - 32px); pointer-events: none;
}
.sae-aviso {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 14px 40px 14px 16px; border-radius: 10px; pointer-events: auto;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .18), inset 0 -4px 0 rgba(0, 0, 0, .08);
    font-size: 14px; line-height: 1.35; animation: sae-aviso-entra .25s ease-out;
}
.sae-aviso.saliendo { opacity: 0; transform: translateX(24px); transition: opacity .25s, transform .25s; }
.sae-aviso-icono {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 18px; background: #fff;
}
.sae-aviso-cuerpo { flex: 1 1 auto; min-width: 0; }
.sae-aviso-cuerpo strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.sae-aviso-texto { white-space: pre-line; overflow-wrap: anywhere; }
.sae-aviso-cerrar {
    position: absolute; top: 6px; right: 8px; border: 0; background: transparent;
    font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; opacity: .65; color: inherit;
}
.sae-aviso-cerrar:hover, .sae-aviso-cerrar:focus { opacity: 1; outline: none; }

.sae-aviso-info { background: #9ED3CD; color: #0E5A55; }
.sae-aviso-info .sae-aviso-icono { color: #3E9E95; }
.sae-aviso-warning { background: #FDD877; color: #B42318; }
.sae-aviso-warning .sae-aviso-icono { background: #E5484D; color: #fff; border-radius: 6px; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); padding-top: 8px; font-size: 16px; }
.sae-aviso-error { background: #F04E6E; color: #fff; }
.sae-aviso-error .sae-aviso-icono { color: #F04E6E; }
.sae-aviso-success { background: #A8E2BF; color: #14532D; }
.sae-aviso-success .sae-aviso-icono { color: #16A34A; }

@keyframes sae-aviso-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }