/* ============================================================================
   coreui-skin.css — look visual inspirado en CoreUI (Bootstrap Admin Template),
   armado como una capa de estilos propia ENCIMA del Bootstrap 5 que ya usa toda
   la app. CoreUI está construido sobre Bootstrap (a diferencia de Gentelella
   v4, que lo reemplaza por completo), así que este skin es solo variables de
   color + retoques puntuales — ningún formulario, modal, toast, etc. deja de
   funcionar. Cargar DESPUÉS de bootstrap.min.css en _Layout.cshtml.
   ============================================================================ */

:root {
    --coreui-sidebar: #212631;
    --coreui-sidebar-header: #1A1E27;
    --coreui-sidebar-active: #5856D6;
    --coreui-text-muted: #8A93A2;
    --coreui-text-dark: #212631;
    --coreui-accent: #5856D6;
    --coreui-accent-dark: #4644B8;

    /* Pisa las variables de Bootstrap 5: cualquier .btn-primary, .text-primary,
       .bg-primary, borde de foco, etc. que YA existe en toda la app (docenas de
       vistas) adopta el acento de CoreUI automáticamente, sin tener que tocar
       cada vista una por una. */
    --bs-primary: var(--coreui-accent);
    --bs-primary-rgb: 88, 86, 214;
    --bs-link-color: var(--coreui-accent);
    --bs-link-hover-color: var(--coreui-accent-dark);
}

body {
    background-color: #F5F6FA;
}

/* ---------- Sidebar ---------- */
.sidebar.bg-dark {
    background-color: var(--coreui-sidebar) !important;
}

.sidebar .sidebar-header {
    background-color: var(--coreui-sidebar-header);
    margin: -1rem -1rem 1rem -1rem;
    padding: 1rem !important;
}

.sidebar .nav-link {
    border-radius: .375rem;
    margin: 0 .25rem;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

.sidebar .nav-link.active {
    background-color: var(--coreui-sidebar-active) !important;
    color: #fff !important;
}

.sidebar .sidebar-text.text-uppercase {
    color: #6E7A8A !important;
    letter-spacing: .05em;
    font-size: .7rem;
}

/* ---------- Botones ---------- */
.btn-primary {
    border-color: var(--coreui-accent-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--coreui-accent-dark);
    border-color: var(--coreui-accent-dark);
}

/* Botones "outline" (contorno, fondo transparente) rellenos de color en vez de solo contorno:
   reutiliza los mismos tokens de color que Bootstrap ya define para el estado hover/focus de
   cada variante (--bs-btn-hover-bg, --bs-btn-hover-border-color, --bs-btn-hover-color — que
   YA son, precisamente, la versión "rellena" de cada color) y los aplica como estado normal, no
   solo al pasar el mouse. Aplica a los ~166 botones outline que ya existen en las vistas (Editar,
   Cancelar, Exportar, etc.) sin tener que tocar cada .cshtml uno por uno — mismo enfoque que
   --bs-primary más arriba. El estado hover deja de notarse tan distinto del normal (antes pasaba
   de transparente a relleno; ahora ya arranca relleno), pero eso es lo esperado al rellenarlos.
*/
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
    --bs-btn-color: var(--bs-btn-hover-color);
    --bs-btn-bg: var(--bs-btn-hover-bg);
    --bs-btn-border-color: var(--bs-btn-hover-border-color);
}

/* ---------- Tarjetas: look CoreUI — blancas, esquinas suaves, sombra liviana ---------- */
.card {
    border: 1px solid #E5E7EE;
    border-radius: .5rem;
    box-shadow: 0 2px 4px rgba(33, 38, 49, .06);
}

.card .card-title {
    color: var(--coreui-text-dark);
    font-weight: 600;
}

.card.text-white .card-title {
    color: #fff;
}

/* ---------- Tablas ---------- */
.table thead th {
    color: var(--coreui-text-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    border-bottom-width: 1px;
    border-color: #E5E7EE;
}

/* ---------- Links y texto secundario ---------- */
.text-muted {
    color: var(--coreui-text-muted) !important;
}

/* ---------- Checkboxes / radios: borde más visible que el gris clarito de Bootstrap ---------- */
.form-check-input {
    border: 2px solid #8a93a3;
}
.form-check-input:checked {
    border-color: var(--coreui-primary, #321fdb);
}
.form-check-input:focus {
    border-color: var(--coreui-primary, #321fdb);
    box-shadow: 0 0 0 .2rem rgba(50, 31, 219, .25);
}

/* ---------- Botón "Mi unidad" / volver (selector de perfil) en el sidebar: más grande y
   destacado que el resto de los botones del sidebar (Seguridad, Cerrar sesión), ya que cambia
   por completo cómo se navega la app. ---------- */
.btn-perfil {
    padding: .55rem .75rem;
    font-size: 1rem;
    font-weight: 600;
}
.btn-perfil .nav-icon {
    font-size: 1.25rem;
}