/* ==========================================
   1. VARIABLES DE RAÍZ Y ESTILOS GENERALES
   ========================================== */
:root {
    --c-border: rgba(255, 255, 255, .12);
    --c-card: rgba(255, 255, 255, .065);
    --c-text: #eef4ff;
    --c-accent: #67e8f9;
    --c-accent2: #8b5cf6;
}

body {
    min-height: 100vh;
    color: var(--c-text);
    background: radial-gradient(circle at 15% 15%, rgba(103, 232, 249, .16), transparent 34%), 
                radial-gradient(circle at 90% 0%, rgba(139, 92, 246, .22), transparent 35%), 
                linear-gradient(135deg, #07111f, #111827 45%, #0b1220);
}

/* ==========================================
   2. COMPONENTES Y TARJETAS
   ========================================== */
.glass-navbar {
    background: rgba(7, 17, 31, .72);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-border);
}

.brand-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-block;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
    box-shadow: 0 0 24px rgba(103, 232, 249, .65);
}

.card-glass {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.card-glass h3 {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 0.5rem; /* Valor modificado */
}

.card-glass h3:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045));
    border: 1px solid var(--c-border);
    border-radius: 1.25rem;
    padding: 0.25rem;    /* Valor modificado */
    text-align: center;  /* Añadido */
}

/* ==========================================
   3. TABLAS, FORMULARIOS Y BOTONES
   ========================================== */
.table-modern {
    --bs-table-bg: transparent;
    --bs-table-color: var(--c-text);
    --bs-table-border-color: rgba(255, 255, 255, .08);
}

.table-modern tbody tr:hover {
    background: rgba(255, 255, 255, .055);
}

.form-control, .form-select {
    background-color: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-radius: .9rem;
}

.form-label {
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.btn {
    border-radius: .85rem;
}

.btn-primary {
    background: linear-gradient(135deg, #06b6d4, #7c3aed);
    border: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.badge-soft {
    background: rgba(103, 232, 249, .12);
    color: #a5f3fc;
    border: 1px solid rgba(103, 232, 249, .22);
}

.codebox {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #dbeafe;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}

/* ==========================================
   4. CLASES DE UTILIDAD (MODIFICADAS)
   ========================================== */
.mb-4 {
    margin-bottom: 0.5rem !important;
}

.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    max-width: 1400px;
}

.p-4 {
    padding: 0.5rem !important;
}

.mt-3 {
    margin-top: 0rem !important;
}

.mt-4 {
    margin-top: 0.5rem !important;
}

/* ==========================================
   5. DISEÑO RESPONSIVO (MEDIA QUERIES)
   ========================================== */
@media (max-width: 768px) {
    .display-6 {
        font-size: 1.8rem; /* Se priorizó el valor de la segunda lista */
    }
    .action-grid {
        grid-template-columns: 1fr !important;
    }
    .table-modern {
        font-size: .875rem;
    }
}