/* =============================================================================
 * editorial-theme-nina.css
 * -----------------------------------------------------------------------------
 * Capa visual FINAL que aplica la dirección "Beauty Editorial Refined" sobre
 * todas las vistas EJS legacy (Bootstrap 4 + sb-admin). Es exactamente la
 * misma paleta, tipografía y bento que el SPA React de /app, para que el
 * usuario perciba un sistema unificado independientemente del módulo.
 *
 * Reglas:
 *   - Se carga DESPUÉS de TODOS los demás CSS (es el último link en _head.ejs).
 *   - Usa selectores fuertes (incluyendo .hijo, body.contexto) para vencer a
 *     sb-admin.css y custom.css sin recurrir a !important salvo cuando es
 *     estrictamente necesario.
 *   - No reescribe la estructura HTML; se basa en clases existentes
 *     (.navbar, .sidebar, .card, .btn, .table, .form-control, .nav-link, etc).
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1) Tokens (espejo de frontend/src/styles/globals.css)
 * --------------------------------------------------------------------------- */
:root {
    --nina-bg: hsl(0 0% 4%);
    --nina-bg-2: hsl(0 0% 6%);
    --nina-card: hsl(0 0% 7%);
    --nina-card-2: hsl(0 0% 10%);
    --nina-secondary: hsl(0 0% 12%);
    --nina-muted: hsl(0 0% 14%);
    --nina-fg: hsl(30 8% 92%);
    --nina-fg-mute: hsl(30 4% 64%);
    --nina-border: hsl(30 6% 18%);
    --nina-border-soft: hsl(30 6% 14%);
    --nina-accent: hsl(268 32% 70%);
    --nina-accent-soft: hsl(268 32% 70% / 0.15);
    --nina-success: hsl(152 35% 55%);
    --nina-warning: hsl(38 60% 60%);
    --nina-danger: hsl(0 62% 50%);
    --nina-radius: 0.625rem;
    --nina-radius-sm: 0.375rem;

    --ds-font-display:
        'Fraunces', 'Cormorant Garamond', ui-serif, Georgia, serif;
    --ds-font-body:
        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* -----------------------------------------------------------------------------
 * 2) Fondo + tipografía base
 * --------------------------------------------------------------------------- */
html {
    color-scheme: dark;
    background-color: var(--nina-bg);
}

body,
body#page-top {
    background:
        radial-gradient(
            1200px 600px at 12% -8%,
            hsl(268 32% 70% / 0.06),
            transparent 60%
        ),
        radial-gradient(
            900px 500px at 100% 0%,
            hsl(20 30% 50% / 0.04),
            transparent 60%
        ),
        linear-gradient(135deg, #0a0a0a 0%, #121212 50%, #0a0a0a 100%);
    background-attachment: fixed;
    color: var(--nina-fg);
    font-family: var(--ds-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11' on, 'ss01' on, 'liga' on;
}

/* Grano sutil global */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#wrapper {
    background: transparent;
}

/* Display serif para títulos */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.font-display {
    font-family: var(--ds-font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--nina-fg);
}

h1, .h1 { letter-spacing: -0.02em; }
h5, h6, .h5, .h6 { font-family: var(--ds-font-body); font-weight: 600; }

/* Selección con acento Nina */
::selection {
    background: hsl(268 32% 70% / 0.35);
    color: var(--nina-fg);
}

/* Scrollbar refinado */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--nina-border);
    border-radius: 9999px;
    border: 2px solid var(--nina-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--nina-fg-mute); }

/* -----------------------------------------------------------------------------
 * 3) Navbar superior — editorial dark con hairline inferior
 * --------------------------------------------------------------------------- */
.navbar,
.navbar.bg-primary,
.navbar.navbar-dark.bg-primary {
    background: hsl(0 0% 4% / 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nina-border);
    box-shadow: none;
    padding: 0.6rem 1.25rem;
    min-height: 64px;
}

.navbar .navbar-brand,
.navbar-brand {
    color: var(--nina-fg) !important;
    font-family: var(--ds-font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.navbar-brand .fa-spa {
    color: var(--nina-accent);
    font-size: 1.1rem;
}

.navbar .nav-link {
    color: var(--nina-fg-mute) !important;
    transition: color 0.18s ease;
}
.navbar .nav-link:hover {
    color: var(--nina-fg) !important;
}

#sidebarToggle {
    color: var(--nina-fg-mute) !important;
}
#sidebarToggle:hover { color: var(--nina-fg) !important; }

/* Buscador del navbar */
#moduleSearchInput.form-control,
.navbar .form-control.rounded-pill {
    background: hsl(0 0% 10% / 0.7) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg) !important;
    font-size: 0.85rem;
    height: 38px;
    padding-left: 14px;
    border-radius: 9999px !important;
}
#moduleSearchInput.form-control::placeholder {
    color: var(--nina-fg-mute);
}
.navbar .input-group-append .btn,
#moduleSearchSubmit.btn {
    background: transparent !important;
    border-color: var(--nina-border) !important;
    color: var(--nina-fg-mute) !important;
}

