html {
    scroll-behavior: auto; /* Cambiado de 'smooth' a 'auto' para evitar saltos o retrasos */
    scroll-padding-top: 90px;
}

/*
 Theme Name:   Astra Child (SGEARS)
 Theme URI:    https://wpastra.com/
 Description:  Tema hijo para el sistema SGEARS Ars Nova Portal Integral.
 Author:       SGEARS Engineering
 Template:     astra
 Version:      1.0.5
*/

/* ==========================================
   1. Reset y Estilos Generales Dark Mode
   ========================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1b26;
    color: #c0caf5;
}

/* ==========================================
   2. Estructura Principal y SGEARS Layout (Flex Lateral)
   ========================================== */
.sgears-wrapper,
.sgears-container {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
    width: 100%;
    align-items: stretch;
}

.sgears-sidebar {
    width: 260px;
    min-width: 260px;
    background-color: #24283b;
    border-right: 1px solid #292e42;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sgears-sidebar-title {
    padding: 20px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #f3e600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    border-bottom: 1px solid #292e42;
}

.sgears-brand {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #292e42;
}

.sgears-brand .brand-sub {
    font-size: 11px;
    letter-spacing: 2px;
    color: #f3e600;
    font-weight: 600;
    text-transform: uppercase;
}

.sgears-brand h2 {
    color: #ffffff;
    margin: 5px 0 0 0;
    font-size: 22px;
}

.sgears-brand .brand-desc {
    font-size: 12px;
    color: #787c99;
    margin: 0;
}

/* Navegación SGEARS (Menú Lateral y Títulos de Módulos) */
.sgears-nav,
.sgears-menu {
    flex-grow: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sgears-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sgears-nav li a,
.sgears-menu li a {
    display: block;
    padding: 12px 20px;
    color: #c0caf5;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sgears-nav li.active a,
.sgears-nav li a:hover,
.sgears-menu li a.active,
.sgears-menu li a:hover {
    background-color: #1f2335;
    color: #f3e600 !important;
    border-left: 3px solid #f3e600;
}

/* Área de Contenido Principal */
.sgears-main-content,
.sgears-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding: 30px;
    background-color: #1a1b26;
    width: calc(100% - 260px);
}

.sgears-topbar {
    padding: 20px 30px;
    background-color: #24283b;
    border-bottom: 1px solid #292e42;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sgears-topbar h1 {
    color: #f3e600;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    text-decoration: none;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c0caf5;
    font-size: 14px;
}

.badge-role {
    background-color: rgba(243, 230, 0, 0.15);
    color: #f3e600;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.sgears-workspace {
    padding: 30px;
    flex-grow: 1;
    background-color: #1a1b26;
}

/* Grilla e Indicadores (Cards y Módulos) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.sgears-card {
    background-color: #24283b;
    border: 1px solid #292e42;
    border-radius: 10px;
    padding: 20px;
    color: #c0caf5;
    margin-bottom: 20px;
}

.sgears-card h3 {
    margin-top: 0;
    color: #7dcfff; /* Azul cielo */
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 8px;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #f3e600;
    margin: 0;
}

/* ==========================================
   Pestañas (Tabs) - Estilo Profesional y Adaptativo
   ========================================== */
.nav-tab-wrapper, 
.nav-tabs, 
.sgears-tabs {
    display: flex;
    flex-wrap: nowrap; /* Evita que salten de línea y se amontonen */
    overflow-x: auto; /* Permite desplazamiento horizontal suave si el espacio es reducido */
    gap: 4px;
    margin-bottom: 25px;
    border-bottom: 2px solid #292e42;
    padding-bottom: 0;
    scrollbar-width: thin;
}

.sgears-tabs::-webkit-scrollbar {
    height: 4px;
}

.sgears-tabs::-webkit-scrollbar-thumb {
    background: #414868;
    border-radius: 2px;
}

.nav-tab, 
.nav-tabs .nav-link,
.sgears-tab {
    text-transform: uppercase !important;
    margin: 0 !important;
    background: transparent !important;
    color: #787c99 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease;
}

.nav-tab:hover,
.nav-tabs .nav-link:hover,
.sgears-tab:hover {
    color: #c0caf5 !important;
    background: rgba(125, 207, 255, 0.05) !important;
}

.nav-tab.nav-active,
.nav-tabs .nav-link.active,
.sgears-tab.active {
    background: transparent !important;
    color: #7dcfff !important; /* Azul cielo */
    border-bottom: 3px solid #7dcfff !important; /* Línea indicadora moderna */
}

/* Alertas y Estado */
.alert-error {
    background: rgba(247, 118, 142, 0.15);
    border: 1px solid #f7768e;
    color: #f7768e;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
}

.badge-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-green {
    background: rgba(158, 206, 106, 0.2);
    color: #9ece6a;
}

.badge-yellow {
    background: rgba(243, 230, 0, 0.2);
    color: #f3e600;
}

