/* ============================================================
   SGA EPO179 — Estilos globales
   Bootstrap 5.3 como base — overrides y componentes propios
   Resoluciones soportadas: 360px → 1920px
   Principal: 1366x768
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
/* ============================================================
   SGA EPO179 — Variables de color
   Basadas en paleta Velzon (vz-*) adaptadas al sistema
   ============================================================ */
:root {
    /* Colores institucionales — derivados de vz-primary #405189 */
    --sga-topbar:        #405189;
    --sga-topbar-border: #354374;
    --sga-navbar:        #354374;
    --sga-navbar-border: #f7b84b;
    --sga-primary:       #405189;
    --sga-primary-dark:  #293158;
    --sga-primary-light: #3577f1;
    --sga-accent:        #f7b84b;
    --sga-accent-dark:   #e5a012;
    --sga-pink:          #f672a7;
    --sga-pink-light:    rgba(246, 114, 167, 0.12);
    --sga-pink-dark:     #d4508a;

    /* Drawer móvil — derivado oscuro de vz-primary */
    --drawer-bg:         #293158;
    --drawer-border:     #354374;
    --drawer-text:       #a8b4d4;
    --drawer-text-hover: #ffffff;
    --drawer-active-bg:  #405189;

    /* Dropdown nav */
    --dropdown-bg:       #1e2548;

    /* Superficies — vz-body-bg y grays */
    --surface-bg:        #f3f3f9;
    --surface-card:      #ffffff;
    --surface-border:    #e9ebec;
    --surface-row:       #f3f6f9;

    /* Texto — vz-body-color y grays */
    --text-primary:      #212529;
    --text-secondary:    #495057;
    --text-muted:        #878a99;

    /* Estados — colores semánticos Velzon */
    --color-success:     #0ab39c;
    --color-warning:     #f7b84b;
    --color-danger:      #f06548;
    --color-info:        #299cdb;

    /* Layout */
    --topbar-height:     54px;
    --navbar-height:     42px;
    --border-radius:     6px;
    --border-radius-lg:  8px;
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.07);
    --shadow-md:         0 2px 8px rgba(0,0,0,0.11);
    --shadow-lg:         0 8px 24px rgba(0,0,0,0.15);

    /* Tipografía — vz-font-sans-serif */
    --font-primary:      'Poppins', system-ui, -apple-system, sans-serif;
}

/* ── Reset base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:      var(--font-primary);
    background-color: var(--surface-bg);
    color:            var(--text-primary);
    font-size:        0.875rem;
    line-height:      1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.sga-topbar {
    background:    var(--sga-topbar);
    height:        var(--topbar-height);
    display:       flex;
    align-items:   center;
    padding:       0 16px;
    gap:           10px;
    border-bottom: 1px solid var(--sga-topbar-border);
    position:      sticky;
    top:           0;
    z-index:       500;
}

/* Brand */
.sga-brand {
    display:         flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none;
    flex-shrink:     0;
}

