/* ========== PANEL GLOBAL ========== */
/* Estilos compartidos para todos los paneles admin/público */

/* Card de bienvenida */
.panel-bienvenida {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(19, 48, 77, 0.12);
}
.panel-bienvenida .card-header {
    background: var(--degradado1);
    color: var(--color_texto_claro);
    padding: 22px 28px;
    border: none;
}
.panel-bienvenida .card-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.3rem;
}
.panel-bienvenida .card-header h4 i {
    margin-right: 8px;
    opacity: 0.85;
}
.panel-bienvenida .card-body {
    padding: 14px 28px;
    background: #fff;
    border-top: 3px solid var(--color_acento);
}

/* Info badges (bienvenida y otros) */
.info-badge {
    display: inline-flex;
    align-items: center;
    background: #F0F4F8;
    border-radius: 20px;
    padding: 6px 14px;
    margin-right: 10px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #444;
    border: 1px solid #E0E6ED;
}
.info-badge i {
    margin-right: 6px;
    font-size: 0.9rem;
}
.info-badge.ib-blue    { background: #E8F0FE; border-color: #BBDEFB; }
.info-badge.ib-blue i  { color: #1565C0; }
.info-badge.ib-amber   { background: #FFF8E1; border-color: #FFE082; }
.info-badge.ib-amber i { color: #EF6C00; }
.info-badge.ib-teal    { background: #E0F7FA; border-color: #B2EBF2; }
.info-badge.ib-teal i  { color: #00838F; }
.info-badge.ib-green   { background: #E8F5E9; border-color: #C8E6C9; }
.info-badge.ib-green i { color: #2E7D32; }
.info-badge.ib-rose    { background: #FCE4EC; border-color: #F8BBD0; }
.info-badge.ib-rose i  { color: #C62828; }
.info-badge.ib-purple  { background: #EDE7F6; border-color: #D1C4E9; }
.info-badge.ib-purple i { color: #5E35B1; }
.info-badge.ib-navy    { background: #E3EAF2; border-color: #B0BEC5; }
.info-badge.ib-navy i  { color: var(--color_primario); }
.info-badge strong {
    color: var(--color_primario);
}

/* Card genérica del panel */
.panel-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
}
.panel-card .card-header {
    background: var(--degradado1);
    color: white;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 14px 22px;
    border: none;
    letter-spacing: 0.2px;
}
.panel-card .card-header i {
    margin-right: 8px;
    opacity: 0.85;
}
.panel-card .card-body {
    padding: 20px;
    background: #fff;
}

/* Espacio entre card-header y tabla directa dentro de panel-card */
.panel-card > .card-body > table {
    margin-top: 12px;
}

/* Headers de tabla ordenables */
th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
}
th[data-sort]:hover {
    filter: brightness(1.3);
}
th[data-sort]::after {
    content: "\2195";
    margin-left: 4px;
    font-size: 0.7rem;
    opacity: 0.5;
}
th[data-sort].sort-asc::after {
    content: "\25B2";
    opacity: 0.9;
}
th[data-sort].sort-desc::after {
    content: "\25BC";
    opacity: 0.9;
}

/* Datos personales con filas iconizadas */
.datos-beneficiario .dato-row,
.datos-docente .dato-row {
    display: flex;
    align-items: flex-start;
    padding: 9px 12px;
    border-radius: 6px;
    transition: background-color 0.15s;
}
.datos-beneficiario .dato-row:nth-child(odd),
.datos-docente .dato-row:nth-child(odd) {
    background: #F6F8FA;
}
.datos-beneficiario .dato-row:hover,
.datos-docente .dato-row:hover {
    background: #EDF1F5;
}
.dato-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8F0FE;
    color: var(--color_primario);
    border-radius: 8px;
    font-size: 0.9rem;
    margin-right: 12px;
    margin-top: 2px;
}
/* Paleta pastel para iconos */
.dato-icon.ic-blue    { background: #E8F0FE; color: #1565C0; }
.dato-icon.ic-amber   { background: #FFF3E0; color: #E8A838; }
.dato-icon.ic-green   { background: #E8F5E9; color: #2E7D32; }
.dato-icon.ic-rose    { background: #FCE4EC; color: #C62828; }
.dato-icon.ic-purple  { background: #EDE7F6; color: #5E35B1; }
.dato-icon.ic-teal    { background: #E0F7FA; color: #00838F; }
.dato-icon.ic-navy    { background: #E3EAF2; color: var(--color_primario); }
.dato-icon.ic-orange  { background: #FFF8E1; color: #EF6C00; }
.dato-info {
    flex: 1;
    min-width: 0;
}
.dato-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8C9BAD;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}
.dato-valor {
    display: block;
    font-size: 0.95rem;
    color: #1a1a1a;
    line-height: 1.4;
    word-break: break-word;
}

/* Acciones inline en filas de datos (iconos separados del valor) */
.dato-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.dato-acciones a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s, transform 0.15s, background 0.2s;
}
.dato-acciones a:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background: #fff;
}
.dato-acciones a:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transform: translateY(0);
    background: #f0f1f3;
}
.dato-acciones img.icons {
    opacity: 0.85;
    transition: opacity 0.2s;
}
.dato-acciones a:hover img.icons {
    opacity: 1;
}

/* Botones del menú panel */
.btn-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    color: var(--color_primario);
    border: 1px solid #E0E6ED;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-panel .btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.05rem;
    margin-right: 12px;
    flex-shrink: 0;
}
.btn-panel:hover, .btn-panel:focus {
    background: #F6F8FA;
    color: var(--color_primario);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(19, 48, 77, 0.12);
    border-color: var(--color_primario);
}
/* Variantes de color para botones */
.btn-panel.bp-blue .btn-icon    { background: #E8F0FE; color: #1565C0; }
.btn-panel.bp-green .btn-icon   { background: #E8F5E9; color: #2E7D32; }
.btn-panel.bp-amber .btn-icon   { background: #FFF3E0; color: #EF6C00; }
.btn-panel.bp-purple .btn-icon  { background: #EDE7F6; color: #5E35B1; }
.btn-panel.bp-teal .btn-icon    { background: #E0F7FA; color: #00838F; }
.btn-panel.bp-rose .btn-icon    { background: #FCE4EC; color: #C62828; }
.btn-panel.bp-navy .btn-icon    { background: #E3EAF2; color: var(--color_primario); }
.btn-panel.bp-orange .btn-icon  { background: #FFF8E1; color: #EF6C00; }

/* Card de alerta/info */
.panel-alerta {
    border-left: 4px solid var(--color_acento);
    background: #FFF8ED;
    border-radius: 0 6px 6px 0;
    padding: 14px 16px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.panel-alerta .alerta-titulo {
    font-weight: 600;
    color: var(--color_primario);
    margin-bottom: 6px;
}
.panel-alerta ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

/* Menú sticky en desktop */
.panel-menu-sticky {
    position: sticky;
    top: 90px;
}

/* Sección inferior del panel */
.panel-seccion {
    margin-top: 10px;
}
.panel-seccion h5 {
    color: var(--color_primario);
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color_acento);
    margin-bottom: 16px;
}

/* Recuadro mejorado */
.recuadro {
    margin-top: 0;
    padding: 16px;
    background: #FAFBFC;
    border: 1px solid #E8ECF0;
    border-left: 4px solid var(--color_primario);
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    transition: all 0.2s;
    height: 100%;
}
.recuadro:hover {
    box-shadow: 0 3px 10px rgba(19, 48, 77, 0.1);
    border-left-color: var(--color_acento);
    transform: translateY(-2px);
}
.recuadro p {
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.recuadro b {
    color: var(--color_primario);
}

/* Foto/retrato */
.retrato {
    width: 100%;
    max-width: 200px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(19, 48, 77, 0.12);
    border: 3px solid #BBDEFB;
}

/* Tabla historial */
.tabla-historial {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.tabla-historial thead th {
    background: var(--degradado1);
    color: white;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.tabla-historial thead th:first-child {
    border-radius: 8px 0 0 0;
}
.tabla-historial thead th:last-child {
    border-radius: 0 8px 0 0;
}
.tabla-historial thead th i {
    margin-right: 5px;
    opacity: 0.8;
}
.tabla-historial tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #E8ECF0;
    color: #333;
    vertical-align: middle;
}
.tabla-historial tbody tr:hover {
    background: #F0F4F8;
}
.tabla-historial tbody tr:nth-child(even) {
    background: #FAFBFC;
}
.tabla-historial tbody tr:nth-child(even):hover {
    background: #EDF1F5;
}

/* Badges de estado */
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.estado-aprobado {
    background: #E8F5E9;
    color: #2E7D32;
}
.estado-pendiente {
    background: #FFF3E0;
    color: #EF6C00;
}
.estado-vencido {
    background: #FCE4EC;
    color: #C62828;
}
.estado-otro {
    background: #E3EAF2;
    color: var(--color_primario);
}

/* Botón ver detalle */
.btn-ver-detalle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color_primario);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #D0D7DE;
    transition: all 0.2s;
    background: #fff;
}
.btn-ver-detalle:hover {
    background: var(--color_primario);
    color: white;
    border-color: var(--color_primario);
    text-decoration: none;
}

/* Botón volver */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color_primario);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #D0D7DE;
    transition: all 0.2s;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.btn-volver:hover {
    background: #F0F4F8;
    border-color: var(--color_primario);
    text-decoration: none;
    color: var(--color_primario);
}

/* Sección de grupo en menú admin */
.menu-grupo {
    margin-bottom: 20px;
}
.menu-grupo-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: #8C9BAD;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 4px 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color_acento);
}

/* Info usuario sidebar */
.panel-info-usuario {
    background: #F6F8FA;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #E0E6ED;
}
.panel-info-usuario .info-titulo {
    font-weight: 600;
    color: var(--color_primario);
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.panel-info-usuario .info-nombre {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1rem;
    margin-bottom: 8px;
}
.panel-info-usuario .info-rol {
    display: inline-block;
    background: #E8F0FE;
    color: #1565C0;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

/* ========== Select2 Global ========== */
.select2-container--bootstrap-5 .select2-selection {
    border-color: #ced4da;
    font-size: 0.9rem;
    min-height: 38px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: #495057;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color_primario);
    box-shadow: 0 0 0 0.2rem rgba(19, 48, 77, 0.25);
}
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--color_primario);
    color: #fff;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: #e9ecef;
    color: var(--color_primario);
}
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color_primario);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border-color: #ced4da;
    font-size: 0.9rem;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color_primario);
    box-shadow: 0 0 0 0.2rem rgba(19, 48, 77, 0.15);
}
/* Formulario genérico */
.formulario .select2-container {
    width: 100% !important;
}

/* ========== Responsive ========== */
@media (max-width: 767.98px) {
    /* Bienvenida */
    .panel-bienvenida .card-header {
        padding: 14px 16px;
    }
    .panel-bienvenida .card-header h4 {
        font-size: 1rem;
    }
    .panel-bienvenida .card-body {
        padding: 12px 16px;
    }
    .info-badge {
        font-size: 0.78rem;
        padding: 5px 10px;
        margin-right: 6px;
    }
    /* Foto */
    .retrato {
        max-width: 140px;
        margin: 0 auto 15px;
        display: block;
    }
    /* Datos */
    .datos-beneficiario .dato-row,
    .datos-docente .dato-row {
        padding: 7px 8px;
    }
    .dato-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        margin-right: 10px;
    }
    .dato-label {
        font-size: 0.7rem;
    }
    .dato-valor {
        font-size: 0.88rem;
    }
    /* Cards */
    .panel-card .card-header {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    .panel-card .card-body {
        padding: 14px;
    }
    /* Menú sticky desactivado */
    .panel-menu-sticky {
        position: static;
    }
    /* Botones menú */
    .btn-panel {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    .btn-panel .btn-icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
    /* Recuadro */
    .recuadro {
        padding: 12px;
    }
    /* Tabla historial */
    .tabla-historial {
        font-size: 0.85rem;
    }
    .tabla-historial th, .tabla-historial td {
        padding: 10px 10px;
    }
    .tabla-historial thead th i {
        display: none;
    }
}