/* ============================================================
   ACOMPAÑA-T — Modern Theme
   Color principal: #38662b (verde institucional)
   ============================================================ */

/* ── Variables globales ── */
:root {
    --gta-primary:        #38662b;
    --gta-primary-dark:   #2a4d1f;
    --gta-primary-light:  #4d8c3a;
    --gta-primary-xlight: #eaf4e6;
    --gta-accent:         #f8d800;
    --gta-accent-dark:    #d4b800;
    --gta-danger:         #ef4444;
    --gta-danger-dark:    #c53030;
    --gta-white:          #ffffff;
    --gta-gray-50:        #f9fafb;
    --gta-gray-100:       #f3f4f6;
    --gta-gray-200:       #e5e7eb;
    --gta-gray-400:       #9ca3af;
    --gta-gray-600:       #4b5563;
    --gta-gray-800:       #1f2937;
    --gta-text:           #1a2e15;
    --gta-shadow-sm:      0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --gta-shadow-md:      0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    --gta-shadow-lg:      0 20px 40px rgba(0,0,0,.16);
    --gta-radius:         12px;
    --gta-radius-sm:      8px;
    --gta-radius-lg:      20px;
    --gta-transition:     all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Tipografía base ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', 'Calibri', sans-serif !important;
    color: var(--gta-gray-800);
    background-color: var(--gta-gray-50);
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════ */
.admin-topbar {
    background: linear-gradient(135deg, var(--gta-primary-dark) 0%, var(--gta-primary) 60%, var(--gta-primary-light) 100%) !important;
    box-shadow: var(--gta-shadow-md);
    padding: 0 24px !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 10px 0 !important;
}

.admin-brand-logo {
    width: 38px;
    height: 44px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ── Forzar estilos de topbar SIN que el label global interfiera ── */
.admin-topbar label,
.admin-topbar span {
    /* Reset de overrides globales */
    text-transform: none !important;
    margin-bottom: 0 !important;
    letter-spacing: normal !important;
}

.admin-brand-name {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
}

.admin-brand-separator {
    color: rgba(255,255,255,.5) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

.admin-brand-text {
    color: rgba(255,255,255,.88) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
}

.admin-user-area {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.admin-user-header .user {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    transition: var(--gta-transition);
    text-decoration: none !important;
}

.admin-user-header .user:hover {
    background: rgba(255,255,255,.22);
    text-decoration: none !important;
}

.admin-user-header .user span,
.admin-user-header .user i {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
}

/* ══════════════════════════════════════════════
   BARRA DE PROGRESO
══════════════════════════════════════════════ */
.header.navbar {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: unset !important;
    position: fixed;
    top: 0;
    z-index: 999;
}

.estudiante-progress-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.progress-container {
    display: flex;
    width: 100%;
    height: 4px;
}

.progress-container .progress {
    flex: 1;
    height: 4px;
    border-radius: 0;
    background-color: transparent;
}

.progress-container .progress.yellow { background-color: var(--gta-accent); }
.progress-container .progress.red    { background-color: var(--gta-danger); }
.progress-container .progress.green  { background-color: var(--gta-primary); }

/* ══════════════════════════════════════════════
   LAYOUT / CONTENEDOR
══════════════════════════════════════════════ */
.main-container {
    margin-top: 0 !important;
    background: var(--gta-gray-50) !important;
}

.main-content {
    padding: 28px 0 !important;
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
.card {
    border: none !important;
    border-radius: var(--gta-radius) !important;
    box-shadow: var(--gta-shadow-sm) !important;
    background: var(--gta-white) !important;
    transition: var(--gta-transition);
}

.card:hover {
    box-shadow: var(--gta-shadow-md) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--gta-primary-dark), var(--gta-primary)) !important;
    color: var(--gta-white) !important;
    border-radius: var(--gta-radius) var(--gta-radius) 0 0 !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 12px 20px !important;
    border: none !important;
}

/* Card-header que actúa como pie (último hijo) → esquinas abajo */
.card-header:last-child {
    border-radius: 0 0 var(--gta-radius) var(--gta-radius) !important;
}

/* Card-header único (no hay body ni otros) → todo redondeado */
.card-header:only-child {
    border-radius: var(--gta-radius) !important;
}

/* Todo dentro de card-header debe ser blanco */
.card-header *,
.card-header span,
.card-header label,
.card-header a,
.card-header button {
    color: var(--gta-white) !important;
    text-transform: none;
    margin-bottom: 0 !important;
}

/* Botones dentro del card-header (buscar, limpiar) */
.card-header .btn {
    color: var(--gta-white) !important;
}

/* Botón "Limpiar" (secondary) dentro del card-header verde */
.card-header .btn-secondary {
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.45) !important;
    color: #ffffff !important;
    backdrop-filter: blur(4px);
}

.card-header .btn-secondary:hover {
    background: rgba(255,255,255,.32) !important;
    border-color: rgba(255,255,255,.75) !important;
    color: #ffffff !important;
}

.card-body {
    padding: 20px !important;
}

/* ══════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════ */
.btn {
    border-radius: var(--gta-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    transition: var(--gta-transition) !important;
    letter-spacing: .2px;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap;
}

/* Dropdown toggle — caret inline */
.btn.dropdown-toggle::after {
    margin-left: 4px !important;
    vertical-align: middle;
}

.btn-pnipa-primary,
.btn-pnipa-primary:focus {
    background: var(--gta-accent) !important;
    color: var(--gta-text) !important;
    box-shadow: 0 2px 8px rgba(248,216,0,.35) !important;
}

.btn-pnipa-primary:hover {
    background: var(--gta-accent-dark) !important;
    color: var(--gta-text) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(248,216,0,.45) !important;
}

/* btn-danger: rojo sólido para todos los casos */
.btn-danger,
[style*="background:#ef4444"],
[style*="background: #ef4444"] {
    background: var(--gta-danger) !important;
    color: var(--gta-white) !important;
    box-shadow: 0 2px 8px rgba(239,68,68,.25) !important;
}

.btn-danger:hover {
    background: var(--gta-danger-dark) !important;
    color: var(--gta-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,.35) !important;
}

/* Botón Regresar — a.btn.btn-danger → verde institucional */
a.btn.btn-danger {
    background: var(--gta-primary) !important;
    color: var(--gta-white) !important;
    box-shadow: 0 2px 8px rgba(56,102,43,.3) !important;
    border: none !important;
}

a.btn.btn-danger:hover {
    background: var(--gta-primary-dark) !important;
    color: var(--gta-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56,102,43,.4) !important;
}

.btn-secondary {
    background: var(--gta-gray-200) !important;
    color: var(--gta-gray-800) !important;
}

.btn-secondary:hover {
    background: var(--gta-gray-400) !important;
    color: var(--gta-white) !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* Botón Nuevo — amarillo */
.btn.mr-2.Nuevo,
button.Nuevo {
    background: linear-gradient(135deg, var(--gta-accent-dark), var(--gta-accent)) !important;
    color: var(--gta-text) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(248,216,0,.3) !important;
    padding: 9px 20px !important;
}

.btn.mr-2.Nuevo:hover,
button.Nuevo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(248,216,0,.4) !important;
}

/* ══════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════ */
/* Labels de formulario — SOLO dentro de form-content, card-body, modal-body */
.form-content label,
.card-body label,
.modal-body label,
.form-group label,
.login-field label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--gta-gray-600) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px !important;
    display: block;
}

/* Spans usados como labels (compatibilidad con views existentes) */
.card-body span.form-label,
.form-content span.form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--gta-gray-600) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px !important;
    display: block;
}

