/* =====================================================================
   app.css  -  Estilos propios del boilerplate (Bootstrap 5 + Poppins)
   ---------------------------------------------------------------------
   Los colores del panel llegan como CSS variables generadas en runtime
   por App\Services\ThemeService (bloque <style> en el <head>):
     --c-sidebar-bg / --c-sidebar-text / --c-sidebar-active
     --c-topbar-bg  / --c-topbar-text
     --c-body-bg    / --c-text / --c-icon / --c-primary
   Aca solo se consumen; el fallback cubre el caso sin configuracion.
   ===================================================================== */

:root {
    --c-sidebar-bg: #0f172a;
    --c-sidebar-text: #cbd5e1;
    --c-sidebar-active: #6366f1;
    --c-topbar-bg: #ffffff;
    --c-topbar-text: #1e293b;
    --c-body-bg: #f1f5f9;
    --c-text: #1e293b;
    --c-icon: #6366f1;
    --c-primary: #6366f1;

    --sidebar-w: 264px;
    --sidebar-w-collapsed: 74px;
    --topbar-h: 62px;
    --radius: 14px;
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   ESCALA TIPOGRAFICA GLOBAL
   Bootstrap dimensiona casi todo en `rem`, por lo que bajar el font-size
   raiz reduce proporcionalmente el tamano de fuente de TODAS las clases
   (headings, .fs-*, .small, .btn, .form-control, .table, badges, etc.).
   85% = -15% respecto del 16px por defecto (1rem = 13.6px).
   --------------------------------------------------------------------- */
html { font-size: 85%; }

body {
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--c-text);
    background: var(--c-body-bg);
}

/* Botones / enlaces primarios siguen el color configurable */
.btn-primary {
    --bs-btn-bg: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--c-primary) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--c-primary) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--c-primary) 80%, #000);
}
a { color: var(--c-primary); }

/* ---------------------------------------------------------------------
   AUTENTICACION (login, recuperar, 403, 429)
   --------------------------------------------------------------------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Imagen de fondo, cubre toda la pantalla y se mantiene responsive.
       Un degradado oscuro por encima da contraste al vidrio esmerilado. */
    background:
        linear-gradient(180deg, rgba(2, 6, 23, .45), rgba(2, 6, 23, .65)),
        url('../img/bklogin.webp') center center / cover no-repeat fixed;
    background-color: #0b1120;   /* fallback mientras carga la imagen */
}
.auth-wrap { width: 100%; max-width: 420px; }

