/* Paleta y variables compartidas del sistema. Se reutilizan en login.css y en estilos.css
   para que todas las pantallas (login, panel principal) tengan una identidad visual coherente.
   Paleta vibrante: azul eléctrico + acento cian, fondos con tinte frío y sin blanco puro. */
:root {
    --brand-primary: #4f6bff;
    --brand-primary-dark: #3a52e0;
    --brand-primary-light: #e8edff;
    --brand-primary-rgb: 79, 107, 255;
    --brand-accent: #14b8d4;
    --brand-gradient: linear-gradient(135deg, #5a8bff 0%, #3a52e0 100%);

    --panel-dark: #141b3a;
    --panel-dark-alt: #1e2850;

    --bg-app: #eef2fb;
    --surface: #fbfcff;
    --border-color: #dbe2f3;

    --text-main: #1b2340;
    --text-muted: #6a7595;

    --success: #12b981;
    --success-dark: #0d9668;
    --success-light: #dcf7ec;
    --danger: #f0506e;
    --warning: #f5a524;
    --warning-light: #fdefd2;
    --warning-dark: #8a5a06;

    --radius-md: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 3px rgba(20, 27, 58, 0.08);
    --shadow-md: 0 12px 28px rgba(20, 27, 58, 0.14);

    /* Bootstrap: que sus componentes usen la misma paleta cálida */
    --bs-body-bg: var(--bg-app);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-secondary-color: var(--text-muted);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
}

.card, .modal-content, .list-group-item, .dropdown-menu, .table {
    --bs-card-bg: var(--surface);
    --bs-modal-bg: var(--surface);
    --bs-list-group-bg: var(--surface);
    --bs-table-bg: transparent;
}
.form-control, .form-select { background-color: #fdfdff; border-color: var(--border-color); color: var(--text-main); }
.form-control::placeholder { color: #9aa5c4; }
.modal-header.bg-light { background-color: var(--bg-app) !important; }

/* Colores semánticos de Bootstrap alineados con la paleta */
:root {
    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-primary: var(--brand-primary);
}
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover { background-color: var(--success-dark); border-color: var(--success-dark); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.text-success { color: var(--success) !important; }
.table-dark { --bs-table-bg: var(--panel-dark); --bs-table-border-color: var(--panel-dark-alt); }