/* ============================================================================
   theme.css — Puente de estilos para páginas heredadas.
   Aplica los tokens de MASTER SPORT (tokens.css) a las clases de Bootstrap que
   usan las páginas existentes (CRUD, usuarios, listados), SIN tocar su markup.
   Se carga al final de todos los estilos globales para ganar a app.css.
   ========================================================================== */

/* --- Tipografía: títulos grandes ------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
    font-family: var(--ms-font, Inter, system-ui, sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ms-text, #16233a);
    margin-top: 0;
}

h1 { font-size: var(--ms-fs-2xl, 29px); line-height: 1.15; }
h2 { font-size: var(--ms-fs-xl, 22px); line-height: 1.25; }
h3 { font-size: var(--ms-fs-lg, 18px); line-height: 1.3; }
h4 { font-size: var(--ms-fs-md, 15px); line-height: 1.35; }
h5 { font-size: var(--ms-fs-base, 13.5px); text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Tarjetas --------------------------------------------------------------- */
.card {
    --ms-card-bg: var(--ms-surface, #ffffff);
    background: var(--ms-card-bg);
    border: 1px solid var(--ms-border, #e4e8f0);
    border-radius: var(--ms-radius-lg, 12px);
    color: var(--ms-text, #16233a);
    box-shadow: var(--ms-shadow-sm, 0 1px 2px rgba(16, 25, 45, .04));
}

.card-header {
    background: var(--ms-surface-2, #f7f9fc);
    border-bottom: 1px solid var(--ms-border-soft, #eef1f6);
    padding: 12px 16px;
    color: var(--ms-text-2, #56617a);
    font-size: var(--ms-fs-sm, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-footer {
    background: var(--ms-surface-2, #f7f9fc);
    border-top: 1px solid var(--ms-border-soft, #eef1f6);
    padding: 12px 16px;
    color: var(--ms-text-2, #56617a);
}

.card-title { color: var(--ms-text, #16233a); }

/* --- Listados / tablas ------------------------------------------------------ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ms-text, #16233a);
    --bs-table-border-color: var(--ms-border-soft, #eef1f6);
    --bs-table-striped-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-striped-color: var(--ms-text, #16233a);
    --bs-table-hover-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-hover-color: var(--ms-text, #16233a);
    --bs-table-active-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-accent-bg: transparent;
    --bs-body-bg: transparent;
    color: var(--ms-text, #16233a);
    background: transparent;
    border-color: var(--ms-border-soft, #eef1f6);
    --ms-row-h: var(--ms-row-h, 48px);
}

.table-dark {
    --bs-table-bg: var(--ms-surface, #ffffff);
    --bs-table-color: var(--ms-text, #16233a);
    --bs-table-border-color: var(--ms-border-soft, #eef1f6);
    --bs-table-striped-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-striped-color: var(--ms-text, #16233a);
    --bs-table-hover-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-hover-color: var(--ms-text, #16233a);
    --bs-table-active-bg: var(--ms-surface-2, #f7f9fc);
    --bs-table-accent-bg: transparent;
    color: var(--ms-text, #16233a);
    background: var(--ms-surface, #ffffff);
}

.table > :not(caption) > * > * {
    padding: 12px 16px;
    background-color: transparent;
    border-bottom-color: var(--ms-border-soft, #eef1f6);
    color: inherit;
}

.table > thead > * > * {
    background: var(--ms-surface-2, #f7f9fc);
    color: var(--ms-text-3, #626d85);
    font-size: var(--ms-fs-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-bottom: 1px solid var(--ms-border, #e4e8f0);
}

.table > tbody > tr:hover > * {
    background-color: var(--ms-surface-2, #f7f9fc);
    color: var(--ms-text, #16233a);
}

.table-responsive { border-radius: var(--ms-radius-lg, 12px); }

/* --- Botones ---------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--ms-radius, 10px);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background-color var(--ms-dur, .18s) var(--ms-ease, cubic-bezier(.4, 0, .2, 1)),
                border-color var(--ms-dur, .18s) var(--ms-ease, cubic-bezier(.4, 0, .2, 1)),
                color var(--ms-dur, .18s) var(--ms-ease, cubic-bezier(.4, 0, .2, 1)),
                box-shadow var(--ms-dur, .18s) var(--ms-ease, cubic-bezier(.4, 0, .2, 1));
}

.btn-primary {
    --bs-btn-bg: var(--ms-brand, #3454d1);
    --bs-btn-border-color: var(--ms-brand, #3454d1);
    --bs-btn-color: var(--ms-on-brand, #ffffff);
    --bs-btn-hover-bg: var(--ms-brand-hover, #2b47b8);
    --bs-btn-hover-border-color: var(--ms-brand-hover, #2b47b8);
    --bs-btn-hover-color: var(--ms-on-brand, #ffffff);
    --bs-btn-focus-shadow-rgb: 52, 84, 209;
    background-color: var(--ms-brand, #3454d1);
    border-color: var(--ms-brand, #3454d1);
    color: var(--ms-on-brand, #ffffff);
}

.btn-primary:hover { background-color: var(--ms-brand-hover, #2b47b8); border-color: var(--ms-brand-hover, #2b47b8); color: var(--ms-on-brand, #ffffff); }

.btn-outline-light {
    --bs-btn-color: var(--ms-text-2, #56617a);
    --bs-btn-border-color: var(--ms-border-strong, #d3dae8);
    --bs-btn-hover-bg: var(--ms-surface-3, #eef1f7);
    --bs-btn-hover-border-color: var(--ms-border-strong, #d3dae8);
    --bs-btn-hover-color: var(--ms-text, #16233a);
    color: var(--ms-text-2, #56617a);
    border-color: var(--ms-border-strong, #d3dae8);
}

.btn-outline-light:hover { background-color: var(--ms-surface-3, #eef1f7); border-color: var(--ms-border-strong, #d3dae8); color: var(--ms-text, #16233a); }

.btn-outline-info {
    --bs-btn-color: var(--ms-info, #0e7a88);
    --bs-btn-border-color: var(--ms-info-bd, rgba(30, 147, 162, .26));
    --bs-btn-hover-bg: var(--ms-info-bg, rgba(47, 181, 196, .12));
    --bs-btn-hover-border-color: var(--ms-info, #0e7a88);
    --bs-btn-hover-color: var(--ms-info, #0e7a88);
    color: var(--ms-info, #0e7a88);
    border-color: var(--ms-info-bd, rgba(30, 147, 162, .26));
}

.btn-outline-info:hover { background-color: var(--ms-info-bg, rgba(47, 181, 196, .12)); border-color: var(--ms-info, #0e7a88); color: var(--ms-info, #0e7a88); }

.btn-outline-danger {
    --bs-btn-color: var(--ms-danger, #d63b3b);
    --bs-btn-border-color: var(--ms-danger-bd, rgba(214, 59, 59, .26));
    --bs-btn-hover-bg: var(--ms-danger-bg, rgba(234, 77, 77, .11));
    --bs-btn-hover-border-color: var(--ms-danger, #d63b3b);
    --bs-btn-hover-color: var(--ms-danger, #d63b3b);
    color: var(--ms-danger, #d63b3b);
    border-color: var(--ms-danger-bd, rgba(214, 59, 59, .26));
}

.btn-outline-danger:hover { background-color: var(--ms-danger-bg, rgba(234, 77, 77, .11)); border-color: var(--ms-danger, #d63b3b); color: var(--ms-danger, #d63b3b); }

.btn-link { color: var(--ms-brand, #3454d1); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--ms-brand-hover, #2b47b8); text-decoration: none; }

/* --- Formularios ------------------------------------------------------------ */
.form-control, .form-select {
    background-color: var(--ms-surface, #ffffff);
    border: 1px solid var(--ms-border-strong, #d3dae8);
    border-radius: var(--ms-radius, 10px);
    color: var(--ms-text, #16233a);
    font-size: var(--ms-fs-base, 13.5px);
    padding: 8px 12px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--ms-surface, #ffffff);
    color: var(--ms-text, #16233a);
    border-color: var(--ms-border-focus, #3454d1);
    box-shadow: var(--ms-ring, 0 0 0 3px rgba(52, 84, 209, .16));
}

.form-control::placeholder { color: var(--ms-text-4, #7c879c); }

.form-label {
    color: var(--ms-text-2, #56617a);
    font-size: var(--ms-fs-sm, 12px);
    font-weight: 600;
}

.form-check-input {
    accent-color: var(--ms-brand, #3454d1);
}

.form-check-input:checked { background-color: var(--ms-brand, #3454d1); border-color: var(--ms-brand, #3454d1); }

.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356617a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2.5 5.5 5.5 5.5 5.5-5.5'/%3e%3c/svg%3e"); }

/* --- Insignias y textos auxiliares ----------------------------------------- */
.badge {
    font-weight: 600;
    border-radius: var(--ms-radius-pill, 999px);
}

.badge.text-bg-dark, .badge.bg-dark {
    background-color: var(--ms-surface-3, #eef1f7) !important;
    color: var(--ms-text-2, #56617a) !important;
    border: 1px solid var(--ms-border, #e4e8f0);
    padding: 6px 10px;
}

.text-secondary { color: var(--ms-text-3, #626d85) !important; }

/* --- Alertas ---------------------------------------------------------------- */
.alert-info {
    background-color: var(--ms-info-bg, rgba(47, 181, 196, .12));
    border: 1px solid var(--ms-info-bd, rgba(30, 147, 162, .26));
    color: var(--ms-info, #0e7a88);
    border-radius: var(--ms-radius, 10px);
    font-size: var(--ms-fs-base, 13.5px);
}

/* --- Enlaces y miscelánea --------------------------------------------------- */
a { color: var(--ms-brand, #3454d1); }

hr { border-color: var(--ms-border, #e4e8f0); opacity: 1; }