/* Salomon3 - Estilo Minimalista */

/* ========================================
   VARIABLES Y BASE
   ======================================== */
:root {
    --primary-color: #5a6f8a;
    --text-color: #4a5568;
    --text-muted: #a0aec0;
    --border-color: #e2e8f0;
    --bg-light: #f7fafc;

    /* Color por grado. FUENTE UNICA junto con config/grados.php (que el calendario
       necesita del lado de PHP: FullCalendar recibe el hex en el objeto del evento).
       GradosColoresTest verifica que las dos coincidan y que las tres pasen 4.5:1 de
       contraste con texto blanco (WCAG AA). Los tonos anteriores -#4e73df, #1cc88a,
       #e74a3b- no llegaban: 4.34, 2.17 y 3.86. */
    --grado-1: #31708f; /* Aprendiz  - azul   - 5.46:1 sobre blanco */
    --grado-2: #3c763d; /* Companero - verde  - 5.45:1 */
    --grado-3: #a94442; /* Maestro   - rojo   - 5.85:1 */
}

body {
    font-size: 13px;
    color: var(--text-color);
    background-color: #f8fafc !important;
}

body.sidebar-mini.layout-fixed .wrapper {
    background-color: #f8fafc !important;
}

/* ========================================
   SIDEBAR
   ======================================== */
.main-sidebar {
    font-size: 13px;
}

.sidebar .nav-link {
    padding: 0.5rem 1rem;
}

.sidebar .nav-link p {
    font-size: 13px;
}

.brand-link {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.nav-sidebar .nav-item > .nav-link .nav-icon {
    font-size: 14px;
    width: 1.2rem;
}

/* ========================================
   NAVBAR
   ======================================== */
.main-header.navbar {
    min-height: 46px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 0 !important;
}

/* Badges de notificaciones y mensajes en navbar */
.navbar .navbar-badge {
    font-size: 0.6rem;
    padding: 2px 4px;
    min-width: 16px;
    height: 16px;
    line-height: 12px;
    position: absolute;
    top: 5px;
    right: 2px;
}

#notificaciones-badge,
#mensajes-badge {
    font-size: 0.55rem;
    padding: 1px 3px;
    min-width: 14px;
    height: 14px;
    line-height: 12px;
}

.page-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    padding: 0.5rem 1rem;
}

/* Navbar Search */
.navbar-search-wrapper {
    flex-grow: 1;
    justify-content: flex-end;
}

.navbar-search-input {
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 4px 0 0 4px;
    background-color: var(--bg-light);
    font-size: 13px;
}

.navbar-search-input:focus {
    background-color: #fff;
    border-color: #80bdff;
    box-shadow: none;
}

.navbar-search-input:focus + .input-group-append .input-group-text {
    border-color: #80bdff;
    background-color: #fff;
}

.navbar-search-wrapper .input-group-text {
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 4px 4px 0;
    background-color: var(--bg-light);
}

@media (max-width: 576px) {
    .navbar-search-wrapper .input-group {
        width: 140px !important;
    }
}

@media (max-width: 400px) {
    .navbar-search-wrapper .input-group {
        width: 100px !important;
    }
    .navbar-search-input::placeholder {
        font-size: 11px;
    }
}

/* Margen superior para cards de contenido - eliminado para pegar al navbar */

/* Espaciado entre botones del card header */
.card-tools > .btn,
.card-tools > .btn-group,
.card-tools > a.btn {
    margin-left: 0.4rem;
}

.card-tools > .btn:first-child,
.card-tools > .btn-group:first-child,
.card-tools > a.btn:first-child {
    margin-left: 0;
}

/* Badges de filtros en card header */
#filtrosActivosDesktop .badge,
#filtrosActivosMobile .badge {
    cursor: default;
}

#filtrosActivosDesktop .badge a,
#filtrosActivosMobile .badge a {
    cursor: pointer;
    transition: opacity 0.2s;
}

#filtrosActivosDesktop .badge a:hover,
#filtrosActivosMobile .badge a:hover {
    opacity: 1 !important;
}

/* User Menu */
.user-avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: var(--primary-color);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.user-avatar-circle-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--primary-color);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.user-avatar-circle-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    border: 2px solid rgba(255,255,255,0.3);
    margin-bottom: 8px;
}

.user-menu .dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 0;
    min-width: 240px;
    font-size: 13px;
}

.user-menu .user-header {
    padding: 15px;
}

.user-menu .user-header p {
    font-size: 13px;
    margin-top: 8px;
}

.user-menu .user-header p small {
    font-size: 11px;
}

.user-menu .user-body {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
}

.user-menu .user-body small {
    font-size: 10px;
}

.user-menu .user-body .font-weight-bold {
    font-size: 12px;
    color: var(--primary-color);
}

.user-menu .user-footer {
    background-color: var(--bg-light);
    padding: 8px;
    gap: 4px;
    display: flex;
    flex-wrap: wrap;
}

.user-menu .user-footer .btn {
    font-size: 11px;
    padding: 0.35rem 0.5rem;
}

/* ========================================
   CARDS
   ======================================== */
.card {
    border: 1px solid var(--border-color);
    box-shadow: none;
    border-radius: 4px;
}

.card-outline.card-primary {
    border-top: 2px solid var(--primary-color);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
}

.card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.card-tools .btn {
    padding: 0.2rem 0.5rem;
    font-size: 12px;
}

.card-tools .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ========================================
   TABLES
   ======================================== */
.table {
    font-size: 12px;
}

.table thead th {
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    background-color: var(--bg-light);
    padding: 0.6rem 0.75rem;
}

.table tbody td {
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
    border-color: var(--border-color);
}