/* Avatar */
.navbar .avatar,
img.avatar {
    border-radius: 9999px;
    border: 1px solid var(--nina-border);
    background: var(--nina-card);
}

/* Badge contador notificaciones */
.navbar .badge-counter,
.badge-counter {
    background: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--nina-bg);
}

/* -----------------------------------------------------------------------------
 * 4) Sidebar — fondo glass, kickers en uppercase, nav-link refinado,
 *    indicador lavanda en activo
 * --------------------------------------------------------------------------- */
.sidebar,
ul.sidebar.navbar-nav,
.sidebar-dark {
    background: hsl(0 0% 5% / 0.7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--nina-border);
    box-shadow: none;
}

.sidebar .sidebar-heading {
    color: var(--nina-fg-mute) !important;
    font-family: var(--ds-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.85rem 1.25rem 0.4rem;
    opacity: 0.78;
}

.sidebar hr.sidebar-divider {
    border-top: 1px solid var(--nina-border-soft) !important;
    margin: 0.25rem 0.75rem;
}

.sidebar .nav-item .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--nina-fg-mute) !important;
    padding: 0.55rem 1rem;
    margin: 0.1rem 0.6rem;
    border-radius: var(--nina-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}

.sidebar .nav-item .nav-link i,
.sidebar .nav-item .nav-link .fas,
.sidebar .nav-item .nav-link .far,
.sidebar .nav-item .nav-link .fa {
    color: inherit;
    width: 18px;
    font-size: 0.9rem;
    margin-right: 0;
    transition: color 0.18s ease;
}

.sidebar .nav-item .nav-link:hover {
    color: var(--nina-fg) !important;
    background: hsl(0 0% 12% / 0.6);
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link.active {
    color: var(--nina-fg) !important;
    background: var(--nina-secondary);
}

.sidebar .nav-item.active .nav-link::before,
.sidebar .nav-item .nav-link.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        var(--nina-accent),
        hsl(268 32% 70% / 0.4)
    );
}

/* En vista colapsada (.sidebar.toggled) mantener legibilidad */
.sidebar.toggled .sidebar-heading { display: none; }
.sidebar.toggled .nav-item .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------------------------------------------------------
 * 5) Cards — bento editorial: borde fino + sombra interna sutil
 * --------------------------------------------------------------------------- */
.card,
.card.shadow,
.card.shadow-sm {
    background: hsl(0 0% 7% / 0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid hsl(30 6% 18% / 0.7) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 10px 40px -20px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease,
        transform 0.25s ease;
    color: var(--nina-fg);
}
.card:hover {
    transform: none !important;
    border-color: var(--nina-border) !important;
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 24px 60px -28px hsl(268 32% 50% / 0.35) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--nina-border-soft) !important;
    color: var(--nina-fg);
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.01em;
    padding: 1rem 1.25rem;
}

.card-body { color: var(--nina-fg); }
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--nina-border-soft) !important;
    color: var(--nina-fg-mute);
}

/* -----------------------------------------------------------------------------
 * 6) Botones — primary neutro editorial, accent lavanda, outline 1px
 * --------------------------------------------------------------------------- */
