/* =====================================================================
   BRÚJULA · Núcleo Operativo — Grupo QBK S.A.S.
   public/assets/css/style.css

   Complementa a TailwindCSS (CDN). Aquí solo va lo que Tailwind no cubre
   con utilidades: variables de marca, animaciones, scrollbars y ajustes
   de accesibilidad.
   ===================================================================== */

:root {
    /* Paleta corporativa */
    --brj-azul-900: #1F3247;
    --brj-azul-700: #33475B;
    --brj-azul-500: #4A6076;
    --brj-gris-100: #F1F5F9;
    --brj-gris-300: #CBD5E1;
    --brj-gris-500: #64748B;
    --brj-blanco:   #FFFFFF;
    --brj-negro:    #0F172A;

    /* Semáforo: verde / ámbar / rojo */
    --brj-verde:  #059669;
    --brj-ambar:  #D97706;
    --brj-rojo:   #DC2626;
    --brj-rojo-descarte: #B91C1C;

    /* Tipografía y ritmo */
    --brj-radio:  0.75rem;
    --brj-sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
    --brj-transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Fondo de las pantallas de autenticación (install / login) */
.brj-auth-bg {
    background: linear-gradient(135deg, var(--brj-azul-900) 0%, var(--brj-azul-700) 55%, #24384f 100%);
    background-attachment: fixed;
}

/* Textura sutil sobre el gradiente, sin peso de imagen */
.brj-auth-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.05) 0, transparent 40%);
}

/* ---------------------------------------------------------------------
   2. Componentes
   --------------------------------------------------------------------- */
.brj-card {
    border-radius: var(--brj-radio);
    transition: box-shadow var(--brj-transicion), transform var(--brj-transicion);
}

.brj-card:hover {
    box-shadow: var(--brj-sombra);
}

/* Estados de validación de los campos (los aplica app.js) */
.brj-input {
    transition: border-color var(--brj-transicion), box-shadow var(--brj-transicion);
}

.brj-input.brj-invalid {
    border-color: var(--brj-rojo);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.brj-input.brj-valid {
    border-color: var(--brj-verde);
}

/* Banner de descarte automático: permanece visible aunque se minimice */
.brj-banner-descarte {
    border-bottom: 3px solid #7F1D1D;
}

.brj-banner-descarte.brj-minimizado .brj-banner-detalle {
    display: none;
}

.brj-banner-descarte.brj-minimizado {
    padding-top: 0;
    padding-bottom: 0;
}

/* Contenedor de tarjetas con desplazamiento horizontal */
.brj-scroll-x {
    scrollbar-width: thin;
    scrollbar-color: var(--brj-gris-300) transparent;
    scroll-behavior: smooth;
}

.brj-scroll-x::-webkit-scrollbar {
    height: 8px;
}

.brj-scroll-x::-webkit-scrollbar-track {
    background: transparent;
}

.brj-scroll-x::-webkit-scrollbar-thumb {
    background-color: var(--brj-gris-300);
    border-radius: 9999px;
}

.brj-scroll-x.brj-arrastrando {
    cursor: grabbing;
    scroll-behavior: auto;   /* El arrastre requiere respuesta inmediata */
    user-select: none;
}

/* Barra de fortaleza de contraseña */
.brj-strength-bar[data-nivel="1"] { background-color: var(--brj-rojo);  width: 25%; }
.brj-strength-bar[data-nivel="2"] { background-color: var(--brj-ambar); width: 50%; }
.brj-strength-bar[data-nivel="3"] { background-color: #65A30D;          width: 75%; }
.brj-strength-bar[data-nivel="4"] { background-color: var(--brj-verde); width: 100%; }

/* ---------------------------------------------------------------------
   3. Animaciones
   --------------------------------------------------------------------- */
@keyframes brjFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes brjSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes brjShake {
    0%, 100%      { transform: translateX(0); }
    20%, 60%      { transform: translateX(-5px); }
    40%, 80%      { transform: translateX(5px); }
}

.brj-fade-in  { animation: brjFadeIn 420ms ease-out both; }
.brj-slide-up { animation: brjSlideUp 320ms ease-out both; }
.brj-shake    { animation: brjShake 380ms ease-in-out; }

/* ---------------------------------------------------------------------
   4. Accesibilidad y responsive
   --------------------------------------------------------------------- */

/* Foco siempre visible al navegar con teclado */
:focus-visible {
    outline: 2px solid var(--brj-azul-700);
    outline-offset: 2px;
}

/* Respeta la preferencia de movimiento reducido del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 640px) {
    .brj-card { box-shadow: none; }
}

/* Impresión: fichas y estudios se imprimen sin cromo de interfaz */
@media print {
    header, footer, nav, .brj-no-print { display: none !important; }
    body { background: #FFFFFF; }
    .brj-banner-descarte {
        position: static;
        color: #000000;
        background: #FFFFFF;
        border: 2px solid var(--brj-rojo-descarte);
    }
}

/* =====================================================================
   FASE 3 · Sidebar, tarjetas de estadística, badges, pestañas y tablas
   ===================================================================== */

/* ---------------------------------------------------------------------
   Sidebar
   Escritorio: fijo, siempre visible (lg:pl-[260px] en el contenedor).
   Móvil: fuera de pantalla; entra deslizándose al pulsar la hamburguesa.
   --------------------------------------------------------------------- */
.brj-sidebar {
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.brj-sidebar.brj-abierto {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.25);
}

@media (min-width: 1024px) {
    .brj-sidebar {
        transform: translateX(0);
        box-shadow: none;
    }
}

/* Marca del enlace activo: barra clara a la izquierda */
.brj-nav-activo {
    position: relative;
}

.brj-nav-activo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #FFFFFF;
    transform: translateY(-50%);
}

.brj-nav-link svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.brj-nav-activo svg {
    opacity: 1;
}

.brj-overlay {
    animation: brjFadeIn 200ms ease-out both;
}

/* ---------------------------------------------------------------------
   Tarjetas de estadística
   --------------------------------------------------------------------- */
.brj-stat-card {
    transition: transform var(--brj-transicion), box-shadow var(--brj-transicion),
                border-color var(--brj-transicion);
}

.brj-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--brj-gris-300);
    box-shadow: var(--brj-sombra);
}

