/* ========================================
   VARIABLES Y CONFIGURACIÓN BASE
   ======================================== */

:root {
    --verde-principal: #367B63;
    --verde-oscuro: #2a5f4d;
    --verde-claro: #5fa084;
    --gris-claro: #f8f9fa;
    --gris-medio: #e9ecef;
    --gris-oscuro: #495057;
    --texto-principal: #2d3436;
    --borde: #dee2e6;
    --sombra-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
    --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--texto-principal);
    background-color: var(--gris-claro);
    /* allow horizontal scroll when wide tables appear */
    overflow-x: auto;
}

/* ========================================
   LAYOUT PRINCIPAL
   ======================================== */

.app-container {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--gris-claro);
}

/* ========================================
   SIDEBAR
   ======================================== */

.sidebar {
    width: 280px;
    background: white;
    border-right: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: var(--sombra-light);
}

/* Hidden sidebar (completely out of view) */
.sidebar.hidden {
    transform: translateX(-100%);
}

/* When sidebar is hidden, content uses full width */
.sidebar.hidden ~ .main-wrapper .top-header,
.sidebar.hidden ~ .main-wrapper .main-content,
.sidebar.hidden ~ .main-wrapper .footer {
    margin-left: 0;
}

body.sidebar-hidden .sidebar { transform: translateX(-100%); }
body.sidebar-hidden .main-content, body.sidebar-hidden .top-header, body.sidebar-hidden .footer { margin-left: 0; }

.sidebar-header {
    /* Match the top header height for a compact look */
    height: 56px;
    padding: 0 0.75rem;
    border-bottom: 2px solid var(--verde-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.logo-container {
    margin-bottom: 1rem;
}

.logo {
    max-width: 48px;
    height: auto;
    display: block;
    margin: 0;
}

.sistema-titulo {
    font-size: 0.78rem;
    color: var(--verde-principal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    display: none;
}

/* Smooth width transition for collapse/expand */
.sidebar {
    transition: width 0.22s ease, transform 0.22s ease;
}

/* When collapsed, allow expanding on hover for quick access */
.sidebar.collapsed:hover {
    width: 220px;
}

/* Ensure nav items show labels when sidebar expands on hover */
.sidebar.collapsed:hover .nav-item span {
    display: inline;
}

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--texto-principal);
    text-decoration: none;
    transition: var(--transicion);
    font-size: 0.95rem;
    margin: 0 0.5rem;
    border-radius: 6px;
}

.nav-item i {
    width: 20px;
    text-align: center;
    color: var(--gris-oscuro);
}

.nav-item:hover {
    background-color: rgba(54, 123, 99, 0.1);
    color: var(--verde-principal);
    padding-left: 1.5rem;
}

.nav-item.active {
    background-color: var(--verde-principal);
    color: white;
    font-weight: 600;
}

.nav-item.active i {
    color: white;
}

.nav-section {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.nav-section-title {
    padding: 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gris-oscuro);
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--borde);
    text-align: center;
}

.sidebar-footer .year {
    font-size: 0.75rem;
    color: var(--gris-oscuro);
    margin: 0;
}

/* ========================================
   TOP HEADER
   ======================================== */

.top-header {
    background: white;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-light);
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: 280px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.toggle-sidebar {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--verde-principal);
    cursor: pointer;
    transition: var(--transicion);
    padding: 0.5rem;
}

.toggle-sidebar:hover {
    color: var(--verde-oscuro);
}

.header-title h1 {
    font-size: 1.5rem;
    color: var(--verde-principal);
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto-principal);
    font-size: 0.9rem;
}

.user-info i {
    font-size: 1.5rem;
    color: var(--verde-principal);
}

/* ========================================
   MAIN CONTENT
   ======================================== */

.main-content {
    flex: 1 1 auto;
    padding: 2rem;
    margin-left: 280px;
    /* container hides overflow; inner .tabla-matriz-wrapper will scroll */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
    background: var(--verde-principal);
    color: white;
    text-align: center;
    padding: 1.5rem;
    margin-left: 280px;
    font-size: 0.9rem;
}

/* ========================================
   MÓDULOS Y CONTENIDO
   ======================================== */


