/* ==========================================================================
   IDENTIDAD VISUAL DE LA CLÍNICA — Gris y Bordó
   ==========================================================================
   Este archivo reemplaza el color "primary" por defecto de Bootstrap (azul)
   por el BORDÓ corporativo, y usa GRIS para el menú lateral y los acentos
   neutros (botones secundarios, bordes, texto atenuado).

   Se cargar DESPUÉS del <link> de Bootstrap en cada página, así que estas
   reglas pisan a las de Bootstrap.

   IMPORTANTE: los colores de ESTADO se dejaron intactos a propósito:
     - verde   (success) = Presente / Confirmado / Atendido
     - rojo    (danger)  = Cancelado / Error
     - amarillo(warning) = Pendiente / Alerta
     - celeste (info)    = Informativo
   Son los que el personal usa todo el día para leer el estado de un turno
   de un vistazo; recolorearlos a gris/bordó le haría perder esa lectura
   rápida. Si en algún momento quieren que ESOS también sigan la identidad
   de marca, se puede sumar en un segundo paso.

   Para ajustar el tono, alcanza con cambiar los valores hexadecimales
   de este bloque de variables; el resto de las reglas ya están armadas
   para usarlos consistentemente.
   ========================================================================== */

:root {
    /* --- Bordó (reemplaza el azul "primary") --- */
    --marca-bordo:        #7A2331;
    --marca-bordo-hover:  #5E1B26;
    --marca-bordo-activo: #4C161F;
    --marca-bordo-suave:  #F3E1E4; /* fondos sutiles: alertas, badges suaves */
    --marca-bordo-borde-suave: #E3B7BE;
    --marca-bordo-texto-enfasis: #4A1520;

    /* --- Gris (menú lateral y acentos neutros) --- */
    --marca-gris-oscuro:  #3A3A3D; /* fondo del menú lateral (reemplaza el negro) */
    --marca-gris:         #5A5A5C; /* botones/bordes secundarios */
    --marca-gris-hover:   #46464A;
    --marca-gris-activo:  #3A3A3C;

    /* --- Variables de Bootstrap 5.3 (afectan automáticamente a las
       utilidades .text-primary / .bg-primary / .border-primary / enlaces,
       usadas en casi toda la interfaz) --- */
    --bs-primary: var(--marca-bordo);
    --bs-primary-rgb: 122, 35, 49;
    --bs-primary-text-emphasis: var(--marca-bordo-texto-enfasis);
    --bs-primary-bg-subtle: var(--marca-bordo-suave);
    --bs-primary-border-subtle: var(--marca-bordo-borde-suave);

    --bs-secondary: var(--marca-gris);
    --bs-secondary-rgb: 90, 90, 92;

    --bs-link-color: var(--marca-bordo);
    --bs-link-color-rgb: 122, 35, 49;
    --bs-link-hover-color: var(--marca-bordo-hover);
    --bs-link-hover-color-rgb: 94, 27, 38;

    --bs-focus-ring-color: rgba(122, 35, 49, .25);
}

a { color: var(--bs-link-color); }
a:hover, a:focus { color: var(--bs-link-hover-color); }