/* Tarjeta del formulario: efecto vidrio esmerilado (glassmorphism). */
.auth-card {
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .45);
    color: #f8fafc;
}
/* Textos dentro del vidrio: claros para leerse sobre la imagen. */
.auth-card h1,
.auth-card .form-label,
.auth-card h2 { color: #f8fafc; }
.auth-card .text-muted { color: rgba(248, 250, 252, .75) !important; }
.auth-card .form-text { color: rgba(248, 250, 252, .7); }
.auth-card a { color: #dbeafe; }
/* Campos: translucidos, sin romper la legibilidad al tipear. */
.auth-card .form-control,
.auth-card .input-group-text {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .5);
    color: #0f172a;
}
.auth-card .form-control:focus {
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}
.auth-card .input-group-text { color: #475569; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Navegadores sin backdrop-filter: tarjeta semiopaca oscura */
    .auth-card { background: rgba(15, 23, 42, .78); }
}

/* La imagen fija salta en algunos moviles: la fijamos al scroll */
@media (max-width: 767.98px) {
    .auth-body { background-attachment: scroll; }
}

.auth-logo { max-height: 56px; }
.auth-logo-fallback,
.sidebar-logo-fallback,
.auth-brand .auth-logo-fallback {
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c-primary) 15%, transparent);
    color: var(--c-primary);
    font-size: 24px;
}
.auth-footer { color: rgba(255, 255, 255, .7); font-size: .8rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.auth-footer-credito { display: inline-block; margin-top: .15rem; font-size: .68rem; opacity: .85; }
.auth-footer-credito a { color: inherit; text-decoration: none; }
.auth-footer-credito a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   ESTRUCTURA DEL PANEL
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--c-sidebar-bg);
    color: var(--c-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .2s ease, transform .2s ease;
    z-index: 1040;
}
.sidebar-header {
    height: var(--topbar-h);
    padding: 0 18px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-logo { max-height: 30px; }
.sidebar-logo-fallback { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
.sidebar-title { font-size: .98rem; }

.sidebar-menu { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sidebar-nav, .sidebar-subnav { list-style: none; padding: 0; margin: 0; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--c-sidebar-text);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-link.active {
    background: var(--c-sidebar-active);
    color: #fff;
}
.sidebar-link i { color: inherit; font-size: 1.05rem; }
.sidebar-subnav .sidebar-link { padding-left: 34px; font-size: .86rem; }
.sidebar-caret { transition: transform .2s ease; font-size: .8rem; }
.sidebar-link:not(.collapsed) .sidebar-caret { transform: rotate(180deg); }

.sidebar-footer { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.sidebar-collapse-btn {
    color: var(--c-sidebar-text);
    border: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
}
.sidebar-collapse-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* --- Modo colapsado (desktop) --- */
.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.sidebar-collapsed .sidebar-text { display: none; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px; }
.sidebar-collapsed .sidebar-subnav .sidebar-link { padding-left: 10px; }
.sidebar-collapsed .sidebar-header { justify-content: center; padding: 0; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    height: var(--topbar-h);
    background: var(--c-topbar-bg);
    color: var(--c-topbar-text);
    border-bottom: 1px solid rgba(2, 6, 23, .08);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.topbar-toggle, .topbar-icon-btn, .topbar-user {
    background: transparent;
    border: 0;
    color: var(--c-topbar-text);
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1;
}
.topbar-toggle { font-size: 1.3rem; display: none; }
.topbar-icon-btn { font-size: 1.1rem; }
.topbar-icon-btn:hover, .topbar-user:hover { background: rgba(2, 6, 23, .06); }
.topbar-icon-btn i { color: var(--c-icon); }
.topbar-badge { position: absolute; top: 2px; right: 2px; font-size: .6rem; }
.topbar-notif { width: 300px; max-height: 380px; overflow-y: auto; }

.app-content { padding: 24px; flex: 1; }
@media (min-width: 1400px) { .app-content { padding: 28px 36px; } }

/* ---------------------------------------------------------------------
   COLOR UNICO DE ICONOS
   Todos los <i class="bi ..."> usan el color configurable "Color de iconos"
   (--c-icon), para que la interfaz no sea un arcoiris de botones.
   Excepciones:
     - el icono de ELIMINAR (papelera) se mantiene rojo (accion destructiva);
     - iconos dentro de botones/alerts/badges solidos o de texto semantico:
       siguen el color de su contenedor para contrastar / mantener significado;
     - sidebar y tarjetas de estadistica: conservan su propio esquema.
   --------------------------------------------------------------------- */
.bi { color: var(--c-icon); }

.btn-primary .bi,
.btn-secondary .bi,
.btn-success .bi,
.btn-danger .bi,
.btn-warning .bi,
.btn-info .bi,
.btn-dark .bi,
.btn-light .bi,
.btn-link .bi,
.alert .bi,
.badge .bi,
.sidebar-link .bi,
.stat-card .bi,
.text-danger .bi,
.text-success .bi,
.text-warning .bi,
.text-info .bi,
.text-primary .bi,
.text-muted .bi { color: currentColor; }

/* La papelera SIEMPRE en rojo, este donde este. */
.bi-trash,
.bi-trash-fill { color: var(--bs-danger) !important; }

/* ---------------------------------------------------------------------
   AVATAR de texto
   --------------------------------------------------------------------- */
.avatar-text {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c-primary) 18%, transparent);
    color: var(--c-primary);
    font-weight: 600; font-size: .8rem;
    flex-shrink: 0;
}
.avatar-text.sm { width: 30px; height: 30px; font-size: .72rem; }
.avatar-text.lg { width: 72px; height: 72px; font-size: 1.4rem; }

/* ---------------------------------------------------------------------
   TARJETAS / componentes
   --------------------------------------------------------------------- */
.card {
    border: 1px solid rgba(2, 6, 23, .07);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(2, 6, 23, .04);
}
.card-header { background: transparent; border-bottom: 1px solid rgba(2, 6, 23, .07); }

.stat-card .stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.stat-value { font-size: 1.4rem; font-weight: 600; line-height: 1; }
.stat-label { font-size: .78rem; color: #64748b; }

.table > :not(caption) > * > * { padding: .7rem .75rem; }

/* ---------------------------------------------------------------------
   RESPONSIVE: sidebar off-canvas en pantallas chicas
   --------------------------------------------------------------------- */
.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        left: 0; top: 0;
        transform: translateX(-100%);
    }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .topbar-toggle { display: inline-flex; }
    .sidebar-footer { display: none; }             /* el colapsado no aplica en mobile */
    .app-content { padding: 16px; }
}

/* ---------------------------------------------------------------------
   MODO OSCURO  (Bootstrap 5.3 nativo: data-bs-theme="dark")
   Se re-mapean algunas variables del tema para que combine.
   El selector lleva :root para ganarle en especificidad al bloque
   ":root { --c-...: ... }" que ThemeService inyecta despues en el <head>.
   --------------------------------------------------------------------- */
:root[data-bs-theme="dark"] {
    --c-body-bg: #0b1120;
    --c-topbar-bg: #0f172a;
    --c-topbar-text: #e2e8f0;
    --c-text: #e2e8f0;
}
[data-bs-theme="dark"] body { background: var(--c-body-bg); }
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] .card { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .card-header { border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .app-topbar { border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .topbar-icon-btn:hover,
[data-bs-theme="dark"] .topbar-user:hover { background: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------------
   MODO DEMO  (Config\Demo)
   Accion visible pero inhabilitada: se atenua y al pulsarla app.js
   muestra un aviso en vez de ejecutarla.
   --------------------------------------------------------------------- */
.demo-lock { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   FILTROS DE TABLA  (texto 10% mas chico que el resto)
   --------------------------------------------------------------------- */
.tabla-filtros .form-control,
.tabla-filtros .form-select,
.tabla-filtros .btn,
.tabla-filtros .form-check-label,
.tabla-filtros .input-group-text {
    font-size: .9rem;
}

/* ---------------------------------------------------------------------
   PAGINADOR DE TABLAS  (botones minimalistas, iconos llenos)
   --------------------------------------------------------------------- */
.paginador { font-size: .85rem; }
.paginador .btn-group .btn {
    border-color: var(--bs-border-color);
    padding-inline: .55rem;
}
.paginador .btn-group .btn.disabled { opacity: .45; }
.paginador select[data-perpage] { font-size: .85rem; }

/* ---------------------------------------------------------------------
   IMPRESION MANUAL (Ctrl+P de una pagina normal del panel)
   Los PDF de listados y de la orden se generan en el servidor (Dompdf).
   --------------------------------------------------------------------- */
@media print {
    .app-sidebar, .app-topbar, .sidebar-backdrop, .tabla-filtros, .paginador,
    #confirmModal, .no-imprimir { display: none !important; }
    .app-shell, .app-main, .app-content { display: block; margin: 0; padding: 0; background: #fff; }
    .card { border: none !important; box-shadow: none !important; }
    body { background: #fff !important; color: #000 !important; }
    @page { margin: 14mm; }
}