.modulo-contenido {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--sombra-light);
    display: flex;
    flex-direction: column;
}
/* ensure content is clipped to the module box so the table doesn't overflow visually */
.modulo-contenido {
    overflow: hidden;
}

/* Wrapper will provide scrollbars when content (many columns/rows) grows */
.modulo-contenido .tabla-matriz-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    overflow-x: auto;
    margin-top: 0.75rem;
    /* Allow more space for the table, less for filters */
    max-height: calc(100vh - 350px);
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
}

.tabla-matriz {
    border-collapse: collapse;
    font-size: 13px;
    /* allow the table to grow horizontally so the wrapper shows horizontal scrollbar */
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.tabla-matriz td {
    text-align: center;
    vertical-align: middle;
}

.tabla-matriz td.left-sticky-cell {
    text-align: left;
}

.tabla-matriz th,
.tabla-matriz td {
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: center;
}

.tabla-matriz thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 4;
}

.left-sticky,
.left-sticky-cell {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
    min-width: 140px;
    max-width: 220px;
    text-align: left;
}

.fin-semana {
    color: var(--gris-oscuro);
    opacity: 0.9;
}

.modulo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.modulo-header h2 {
    color: var(--verde-principal);
    font-size: 1.75rem;
}

/* ========================================
   DASHBOARD
   ======================================== */

.dashboard h2 {
    color: var(--verde-principal);
    margin-bottom: 2rem;
    font-size: 1.75rem;
}

.estadisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.tarjeta {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--sombra-light);
    transition: var(--transicion);
}

.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-medium);
}

.tarjeta h3 {
    font-size: 2.5rem;
    color: var(--verde-principal);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.tarjeta p {
    color: var(--gris-oscuro);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.tarjeta .btn-link {
    color: var(--verde-principal);
    font-weight: 500;
}

/* ========================================
   BOTONES
   ======================================== */

.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicion);
    font-weight: 500;
    text-align: center;
}

.btn-primary {
    background: var(--verde-principal);
    color: white;
}

.btn-primary:hover {
    background: var(--verde-oscuro);
    transform: translateY(-2px);
    box-shadow: var(--sombra-light);
}

.btn-secondary {
    background: var(--gris-medio);
    color: var(--texto-principal);
}

.btn-secondary:hover {
    background: var(--borde);
}

.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-large {
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
}

.btn-link {
    color: var(--verde-principal);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-accion {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 4px;
    background: var(--gris-medio);
    color: var(--texto-principal);
    transition: var(--transicion);
    display: inline-block;
}

.btn-accion:hover {
    background: var(--borde);
}

.btn-accion.btn-danger {
    background: #fcb4b4;
    color: #922b21;
}

.btn-accion.btn-danger:hover {
    background: #f5b7b1;
}

/* ========================================
   TABLAS
   ======================================== */

.tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: white;
    box-shadow: var(--sombra-light);
    border-radius: 6px;
    overflow: hidden;
}

.tabla thead {
    background: var(--verde-principal);
    color: white;
}

.tabla th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.tabla td {
    padding: 1rem;
    border-bottom: 1px solid var(--borde);
}

.tabla tbody tr:hover {
    background: var(--gris-claro);
}

.tabla-sm td,
.tabla-sm th {
    padding: 0.75rem;
}

.acciones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-danger {
    background: #f8d7da;
    color: #721c24;
}

.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-default {
    background: var(--gris-medio);
    color: var(--gris-oscuro);
}

/* ========================================
   FORMULARIOS
   ======================================== */

.formulario {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--sombra-light);
}

.form-grupo {
    margin-bottom: 1.5rem;
}

.form-grupo label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--texto-principal);
}

.form-grupo input[type="text"],
.form-grupo input[type="email"],
.form-grupo input[type="date"],
.form-grupo input[type="number"],
.form-grupo input[type="password"],
.form-grupo input[type="tel"],
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--borde);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transicion);
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--verde-principal);
    box-shadow: 0 0 0 3px rgba(54, 123, 99, 0.1);
}

.form-grupo textarea {
    resize: vertical;
    min-height: 120px;
}