/* ---------------------------------------------------------------------
   Badges del semáforo
   El color lo aporta Tailwind desde badgeRiesgo()/badgePotencial()/
   badgeEstado(); aquí solo va la forma, para no repetirla en cada vista.
   --------------------------------------------------------------------- */
.brj-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px currentColor;
    --tw-ring-inset: inset;
}

/* Anula el borde heredado de currentColor cuando Tailwind aporta ring-* */
.brj-badge[class*="ring-"] {
    box-shadow: none;
    box-shadow: inset 0 0 0 1px var(--tw-ring-color, transparent);
}

/* ---------------------------------------------------------------------
   Pestañas del detalle de expediente
   --------------------------------------------------------------------- */
.brj-tab {
    position: relative;
    cursor: pointer;
}

.brj-tab:hover {
    background-color: rgba(31, 50, 71, 0.04);
}

.brj-tab-panel {
    animation: brjFadeIn 220ms ease-out both;
}

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.brj-fila-clic:hover {
    background-color: rgba(241, 245, 249, 0.7);
}

/* El clic sobre un enlace o botón dentro de la fila no dispara la
   navegación de la fila completa (lo controla app.js). */
.brj-fila-clic a,
.brj-fila-clic button {
    position: relative;
    z-index: 1;
}

thead th a {
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Contenido y transiciones de página
   --------------------------------------------------------------------- */
.brj-contenido {
    min-height: calc(100vh - 60px - 73px);
}

.brj-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.brj-main > main {
    flex: 1 1 auto;
}

/* Al minimizar el banner de descarte queda solo la franja roja: sigue
   presente en pantalla, que es lo que exige la regla de negocio. */
.brj-banner-descarte.brj-minimizado > div {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* ---------------------------------------------------------------------
   Impresión del informe del expediente
   --------------------------------------------------------------------- */
@media print {
    .brj-sidebar,
    .brj-overlay,
    #brj-sidebar-toggle,
    #brj-filtros,
    .brj-tab,
    footer {
        display: none !important;
    }

    .brj-main {
        padding-left: 0 !important;
    }

    /* Al imprimir se muestran todas las pestañas: el informe en papel no
       tiene navegación, debe contener todo. */
    .brj-tab-panel {
        display: block !important;
        page-break-inside: avoid;
    }
}

/* =====================================================================
   FASE 5 · Ficha normativa: cargador, modales y código de color
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cargador de la llamada a la IA
   La generación tarda entre 20 y 60 s: sin indicador el usuario cree
   que la aplicación se colgó y vuelve a pulsar el botón.
   --------------------------------------------------------------------- */
.brj-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--brj-gris-300);
    border-top-color: var(--brj-azul-900);
    border-radius: 50%;
    animation: brjGirar 800ms linear infinite;
}

@keyframes brjGirar {
    to { transform: rotate(360deg); }
}

/* Barra de progreso indeterminada bajo el cargador */
.brj-progreso-ia {
    position: relative;
    height: 3px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--brj-gris-300);
}

.brj-progreso-ia::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 35%;
    border-radius: 9999px;
    background: var(--brj-azul-700);
    animation: brjAvance 1.4s ease-in-out infinite;
}

@keyframes brjAvance {
    0%   { left: -35%; }
    100% { left: 100%; }
}

/* ---------------------------------------------------------------------
   Modales de aprobación y rechazo
   --------------------------------------------------------------------- */
.brj-modal {
    animation: brjFadeIn 160ms ease-out both;
}

.brj-modal.brj-abierto {
    display: flex;
}

.brj-modal > div {
    animation: brjSlideUp 200ms ease-out both;
    max-height: 90vh;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------
   Código de color de la ficha (cuatro valores del prompt normativo)
   Las clases Tailwind arbitrarias ya aplican el color; estas reglas
   agregan lo que Tailwind no cubre.
   --------------------------------------------------------------------- */
.brj-color-azul  { color: #0000CC; }
.brj-color-verde { color: #008000; }
.brj-color-rojo  { color: #CC0000; font-weight: 600; }
.brj-color-negro { color: #0C0C0C; }

/* Casilla de la validación manual sobre planos: se diligencia impresa */
.brj-casilla-manual {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid var(--brj-gris-500);
    background: #FFFFFF;
}

/* El textarea del SINUPOT recibe pegados de decenas de miles de caracteres */
#sinupot_text {
    line-height: 1.45;
    resize: vertical;
    min-height: 12rem;
    max-height: 40rem;
}

/* ---------------------------------------------------------------------
   Impresión de la ficha
   --------------------------------------------------------------------- */
@media print {
    .brj-modal,
    #brj-loader-ficha,
    #brj-error-ficha,
    #brj-form-ficha button,
    .brj-no-print {
        display: none !important;
    }

    /* El color es información, no decoración: debe salir en el papel */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    section {
        page-break-inside: avoid;
    }
}