/* DataTables labels — no uppercase */
.dataTables_wrapper label {
    text-transform: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--gta-gray-600) !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.form-control {
    border: 1.5px solid var(--gta-gray-200) !important;
    border-radius: var(--gta-radius-sm) !important;
    font-size: 13px !important;
    transition: var(--gta-transition) !important;
    background: var(--gta-white) !important;
    color: var(--gta-gray-800) !important;
    padding: 8px 12px !important;
    height: auto !important;
}

/* Select nativo — menos padding para no cortar texto */
select.form-control {
    padding: 6px 10px !important;
    cursor: pointer;
}

.form-control:focus {
    border-color: var(--gta-primary) !important;
    box-shadow: 0 0 0 3px rgba(56,102,43,.12) !important;
    outline: none !important;
}

.form-control-sm {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

/* Textos descriptivos en negro sobre fondo blanco */
.card-body span[style*="color:black"],
.card-body span[style*="color: black"],
.widget-content span[style*="color:black"] {
    color: var(--gta-gray-800) !important;
}

/* ══════════════════════════════════════════════
   TABLAS
══════════════════════════════════════════════ */
.table {
    border-radius: var(--gta-radius) !important;
    overflow: hidden;
    box-shadow: var(--gta-shadow-sm) !important;
    margin-bottom: 0 !important;
}

.table thead th,
thead th {
    background: linear-gradient(135deg, var(--gta-primary-dark), var(--gta-primary)) !important;
    color: var(--gta-white) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    border: none !important;
    white-space: nowrap;
    vertical-align: middle !important;
}

.table tbody tr {
    transition: var(--gta-transition);
    border-bottom: 1px solid var(--gta-gray-100) !important;
}

.table tbody tr:hover {
    background: var(--gta-primary-xlight) !important;
}

.table tbody tr td {
    font-size: 13px !important;
    padding: 10px 16px !important;
    vertical-align: middle !important;
    border: none !important;
    color: var(--gta-gray-800) !important;
}

/* ══════════════════════════════════════════════
   DROPDOWNS
══════════════════════════════════════════════ */
.dropdown-menu {
    border: none !important;
    border-radius: var(--gta-radius-sm) !important;
    box-shadow: var(--gta-shadow-md) !important;
    padding: 6px !important;
    min-width: 190px;
    animation: fadeInDown .18s ease;
}

.dropdown-item {
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    color: var(--gta-gray-800) !important;
    transition: var(--gta-transition);
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap;
}

.dropdown-item:hover {
    background: var(--gta-primary-xlight) !important;
    color: var(--gta-primary) !important;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--gta-gray-400);
    flex-shrink: 0;
}