.table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Columnas angostas */
.col-action {
    width: 28px !important;
    max-width: 28px !important;
    padding: 0.4rem 0.25rem !important;
    text-align: center;
}

.col-icon {
    width: 36px !important;
    max-width: 36px !important;
    padding: 0.4rem 0.25rem !important;
}

/* Columna que se ajusta a su contenido (ancho = el más ancho entre th y td).
   Para matrícula, fecha y grado: nunca se exceden, así que ocupan lo mínimo y
   dejan el resto del ancho a las columnas de texto. Requiere DataTables autoWidth:false. */
.col-fit {
    width: 1% !important;            /* !important: gana sobre anchos inline que mete DataTables en el browser */
    white-space: nowrap !important;  /* !important: la columna nunca envuelve, así ocupa exactamente su contenido */
}

.col-action .btn {
    padding: 0;
    line-height: 1;
    font-size: 12px;
}

/* ========================================
   DATATABLES
   ======================================== */
.dataTables_wrapper {
    padding: 0;
    font-size: 12px;
}

/* ---- Utilidades de color por grado ----
   Reemplazan a text-danger / text-success / text-primary (y sus border-* y bg-*),
   que se usaban para pintar el grado en el avatar, el menu del usuario, la
   mensajeria, etc. Eran OTRA paleta -distinta de la del badge- y ademas
   significan otra cosa: un Maestro no es un "danger" ni un Companero un "success".
   El 0 es "sin grado" (neutro). Los tres colores salen de --grado-N, que es la
   fuente unica junto con config/grados.php (ver GradosColoresTest). */
.text-grado-0 { color: var(--text-muted) !important; }
.text-grado-1 { color: var(--grado-1) !important; }
.text-grado-2 { color: var(--grado-2) !important; }
.text-grado-3 { color: var(--grado-3) !important; }

.border-grado-0 { border-color: var(--border-color) !important; }
.border-grado-1 { border-color: var(--grado-1) !important; }
.border-grado-2 { border-color: var(--grado-2) !important; }
.border-grado-3 { border-color: var(--grado-3) !important; }