.sga-brand-logo {
    width:           32px;
    height:          32px;
    background:      var(--sga-accent);
    border-radius:   var(--border-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       11px;
    font-weight:     800;
    color:           var(--sga-topbar);
    flex-shrink:     0;
    letter-spacing:  0;
}

.sga-brand-name {
    color:       #ffffff;
    font-size:   13px;
    font-weight: 700;
    line-height: 1.2;
}

.sga-brand-sub {
    color:          #6a8aaa;
    font-size:      9px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* Hamburger */
.sga-hamburger {
    display:        none;
    background:     none;
    border:         none;
    color:          #8aaccc;
    cursor:         pointer;
    padding:        6px;
    border-radius:  4px;
    flex-direction: column;
    gap:            4px;
    flex-shrink:    0;
}

.sga-hamburger span {
    display:       block;
    width:         18px;
    height:        2px;
    background:    #8aaccc;
    border-radius: 2px;
    transition:    all .25s;
}

.sga-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sga-hamburger.open span:nth-child(2) { opacity: 0; }
.sga-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Topbar derecha */
.sga-topbar-right {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.sga-ciclo-badge {
    background:    #1a3050;
    border:        1px solid #264a6e;
    border-radius: 20px;
    padding:       3px 10px;
    color:         #5bc4a0;
    font-size:     10px;
    font-weight:   700;
    letter-spacing:.3px;
    white-space:   nowrap;
}

/* Usuario topbar */
.sga-user-wrap { position: relative; }

.sga-user-btn {
    display:       flex;
    align-items:   center;
    gap:           7px;
    background:    #1a3050;
    border:        1px solid #264a6e;
    border-radius: var(--border-radius);
    padding:       4px 10px 4px 5px;
    cursor:        pointer;
}

.sga-user-avatar {
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      var(--sga-primary-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       9px;
    font-weight:     700;
    color:           #a8d4f0;
    flex-shrink:     0;
}

.sga-user-name {
    color:       #c8dff0;
    font-size:   11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.sga-user-role {
    color:         #6a8aaa;
    font-size:     10px;
    white-space:   nowrap;
    max-width:     180px;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sga-user-caret {
    color:      #6a8aaa;
    font-size:  9px;
    margin-left:2px;
    transition: transform .2s;
}

.sga-user-caret.up { transform: rotate(180deg); }

/* Dropdown usuario */
.sga-user-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    background:    var(--dropdown-bg);
    border:        1px solid #264a6e;
    border-radius: var(--border-radius-lg);
    min-width:     230px;
    z-index:       600;
    box-shadow:    var(--shadow-lg);
}

.sga-user-dropdown.open { display: block; }

.sga-ud-header {
    padding:       11px 15px;
    border-bottom: 1px solid var(--drawer-border);
}

.sga-ud-fullname {
    color:       #c8dff0;
    font-size:   12px;
    font-weight: 600;
}

.sga-ud-email {
    color:     #6a8aaa;
    font-size: 10px;
    margin-top:1px;
}

.sga-ud-section {
    padding:       5px 0;
    border-bottom: 1px solid var(--drawer-border);
}

.sga-ud-label {
    padding:        4px 15px;
    color:          #4a6a8a;
    font-size:      9px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight:    700;
}

.sga-ud-role {
    display:    flex;
    align-items:center;
    gap:        8px;
    padding:    7px 15px;
    cursor:     pointer;
    transition: background .15s;
}

.sga-ud-role:hover       { background: #1a3050; }
.sga-ud-role.active-role { background: #1e4070; }

.sga-ud-dot {
    width:        7px;
    height:       7px;
    border-radius:50%;
    flex-shrink:  0;
}

.sga-ud-rname {
    color:       #c8dff0;
    font-size:   11px;
    font-weight: 600;
}

.sga-ud-rcampus {
    color:     #6a8aaa;
    font-size: 10px;
}

.sga-ud-check {
    margin-left: auto;
    color:       #5bc4a0;
    font-size:   11px;
    font-weight: 700;
}

.sga-ud-footer { padding: 5px 0; }

.sga-ud-link {
    display:    flex;
    align-items:center;
    gap:        8px;
    padding:    7px 15px;
    cursor:     pointer;
    color:      #8aaccc;
    font-size:  11px;
    transition: background .15s;
    text-decoration: none;
}

.sga-ud-link:hover  { background: #1a3050; color: #c8dff0; }
.sga-ud-link.danger { color: #f08090; }
.sga-ud-link.danger:hover { color: #f5b0bc; }

/* ── NAVBAR HORIZONTAL ──────────────────────────────────────── */
.sga-navbar {
    background:    var(--sga-navbar);
    border-bottom: 2px solid var(--sga-navbar-border);
    display:       flex;
    gap:           0;
    overflow-x:    auto;
    position:      sticky;
    top:           var(--topbar-height);
    z-index:       400;
    scrollbar-width: none;
}

.sga-navbar::-webkit-scrollbar { display: none; }

/* Grupos con dropdown */
.sga-nav-group { position: relative; }

.sga-nav-group-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       0 14px;
    height:        var(--navbar-height);
    color:         #8aaccc;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    border-bottom: 3px solid transparent;
    white-space:   nowrap;
    transition:    all .15s;
    background:    none;
    border-top:    none;
    border-left:   none;
    border-right:  none;
    letter-spacing:.1px;
}

.sga-nav-group-btn:hover {
    color:      #c8dff0;
    background: rgba(255,255,255,.05);
}

.sga-nav-group-btn.open,
.sga-nav-group-btn.has-active {
    color:             #ffffff;
    border-bottom-color: var(--sga-accent);
    background:        rgba(232,160,32,.07);
}

.sga-nav-caret {
    font-size:  8px;
    opacity:    .6;
    transition: transform .2s;
    margin-left:2px;
}

.sga-nav-group-btn.open .sga-nav-caret { transform: rotate(180deg); }

/* Dropdown nav */
.sga-nav-dropdown {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    background:    var(--dropdown-bg);
    border:        1px solid #264a6e;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    min-width:     200px;
    box-shadow:    var(--shadow-lg);
    z-index:       500;
}

.sga-nav-dropdown.open { display: block; }

.sga-nd-item {
    display:         flex;
    align-items:     center;
    gap:             9px;
    padding:         9px 15px;
    color:           #8aaccc;
    font-size:       11px;
    font-weight:     500;
    cursor:          pointer;
    transition:      background .15s;
    text-decoration: none;
}

.sga-nd-item:hover  { background: #1a3050; color: #c8dff0; }
.sga-nd-item.active { background: #1e4070; color: #ffffff; font-weight: 600; }

.sga-nd-icon {
    width:      16px;
    text-align: center;
    font-size:  12px;
    flex-shrink:0;
}

.sga-nd-badge {
    margin-left:  auto;
    background:   var(--sga-accent);
    color:        var(--sga-topbar);
    font-size:    8px;
    font-weight:  800;
    padding:      1px 4px;
    border-radius:7px;
}

.sga-nd-divider {
    height:     1px;
    background: var(--drawer-border);
    margin:     3px 0;
}

/* Items sin grupo */
.sga-nav-solo {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       0 14px;
    height:        var(--navbar-height);
    color:         #8aaccc;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    border-bottom: 3px solid transparent;
    white-space:   nowrap;
    transition:    all .15s;
    text-decoration: none;
}

.sga-nav-solo:hover {
    color:      #c8dff0;
    background: rgba(255,255,255,.05);
}

.sga-nav-solo.active {
    color:               #ffffff;
    border-bottom-color: var(--sga-accent);
    background:          rgba(232,160,32,.07);
}

/* Badge en nav */
.sga-nav-badge {
    background:   var(--sga-accent);
    color:        var(--sga-topbar);
    font-size:    8px;
    font-weight:  800;
    padding:      1px 4px;
    border-radius:7px;
    margin-left:  2px;
}

/* ── DRAWER MÓVIL ───────────────────────────────────────────── */
.sga-drawer-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.55);
    z-index:    450;
}

.sga-drawer-overlay.open { display: block; }

.sga-drawer {
    position:   fixed;
    top:        var(--topbar-height);
    left:       0;
    bottom:     0;
    width:      270px;
    background: var(--drawer-bg);
    z-index:    460;
    transform:  translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto;
    border-right:1px solid var(--drawer-border);
}

.sga-drawer.open { transform: translateX(0); }

.sga-drawer-user {
    padding:       14px 18px;
    border-bottom: 1px solid var(--drawer-border);
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.sga-drawer-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--sga-primary-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       11px;
    font-weight:     700;
    color:           #a8d4f0;
    flex-shrink:     0;
}

.sga-drawer-uname {
    color:       #c8dff0;
    font-size:   12px;
    font-weight: 600;
}

.sga-drawer-urole {
    color:     #6a8aaa;
    font-size: 10px;
}

.sga-drawer-section {
    padding:       8px 0;
    border-bottom: 1px solid var(--drawer-border);
}

.sga-drawer-label {
    padding:        4px 18px 2px;
    color:          #4a6a8a;
    font-size:      9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:    700;
}

.sga-drawer-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         9px 18px;
    color:           var(--drawer-text);
    font-size:       12px;
    font-weight:     500;
    cursor:          pointer;
    transition:      background .15s;
    border-left:     3px solid transparent;
    text-decoration: none;
}

.sga-drawer-item:hover {
    color:      var(--drawer-text-hover);
    background: rgba(255,255,255,.05);
}

.sga-drawer-item.active {
    color:              var(--drawer-text-hover);
    background:         var(--drawer-active-bg);
    border-left-color:  var(--sga-accent);
    font-weight:        600;
}

.sga-drawer-icon {
    font-size:  13px;
    width:      18px;
    text-align: center;
    flex-shrink:0;
}

.sga-drawer-badge {
    margin-left:  auto;
    background:   var(--sga-accent);
    color:        var(--sga-topbar);
    font-size:    8px;
    font-weight:  800;
    padding:      1px 5px;
    border-radius:7px;
}

/* ── ÁREA DE CONTENIDO ──────────────────────────────────────── */
.sga-content {
    padding: 16px 20px;
}

.sga-page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    background:      var(--surface-card);
    border:          1px solid var(--surface-border);
    border-radius:   var(--border-radius-lg);
    padding:         14px 18px;
    margin-bottom:   16px;
    gap:             10px;
    flex-wrap:       wrap;
}

.sga-ph-left {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
}

.sga-ph-icon {
    width:           40px;
    height:          40px;
    background:      #e8f5ee;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    flex-shrink:     0;
}

.sga-ph-title {
    font-size:   14px;
    font-weight: 700;
    color:       var(--text-primary);
}

.sga-ph-sub {
    font-size:  11px;
    color:      var(--text-secondary);
    margin-top: 1px;
}

.sga-ph-right  { text-align: right; flex-shrink: 0; }

.sga-ph-date {
    font-size:     10px;
    color:         var(--text-muted);
    background:    var(--surface-bg);
    border:        1px solid var(--surface-border);
    border-radius: 4px;
    padding:       2px 7px;
    display:       inline-block;
    margin-bottom: 5px;
}

.sga-campus-tags {
    display:         flex;
    gap:             4px;
    flex-wrap:       wrap;
    justify-content: flex-end;
}

.sga-ct {
    font-size:     9px;
    font-weight:   700;
    padding:       2px 7px;
    border-radius: 8px;
}

.sga-ct-1 { background: #e8f0fb; color: #1a4a8a; }
.sga-ct-2 { background: #e8f5ee; color: #145a32; }
.sga-ct-3 { background: #fdf3e3; color: #7d5a00; }

/* ── STATS ──────────────────────────────────────────────────── */
.sga-stats-grid {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   10px;
    margin-bottom:         16px;
}

.sga-stat-card {
    background:    var(--surface-card);
    border:        1px solid var(--surface-border);
    border-radius: var(--border-radius-lg);
    padding:       14px 12px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    transition:    box-shadow .15s;
}

.sga-stat-card:hover { box-shadow: var(--shadow-md); }

.sga-stat-icon {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
}

.sga-stat-icon.primary { background: rgba(13,110,253,.1); }
.sga-stat-icon.blue    { background: rgba(66,133,244,.1); }
.sga-stat-icon.red     { background: rgba(234,67,53,.1); }
.sga-stat-icon.yellow  { background: rgba(251,188,5,.1); }
.sga-stat-icon.green   { background: rgba(52,168,83,.1); }
.sga-stat-icon.purple  { background: rgba(155,81,224,.1); }
.sga-stat-icon.warning { background: rgba(232,160,32,.1); }
.sga-stat-icon.danger  { background: rgba(220,53,69,.1); }

.sga-stat-value {
    font-size:   20px;
    font-weight: 800;
    line-height: 1;
    color:       var(--text-primary);
}

.sga-stat-value.primary { color: #0d6efd; }
.sga-stat-value.blue    { color: #4285f4; }
.sga-stat-value.red     { color: #ea4335; }
.sga-stat-value.yellow  { color: #fbbc05; }
.sga-stat-value.green   { color: #34a853; }
.sga-stat-value.purple  { color: #9b51e0; }
.sga-stat-value.warning { color: var(--sga-accent); }
.sga-stat-value.danger  { color: var(--color-danger); }

.sga-stat-label {
    font-size:      9px;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight:    700;
    margin-top:     2px;
}

/* ── CARDS ──────────────────────────────────────────────────── */
.sga-card {
    background:    var(--surface-card);
    border:        1px solid var(--surface-border);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
}

.sga-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    border-bottom:   1px solid #f0f2f5;
    gap:             8px;
}

.sga-card-title {
    font-size:   12px;
    font-weight: 700;
    color:       var(--text-primary);
    margin:      0;
}

.sga-card-body { padding: 16px; }

.sga-card-link {
    font-size:       10px;
    color:           var(--sga-primary-light);
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
}

.sga-card-link:hover { color: var(--sga-primary); }

/* ── TABLAS ─────────────────────────────────────────────────── */
.sga-table-wrap { overflow-x: auto; }

.sga-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.84rem;
}

.sga-table thead th {
    background:     var(--surface-row);
    color:          var(--text-muted);
    font-size:      9px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding:        8px 14px;
    text-align:     left;
    border-bottom:  2px solid var(--surface-border);
    white-space:    nowrap;
}

.sga-table tbody td {
    padding:         9px 14px;
    border-bottom:   1px solid #f4f6f9;
    color:           var(--text-primary);
    vertical-align:  middle;
    font-size:       0.82rem;
}

.sga-table tbody tr:last-child td { border-bottom: none; }
.sga-table tbody tr:hover td { background: #f8fafc; }

/* ── BADGES ─────────────────────────────────────────────────── */
.sga-badge {
    display:       inline-block;
    padding:       2px 7px;
    border-radius: 7px;
    font-size:     9px;
    font-weight:   700;
    white-space:   nowrap;
}

.sga-badge-primary   { background: #e8f0fb; color: #1a4a8a; }
.sga-badge-success   { background: #e8f5ee; color: #145a32; }
.sga-badge-warning   { background: #fdf3e3; color: #7d5a00; }
.sga-badge-danger    { background: #fde8ea; color: #7b1a24; }
.sga-badge-secondary { background: #f0f2f5; color: #5a6a7a; }
.sga-badge-info      { background: #e8f4fd; color: #0c4a7a; }
.sga-badge-active    { background: #e8f5ee; color: #145a32; }
.sga-badge-inactive  { background: #f0f2f5; color: #5a6a7a; }
.sga-stat-icon.pink  { background: rgba(246, 114, 167, 0.12); }
.sga-stat-value.pink { color: #f672a7; }
.sga-badge-pink      { background: rgba(246, 114, 167, 0.15); color: #d4508a; }

/* ── ALERTAS FLASH ──────────────────────────────────────────── */
.sga-alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       10px 14px;
    border-radius: var(--border-radius);
    border:        1px solid transparent;
    font-size:     0.84rem;
    margin-bottom: 12px;
}

.sga-alert-success { background: #e8f5ee; border-color: #a3d9b8; color: #145a32; }
.sga-alert-error   { background: #fde8ea; border-color: #f5b7bc; color: #7b1a24; }
.sga-alert-warning { background: #fdf3e3; border-color: #f5d9a0; color: #7d5a00; }
.sga-alert-info    { background: #e8f4fd; border-color: #a3c8f5; color: #0c4a7a; }

/* ── BOTONES ────────────────────────────────────────────────── */
.sga-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 14px;
    border-radius:   var(--border-radius);
    font-size:       0.82rem;
    font-weight:     600;
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      all .15s;
    white-space:     nowrap;
}

.sga-btn-primary  { background: var(--sga-primary); color: #fff; border-color: var(--sga-primary); }
.sga-btn-primary:hover { background: var(--sga-primary-dark); color: #fff; }
.sga-btn-secondary { background: var(--surface-bg); color: var(--text-primary); border-color: var(--surface-border); }
.sga-btn-secondary:hover { background: #e8eaed; }
.sga-btn-danger   { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.sga-btn-sm       { padding: 4px 10px; font-size: 0.76rem; }

/* ── FORMULARIOS ────────────────────────────────────────────── */
.sga-label {
    font-size:     0.8rem;
    font-weight:   600;
    color:         var(--text-primary);
    margin-bottom: 4px;
    display:       block;
}

.sga-input {
    width:         100%;
    border:        1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding:       7px 11px;
    font-size:     0.875rem;
    color:         var(--text-primary);
    background:    var(--surface-card);
    transition:    border-color .15s, box-shadow .15s;
    outline:       none;
}

.sga-input:focus {
    border-color: var(--sga-primary-light);
    box-shadow:   0 0 0 3px rgba(45,90,142,.12);
}

/* ── LAYOUT AUTH ────────────────────────────────────────────── */
.sga-auth-wrap {
    min-height:      100vh;
    background:      var(--surface-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
}

.sga-auth-card {
    background:    var(--surface-card);
    border:        1px solid var(--surface-border);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow-lg);
    width:         100%;
    max-width:     400px;
    overflow:      hidden;
}

.sga-auth-header {
    background: var(--sga-topbar);
    padding:    26px 30px 22px;
    text-align: center;
}

.sga-auth-logo {
    color:          #ffffff;
    font-size:      1.25rem;
    font-weight:    800;
    margin:         0;
    letter-spacing: .5px;
}

.sga-auth-tagline {
    color:          #6a8aaa;
    font-size:      10px;
    margin:         4px 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sga-auth-body  { padding: 28px 30px; }

.sga-auth-title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 20px;
    text-align:    center;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.sga-footer {
    padding:     10px 20px;
    border-top:  1px solid var(--surface-border);
    background:  var(--surface-card);
    font-size:   0.73rem;
    color:       var(--text-muted);
    text-align:  center;
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.sga-breadcrumb {
    font-size:     11px;
    color:         var(--text-muted);
    margin-bottom: 10px;
}

.sga-breadcrumb a {
    color:           var(--text-muted);
    text-decoration: none;
}

.sga-breadcrumb a:hover { color: var(--sga-primary-light); }

.sga-breadcrumb .active {
    color:       var(--text-secondary);
    font-weight: 600;
}

/* ── DATATABLES OVERRIDES ───────────────────────────────────── */
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border:        1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding:       5px 9px;
    font-size:     0.82rem;
}

div.dataTables_wrapper div.dataTables_info { font-size: 0.78rem; color: var(--text-muted); }
.paginate_button { border-radius: var(--border-radius) !important; font-size: 0.78rem !important; }

/* SweetAlert2 sobre modales de Bootstrap */
.swal2-container {
    z-index: 99999 !important;
}

/* ── UTILIDADES ─────────────────────────────────────────────── */
.text-sga-primary { color: var(--sga-primary) !important; }
.text-accent      { color: var(--sga-accent)  !important; }
.fw-600           { font-weight: 600 !important; }
.fw-700           { font-weight: 700 !important; }
.fs-xs            { font-size: 0.73rem !important; }
.fs-sm            { font-size: 0.82rem !important; }

/* ── RESPONSIVO ─────────────────────────────────────────────── */

/* ============================================================
   GÉNERO — Convención de color institucional
   Mujer (M) = Rosa  #f672a7
   Hombre (H) = Azul #3577f1
   ============================================================ */

/* ── Variables de género ─────────────────────────────────── */
:root {
    --genero-m:           #f672a7;
    --genero-m-light:     rgba(246, 114, 167, 0.12);
    --genero-m-dark:      #d4508a;
    --genero-m-border:    rgba(246, 114, 167, 0.30);

    --genero-h:           #3577f1;
    --genero-h-light:     rgba(53, 119, 241, 0.12);
    --genero-h-dark:      #1a5cd4;
    --genero-h-border:    rgba(53, 119, 241, 0.30);
}

/* ── Stat cards de género ────────────────────────────────── */
.sga-stat-icon.mujer    { background: var(--genero-m-light); }
.sga-stat-icon.hombre   { background: var(--genero-h-light); }

.sga-stat-value.mujer   { color: var(--genero-m); }
.sga-stat-value.hombre  { color: var(--genero-h); }

/* Borde superior de color en stat card de género */
.sga-stat-card.mujer  { border-top: 3px solid var(--genero-m); }
.sga-stat-card.hombre { border-top: 3px solid var(--genero-h); }

/* ── Badges de género ────────────────────────────────────── */
.sga-badge-mujer  {
    background:  var(--genero-m-light);
    color:       var(--genero-m-dark);
    border:      1px solid var(--genero-m-border);
}

.sga-badge-hombre {
    background:  var(--genero-h-light);
    color:       var(--genero-h-dark);
    border:      1px solid var(--genero-h-border);
}

/* ── Íconos SVG inline de género ─────────────────────────── */
.sga-icon-mujer  { color: var(--genero-m); }
.sga-icon-hombre { color: var(--genero-h); }

/* ── Punto de color en tablas (columna Género) ───────────── */
.sga-genero-dot {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     0.82rem;
    font-weight:   600;
}

.sga-genero-dot::before {
    content:       '';
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

.sga-genero-dot.mujer  { color: var(--genero-m-dark); }
.sga-genero-dot.mujer::before  { background: var(--genero-m); }

.sga-genero-dot.hombre { color: var(--genero-h-dark); }
.sga-genero-dot.hombre::before { background: var(--genero-h); }

/* ── Fila de tabla con acento de género (opcional) ───────── */
.sga-table tbody tr.fila-mujer  td:first-child { border-left: 3px solid var(--genero-m); }
.sga-table tbody tr.fila-hombre td:first-child { border-left: 3px solid var(--genero-h); }

/* ============================================================
   DATATABLES - ESTILOS COMPLETOS
   ============================================================ */

/* Limpiar floats y contenedor principal */
.dataTables_wrapper {
    clear: both;
    zoom: 1;
}

/* Fila superior: "Mostrar X registros" a la izquierda */
.dataTables_wrapper .dataTables_length {
    float: left;
    margin: 0;
    padding: 0.75rem 0 0.75rem 1rem;
}

/* Fila superior: "Buscar:" a la derecha */
.dataTables_wrapper .dataTables_filter {
    float: right;
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select {
    width: auto;
    padding: 0.375rem 1.5rem 0.375rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid var(--surface-border, #ced4da);
    border-radius: var(--border-radius, 0.25rem);
    background-color: var(--surface-card, #fff);
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--surface-border, #ced4da);
    border-radius: var(--border-radius, 0.25rem);
    margin-left: 0.5rem;
    width: auto;
    min-width: 200px;
    font-size: 0.875rem;
}

/* Tabla */
.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
    clear: both;
}

.dataTable thead th {
    padding: 0.75rem 1rem !important;
    background-color: var(--surface-row, #f8f9fa);
    border-bottom: 2px solid var(--surface-border, #dee2e6);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: left;
}

.dataTable tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--surface-border, #e9ecef);
    font-size: 0.875rem;
}

.dataTable tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Información de registros (izquierda) */
.dataTables_wrapper .dataTables_info {
    float: left;
    padding: 0.75rem 0 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    clear: none;
}

/* Paginación (derecha) */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    padding: 0.75rem 1rem 0.75rem 0;
    text-align: right;
}

/* Limpiar floats después de la tabla */
.dataTables_wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive DataTables */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        padding: 0.75rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        min-width: auto;
        margin-left: 0;
    }

    .dataTables_wrapper .dataTables_length select {
        margin: 0 0.5rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        margin: 0.25rem;
    }
}

/* 1400px: stats 3 columnas */
@media (max-width: 1400px) {
    .sga-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 1024px: compactar topbar */
@media (max-width: 1024px) {
    .sga-brand-sub   { display: none; }
    .sga-user-role   { display: none; }
    .sga-ciclo-badge { display: none; }
}

/* 768px: ocultar navbar, mostrar drawer */
@media (max-width: 768px) {
    .sga-navbar      { display: none; }
    .sga-hamburger   { display: flex; }
    .sga-brand-sub   { display: none; }
    .sga-user-role   { display: none; }
    .sga-ciclo-badge { display: none; }
    .sga-stats-grid  { grid-template-columns: repeat(2, 1fr); }
    .sga-content     { padding: 12px 14px; }
    .sga-ph-right    { display: none; }
}

/* 480px: móvil */
@media (max-width: 480px) {
    .sga-topbar      { padding: 0 10px; gap: 7px; }
    .sga-brand-name  { font-size: 12px; }
    .sga-brand-logo  { width: 28px; height: 28px; font-size: 10px; }
    .sga-stats-grid  { gap: 8px; }
    .sga-stat-card   { padding: 10px 8px; gap: 7px; }
    .sga-stat-icon   { width: 36px; height: 36px; font-size: 15px; }
    .sga-stat-value  { font-size: 17px; }
    .sga-user-name   { display: none; }
    .sga-content     { padding: 10px 12px; }
}

/* ── Avatar de iniciales — topbar ───────────────────────────── */
.sga-avatar-iniciales {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    background:       rgba(255, 255, 255, 0.22) !important;
    color:            #fff !important;
    font-size:        0.7rem !important;
    font-weight:      700 !important;
    letter-spacing:   0.5px;
    border:           1.5px solid rgba(255, 255, 255, 0.40) !important;
    line-height:      1 !important;
}

/* 360px */
@media (max-width: 360px) {
    .sga-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Extraordinarios — asignación seleccionada (Tab Captura) ── */
#listaAsignaciones .list-group-item-action.active {
    background-color: #e8f0fb;
    border-color:     #c5d6f5;
    color:            #1a4a8a;
}
#listaAsignaciones .list-group-item-action.active .text-muted {
    color: #4a6a9a !important;
}
#listaAsignaciones .list-group-item-action.active .badge {
    background-color: rgba(26, 74, 138, 0.12) !important;
    color:            #1a4a8a !important;
}