.btn {
    font-family: var(--ds-font-body);
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: 0;
    border-radius: var(--nina-radius-sm);
    padding: 0.5rem 1rem;
    border-width: 1px;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn:focus,
.btn:focus-visible {
    outline: 2px solid var(--nina-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary,
.btn.btn-primary {
    background: hsl(30 12% 88%) !important;
    border-color: hsl(30 12% 88%) !important;
    color: hsl(0 0% 6%) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: hsl(30 12% 82%) !important;
    border-color: hsl(30 12% 82%) !important;
    color: hsl(0 0% 6%) !important;
}

.btn-secondary {
    background: var(--nina-secondary) !important;
    border-color: var(--nina-secondary) !important;
    color: var(--nina-fg) !important;
}
.btn-secondary:hover {
    background: var(--nina-muted) !important;
    border-color: var(--nina-muted) !important;
    color: var(--nina-fg) !important;
}

.btn-success {
    background: var(--nina-success) !important;
    border-color: var(--nina-success) !important;
    color: hsl(0 0% 6%) !important;
}

.btn-danger,
.btn-outline-danger {
    background: var(--nina-danger);
    border-color: var(--nina-danger);
    color: #fff;
}

.btn-warning {
    background: var(--nina-warning) !important;
    border-color: var(--nina-warning) !important;
    color: hsl(0 0% 6%) !important;
}

.btn-info {
    background: var(--nina-accent) !important;
    border-color: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
}

.btn-light,
.btn-outline-light {
    background: transparent !important;
    border-color: var(--nina-border) !important;
    color: var(--nina-fg) !important;
}
.btn-light:hover,
.btn-outline-light:hover {
    background: var(--nina-secondary) !important;
    border-color: var(--nina-border) !important;
}

.btn-link {
    color: var(--nina-accent) !important;
    box-shadow: none !important;
}
.btn-link:hover { color: hsl(268 35% 78%) !important; }

/* Botón "accent" lavanda — para CTAs principales */
.btn-accent,
.btn-primary.btn-accent {
    background: var(--nina-accent) !important;
    border-color: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
}

/* -----------------------------------------------------------------------------
 * 7) Forms — inputs editoriales con borde 1px
 * --------------------------------------------------------------------------- */
.form-control,
.custom-select,
input.form-control,
textarea.form-control,
select.form-control {
    background: hsl(0 0% 10% / 0.65) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg) !important;
    font-family: var(--ds-font-body);
    font-size: 0.9rem;
    border-radius: var(--nina-radius-sm) !important;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.form-control::placeholder { color: var(--nina-fg-mute); opacity: 0.7; }

.form-control:focus,
.custom-select:focus {
    background: hsl(0 0% 12% / 0.85) !important;
    border-color: var(--nina-accent) !important;
    box-shadow: 0 0 0 3px hsl(268 32% 70% / 0.18) !important;
    color: var(--nina-fg) !important;
}

label, .form-label {
    color: var(--nina-fg-mute);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.input-group-text {
    background: hsl(0 0% 8%) !important;
    border-color: var(--nina-border) !important;
    color: var(--nina-fg-mute) !important;
}

/* -----------------------------------------------------------------------------
 * 8) Tablas — fila hover sutil, header tipográfico editorial
 * --------------------------------------------------------------------------- */
.table {
    color: var(--nina-fg);
    background: transparent;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table thead th,
.table-bordered thead th {
    background: transparent !important;
    color: var(--nina-fg-mute) !important;
    font-family: var(--ds-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-top: none !important;
    border-bottom: 1px solid var(--nina-border) !important;
    padding: 0.85rem 0.75rem;
    text-align: left;
}

.table tbody td,
.table td {
    background: transparent;
    color: var(--nina-fg);
    border-top: 1px solid hsl(30 6% 18% / 0.5);
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
}

.table tbody tr:hover {
    background: hsl(0 0% 10% / 0.5) !important;
}

.table-bordered { border: none !important; }
.table-bordered td,
.table-bordered th { border: none !important; }
.table-bordered tbody td {
    border-bottom: 1px solid hsl(30 6% 18% / 0.5) !important;
}

/* DataTables wrapper */
.dataTables_wrapper {
    color: var(--nina-fg-mute);
    font-family: var(--ds-font-body);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: hsl(0 0% 10% / 0.65) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg) !important;
    border-radius: var(--nina-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--nina-fg-mute) !important;
    border-radius: var(--nina-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--nina-accent) !important;
    border-color: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--nina-secondary) !important;
    border-color: var(--nina-border) !important;
    color: var(--nina-fg) !important;
}

/* Tipografía números — tabular */
.table td, .table th, .number, .editorial-number {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * 9) Modales
 * --------------------------------------------------------------------------- */
.modal-content {
    background: hsl(0 0% 7%) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
    color: var(--nina-fg);
}
.modal-header {
    border-bottom: 1px solid var(--nina-border-soft) !important;
    padding: 1rem 1.25rem;
}
.modal-title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 1.1rem;
}
.modal-footer {
    border-top: 1px solid var(--nina-border-soft) !important;
    padding: 1rem 1.25rem;
}
.modal-backdrop.show { opacity: 0.7; background: #000; }

.close {
    color: var(--nina-fg-mute) !important;
    opacity: 1;
    transition: color 0.18s ease;
    text-shadow: none;
}
.close:hover { color: var(--nina-fg) !important; }

/* -----------------------------------------------------------------------------
 * 10) Dropdowns
 * --------------------------------------------------------------------------- */
.dropdown-menu {
    background: hsl(0 0% 8%) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
    padding: 0.35rem;
    color: var(--nina-fg);
}
.dropdown-item {
    color: var(--nina-fg) !important;
    border-radius: var(--nina-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    transition: background 0.15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--nina-secondary) !important;
    color: var(--nina-fg) !important;
}
.dropdown-divider {
    border-top: 1px solid var(--nina-border-soft) !important;
}

/* -----------------------------------------------------------------------------
 * 11) Badges y pills
 * --------------------------------------------------------------------------- */
.badge {
    font-family: var(--ds-font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 0.3em 0.55em;
    border-radius: 9999px;
}

.badge-secondary,
.badge-light {
    background: var(--nina-secondary) !important;
    color: var(--nina-fg) !important;
}
.badge-primary { background: var(--nina-accent-soft) !important; color: var(--nina-accent) !important; }
.badge-success { background: hsl(152 35% 55% / 0.18) !important; color: var(--nina-success) !important; }
.badge-warning { background: hsl(38 60% 60% / 0.18) !important; color: var(--nina-warning) !important; }
.badge-danger  { background: hsl(0 62% 50% / 0.18) !important; color: var(--nina-danger) !important; }

/* -----------------------------------------------------------------------------
 * 12) Alerts editoriales
 * --------------------------------------------------------------------------- */
.alert {
    border-radius: var(--nina-radius);
    border-width: 1px;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
}
.alert-info {
    background: hsl(268 32% 70% / 0.08) !important;
    border-color: hsl(268 32% 70% / 0.3) !important;
    color: var(--nina-fg) !important;
}
.alert-success {
    background: hsl(152 35% 55% / 0.08) !important;
    border-color: hsl(152 35% 55% / 0.3) !important;
    color: var(--nina-fg) !important;
}
.alert-warning {
    background: hsl(38 60% 60% / 0.08) !important;
    border-color: hsl(38 60% 60% / 0.3) !important;
    color: var(--nina-fg) !important;
}
.alert-danger {
    background: hsl(0 62% 50% / 0.1) !important;
    border-color: hsl(0 62% 50% / 0.3) !important;
    color: var(--nina-fg) !important;
}

/* -----------------------------------------------------------------------------
 * 13) Tipografía editorial reutilizable
 * --------------------------------------------------------------------------- */
.kicker,
.text-kicker,
.small.text-uppercase {
    font-family: var(--ds-font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--nina-fg-mute);
}

.text-gradient-accent {
    background: linear-gradient(
        135deg,
        var(--nina-fg) 0%,
        var(--nina-accent) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.editorial-number {
    font-family: var(--ds-font-display);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 3.4vw, 3rem);
}

.hairline {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--nina-border),
        transparent
    );
    border: none;
    margin: 0;
}

.text-muted,
.text-secondary {
    color: var(--nina-fg-mute) !important;
}

a {
    color: var(--nina-fg);
    transition: color 0.18s ease;
}
a:hover { color: var(--nina-accent); text-decoration: none; }

/* -----------------------------------------------------------------------------
 * 14) Container y main content
 * --------------------------------------------------------------------------- */
#content-wrapper {
    background: transparent !important;
}
#content-wrapper::before {
    display: none !important;
}

#content { background: transparent; }

.container-fluid.py-4 { padding-top: 1.75rem !important; padding-bottom: 2.5rem !important; }

/* Footer */
.sticky-footer,
footer.sticky-footer {
    background: transparent !important;
    border-top: 1px solid var(--nina-border-soft);
    color: var(--nina-fg-mute);
    font-size: 0.78rem;
    padding: 1.2rem 0;
}

/* -----------------------------------------------------------------------------
 * 15) Páginas standalone — login, abrir caja (coherente con LoginPage React)
 * --------------------------------------------------------------------------- */
body.standalone-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    background:
        radial-gradient(
            1200px 600px at 12% -8%,
            hsl(268 32% 70% / 0.06),
            transparent 60%
        ),
        radial-gradient(
            900px 500px at 100% 0%,
            hsl(20 30% 50% / 0.04),
            transparent 60%
        ),
        radial-gradient(
            800px 600px at 50% 110%,
            hsl(0 0% 100% / 0.02),
            transparent 60%
        ),
        hsl(0 0% 4%) !important;
    background-attachment: fixed;
}

body.standalone-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.standalone-glow {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            700px 500px at 30% 20%,
            hsl(268 32% 70% / 0.18),
            transparent 60%
        ),
        radial-gradient(
            800px 600px at 80% 80%,
            hsl(20 30% 50% / 0.08),
            transparent 60%
        );
}