.dropdown-item:hover i {
    color: var(--gta-primary) !important;
}

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge {
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    color: var(--gta-white) !important;
}

/* ══════════════════════════════════════════════
   MODALES
══════════════════════════════════════════════ */
.modal-content {
    border: none !important;
    border-radius: var(--gta-radius) !important;
    box-shadow: var(--gta-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--gta-primary-dark), var(--gta-primary)) !important;
    color: var(--gta-white) !important;
    padding: 16px 24px !important;
    border: none !important;
}

.modal-header *,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title,
.modal-header span,
.modal-header button {
    color: var(--gta-white) !important;
}

.modal-header h5,
.modal-header h6,
.modal-header .modal-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: .3px;
    margin-bottom: 0 !important;
}

/* Botón cerrar modal */
.modal-header .close {
    color: var(--gta-white) !important;
    opacity: .8;
    text-shadow: none;
}

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

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    background: var(--gta-gray-50) !important;
    border-top: 1px solid var(--gta-gray-200) !important;
    padding: 14px 24px !important;
    border-radius: 0 0 var(--gta-radius) var(--gta-radius) !important;
    gap: 10px;
    display: flex;
    justify-content: flex-end;
}

/* ══════════════════════════════════════════════
   ALERTAS
══════════════════════════════════════════════ */
.alert {
    border: none !important;
    border-radius: var(--gta-radius-sm) !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
}

/* ══════════════════════════════════════════════
   DATATABLES
══════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--gta-primary) !important;
    color: var(--gta-white) !important;
    border: none !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--gta-primary-xlight) !important;
    color: var(--gta-primary) !important;
    border: none !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: var(--gta-gray-600) !important;
}

/* ══════════════════════════════════════════════
   SELECT2
══════════════════════════════════════════════ */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--gta-gray-200) !important;
    border-radius: var(--gta-radius-sm) !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gta-primary) !important;
    box-shadow: 0 0 0 3px rgba(56,102,43,.12) !important;
}

/* ══════════════════════════════════════════════
   WIDGET / FORM CONTENT
══════════════════════════════════════════════ */
.widget-content,
.form-content {
    background: var(--gta-white) !important;
    border-radius: var(--gta-radius) !important;
    padding: 24px !important;
    box-shadow: var(--gta-shadow-sm) !important;
}

/* ══════════════════════════════════════════════
   TÍTULOS
══════════════════════════════════════════════ */
h4 {
    color: var(--gta-primary) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    display: initial !important;
}

/* ══════════════════════════════════════════════
   BOTÓN CANCELAR EN MODAL
══════════════════════════════════════════════ */
.administrar-cancelar {
    background: var(--gta-gray-100) !important;
    color: var(--gta-gray-800) !important;
    border: 1.5px solid var(--gta-gray-200) !important;
}

.administrar-cancelar:hover {
    background: var(--gta-gray-200) !important;
    color: var(--gta-gray-800) !important;
}

/* ══════════════════════════════════════════════
   TEXTO MUTED
══════════════════════════════════════════════ */
.text-muted {
    color: var(--gta-gray-400) !important;
    font-size: 11px !important;
}

/* ══════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════ */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.main-content .container > .row {
    animation: slideUp .3s ease;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gta-gray-100); }
::-webkit-scrollbar-thumb { background: var(--gta-primary-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gta-primary); }