/*
 * Design tokens — single source of truth for brand color, typography,
 * spacing and elevation. Loaded after Bootstrap's own CSS variables and
 * before the app stylesheets (Views/Shared/_EstilosApp.cshtml), so every Bootstrap utility/component class (buttons,
 * links, nav-pills, badges, focus rings, table dividers...) inherits the
 * corrected brand blue app-wide without touching individual views.
 */

:root {
    /* Brand color scale, derived from the logo blue (#047cb4) */
    --brand-600: #047cb4;
    --brand-700: color-mix(in srgb, var(--brand-600) 85%, black);
    --brand-800: color-mix(in srgb, var(--brand-600) 70%, black);
    --brand-500: color-mix(in srgb, var(--brand-600) 85%, white);
    --brand-100: color-mix(in srgb, var(--brand-600) 15%, white);
    --brand-050: color-mix(in srgb, var(--brand-600) 6%, white);

    /* Spacing / radius / shadow tokens */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

    /* Bootstrap 5.3 variable remap — corrects the old --bs-primary: #ddccb8
       (tan) mistake so the real brand blue flows from one source into
       every Bootstrap component instead of being hardcoded per-selector. */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 4, 124, 180;
    /* El Bootstrap vendorizado (wwwroot/lib/bootstrap) trae --bs-body-bg-rgb
       de fábrica en 222,12,12 (rojo). .bg-body usa esta variable y la usa
       la barra lateral (_Layout.cshtml) — NO quitar esta línea. */
    --bs-body-bg-rgb: 4, 124, 180;
    --bs-primary-text-emphasis: var(--brand-800);
    --bs-primary-bg-subtle: var(--brand-050);
    --bs-primary-border-subtle: var(--brand-100);
    --bs-link-color: var(--brand-600);
    --bs-link-color-rgb: 4, 124, 180;
    --bs-link-hover-color: var(--brand-700);
    --bs-link-hover-color-rgb: 3, 99, 144;
    --bs-nav-pills-link-active-bg: var(--brand-600);

    /* Amarillo de aviso (Rectificativa, botones de copiar/convertir...) un
       pelín más oscuro que el amarillo estándar de Bootstrap (#ffc107),
       para que contraste algo mejor. */
    --bs-warning: #e0a800;
    --bs-warning-rgb: 224, 168, 0;

    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-lg: var(--shadow-lg);

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
}

/*
 * El Bootstrap vendorizado (wwwroot/lib/bootstrap) es un build personalizado
 * con varios colores de botón cambiados de fábrica y nunca terminados:
 * .btn-secondary sale rojo/naranja (#E64D40), .btn-success sale oliva
 * (#AFB42F), .btn-danger sale salmón (#C5817C) y .btn-outline-primary sale
 * verde (#8EB67A) — nada de esto es intencional, son restos de un tema a
 * medias. Se corrigen aquí sus estados completos (normal/hover/active) para
 * que btn-secondary siga leyendo como "azul secundario" (ya era la intención
 * del antiguo site.css, pero solo tapaba el estado normal, no el hover), y
 * btn-success/btn-danger/btn-outline-primary usen colores semánticos
 * correctos en vez de los de fábrica.
 */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: #ddccb8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
    opacity: .8;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-danger {
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-600);
    --bs-btn-active-border-color: var(--brand-600);
    --bs-btn-disabled-color: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
}

/* .btn-outline-secondary de fábrica sale en un teal pálido (#80b8af /
   #d9e9e7), mismo tema roto que el resto. Se alinea con el gris neutro
   estándar de Bootstrap, usado en los botones de icono secundarios
   (enviar email, exportar PDF...) de las tablas. */
.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

/* .btn-warning trae el amarillo hardcodeado (#ffc107), no vía variable,
   así que hay que igualarlo a mano con el --bs-warning ya oscurecido. */
.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #c99400;
    --bs-btn-hover-border-color: #bd8b00;
    --bs-btn-active-bg: #bd8b00;
    --bs-btn-active-border-color: #b28300;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

/* .badge en el mismo Bootstrap personalizado hereda un radio de esquina
   más grande de lo que pide el diseño de referencia; se ajusta con radio
   y padding propios en vez de heredar --bs-border-radius global. */
.badge {
    --bs-badge-padding-x: .6rem;
    --bs-badge-padding-y: .6rem;
    --bs-badge-border-radius: .375rem;
}

/* Foco en azul de marca. El Bootstrap vendorizado trae fijo un beige
   (#e3ded2 / rgba(199,188,164,.25)) de un tema anterior en los campos,
   checks, enlaces de pestañas, paginación, acordeón, btn-close y
   btn-outline-primary; aquí se sustituye en todos por el mismo anillo. */
:root {
    --bs-focus-ring-color: color-mix(in srgb, var(--brand-600) 25%, transparent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--bs-focus-ring-color);
}

.accordion {
    --bs-accordion-btn-focus-border-color: var(--brand-500);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.btn-outline-primary {
    --bs-btn-focus-shadow-rgb: 4, 124, 180; /* --brand-600 */
}