.standalone-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    border-radius: var(--nina-radius);
    background: hsl(0 0% 7% / 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid hsl(30 6% 18% / 0.7);
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 24px 60px -28px rgba(0, 0, 0, 0.65);
}

.standalone-card--wide {
    max-width: 30rem;
}

.standalone-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.standalone-logo img {
    max-height: 48px;
    width: auto;
    opacity: 0.95;
}

.standalone-title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 4vw, 2rem);
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--nina-fg);
    margin: 0;
}

.standalone-subtitle {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--nina-fg-mute);
}

.standalone-form {
    margin-top: 2rem;
}

.standalone-field {
    margin-bottom: 1rem;
}

.standalone-field label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nina-fg-mute);
}

.standalone-field .form-control {
    width: 100%;
}

.standalone-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--nina-radius-sm);
    border: 1px solid var(--nina-accent);
    background: var(--nina-accent);
    color: hsl(0 0% 6%);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.standalone-submit:hover {
    background: hsl(268 35% 78%);
    border-color: hsl(268 35% 78%);
    color: hsl(0 0% 6%);
}

.standalone-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.standalone-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--nina-fg-mute);
}

.standalone-footer a {
    color: var(--nina-fg);
    transition: color 0.18s ease;
}

.standalone-footer a:hover {
    color: var(--nina-accent);
}