.badge-red {
    background: rgba(247, 118, 142, 0.2);
    color: #f7768e;
}

/* Footer y Logout */
.sgears-logout-footer {
    padding: 15px 20px;
    border-top: 1px solid #292e42;
    background-color: #24283b;
    margin-top: auto;
}

.logout-btn {
    display: block;
    text-align: center;
    background-color: #292e42;
    color: #f7768e;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background-color: #3b4261;
}

/* Tablas del Sistema */
table.sgears-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    background: #24283b;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #292e42;
}

table.sgears-table th,
table.sgears-table td {
    border-bottom: 1px solid #292e42;
    padding: 12px 16px;
    text-align: left;
}

table.sgears-table th {
    background-color: #1f2335;
    color: #f3e600;
    font-weight: 600;
    text-transform: uppercase;
}

table.sgears-table tr:hover td {
    background: rgba(243, 230, 0, 0.05);
}

table.sgears-table tr:last-child td {
    border-bottom: none;
}

/* Formularios */
.sgears-form-group {
    margin-bottom: 15px;
}

.sgears-form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: #a9b1d6;
    font-weight: 600;
}

.sgears-form-group input,
.sgears-form-group select,
.sgears-form-group textarea {
    width: 100%;
    padding: 10px;
    background: #1a1b26;
    color: #c0caf5;
    border: 1px solid #414868;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.sgears-form-group input:focus,
.sgears-form-group select:focus,
.sgears-form-group textarea:focus {
    outline: none;
    border-color: #f3e600;
}

.sgears-btn {
    background: #f3e600;
    color: #1a1b26;
    border: none;
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-block;
    text-decoration: none !important;
    text-transform: uppercase;
}

.sgears-btn:hover {
    background: #d4c700;
}

/* ==========================================
   3. Integración de la Cabecera y Menú WordPress
   ========================================== */
body:has(.sgears-wrapper),
body:has(.sgears-container),
body:has(.sgears-wrapper) #page,
body:has(.sgears-container) #page,
body:has(.sgears-wrapper) #content,
body:has(.sgears-container) #content,
body:has(.sgears-wrapper) .site-content,
body:has(.sgears-container) .site-content,
body:has(.sgears-wrapper) .ast-container,
body:has(.sgears-container) .ast-container,
body:has(.sgears-wrapper) #primary,
body:has(.sgears-container) #primary,
body:has(.sgears-wrapper) #main,
body:has(.sgears-container) #main,
body:has(.sgears-wrapper) .entry-content,
body:has(.sgears-container) .entry-content {
    background-color: #1a1b26 !important;
    background: #1a1b26 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Ocultar elementos sobrantes de Astra pero mantener la cabecera */
body:has(.sgears-wrapper) .entry-header,
body:has(.sgears-container) .entry-header,
body:has(.sgears-wrapper) .site-footer,
body:has(.sgears-container) .site-footer {
    display: none !important;
}

/* Estilos de la Cabecera Superior y Menús de WordPress */
.site-header, 
.main-header-bar, 
#masthead,
.ast-main-header-wrap {
    background-color: #24283b !important;
    border-bottom: 1px solid #292e42 !important;
    color: #ffffff !important;
}

.site-title a, 
.site-description,
.main-header-bar .ast-builder-layout-element a,
.main-navigation a,
.main-header-menu a,
.ast-header-navigation-template a {
    color: #f3e600 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.site-title a:hover,
.main-header-bar .ast-builder-layout-element a:hover,
.main-navigation a:hover,
.main-header-menu a:hover,
.ast-header-navigation-template a:hover {
    color: #ffffff !important;
}

/* Estilo para los ítems activos del menú de WordPress en la cabecera */
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-header-menu li.current-menu-item > a {
    color: #f3e600 !important;
}

/* ==========================================
   4. Botón Toggle Menú (Oculto en Escritorio)
   ========================================== */
@media screen and (min-width: 769px) {
    .sgears-menu-btn {
        display: none !important;
    }
}

/* ==========================================
   5. Adaptación Móvil - Panel Lateral Retráctil
   ========================================== */
@media screen and (max-width: 768px) {

    /* Botón Flotante Fijo en Móvil */
    .sgears-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 999999 !important;
        background-color: #f3e600 !important;
        color: #1a1b26 !important;
        border: none !important;
        padding: 10px 16px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        cursor: pointer !important;
        margin: 0 !important;
    }

    .sgears-wrapper,
    .sgears-container {
        display: block !important;
        width: 100% !important;
    }

    .sgears-main-content,
    .sgears-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 12px !important;
        box-sizing: border-box !important;
    }

    .sgears-workspace {
        padding: 15px 10px !important;
    }

    .sgears-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 270px !important;
        min-width: 270px !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background-color: #24283b !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
    }

    .sgears-sidebar.open {
        transform: translateX(0) !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    table.sgears-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border: 1px solid #292e42 !important;
    }
}