/* --------------------------------------------------------------------------
   Botones: Bootstrap "hornea" el color de .btn-primary/.btn-secondary en
   variables propias por componente (no heredan de --bs-primary), por eso
   se sobrescriben acá explícitamente.
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marca-bordo);
    --bs-btn-border-color: var(--marca-bordo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marca-bordo-hover);
    --bs-btn-hover-border-color: var(--marca-bordo-activo);
    --bs-btn-focus-shadow-rgb: 122, 35, 49;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marca-bordo-activo);
    --bs-btn-active-border-color: var(--marca-bordo-activo);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--marca-bordo);
    --bs-btn-disabled-border-color: var(--marca-bordo);
}
.btn-outline-primary {
    --bs-btn-color: var(--marca-bordo);
    --bs-btn-border-color: var(--marca-bordo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marca-bordo);
    --bs-btn-hover-border-color: var(--marca-bordo);
    --bs-btn-focus-shadow-rgb: 122, 35, 49;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marca-bordo);
    --bs-btn-active-border-color: var(--marca-bordo);
    --bs-btn-disabled-color: var(--marca-bordo);
    --bs-btn-disabled-border-color: var(--marca-bordo);
}
.btn-secondary {
    --bs-btn-bg: var(--marca-gris);
    --bs-btn-border-color: var(--marca-gris);
    --bs-btn-hover-bg: var(--marca-gris-hover);
    --bs-btn-hover-border-color: var(--marca-gris-activo);
    --bs-btn-active-bg: var(--marca-gris-activo);
    --bs-btn-active-border-color: var(--marca-gris-activo);
    --bs-btn-disabled-bg: var(--marca-gris);
    --bs-btn-disabled-border-color: var(--marca-gris);
}
.btn-outline-secondary {
    --bs-btn-color: var(--marca-gris);
    --bs-btn-border-color: var(--marca-gris);
    --bs-btn-hover-bg: var(--marca-gris);
    --bs-btn-hover-border-color: var(--marca-gris);
    --bs-btn-active-bg: var(--marca-gris);
    --bs-btn-active-border-color: var(--marca-gris);
    --bs-btn-disabled-color: var(--marca-gris);
    --bs-btn-disabled-border-color: var(--marca-gris);
}

/* Alertas informativas con el tono bordó (por si se usa alert-primary) */
.alert-primary {
    --bs-alert-color: var(--marca-bordo-texto-enfasis);
    --bs-alert-bg: var(--marca-bordo-suave);
    --bs-alert-border-color: var(--marca-bordo-borde-suave);
    --bs-alert-link-color: var(--marca-bordo-texto-enfasis);
}

.text-bg-primary { color: #fff !important; background-color: var(--marca-bordo) !important; }

/* Checkboxes, switches (ej: "¿Es universitario?") y radios */
.form-check-input:checked {
    background-color: var(--marca-bordo);
    border-color: var(--marca-bordo);
}
.form-check-input:focus {
    border-color: #B26670;
    box-shadow: 0 0 0 .25rem rgba(122, 35, 49, .25);
}

/* Foco de campos de texto/selects (se ve en cada formulario del sistema) */
.form-control:focus, .form-select:focus {
    border-color: #B26670;
    box-shadow: 0 0 0 .25rem rgba(122, 35, 49, .25);
}

/* Ítems activos de menús desplegables */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--marca-bordo);
    color: #fff;
}

/* Paginación (si se usa en algún listado) */
.page-link { color: var(--marca-bordo); }
.page-item.active .page-link {
    background-color: var(--marca-bordo);
    border-color: var(--marca-bordo);
}

/* Spinners de carga */
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--marca-bordo) !important; }

/* --------------------------------------------------------------------------
   Menú lateral (sidebar): gris corporativo en vez de negro.
   Se apunta a #sidebarMenu específicamente para no afectar otros usos de
   .bg-dark que pueda tener el sistema (ej. otras pantallas).
   -------------------------------------------------------------------------- */
#sidebarMenu.bg-dark { background-color: var(--marca-gris-oscuro) !important; }
#sidebarMenuNav .nav-link:hover { background-color: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   Temporizador del turno actual (grilla de salas y pantallas de atención).
   El color del texto y de la barra lo actualiza public/js/turn-timer.js.
   -------------------------------------------------------------------------- */
.turn-timer .tt-elapsed,
.turn-timer-inline .tt-elapsed {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.turn-timer.tt-warning .tt-elapsed,
.turn-timer-inline.tt-warning .tt-elapsed { color: #b8860b; }
.turn-timer.tt-over .tt-elapsed,
.turn-timer-inline.tt-over .tt-elapsed { color: #dc3545; }
.turn-timer .progress-bar { transition: width 1s linear, background-color .3s ease; }