.standalone-user-badge {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    font-size: 0.8rem;
    color: var(--nina-fg-mute);
}

.standalone-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--nina-radius-sm);
    font-size: 0.8125rem;
    border: 1px solid hsl(0 62% 50% / 0.4);
    background: hsl(0 62% 50% / 0.1);
    color: var(--nina-fg);
}

.standalone-alert-warning {
    border-color: hsl(38 60% 60% / 0.35);
    background: hsl(38 60% 60% / 0.1);
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--nina-radius-sm);
    font-size: 0.875rem;
    color: var(--nina-fg);
}

.standalone-help {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--nina-fg-mute);
}

.standalone-card .form-text {
    color: var(--nina-fg-mute) !important;
    font-size: 0.75rem;
}

.standalone-card .text-danger {
    color: var(--nina-danger) !important;
}

.standalone-card .invalid-feedback {
    color: var(--nina-danger);
    font-size: 0.75rem;
}

.standalone-card .form-control.is-invalid {
    border-color: var(--nina-danger) !important;
}

.standalone-card .text-warning {
    color: var(--nina-warning) !important;
}

/* -----------------------------------------------------------------------------
 * 16) Notificaciones dropdown
 * --------------------------------------------------------------------------- */
.dropdown-notifications {
    width: 360px;
    max-width: 95vw;
    padding: 0;
    background: hsl(0 0% 7%) !important;
}
.dropdown-notifications-header {
    padding: 0.85rem 1rem;
    font-family: var(--ds-font-display);
    font-weight: 500;
    color: var(--nina-fg);
    border-bottom: 1px solid var(--nina-border-soft);
    margin: 0;
}
.dropdown-notifications-body { max-height: 360px; overflow-y: auto; }
.dropdown-notifications-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--nina-border-soft);
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}
.dropdown-notifications-footer a {
    color: var(--nina-fg-mute);
}
.dropdown-notifications-footer a:hover { color: var(--nina-accent); }

/* -----------------------------------------------------------------------------
 * 17) Override del topbar/page header en módulos legacy (h1 + filtros)
 *
 * Muchos módulos abren con un patrón:
 *   <h1 class="h3 mb-2 text-gray-800">Nombre</h1>
 *   <p class="mb-4">Descripción</p>
 * Lo convertimos en header editorial (kicker + título grande).
 * --------------------------------------------------------------------------- */
h1.h3,
h1.h2,
h1.h1 {
    font-family: var(--ds-font-display);
    font-weight: 500;
    color: var(--nina-fg) !important;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: var(--nina-fg) !important;
}

/* -----------------------------------------------------------------------------
 * 18) Module wrapper "card" que algunos módulos usan
 * --------------------------------------------------------------------------- */
.module-wrapper,
.module-card,
.card-stats {
    background: hsl(0 0% 7% / 0.82) !important;
    border: 1px solid var(--nina-border-soft) !important;
    border-radius: var(--nina-radius) !important;
    padding: 1.25rem;
}

