/* ============================================================
   Tema Brokian para el ACM.

   El ACM y el panel son el mismo producto para quien trabaja adentro, y hasta ahora
   parecían dos sistemas distintos: uno con la identidad de Brokian y otro con el tema
   que trae Backpack de fábrica.

   Esto NO reescribe las pantallas —las genera Backpack desde definiciones PHP— sino
   que lleva los tokens del panel (`apps/web/src/styles/tokens.css`) al tema existente.
   Mismos colores, misma tipografía, mismos radios.
   ============================================================ */

:root {
    --brand: #586feb;
    --brand-hover: #4758d9;
    --brand-soft: #d5dbfa;
    --brand-faint: #e8ecf7;

    --ok: #1e7a56;
    --bad: #b4292d;
    --warn: #8a6100;

    --surface: #fff;
    --surface-page: #f6f7fb;
    --surface-alt: #f7f7f7;

    --text: #333;
    --text-muted: #6c757d;
    --text-subtle: #8a90a6;

    --border: #dedede;
    --border-soft: #e8ecf7;

    /* Dos radios, como en el panel: 4 para controles, 6 para superficies. */
    --radius: 6px;
    --radius-btn: 4px;

    /* CoreUI define su propio primario: se lo apunta al de marca para que todo lo que
       lo use (links, badges, tabs) quede alineado sin tocar cada componente. */
    --cui-primary: #586feb;
    --cui-primary-rgb: 88, 111, 235;
    --bs-primary: #586feb;
    --bs-primary-rgb: 88, 111, 235;
    --bs-link-color: #586feb;
    --bs-link-hover-color: #4758d9;
    --bs-border-radius: 6px;
    --bs-body-color: #333;
    --bs-body-bg: #f6f7fb;
}

body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    background: #f6f7fb;
    background-image: linear-gradient(0deg, #f6f7fb, #f6f6fb 78%, #586feb33);
}

/* ---------- barra lateral ---------- */

/* Clara, como el panel. La oscura de CoreUI es lo que más hacía que se vieran como
   productos distintos. */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
}

.sidebar .nav-link {
    color: #fff;
    border-radius: var(--radius-btn);
    margin: 1px 8px;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-left: 0px solid transparent;
}
.sidebar .nav-link .nav-icon {
    color: #c7cef6;
}

.sidebar .nav-link:hover {
    background: #1f2327;
    border-left: 0px solid transparent;
}

.sidebar .nav-link.active {
    color: #fff;
    border-left: 2px solid var(--brand);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon {
    color: #c7cef6;
}

.sidebar .nav-title {
    color: var(--text-subtle);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-brand {
    /* background: var(--surface); */
    /* border-bottom: 1px solid var(--border-soft); */
    justify-content: start;
    padding-left: 30px;
}
.sidebar-brand img {
    max-width: 115px;
}

/* ---------- encabezado ---------- */

.header {
    background: var(--surface);
    border-bottom: 1px solid #fff !important;
}

.app-header {
    border-bottom: 1px solid #fff !important;
    padding-left: 15px;
}


/* ---------- superficies ---------- */

/* Sin sombra ni borde grueso: es la regla del canon del panel — las cards se separan
   por el fondo de la página, no por una caja dibujada. */
.card {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
}

/* ---------- tablas ---------- */

.table {
    --bs-table-color: var(--text);
    font-size: 14px;
}

.table > thead th {
    color: var(--text-subtle);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.table > tbody td {
    border-color: var(--border-soft);
    vertical-align: middle;
}

table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
}

/* ---------- botones ---------- */

.btn {
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 700;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
}

.btn-light,
.btn-secondary {
    --bs-btn-bg: var(--brand-faint);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--brand-hover);
    --bs-btn-hover-bg: var(--brand-soft);
    --bs-btn-hover-border-color: transparent;
}

/* ---------- formularios ---------- */

.form-control,
.form-select {
    border-color: var(--border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(88, 111, 235, .12);
}

.form-label,
label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------- estado ---------- */

.badge.bg-primary { background: var(--brand) !important; }
.badge.bg-success { background: var(--ok) !important; }
.badge.bg-danger { background: var(--bad) !important; }
.badge.bg-warning { background: var(--warn) !important; color: #fff !important; }

a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ---------- login ---------- */

/* La primera pantalla que alguien ve del sistema: si acá no se parece al panel, el
   resto del esfuerzo no alcanza. */
body.bg-light,
.bg-login {
    background: var(--surface-page) !important;
}

.bg-light {
    background-color: transparent !important;
    
}