.bg-grado-0 { background-color: #6c757d !important; color: #fff !important; }
.bg-grado-1 { background-color: var(--grado-1) !important; color: #fff !important; }
.bg-grado-2 { background-color: var(--grado-2) !important; color: #fff !important; }
.bg-grado-3 { background-color: var(--grado-3) !important; color: #fff !important; }

/* Badge de grado (1 Aprendiz / 2 Companero / 3 Maestro) con colores. Reusable en
   toda la app (antes vivia inline en videoteca). Ver components/badge-grado. */
.badge-grado { font-size: 0.75rem; font-weight: 600; padding: 0.25em 0.55em; }
.badge-grado-1 { background: var(--grado-1); color: #fff; }
.badge-grado-2 { background: var(--grado-2); color: #fff; }
.badge-grado-3 { background: var(--grado-3); color: #fff; }

/* Identidad del hermano: el nombre conserva una linea propia y todas sus
   condiciones se ordenan debajo, en una linea flexible y reutilizable. */
.hermano-identidad-nombre {
    min-width: 0;
}

.hermano-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-top: 0.3rem;
    line-height: 1.2;
}

.hermano-badges > .badge,
.hermano-badges > i {
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .hermano-badges {
        font-size: 0.78rem;
        padding-right: 0.5rem;
    }
}

/* Badge de situación (Activo / Inactivo). MISMO tamaño que .badge-grado para que
   los dos se vean iguales cuando van juntos en una tarjeta. Ver components/badge-estado.
   Verde apagado para no chocar con el verde del grado Compañero (un tono más oscuro). */
.badge-estado { font-size: 0.75rem; font-weight: 600; padding: 0.25em 0.55em; }
.badge-estado-activo { background: #2f855a; color: #fff; }
.badge-estado-inactivo { background: #718096; color: #fff; }

/* Badge de Miembro Honorario Fundador (corona). Oro apagado con texto oscuro,
   para distinguirlo del honorario común dentro de la card de Honorarios. */
.badge-honorario-fundador { font-size: 0.75rem; font-weight: 600; padding: 0.25em 0.55em; background: #d4a017; color: #2d2a1f; }

/* Tabla pegada al card-header: DataTables le mete margin-top/bottom de 6px a
   table.dataTable, lo que la separa del header. Lo sacamos. Y el pie
   ("Mostrando..." / paginacion) recupera un poco de aire lateral aunque la
   tabla quede flush a los lados. Es CSS puro: aplica en cuanto DataTables
   agrega la clase .dataTable al inicializar (detras del overlay de carga). */
table.dataTable { margin-top: 0 !important; }
.dataTables_wrapper .dataTables_info { padding-left: 1rem; }
.dataTables_wrapper .dataTables_paginate { padding-right: 1rem; }

.dataTables_wrapper .dataTables_length {
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length select {
    font-size: 12px;
    padding: 0.2rem 1.5rem 0.2rem 0.4rem;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_filter input {
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.6rem;
}

.dataTables_wrapper .dataTables_info {
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 0.75rem;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 11px;
    padding: 0.3rem 0.6rem;
    border-radius: 3px !important;
    margin: 0 1px;
}

/* Con el renderer Bootstrap de DataTables, .paginate_button vive en el <li>
   y el padding visual ya lo aporta .page-link. Evita sumar ambos paddings y
   desbordar el viewport cuando hay varias paginas. */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Paginador de grillas (videoteca/galería, via public/js/grid-paginate.js).
   Reusa el look de la paginación de DataTables sobre markup Bootstrap estándar. */
.gp-page-hidden { display: none !important; }
.grid-paginacion {
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}
.grid-paginacion .pagination { margin-bottom: 0; }
.grid-paginacion .page-link {
    font-size: 11px;
    padding: 0.3rem 0.6rem;
}
.grid-paginacion .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
/* Una sola página: el paginador hace $controls.empty(); ocultamos el contenedor
   para no dejar el padding-top como una franja muerta bajo la grilla. */
.grid-paginacion:empty { display: none; }

/* Mobile: mismo tratamiento que la paginación DataTables (una sola línea,
   centrado, Anterior/Siguiente -> chevrons ‹ ›). Breakpoint 767.98 para alinear
   con tabla-cards.css (por debajo del md de Bootstrap). */
@media (max-width: 767.98px) {
    .grid-paginacion { justify-content: center; }
    .grid-paginacion .pagination {
        flex-wrap: nowrap;
        justify-content: center !important;
    }
    .grid-paginacion .page-link { padding: 0.25rem 0.45rem; }
    .grid-paginacion .page-item.previous .page-link,
    .grid-paginacion .page-item.next .page-link { font-size: 0; }
    .grid-paginacion .page-item.previous .page-link::before,
    .grid-paginacion .page-item.next .page-link::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 11px;
    }
    .grid-paginacion .page-item.previous .page-link::before { content: "\f053"; }
    .grid-paginacion .page-item.next .page-link::before { content: "\f054"; }
}

/* ========================================
   DROPDOWNS
   ======================================== */
.dropdown-menu {
    font-size: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 4px;
}

.dropdown-item {
    padding: 0.4rem 1rem;
}

.dropdown-header {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   MODALS
   ======================================== */
.modal-content {
    border: none;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.modal-header {
    background-color: var(--bg-light);
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1rem;
}

.modal-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff;
}

.modal-header.bg-primary .modal-title {
    color: #fff;
}

.modal-header.bg-primary .close {
    color: #fff;
    text-shadow: none;
    opacity: 0.8;
}

.modal-header.bg-primary .close:hover {
    opacity: 1;
}

.modal-title {
    font-size: 14px;
    font-weight: 500;
}

.modal-body {
    padding: 1rem;
    font-size: 13px;
}

.modal-footer {
    background-color: var(--bg-light);
    padding: 0.75rem 1rem;
}

.modal-footer .btn {
    font-size: 12px;
    padding: 0.4rem 1rem;
}

/* ========================================
   FORMS
   ======================================== */
.form-control {
    font-size: 13px;
    padding: 0.4rem 0.75rem;
    border-color: var(--border-color);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(90,111,138,0.1);
}

label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    font-size: 12px;
    padding: 0.4rem 0.75rem;
    border-radius: 3px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #4a5d75;
    border-color: #4a5d75;
}

/* ========================================
   CONTENT
   ======================================== */
.content-wrapper {
    background-color: #f8fafc !important;
}

.content-header {
    padding: 0;
    min-height: 0 !important;
    background-color: #f8fafc !important;
}

.content {
    padding: 1rem;
    background-color: #f8fafc;
}

/* ========================================
   DASHBOARD CARDS
   ======================================== */
.content .row {
    margin-top: 0.5rem;
}

.dashboard-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    overflow: hidden;
}

.dashboard-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.dashboard-card .card-header {
    background: transparent;
    border: none;
    padding: 1rem 1rem 0.5rem;
}

.dashboard-card .card-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 600;
}

.dashboard-card .card-title i {
    font-size: 12px;
}

.dashboard-card .card-body {
    padding: 0.5rem 1rem 1rem;
}

.dashboard-card .card-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.dashboard-card .card-subtitle {
    font-size: 11px;
    color: #adb5bd;
}

/* Card con borde izquierdo de color */
.dashboard-card.card-accent-primary {
    border-left: 3px solid var(--primary-color);
}

.dashboard-card.card-accent-success {
    border-left: 3px solid #38c172;
}

.dashboard-card.card-accent-info {
    border-left: 3px solid #6cb2eb;
}

.dashboard-card.card-accent-warning {
    border-left: 3px solid #f6993f;
}

.dashboard-card.card-accent-danger {
    border-left: 3px solid #e3342f;
}

/* Card con fondo degradado */
.dashboard-card.card-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.dashboard-card.card-gradient-primary .card-title,
.dashboard-card.card-gradient-primary .card-subtitle {
    color: rgba(255,255,255,0.8);
}

.dashboard-card.card-gradient-primary .card-value {
    color: #fff;
}

/* Cards clickeables */
.dashboard-card.card-link {
    cursor: pointer;
}

a.text-decoration-none .dashboard-card .card-value,
a.text-decoration-none .dashboard-card .card-subtitle,
a.text-decoration-none .dashboard-card .card-title,
a.text-decoration-none .dashboard-card .card-list-item {
    color: inherit;
}

a.text-decoration-none .dashboard-card .card-value.text-success {
    color: #38c172 !important;
}

a.text-decoration-none .dashboard-card .card-value.text-danger {
    color: #e3342f !important;
}

a.text-decoration-none .dashboard-card .card-value.text-muted {
    color: #adb5bd !important;
}

/* Lista de items en cards */

.dashboard-card .card-list-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: 12px;
}

.dashboard-card .card-list-item:last-child {
    border-bottom: none;
}

.dashboard-card .card-list-item .item-date {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 45px;
    display: inline-block;
}

.dashboard-section-title {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #718096;
}

.dashboard-kpi-grid .dashboard-card,
.dashboard-convocatorias-grid .dashboard-card {
    margin-bottom: 0;
}

.dashboard-grade-summary {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: clamp(0.35rem, 1vw, 0.75rem);
    margin-top: 0;
    font-size: 11px;
    line-height: normal;
    white-space: nowrap;
    color: #4a5568;
}

.dashboard-grade-summary strong {
    color: var(--primary-color);
    font-size: inherit;
}

.dashboard-convocatoria {
    padding: 0.55rem 0;
    border-bottom: 1px solid #eef1f4;
}

.dashboard-convocatoria:first-child {
    padding-top: 0;
}

.dashboard-convocatoria:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-convocatoria-cabecera,
.dashboard-convocatoria-contadores,
.dashboard-pending-row,
.dashboard-event-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.dashboard-convocatoria-cabecera {
    font-size: 0.75rem;
}

.dashboard-convocatoria-cabecera .item-date,
.dashboard-pending-row .item-date {
    min-width: 42px;
    font-weight: 700;
    color: var(--primary-color);
}

.dashboard-convocatoria-contadores {
    margin: 0.4rem 0 0.3rem;
    font-size: 0.75rem;
}

.dashboard-progress {
    display: flex;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f5;
}

.dashboard-progress > span {
    display: block;
    min-width: 0;
}

.dashboard-progress-ok { background: #38c172; }
.dashboard-progress-pending { background: #f6ad55; }
.dashboard-progress-no { background: #e3342f; }
.dashboard-progress-empty { background: #dfe5eb; }

.dashboard-empty-state {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 70px;
    color: #9aa5b1;
    font-size: 0.8rem;
}

.dashboard-empty-state i {
    font-size: 1.25rem;
}

.dashboard-pending-row {
    padding: 0.45rem 0;
    border-bottom: 1px solid #eef1f4;
}

.dashboard-pending-row:last-of-type {
    border-bottom: 0;
}

.dashboard-card-footer-link {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-event-row .dashboard-event-title {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .dashboard-pending-row {
        flex-wrap: wrap;
    }

    .dashboard-pending-row .btn {
        margin-left: 0 !important;
        width: 100%;
    }

    .dashboard-event-row {
        flex-wrap: wrap;
    }

    .dashboard-event-row .dashboard-event-title {
        flex: 1 1 100%;
        padding-left: 0;
    }
}

/* Small boxes legacy */
.small-box {
    border-radius: 4px;
    box-shadow: none;
}

.small-box .inner h3 {
    font-size: 1.5rem;
}

.small-box .inner p {
    font-size: 12px;
}

.small-box .icon {
    font-size: 50px;
}

/* ========================================
   UTILITIES
   ======================================== */
.text-muted {
    color: var(--text-muted) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .page-title {
        font-size: 13px;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.4rem 0.5rem;
        font-size: 11px;
    }
    
    .dataTables_wrapper {
        padding: 0;
    }

    /* Paginacion en mobile: TODO en UNA sola linea. El paginate es un
       <ul class="pagination"> flexbox; por defecto adminlte lo deja nowrap +
       justify-end, y al no entrar los botones se van de pantalla (se corta hasta
       el "1"). Solucion: mantenerlo nowrap PERO compacto y centrado, y reemplazar
       los botones "Anterior"/"Siguiente" (anchos) por chevrons ‹ › (FontAwesome)
       para que todo entre en el ancho del celular sin envolver ni desbordar. */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        justify-content: center !important; /* gana al .pagination{justify-content:flex-end} de adminlte */
    }
    /* Numeros mas compactos para que quepan en una linea. */
    .dataTables_wrapper .dataTables_paginate .page-link {
        padding: 0.25rem 0.45rem;
    }
    /* Anterior/Siguiente -> chevrons: ocultamos el texto y ponemos el icono. */
    .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
    .dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
        font-size: 0;
    }
    .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::before,
    .dataTables_wrapper .dataTables_paginate .page-item.next .page-link::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 11px;
    }
    .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::before { content: "\f053"; }
    .dataTables_wrapper .dataTables_paginate .page-item.next .page-link::before { content: "\f054"; }
}

/* ========================================
   FICHA — vocabulario unico de las vistas de DETALLE
   ========================================
   Un solo concepto para las 12 vistas de detalle + el Resumen de Tenidas.
   Antes convivian 5 layouts de header y 6 formas distintas de mostrar un par
   label/valor (info-box de colores, dl/dt/dd, tablas, chips, paneles...), con
   una paleta que usaba todo el arcoiris de Bootstrap por decoracion.

   REGLA DE COLOR: el cuerpo de una ficha es NEUTRO. El color solo aparece
   donde SIGNIFICA algo (grado, estado, asistencia). El unico acento decorativo
   es --primary-color. Nada de bg-info/bg-warning/bg-success como relleno.

   Estas clases vivian inline en tenidas/resumen.blade.php; se promovieron aca
   para que las use toda la app (ver components/detalle/*).
   ======================================== */

/* ---- Header: titulo + acciones, SIEMPRE en una linea ---- */
.ficha-header {
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* El titulo se come el ancho sobrante y recorta con puntos suspensivos en vez
   de partirse en dos lineas (era el bug visible en convocatorias a 390px). */
.ficha-header .ficha-header-titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2d3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ficha-header .ficha-header-acciones {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    float: none; /* gana al .card-tools{float:right} de adminlte */
    position: static;
}
.ficha-header .ficha-header-estado { flex: 0 0 auto; }

/* ---- Cabecera de la ficha: foto + datos clave ----
   Solo la usan las fichas de un hermano, y solo cuando REALMENTE subio una foto
   (ver el helper tiene_avatar()): si no, no se muestra un placeholder, se muestran
   los datos y punto. --------------------------------------------------------- */
.ficha-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: .25rem 0 1rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid #edf1f4;
}
/* La linea divisoria pasa a la cabecera: si la dejabamos en .ficha-datos quedaba a
   la altura de los campos y la foto -mas alta- la cruzaba por abajo. */
.ficha-cabecera .ficha-datos {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0;
}
.ficha-avatar {
    flex: 0 0 auto;
    padding-top: .35rem;
}
.ficha-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-light);
    border: 2px solid var(--border-color);
}

/* Variante EDITABLE (Mi Perfil): la foto es mas grande y se puede tocar para
   cambiarla; al pasar por encima aparece la camara. */
.ficha-avatar--editable {
    position: relative;
    cursor: pointer;
}
.ficha-avatar--editable img {
    width: 140px;
    height: 140px;
    border-width: 3px;
}
.ficha-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity .2s;
}
.ficha-avatar--editable:hover .ficha-avatar-overlay,
.ficha-avatar--editable:focus-within .ficha-avatar-overlay { opacity: 1; }

/* ---- Cuerpo: datos clave (par label/valor) ---- */
.ficha-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    padding: .25rem 0 1rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid #edf1f4;
}
.ficha-dato { display: flex; flex-direction: column; min-width: 0; }
.ficha-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #97a3b0;
    font-weight: 600;
}
.ficha-valor {
    font-size: 1rem;
    font-weight: 600;
    color: #2b3843;
    overflow-wrap: anywhere; /* mails/URLs largos no desbordan el celular */
}
.ficha-valor a { color: var(--primary-color); }

/* ---- Mi Perfil: columna de la foto (foto + botones al pie) ----
   La regla general es plegar las acciones en el kebab/FAB, pero en el propio perfil
   eso las esconde. "Cambiar foto" y "Eliminar foto" van al PIE de la foto (como en
   el perfil viejo); "Cambiar contrasena" va afuera del card (.perfil-cuenta). */
.ficha-avatar-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 140px;
}
.ficha-avatar-col .ficha-avatar { align-self: center; }
.ficha-avatar-acciones {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* Cuenta: fila de botones DEBAJO del card del perfil. */
.perfil-cuenta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* ---- Cuerpo: titulos de seccion ---- */
.ficha-titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--primary-color);
    border-bottom: 1px solid #e6eaee;
    padding-bottom: .35rem;
    margin: 1.5rem 0 .85rem;
}
.ficha-titulo i { color: var(--primary-color); }

/* ---- Cuerpo: grupos (asistentes por grado, etc.) ---- */
.ficha-grupo-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #4a5b6b;
    padding-bottom: .3rem;
    margin-bottom: .35rem;
    border-bottom: 2px solid #eef1f4;
}
.ficha-grupo-count {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: #6c757d;
    border-radius: 10px;
    padding: .04rem .5rem;
}
/* Grado: unico color con significado. Mismas familias que .badge-grado
   (3 Maestro rojo / 2 Companero verde / 1 Aprendiz azul), en version apagada. */
.ficha-grupo-m .ficha-grupo-count { background: var(--grado-3); }
.ficha-grupo-c .ficha-grupo-count { background: var(--grado-2); }
.ficha-grupo-a .ficha-grupo-count { background: var(--grado-1); }

/* ---- Cuerpo: listas ---- */
.ficha-lista { list-style: none; padding: 0; margin: 0; }
.ficha-lista li {
    padding: .3rem 0;
    border-bottom: 1px solid #f2f4f6;
    font-size: .9rem;
    color: #343a40;
}
.ficha-lista li:last-child { border-bottom: 0; }

/* ---- Cuerpo: bloque de texto (mensaje, observaciones, resolucion...) ---- */
.ficha-bloque,
.ficha-obs {
    border-left: 3px solid var(--primary-color);
    background: var(--bg-light);
    padding: .6rem .85rem;
    border-radius: 0 .25rem .25rem 0;
    white-space: pre-line;
    color: #343a40;
    font-size: .9rem;
}

/* ---- Contadores (reemplazan las losas solidas bg-success/danger/warning y
        los small-box de color) ---- */
.ficha-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}
.ficha-contador {
    flex: 1 1 0;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem .5rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: 3px solid #cbd5e0; /* el color vive SOLO en esta linea fina */
    border-radius: 3px;
    text-align: center;
}
.ficha-contador-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2b3843;
}
.ficha-contador-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: #97a3b0;
    margin-top: .15rem;
}
.ficha-contador--ok { border-top-color: #3c763d; }
.ficha-contador--no { border-top-color: #a94442; }
.ficha-contador--pendiente { border-top-color: #cbd5e0; }
.ficha-contador--acento { border-top-color: var(--primary-color); }

/* ---- Aviso (reemplaza los alert-success/alert-danger gigantes) ---- */
.ficha-aviso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .85rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid #cbd5e0;
    border-radius: 0 .25rem .25rem 0;
    background: var(--bg-light);
    font-size: .85rem;
    color: #4a5568;
    margin: 1rem 0;
}
.ficha-aviso i { margin-top: .15rem; }
.ficha-aviso-texto { min-width: 0; }
.ficha-aviso-texto strong { color: #2b3843; }
.ficha-aviso--ok { border-left-color: #3c763d; }
.ficha-aviso--ok i { color: #3c763d; }
.ficha-aviso--alerta { border-left-color: #a94442; }
.ficha-aviso--alerta i { color: #a94442; }
.ficha-aviso--info { border-left-color: var(--primary-color); }
.ficha-aviso--info i { color: var(--primary-color); }

/* Confirmaciones y avisos no bloqueantes de la plataforma. */
.salomon-notificaciones {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.salomon-notificacion {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .16);
    pointer-events: auto;
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    /* Los datos clave pasan a dos columnas parejas: en flex-wrap con gap grande
       quedaban desalineados y con huecos raros en pantallas angostas. */
    .ficha-datos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem 1rem;
    }
    .ficha-datos .ficha-dato-ancho { grid-column: 1 / -1; }
    .ficha-valor { font-size: .95rem; }
    /* La foto se achica para dejarle ancho real a la grilla de datos. */
    .ficha-cabecera { gap: .85rem; }
    .ficha-avatar img { width: 64px; height: 64px; }
    .ficha-avatar--editable img { width: 96px; height: 96px; }
    .ficha-avatar-col { width: 116px; }
    .perfil-cuenta .btn { flex: 1 1 auto; }
    .ficha-contador { min-width: 0; }
    .ficha-contador-num { font-size: 1.35rem; }
}

/* ---- Tono en titulos de seccion: el icono (y SOLO el icono) lleva el color
        cuando el titulo separa estados con significado (asiste / no asiste). ---- */
.ficha-titulo--ok i { color: #3c763d; }
.ficha-titulo--no i { color: #a94442; }
.ficha-titulo--pendiente i { color: #97a3b0; }

/* ---- Item de convocado (nombre + respuesta editable) ----
   Antes era un list-group-item d-flex con un bloque de min-width:220px a la
   derecha: a 390px el nombre quedaba espachurrado en tres lineas contra el
   select. En mobile el control pasa DEBAJO del nombre, a todo el ancho. */
.ficha-convocado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid #f2f4f6;
    font-size: .9rem;
    color: #343a40;
}
.ficha-convocado:last-child { border-bottom: 0; }
.ficha-convocado-nombre { min-width: 0; overflow-wrap: anywhere; }
.ficha-convocado-resp {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
@media (max-width: 767.98px) {
    .ficha-convocado {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        padding: .6rem 0;
    }
    .ficha-convocado-resp { flex: 1 1 auto; }
}
.ficha-convocados { list-style: none; padding: 0; margin: 0 0 .75rem; }

/* ========================================
   AVATAR DEL CUADRO LOGICO
   ========================================
   El borde marca el GRADO (mismos colores que .badge-grado: 1 Aprendiz azul,
   2 Companero verde, 3 Maestro rojo). Antes el color venia hardcodeado en un
   `style` inline con los colores de Bootstrap (#dc3545/#28a745/#007bff), que no
   coincidian con los del badge de grado: el mismo dato tenia dos paletas.
   El TAMANO en mobile lo pone tabla-cards.css (46px, rol m-avatar).
   ======================================== */
.avatar-cuadro {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bg-light);
}
/* El color del borde lo pone .border-grado-N (utilidad de arriba). */

/* ========================================
   SISTEMA DE FORMULARIOS
   ========================================
   Primitivas compartidas para secciones, adjuntos, elecciones condicionales
   y barras de acciones. No dependen de una pantalla concreta.
   ======================================== */

/* Secciones semanticas */
.form-section {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.form-section.mb-0 {
    margin-bottom: 0 !important;
}

.form-section + .form-section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.form-section__legend {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.form-section__icon {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
}

.form-section__help {
    margin: -.55rem 0 1rem;
    color: #667485;
    font-size: .85rem;
}

.form-section__body {
    min-width: 0;
}

/* Adjuntos: una unidad estable con estado, selector, ayuda y errores. */
.form-file-grid {
    row-gap: 1rem;
}

.form-file-grid > [class*="col-"] {
    display: flex;
}

.form-file-grid .form-file-field {
    width: 100%;
    margin-bottom: 0;
}

.form-file-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid #cbd5e0;
    border-radius: .3rem;
    background: #fff;
}

.form-file-field.mb-0 {
    margin-bottom: 0 !important;
}

.form-file-field[data-file-state="current"] {
    border-left-color: var(--primary-color);
}

.form-file-field[data-file-state="new"],
.form-file-field[data-file-state="replacement"] {
    border-left-color: #3c763d;
}

.form-file-field[data-file-state="missing"] {
    border-left-color: #b7791f;
}

.form-file-field[data-file-state="invalid"] {
    border-left-color: #a94442;
}

.form-file-field__label {
    margin-bottom: .5rem;
    color: #344050;
    font-weight: 600;
}

.form-file-field__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .45rem .55rem;
    border: 1px solid #edf1f4;
    border-radius: .25rem;
    background: var(--bg-light);
}

.form-file-field__current-main {
    display: flex;
    align-items: center;
    min-width: 0;
    color: #667485;
}

.form-file-field__current-icon {
    flex: 0 0 auto;
    margin-right: .5rem;
    color: #7f8c99;
}

.form-file-field[data-file-state="missing"] .form-file-field__current-icon {
    color: #b7791f;
}

.form-file-field__current-name {
    min-width: 0;
    overflow: hidden;
    color: #4a5568;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.form-file-field__current-name {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s ease;
}

a.form-file-field__current-name:hover,
a.form-file-field__current-name:focus {
    text-decoration-color: currentColor;
}

.form-file-field__current-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
}

.form-file-field__current-actions .btn {
    min-height: 34px;
}

.form-file-field__picker {
    margin-top: .65rem;
}

.form-file-field__picker .custom-file-label {
    overflow: hidden;
    padding-right: 5.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-file-field__selection {
    margin-top: .4rem;
    overflow-wrap: anywhere;
    color: #3c763d;
    font-size: .75rem;
    font-weight: 600;
}

.form-file-field[data-file-state="invalid"] .form-file-field__selection {
    color: #a94442;
}

.form-file-field__help {
    margin-top: .45rem;
    line-height: 1.4;
}

.form-file-field .file-upload-error,
.form-file-field [data-file-server-error] {
    margin-top: .4rem;
    overflow-wrap: anywhere;
}

.form-file-field input:disabled + .custom-file-label,
.form-file-field input:disabled + .custom-file-label::after {
    cursor: not-allowed;
    background-color: #edf1f4;
}

/* Elecciones excluyentes con campos condicionales (por ejemplo, tipo de autor). */
.form-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.form-choice-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.form-choice-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.form-choice-option__content {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid #cbd5e0;
    border-radius: .3rem;
    background: #fff;
    color: #4a5568;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-choice-option > input:checked + .form-choice-option__content {
    border-color: var(--primary-color);
    background: #f0f4f8;
    color: #334e68;
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.form-choice-option > input:focus + .form-choice-option__content,
.form-choice-option > input:focus-visible + .form-choice-option__content {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.form-choice-option > input:disabled + .form-choice-option__content {
    cursor: not-allowed;
    opacity: .58;
}

.form-conditional-panel {
    margin-top: .25rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: .3rem;
    background: var(--bg-light);
}

.form-conditional-panel[hidden] {
    display: none !important;
}

/* Acciones: una sola jerarquia, sin floats ni variantes por pantalla. */
.form-actions__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.form-actions__inner--end {
    justify-content: flex-end;
}

.form-actions .btn {
    min-height: 38px;
}

/* Formularios extensos: paneles siempre visibles y navegación interna.
   El modo es opt-in; no modifica formularios breves ni modales. */
.form-long-page-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    max-width: 1320px;
    margin: .75rem auto 1rem;
}

.form-long-page-header__icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: .3rem;
    background: #fff;
    color: var(--primary-color);
    font-size: 1rem;
}

.form-long-page-header__title {
    margin: 0;
    color: #344050;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.form-long-page-header__description {
    margin: .18rem 0 0;
    color: #667485;
    font-size: .875rem;
    line-height: 1.45;
}

.form-long__body {
    overflow: visible;
}

.form-long-layout {
    display: grid;
    grid-template-areas:
        "navigation"
        "main";
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    align-items: start;
}

.form-long-layout__main {
    grid-area: main;
    min-width: 0;
}

.form-long-layout__navigation {
    grid-area: navigation;
    min-width: 0;
}

.form-long-navigation {
    border: 1px solid var(--border-color);
    border-radius: .3rem;
    background: #fff;
}

.form-long-navigation__desktop {
    display: none;
}

.form-long-navigation__mobile {
    padding: .85rem;
}

.form-long-navigation__mobile-label,
.form-long-navigation__title {
    display: block;
    margin: 0 0 .5rem;
    color: #344050;
    font-size: .82rem;
    font-weight: 600;
}

.form-long-navigation__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-long-navigation__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    min-height: 42px;
    padding: .55rem .7rem;
    border-left: 3px solid transparent;
    color: var(--text-color);
    font-size: .84rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.form-long-navigation__link:hover,
.form-long-navigation__link:focus {
    background: var(--bg-light);
    color: #344050;
    text-decoration: none;
}

.form-long-navigation__link:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.form-long-navigation__link.is-active,
.form-long-navigation__link[aria-current="location"] {
    border-left-color: var(--primary-color);
    background: #f0f4f8;
    color: #334e68;
    font-weight: 600;
}

.form-long-navigation__label {
    min-width: 0;
}

.form-long-navigation__error {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .25rem;
    color: #a94442;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.form-long-panel {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0 1.25rem 1.25rem;
    scroll-margin-top: 76px;
    border: 1px solid var(--border-color);
    border-radius: .3rem;
    background: #fff;
    outline: 0;
}

.form-long-panel:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.form-long-panel--error {
    border-left: 3px solid #a94442;
}

.form-long-panel > .form-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.form-long-panel > .form-section > .form-section__legend {
    float: none;
    width: calc(100% + 2.5rem);
    max-width: none;
    margin: 0 -1.25rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    color: #344e68;
    font-size: .98rem;
}

.form-long-panel > .form-section > .form-section__help {
    margin: .9rem 0 1rem;
}

.form-long-panel > .form-section > .form-section__body > .row:first-child,
.form-long-panel .form-section__body .row {
    margin-top: 0;
}

.form-vote-grid {
    row-gap: 1rem;
}

.form-vote-stage {
    min-width: 0;
    height: 100%;
}

.form-vote-stage__title {
    margin: 0 0 .85rem;
    color: #344050;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

.form-error-summary {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
    padding: .85rem 1rem;
    border: 1px solid #d99a98;
    border-left: 3px solid #a94442;
    border-radius: .3rem;
    background: #fff7f7;
    color: #793a38;
}

.form-error-summary:focus-visible {
    outline: 2px solid #a94442;
    outline-offset: 2px;
}

.form-error-summary__heading {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.form-error-summary__list {
    margin: .55rem 0 0 1.2rem;
    padding: 0;
}

.form-error-summary__list a {
    color: #793a38;
    text-decoration: underline;
}

.form-long-actions.card-footer {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: .3rem;
    background: #fff;
}

@media (min-width: 992px) {
    .form-vote-grid > [class*="col-"] + [class*="col-"] .form-vote-stage {
        padding-left: 1rem;
        border-left: 1px solid var(--border-color);
    }
}

@media (min-width: 1280px) {
    .form-long-layout {
        grid-template-areas: "main navigation";
        grid-template-columns: minmax(0, 1fr) 232px;
        gap: 1.5rem;
    }

    .form-long-layout__navigation {
        position: sticky;
        top: 72px;
    }

    .form-long-navigation__desktop {
        display: block;
        padding: .85rem .65rem;
    }

    .form-long-navigation__title {
        padding: 0 .7rem .4rem;
    }

    .form-long-navigation__mobile {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .form-vote-grid > [class*="col-"] + [class*="col-"] .form-vote-stage {
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 575.98px) {
    .form-section {
        margin-bottom: 1.25rem;
    }

    .form-section + .form-section {
        padding-top: 1rem;
    }

    .form-file-field {
        padding: .75rem;
    }

    .form-file-field__current {
        align-items: stretch;
        flex-direction: column;
    }

    .form-file-field__current-main {
        min-height: 32px;
    }

    .form-file-field__current-actions {
        width: 100%;
    }

    .form-file-field__current-actions .btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    .form-choice-group {
        flex-direction: column;
    }

    .form-choice-option,
    .form-choice-option__content {
        width: 100%;
    }

    .form-conditional-panel {
        padding: .75rem;
    }

    .form-actions__inner,
    .form-actions__inner--end {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .form-long-page-header {
        align-items: flex-start;
        margin-top: .5rem;
    }

    .form-long-page-header__icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .form-long-page-header__title {
        font-size: 1.1rem;
    }

    .form-long-panel {
        margin-bottom: 1rem;
        padding: 0 1rem 1rem;
        scroll-margin-top: 64px;
    }

    .form-long-panel > .form-section > .form-section__legend {
        width: calc(100% + 2rem);
        margin-right: -1rem;
        margin-left: -1rem;
        padding: .8rem 1rem;
    }

    .form-long-panel > .form-section > .form-section__help {
        margin-top: .8rem;
    }

    .form-long-actions.card-footer {
        padding: .85rem;
    }
}

/* Controles tactiles y sin zoom automatico de iOS. El scope exige un form y
   un card-body: no agranda filtros de tablas, menus ni acciones compactas. */
@media (max-width: 767.98px) {
    form .card-body .form-group > label,
    .card-body form .form-group > label,
    form.card-body .form-group > label,
    form .card-body .form-file-field__label,
    .card-body form .form-file-field__label,
    form.card-body .form-file-field__label {
        font-size: 14px;
    }

    form .card-body .form-control,
    .card-body form .form-control,
    form.card-body .form-control,
    form .card-body .custom-file-label,
    .card-body form .custom-file-label,
    form.card-body .custom-file-label,
    form .card-body .select2-container .select2-selection,
    .card-body form .select2-container .select2-selection,
    form.card-body .select2-container .select2-selection {
        box-sizing: border-box;
        font-size: 16px;
    }

    form .card-body input.form-control,
    form .card-body select.form-control,
    .card-body form input.form-control,
    .card-body form select.form-control,
    form.card-body input.form-control,
    form.card-body select.form-control,
    form .card-body .custom-file,
    form .card-body .custom-file-input,
    form .card-body .custom-file-label,
    .card-body form .custom-file,
    .card-body form .custom-file-input,
    .card-body form .custom-file-label,
    form.card-body .custom-file,
    form.card-body .custom-file-input,
    form.card-body .custom-file-label,
    form .card-body .select2-container .select2-selection--single,
    .card-body form .select2-container .select2-selection--single,
    form.card-body .select2-container .select2-selection--single {
        height: 44px;
        min-height: 44px;
    }

    form .card-body .select2-container .select2-selection--multiple,
    .card-body form .select2-container .select2-selection--multiple,
    form.card-body .select2-container .select2-selection--multiple {
        min-height: 44px;
    }

    form .card-body .select2-selection--single .select2-selection__rendered,
    .card-body form .select2-selection--single .select2-selection__rendered,
    form.card-body .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
        line-height: 1.5;
    }

    form .card-body .select2-selection--single .select2-selection__arrow,
    .card-body form .select2-selection--single .select2-selection__arrow,
    form.card-body .select2-selection--single .select2-selection__arrow {
        align-self: center;
        height: auto;
    }

    form .card-body .select2-container--salomon .select2-selection__choice,
    .card-body form .select2-container--salomon .select2-selection__choice,
    form.card-body .select2-container--salomon .select2-selection__choice {
        font-size: 16px;
    }

    form .card-body .select2-search__field,
    .card-body form .select2-search__field,
    form.card-body .select2-search__field {
        font-size: 16px !important;
    }

    /* El dropdown de Select2 se adjunta al body y queda fuera del scope del
       formulario: necesita su propia regla para evitar el zoom de iOS. */
    .select2-container--salomon .select2-search--dropdown .select2-search__field {
        min-height: 44px;
        font-size: 16px !important;
    }

    form .card-body .custom-file-label,
    .card-body form .custom-file-label,
    form.card-body .custom-file-label,
    form .card-body .custom-file-label::after,
    .card-body form .custom-file-label::after,
    form.card-body .custom-file-label::after {
        line-height: 30px;
    }

    form .card-body .custom-file-label::after,
    .card-body form .custom-file-label::after,
    form.card-body .custom-file-label::after {
        height: 42px;
    }

    form .card-body .input-group > .input-group-append > .btn,
    form .card-body .input-group > .input-group-append > .input-group-text,
    form .card-body .input-group > .input-group-prepend > .btn,
    form .card-body .input-group > .input-group-prepend > .input-group-text,
    .card-body form .input-group > .input-group-append > .btn,
    .card-body form .input-group > .input-group-append > .input-group-text,
    .card-body form .input-group > .input-group-prepend > .btn,
    .card-body form .input-group > .input-group-prepend > .input-group-text {
        min-height: 44px;
    }
}