/* -----------------------------------------------------------------------------
 * 19) Override agresivo final para superficies blancas perdidas
 * --------------------------------------------------------------------------- */
.bg-white,
.bg-light {
    background: hsl(0 0% 7%) !important;
    color: var(--nina-fg) !important;
}

.bg-gray-100,
.bg-gray-200,
.bg-gray-300 {
    background: hsl(0 0% 10%) !important;
    color: var(--nina-fg) !important;
}

/* -----------------------------------------------------------------------------
 * 20) Override de wrappers locales: venta-module-wrapper y .module-wrapper
 *
 * Las vistas EJS legacy declaran `<style>` inline DENTRO del body (después
 * del head). Por orden de cascada y misma especificidad, ese CSS inline
 * GANA al editorial-theme.
 *
 * Solución: definir overrides con MÁS especificidad (`.venta-module-wrapper .xxx`
 * con tokens editoriales + !important en propiedades visuales clave).
 *
 * El módulo de ventas es el caso más extremo (CSS inline de ~1500 líneas
 * con paleta blanco/negro y DM Sans propias). Recapturamos:
 *  - variables CSS de paleta
 *  - tipografías (DM Sans → Fraunces/Inter)
 *  - header, botones, cards, inputs internos del módulo
 * --------------------------------------------------------------------------- */

/* Override de variables locales que los módulos legacy redefinen */
body.nina-shell .venta-module-wrapper,
body.nina-shell .module-wrapper {
    min-height: auto !important;
}

.venta-module-wrapper,
.module-wrapper {
    --primary: hsl(30 12% 88%);
    --primary-dark: hsl(30 12% 82%);
    --secondary: hsl(0 0% 12%);
    --accent: var(--nina-accent);
    --dark: hsl(0 0% 4%);
    --dark-secondary: hsl(0 0% 7%);
    --dark-tertiary: hsl(0 0% 10%);
    --bg-main: var(--nina-bg);
    --bg-card: hsl(0 0% 7%);
    --text-primary: var(--nina-fg);
    --text-secondary: var(--nina-fg-mute);
    --text-muted: var(--nina-fg-mute);
    --border: var(--nina-border);
    --border-light: var(--nina-border);
    --shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
    --shadow-light: 0 1px 0 0 hsl(0 0% 100% / 0.04) inset;
    font-family: var(--ds-font-body) !important;
    background: transparent !important;
    color: var(--nina-fg);
}

.venta-module-wrapper::before,
.module-wrapper::before {
    display: none !important;
}

/* Cabecera de módulo (h1 + acciones a la derecha) */
.venta-module-wrapper .header-module,
.module-wrapper .header-module,
.venta-module-wrapper .module-header,
.module-wrapper .module-header {
    background: hsl(0 0% 7% / 0.82) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 10px 40px -20px rgba(0, 0, 0, 0.5) !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
    animation: none !important;
}

.venta-module-wrapper .header-module h1,
.module-wrapper .header-module h1 {
    font-family: var(--ds-font-display) !important;
    font-weight: 500 !important;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    color: var(--nina-fg) !important;
    text-shadow: none !important;
}

/* Botones del módulo (.btn-modern) — reemplazar con look editorial */
.venta-module-wrapper .btn-modern,
.module-wrapper .btn-modern {
    font-family: var(--ds-font-body) !important;
    font-weight: 500 !important;
    border-radius: var(--nina-radius-sm) !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.86rem !important;
    transition: background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease !important;
    box-shadow: none !important;
    border: 1px solid var(--nina-border) !important;
}