.form-acciones {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.formulario-filtros {
    background: var(--gris-claro);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid var(--verde-principal);
}

.filtros-grupo {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtros-grupo .form-grupo {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

/* ========================================
   ALERTAS
   ======================================== */

.alerta {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
}

.alerta-success {
    background: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.alerta-error {
    background: #f8d7da;
    color: #721c24;
    border-left-color: #e74c3c;
}

.alerta-warning {
    background: #fff3cd;
    color: #856404;
    border-left-color: #ffc107;
}

.alerta-info {
    background: #d1ecf1;
    color: #0c5460;
    border-left-color: #17a2b8;
}

/* ========================================
   CHECKBOX Y RADIO
   ======================================== */

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.form-ayuda {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--gris-oscuro);
}

/* ========================================
   DETALLES DE EMPLEADO
   ======================================== */

.detalle-empleado {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-basica,
.licencias-empleado,
.feriados-info {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--sombra-light);
}

.info-basica h3,
.licencias-empleado h3,
.feriados-info h3 {
    margin-bottom: 1rem;
    color: var(--verde-principal);
    border-bottom: 2px solid var(--verde-principal);
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item strong {
    display: block;
    color: var(--gris-oscuro);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.info-item p {
    color: var(--texto-principal);
    font-size: 1rem;
    font-weight: 500;
}

.info-empleado {
    background: rgba(54, 123, 99, 0.05);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--verde-principal);
}

.info-empleado p {
    margin: 0.25rem 0;
}

/* ========================================
   ESTADOS DE ASISTENCIA
   ======================================== */

.estado-presente {
    background: #d4edda;
    color: #155724;
}

.estado-ausente {
    background: #f8d7da;
    color: #721c24;
}

.estado-licencia {
    background: #fff3cd;
    color: #856404;
}

.estado-feriado {
    background: #d1ecf1;
    color: #0c5460;
}

/* ========================================
   ASISTENCIA
   ======================================== */

.tabla-asistencia {
    overflow-x: auto;
}

.asistencia-mensual {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--sombra-light);
}

.asistencia-mensual h3 {
    margin-bottom: 1.5rem;
    color: var(--verde-principal);
    border-bottom: 2px solid var(--verde-principal);
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
}

.resumen-mensual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--gris-claro);
    border-radius: 6px;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 4px;
    border-left: 3px solid var(--verde-principal);
}

.resumen-label {
    font-weight: 500;
    color: var(--gris-oscuro);
    font-size: 0.9rem;
}

.resumen-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--verde-principal);
}

.sin-seleccion {
    text-align: center;
    padding: 3rem;
    color: var(--gris-oscuro);
}

.sin-datos {
    color: var(--gris-oscuro);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.lista-feriados {
    list-style: none;
    padding: 0;
}

.lista-feriados li {
    padding: 0.75rem;
    border-bottom: 1px solid var(--borde);
    display: flex;
    justify-content: space-between;
}

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

.texto-feriado {
    color: var(--verde-principal);
    font-style: italic;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .main-content {
        margin-left: 260px;
    }

    .top-header {
        margin-left: 260px;
    }

    .footer {
        margin-left: 260px;
    }

    .sidebar {
        width: 260px;
    }

    .header-title h1 {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    /* On small screens keep the sidebar visible by default so content scrolls
       inside the page instead of moving the menu to the top. If you want
       an overlay behavior, add the class 'sidebar-overlay' to the sidebar. */
    .sidebar {
        transform: none;
        transition: none;
        width: 280px;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
        position: fixed;
        left: 0;
    }

    /* Optional overlay mode (not applied by default): */
    .sidebar.sidebar-overlay {
        transform: translateX(-100%);
        transition: var(--transicion);
    }

    .sidebar.sidebar-overlay.active {
        transform: translateX(0);
    }

    .toggle-sidebar {
        display: block;
    }

    /* Keep layout offset so sidebar stays visible */
    .main-content,
    .top-header,
    .footer {
        margin-left: 280px;
    }

    .header-content {
        padding: 1rem 1.5rem;
    }

    .header-left {
        gap: 1rem;
    }

    .header-title h1 {
        font-size: 1.1rem;
    }

    .modulo-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .modulo-contenido {
        padding: 1.5rem;
    }

    .main-content {
        padding: 1.5rem;
    }

    .estadisticas {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .filtros-grupo {
        flex-direction: column;
    }

    .filtros-grupo .form-grupo {
        width: 100%;
        min-width: unset;
    }

    .form-acciones {
        flex-direction: column;
    }

    .form-acciones .btn {
        width: 100%;
    }

    .acciones {
        flex-direction: column;
    }

    .tabla {
        font-size: 0.9rem;
    }

    .tabla th,
    .tabla td {
        padding: 0.75rem;
    }

    .resumen-mensual {
        grid-template-columns: 1fr;
    }

    .user-info span {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-left {
        flex: 1;
    }

    .header-title h1 {
        font-size: 1rem;
    }

    .header-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .modulo-header {
        gap: 0.5rem;
    }

    .modulo-header h2 {
        font-size: 1.3rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .tabla {
        font-size: 0.8rem;
    }

    .tabla th,
    .tabla td {
        padding: 0.5rem;
    }

    .tarjeta {
        padding: 1rem;
    }

    .tarjeta h3 {
        font-size: 1.75rem;
    }
}

/* ========================================
   SCROLLBAR PERSONALIZADO
   ======================================== */

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--gris-claro);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--verde-principal);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--verde-oscuro);
}

/* ========================================
   UTILIDADES
   ======================================== */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--gris-oscuro);
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