.venta-module-wrapper .btn-modern-primary,
.module-wrapper .btn-modern-primary {
    background: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
    border-color: var(--nina-accent) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
.venta-module-wrapper .btn-modern-primary:hover,
.module-wrapper .btn-modern-primary:hover {
    background: hsl(268 35% 78%) !important;
    border-color: hsl(268 35% 78%) !important;
    color: hsl(0 0% 6%) !important;
    transform: none !important;
    box-shadow: 0 8px 24px -10px hsl(268 32% 50% / 0.5) !important;
}

.venta-module-wrapper .btn-modern-secondary,
.module-wrapper .btn-modern-secondary {
    background: var(--nina-secondary) !important;
    color: var(--nina-fg) !important;
    border-color: var(--nina-border) !important;
}
.venta-module-wrapper .btn-modern-secondary:hover,
.module-wrapper .btn-modern-secondary:hover {
    background: var(--nina-muted) !important;
    border-color: var(--nina-fg-mute) !important;
    color: var(--nina-fg) !important;
    box-shadow: none !important;
}

/* Tarjetas internas del módulo (.sales-form, .summary-card, .selection-area, etc.) */
.venta-module-wrapper .sales-form,
.venta-module-wrapper .summary-card,
.venta-module-wrapper .selection-area,
.venta-module-wrapper .recent-sales,
.venta-module-wrapper .payment-method,
.module-wrapper .sales-form,
.module-wrapper .summary-card,
.module-wrapper .selection-area {
    background: hsl(0 0% 7% / 0.85) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 10px 40px -20px rgba(0, 0, 0, 0.5) !important;
    color: var(--nina-fg) !important;
}

/* Títulos de sección dentro del módulo */
.venta-module-wrapper .form-section-title,
.venta-module-wrapper .summary-title,
.venta-module-wrapper .selection-title,
.module-wrapper .form-section-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 500 !important;
    color: var(--nina-fg) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Inputs del módulo */
.venta-module-wrapper .form-input,
.venta-module-wrapper .form-select,
.venta-module-wrapper .search-box,
.module-wrapper .form-input,
.module-wrapper .form-select,
.module-wrapper .search-box {
    background: hsl(0 0% 10% / 0.7) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg) !important;
    font-family: var(--ds-font-body) !important;
    border-radius: var(--nina-radius-sm) !important;
    box-shadow: none !important;
}

.venta-module-wrapper .form-input:focus,
.venta-module-wrapper .form-select:focus,
.venta-module-wrapper .search-box:focus,
.module-wrapper .form-input:focus,
.module-wrapper .form-select:focus {
    border-color: var(--nina-accent) !important;
    background: hsl(0 0% 12% / 0.85) !important;
    box-shadow: 0 0 0 3px hsl(268 32% 70% / 0.18) !important;
}

.venta-module-wrapper .form-label,
.module-wrapper .form-label {
    color: var(--nina-fg-mute) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

/* Chips de productos/servicios */
.venta-module-wrapper .item-chip,
.module-wrapper .item-chip {
    background: hsl(0 0% 10%) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg) !important;
    border-radius: 9999px !important;
}
.venta-module-wrapper .item-chip:hover,
.module-wrapper .item-chip:hover {
    background: hsl(0 0% 14%) !important;
    border-color: var(--nina-accent) !important;
    color: var(--nina-fg) !important;
}

.venta-module-wrapper .selected-item,
.module-wrapper .selected-item {
    background: hsl(0 0% 9%) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius-sm) !important;
}

.venta-module-wrapper .selected-item-price,
.venta-module-wrapper .daily-total-amount,
.venta-module-wrapper .payment-method-amount {
    font-family: var(--ds-font-display) !important;
    font-variant-numeric: tabular-nums;
    color: var(--nina-fg) !important;
}

/* Total grande del día */
.venta-module-wrapper .daily-total,
.module-wrapper .daily-total {
    background: linear-gradient(
        135deg,
        hsl(268 32% 70% / 0.12),
        hsl(0 0% 7%)
    ) !important;
    border: 1px solid hsl(268 32% 70% / 0.3) !important;
    border-radius: var(--nina-radius) !important;
}

.venta-module-wrapper .daily-total-label {
    color: var(--nina-fg-mute) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

.venta-module-wrapper .daily-total-amount {
    font-family: var(--ds-font-display) !important;
    font-weight: 500 !important;
    font-size: clamp(2rem, 3.6vw, 3rem) !important;
    letter-spacing: -0.035em !important;
    color: var(--nina-fg) !important;
    text-shadow: none !important;
}

/* Estado oculto: ocultar el "$0" real (transparente) y mostrar bullets
 * editoriales centrados con ::before. Mantener el text-shadow apagado y
 * la tipografía coherente con el resto del módulo. */
.venta-module-wrapper .daily-total-amount.hidden {
    color: transparent !important;
    text-shadow: none !important;
}

.venta-module-wrapper .daily-total-amount.hidden::before {
    content: '••••••' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--ds-font-body) !important;
    font-weight: 400 !important;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
    letter-spacing: 0.45rem !important;
    color: var(--nina-fg) !important;
    text-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

/* Garantizar que el contenedor .daily-total sirva como ancla para el ::before */
.venta-module-wrapper .daily-total-amount {
    position: relative !important;
}

/* Botón de ojo (toggle visibility) — pulido editorial */
.venta-module-wrapper .toggle-amount-btn,
.module-wrapper .toggle-amount-btn {
    background: hsl(0 0% 10%) !important;
    border: 1px solid var(--nina-border) !important;
    color: var(--nina-fg-mute) !important;
    border-radius: var(--nina-radius-sm) !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
    box-shadow: none !important;
}
.venta-module-wrapper .toggle-amount-btn:hover,
.module-wrapper .toggle-amount-btn:hover {
    color: var(--nina-fg) !important;
    border-color: var(--nina-fg-mute) !important;
    background: hsl(0 0% 13%) !important;
}

/* Botones de método de pago */
.venta-module-wrapper .payment-method {
    background: hsl(0 0% 9%) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius-sm) !important;
}

/* Forzar tipografía Inter en TODO el módulo (DM Sans → Inter) y quitar
 * efectos AI-slop (text-shadow blanco resplandeciente).
 *
 * IMPORTANTE: NO aplicar a iconos (Font Awesome / fa-*). Si forzamos Inter
 * sobre <i class="fas fa-X">, perdemos el font-family de Font Awesome y los
 * glyphs del rango PUA (\f000+) ya no se renderizan → aparece el mismo
 * "tofu" (líneas horizontales) en todos los iconos del sistema. */
.venta-module-wrapper,
.venta-module-wrapper *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(svg):not(svg *),
.module-wrapper,
.module-wrapper *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(svg):not(svg *) {
    font-family: var(--ds-font-body) !important;
}
.venta-module-wrapper h1,
.venta-module-wrapper h2,
.venta-module-wrapper h3,
.venta-module-wrapper h4,
.venta-module-wrapper .header-module h1,
.venta-module-wrapper .form-section-title,
.venta-module-wrapper .summary-title,
.venta-module-wrapper .daily-total-amount,
.venta-module-wrapper .selected-item-price,
.module-wrapper h1,
.module-wrapper h2,
.module-wrapper h3,
.module-wrapper h4 {
    font-family: var(--ds-font-display) !important;
}
.venta-module-wrapper *,
.venta-module-wrapper *::before,
.venta-module-wrapper *::after,
.module-wrapper *,
.module-wrapper *::before,
.module-wrapper *::after {
    text-shadow: none !important;
}

/* Restaurar font-family de Font Awesome (Inter NO tiene glyphs PUA). */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"],
i[class*="fa-"] {
    font-family:
        "Font Awesome 6 Free",
        "Font Awesome 5 Free",
        "FontAwesome",
        sans-serif !important;
}
.fab,
i.fab {
    font-family:
        "Font Awesome 6 Brands",
        "Font Awesome 5 Brands",
        "FontAwesome",
        sans-serif !important;
}
/* Y el peso 900 (solid) para .fas */
.fas,
i.fas,
[class*=" fa-"].fas {
    font-weight: 900 !important;
}
.far,
i.far {
    font-weight: 400 !important;
}

/* -----------------------------------------------------------------------------
 * 22) Capa final — anular patrones legacy inline en módulos (agenda, CRM, etc.)
 * --------------------------------------------------------------------------- */
#content .module-wrapper,
#content .venta-module-wrapper,
#content .inventario-container,
#content .cliente-container,
#content .agenda-container,
#content .crm-container {
    background: transparent !important;
    color: var(--nina-fg) !important;
    font-family: var(--ds-font-body) !important;
}

#content .module-wrapper *,
#content .venta-module-wrapper *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(svg):not(svg *) {
    font-family: inherit;
}

#content .module-wrapper h1,
#content .module-wrapper h2,
#content .module-wrapper h3,
#content .module-wrapper h4,
#content .venta-module-wrapper h1,
#content .venta-module-wrapper h2,
#content .venta-module-wrapper h3,
#content .venta-module-wrapper h4,
#content .header-module h1 {
    font-family: var(--ds-font-display) !important;
    text-shadow: none !important;
    letter-spacing: -0.015em !important;
}

#content .card:hover {
    transform: none !important;
}

#content .btn-modern,
#content .btn-modern-primary,
#content .btn-modern-secondary {
    font-family: var(--ds-font-body) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#content .btn-modern-primary {
    background: var(--nina-accent) !important;
    border-color: var(--nina-accent) !important;
    color: hsl(0 0% 6%) !important;
}

#content .header-module,
#content .module-header {
    background: hsl(0 0% 7% / 0.82) !important;
    border: 1px solid var(--nina-border) !important;
    border-radius: var(--nina-radius) !important;
    box-shadow:
        0 1px 0 0 hsl(0 0% 100% / 0.04) inset,
        0 10px 40px -20px rgba(0, 0, 0, 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}