#info-dias-lao {
    margin-bottom: 1rem;
}

#info-dias-lao strong {
    margin-right: 0.5rem;
}

#dias-disponibles {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--verde-principal);
}

/* ========================================
   SIDEBAR COLAPSABLE
   ======================================== */

.sidebar.collapsed {
    width: 72px;
}

.sidebar.collapsed .logo-container {
    margin-bottom: 0;
}

.sidebar.collapsed .logo {
    max-width: 48px;
}

.sidebar.collapsed .sistema-titulo {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar.collapsed .nav-section-title {
    display: none;
}

/* On hover, expand the collapsed sidebar to show full menu */
.sidebar.collapsed:hover {
    width: 280px;
}

.sidebar.collapsed:hover .nav-item {
    justify-content: flex-start;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.sidebar.collapsed:hover .nav-item span {
    display: inline;
}

.sidebar.collapsed:hover .nav-section-title {
    display: block;
}

.sidebar.collapsed:hover .sistema-titulo {
    display: block;
}

/* Ajustar espacios cuando el sidebar está colapsado */
.sidebar.collapsed ~ .main-wrapper .top-header,
.sidebar.collapsed ~ .main-wrapper .main-content,
.sidebar.collapsed ~ .main-wrapper .footer {
    margin-left: 72px;
}

/* Also support body class for older markup where sibling combinator may not apply */
body.sidebar-collapsed .sidebar { width:72px; }
body.sidebar-collapsed .sidebar .sistema-titulo { display:none; }
body.sidebar-collapsed .main-content, body.sidebar-collapsed .top-header, body.sidebar-collapsed .footer { margin-left:72px; }

/* ========================================
   TABLA MATRIZ (mejor manejo de nombres largos)
   ======================================== */

.tabla-matriz th {
    max-width: 140px;
    padding: 6px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-matriz th small { display:block; color:var(--gris-oscuro); font-weight:500; }

/* Opcional: rotar encabezados en pantallas muy anchas (descomentar si prefieres) */
/* .tabla-matriz th { writing-mode: vertical-rl; transform: rotate(180deg); } */

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Ocultar elementos de navegación y controles */
    .sidebar, .top-header, .footer, .btn, .formulario-filtros { display: none !important; }

    /* Mostrar encabezado del reporte con logo */
    .modulo-contenido { box-shadow: none; border: none; padding: 0; }
    body { background: white; }

    /* Asegurar tablas a ancho completo */
    .main-content, .modulo-contenido { margin: 0; padding: 0; }
    .tabla, .tabla-calendario, .tabla-matriz { width: 100% !important; font-size: 11pt; }

    /* Mejorar legibilidad en papel */
    .tarjeta, .formulario, .info-basica { box-shadow: none; border: 1px solid #ddd; }

    /* Forzar salto de página después de la tabla grande si es necesario */
    .tabla { page-break-inside: avoid; }
}

/* Sticky left column for calendario/matriz */
.left-sticky {
    position: sticky;
    left: 0;
    background: white;
    z-index: 3;
    text-align: center;
}

.left-sticky-cell {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    text-align: center;
}

.tabla-matriz td, .tabla-matriz th {
    border-bottom: 1px solid var(--borde);
}