/**
 * Hotelia · Brand overrides for Tabler
 * ---
 * Reemplaza el layer "shadcn-overrides" con el sistema visual del brandsheet
 * (editorial · arquitectónico · brutalist-restraint). Cero border-radius,
 * Inter, paleta OKLCH brand (Verde, Deep, Teal, Sand, Mist), hairlines,
 * mesh gradients reservados y eyebrows mono.
 *
 * Cargar DESPUÉS de tabler.css, tabler-vendors.css y global.css.
 * Coexiste con dark-mode-override.css (variables coherentes).
 */

/* ==========================================================================
   0 · FUENTE INTER (display + body) y mono system stack
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
    --font-display:
        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-text: var(--font-display);
    --font-mono:
        ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --tblr-font-sans-serif: var(--font-display);
    --tblr-font-monospace: var(--font-mono);
    --tblr-headings-font-family: var(--font-display);
}

/* ==========================================================================
   1 · BRAND TOKENS — absolutos, no cambian entre light y dark
   ========================================================================== */

:root {
    --color-brand-green: oklch(0.73 0.18 148);
    --color-brand-deep: oklch(0.16 0.04 270);
    --color-brand-teal: oklch(0.68 0.12 210);
    --color-brand-sand: oklch(0.83 0.1 55);
    --color-brand-mist: oklch(0.97 0.005 240);
    --color-glow: var(--color-brand-green);

    --color-brand-green-rgb: 38, 198, 106;
    --color-brand-teal-rgb: 0, 179, 198;
    --color-brand-sand-rgb: 255, 184, 133;
}

/* ==========================================================================
   2 · SEMANTIC TOKENS — light (default)
   ========================================================================== */

:root,
[data-bs-theme='light'] {
    --background: oklch(1 0 0);
    --foreground: oklch(0.18 0.01 270);
    --card: oklch(0.99 0.002 240);
    --card-foreground: oklch(0.18 0.01 270);
    --primary: oklch(0.18 0.01 270);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.96 0.003 240);
    --muted: oklch(0.95 0.003 240 / 0.7);
    --muted-foreground: oklch(0.5 0.012 268);
    --accent: oklch(0.95 0.003 240);
    --destructive: oklch(0.62 0.19 22);
    --border: oklch(0.18 0.01 270 / 0.1);
    --input: oklch(0.18 0.01 270 / 0.12);
    --ring: oklch(0.73 0.18 148 / 0.45);

    --grid-line: oklch(0.18 0.01 270 / 0.07);
    --grid-color-strong: oklch(0.18 0.01 270 / 0.12);

    /* Grosor de iconos (SVG slim, ver .icon-tabler). Más bajo = más fino. */
    --ti-stroke: 1.5;

    /* Charts */
    --chart-1: oklch(0.73 0.18 148);
    --chart-2: oklch(0.68 0.12 210);
    --chart-3: oklch(0.83 0.1 55);
    --chart-4: oklch(0.95 0.003 240);
    --chart-5: oklch(0.5 0.012 268);

    /* Sidebar tokens */
    --sidebar: oklch(0.97 0.003 240);
    --sidebar-foreground: oklch(0.18 0.01 270);
    --topbar: oklch(1 0 0 / 0.85);

    /* Control heights — editorial, no compactos de SaaS */
    --control-h: 2rem; /* 32px — sm/nav */
    --control-h-sm: 1.75rem; /* 28px — xs */
    --control-h-lg: 2.5rem; /* 40px — md (default forms) */
    --control-h-xl: 2.75rem; /* 44px — CTA */
    --control-h-xs: 1.5rem; /* 24px — inline */

    /* Radius — CERO site-wide */
    --radius: 0;
    --tblr-border-radius: 0;
    --tblr-border-radius-sm: 0;
    --tblr-border-radius-md: 0;
    --tblr-border-radius-lg: 0;
    --tblr-border-radius-xl: 0;
    --tblr-border-radius-xxl: 0;
    --tblr-border-radius-2xl: 0;
    --tblr-border-radius-pill: 9999px;

    /* Mapear Tabler base */
    --tblr-border-color: var(--grid-line);
    --tblr-border-color-translucent: var(--grid-line);
    --tblr-body-bg: var(--background);
    --tblr-body-color: var(--foreground);
    --tblr-bg-surface: var(--card);
    --tblr-bg-surface-secondary: var(--secondary);
    --tblr-card-bg: var(--card);
    --tblr-card-cap-bg: var(--card);
    --tblr-muted: var(--muted-foreground);
    --tblr-secondary: var(--muted-foreground);
    --tblr-primary: oklch(0.18 0.01 270);
    --tblr-primary-rgb: 11, 16, 32;
    --tblr-success: var(--color-brand-green);
    --tblr-success-rgb: var(--color-brand-green-rgb);
    --tblr-info: var(--color-brand-teal);
    --tblr-info-rgb: var(--color-brand-teal-rgb);
    --tblr-warning: var(--color-brand-sand);
    --tblr-warning-rgb: var(--color-brand-sand-rgb);
    --tblr-danger: var(--destructive);
}

/* ==========================================================================
   3 · SEMANTIC TOKENS — dark (Azul Profundo)
   ========================================================================== */

[data-bs-theme='dark'] {
    --background: oklch(0.13 0.035 268);
    --foreground: oklch(0.97 0.005 240);
    --card: oklch(0.18 0.035 268);
    --card-foreground: oklch(0.97 0.005 240);
    --primary: oklch(0.97 0.005 240);
    --primary-foreground: oklch(0.16 0.04 270);
    --secondary: oklch(0.22 0.04 268);
    --muted: oklch(0.97 0.005 240 / 0.05);
    --muted-foreground: oklch(0.78 0.012 235);
    --accent: oklch(0.22 0.04 268);
    --destructive: oklch(0.68 0.19 22);
    --border: oklch(0.97 0.005 240 / 0.1);
    --input: oklch(0.97 0.005 240 / 0.16);
    --ring: oklch(0.73 0.18 148 / 0.55);

    --grid-line: oklch(0.97 0.005 240 / 0.08);
    --grid-color-strong: oklch(0.97 0.005 240 / 0.14);

    --chart-1: oklch(0.73 0.18 148);
    --chart-2: oklch(0.68 0.12 210);
    --chart-3: oklch(0.83 0.1 55);
    --chart-4: oklch(0.97 0.005 240 / 0.2);
    --chart-5: oklch(0.78 0.012 235);

    --sidebar: oklch(0.16 0.04 270);
    --sidebar-foreground: oklch(0.97 0.005 240);
    --topbar: oklch(0.13 0.035 268 / 0.88);

    --tblr-border-color: var(--grid-line);
    --tblr-body-bg: var(--background);
    --tblr-body-color: var(--foreground);
    --tblr-bg-surface: var(--card);
    --tblr-bg-surface-secondary: var(--secondary);
    --tblr-card-bg: var(--card);
    --tblr-card-cap-bg: var(--card);
    --tblr-muted: var(--muted-foreground);
    --tblr-primary: oklch(0.97 0.005 240);
    --tblr-primary-rgb: 248, 250, 252;
}

/* ==========================================================================
   4 · BASE — body, headings, p, links
   ========================================================================== */

html,
body {
    background-color: var(--background);
    color: var(--foreground);
}

body {
    font-family: var(--font-text);
    font-weight: 400;
    font-feature-settings:
        'ss01' on,
        'cv11' on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
    line-height: 1.6;
    font-size: 0.875rem; /* 14px body baseline */
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--foreground);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

h1,
.h1 {
    font-size: 2rem;
    letter-spacing: -0.04em;
    line-height: 1.06;
}

h2,
.h2 {
    font-size: 1.625rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

h3,
.h3 {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.022em;
}

h4,
.h4 {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.018em;
}

h5,
.h5 {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.014em;
}

h6,
.h6 {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

p {
    line-height: 1.6;
    margin-bottom: 0.75rem;
    color: var(--foreground);
}

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

small,
.small {
    font-size: 0.8125rem;
    letter-spacing: 0;
}

a {
    color: var(--foreground);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--foreground);
    text-decoration: underline;
}

::selection {
    background-color: color-mix(in oklab, var(--color-brand-green) 35%, transparent);
    color: var(--foreground);
}

/* ==========================================================================
   5 · UTILS BRAND — eyebrow, tabular-nums mono, brand-grain, mesh
   ========================================================================== */

.brand-eyebrow,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background-color: var(--card);
    border: 1px solid var(--border);
    padding: 0.375rem 0.625rem;
}

.brand-eyebrow .brand-dot,
.eyebrow .brand-dot,
.brand-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--color-glow);
    animation: brand-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes brand-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

.brand-mono,
.font-mono {
    font-family: var(--font-mono) !important;
}

.tabular-nums,
.tnum {
    font-variant-numeric: tabular-nums;
}

/* Iconos slim — SVG de Tabler (sprite nostroke) inyectados por icons-slim.js dentro
   del propio <i>. El grosor se controla con --ti-stroke (un solo lugar). */
.icon-tabler {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* alinea con el texto, como la fuente de iconos */
    fill: none;
    stroke: currentColor;
    stroke-width: var(--ti-stroke, 1.5);
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* El <i> anfitrión oculta el glifo del webfont y solo muestra el SVG. */
.ti-svg-host::before {
    content: none !important;
}

/* Mesh gradients — section 9 brandsheet */

.brand-mesh {
    background:
        radial-gradient(ellipse 45% 55% at 5% 10%, var(--color-brand-teal) 0%, transparent 55%),
        radial-gradient(ellipse 65% 90% at 0% 55%, var(--color-brand-green) 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 100% 25%, var(--color-brand-sand) 0%, transparent 65%),
        radial-gradient(
            ellipse 60% 65% at 90% 100%,
            color-mix(in oklab, var(--color-brand-sand) 95%, var(--color-brand-green)) 0%,
            transparent 60%
        ),
        radial-gradient(ellipse 55% 60% at 15% 95%, var(--color-brand-teal) 0%, transparent 65%),
        radial-gradient(
            ellipse 80% 80% at 40% 50%,
            color-mix(in oklab, var(--color-brand-green) 70%, var(--color-brand-deep)) 0%,
            transparent 70%
        ),
        var(--color-brand-green);
    color: oklch(0.97 0.005 240);
}

.brand-mesh-sand {
    background:
        radial-gradient(ellipse 75% 80% at 20% 15%, var(--color-brand-sand) 0%, transparent 65%),
        radial-gradient(
            ellipse 60% 70% at 90% 85%,
            color-mix(in oklab, var(--color-brand-green) 60%, transparent) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 45% 55% at 75% 25%,
            color-mix(in oklab, var(--color-glow) 25%, transparent) 0%,
            transparent 60%
        ),
        var(--color-brand-mist);
    color: var(--foreground);
}

.brand-mesh-teal {
    background:
        radial-gradient(
            ellipse 75% 80% at 15% 80%,
            color-mix(in oklab, var(--color-brand-teal) 75%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 55% 65% at 85% 15%,
            color-mix(in oklab, var(--color-brand-green) 55%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 40% 50% at 50% 60%,
            color-mix(in oklab, var(--color-glow) 18%, transparent) 0%,
            transparent 55%
        ),
        var(--color-brand-mist);
    color: var(--foreground);
}

.brand-mesh-dawn {
    background:
        radial-gradient(
            ellipse 60% 75% at 10% 60%,
            color-mix(in oklab, var(--color-brand-sand) 80%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 55% 70% at 95% 40%,
            color-mix(in oklab, var(--color-brand-teal) 70%, transparent) 0%,
            transparent 65%
        ),
        var(--color-brand-mist);
    color: var(--foreground);
}

[data-bs-theme='dark'] .brand-mesh-sand,
[data-bs-theme='dark'] .brand-mesh-teal,
[data-bs-theme='dark'] .brand-mesh-dawn {
    color: oklch(0.97 0.005 240);
}

[data-bs-theme='dark'] .brand-mesh-sand {
    background:
        radial-gradient(
            ellipse 75% 80% at 20% 15%,
            color-mix(in oklab, var(--color-brand-sand) 50%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 60% 70% at 90% 85%,
            color-mix(in oklab, var(--color-brand-green) 45%, transparent) 0%,
            transparent 70%
        ),
        var(--card);
}

[data-bs-theme='dark'] .brand-mesh-teal {
    background:
        radial-gradient(
            ellipse 75% 80% at 15% 80%,
            color-mix(in oklab, var(--color-brand-teal) 50%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 55% 65% at 85% 15%,
            color-mix(in oklab, var(--color-brand-green) 45%, transparent) 0%,
            transparent 65%
        ),
        var(--card);
}

[data-bs-theme='dark'] .brand-mesh-dawn {
    background:
        radial-gradient(
            ellipse 60% 75% at 10% 60%,
            color-mix(in oklab, var(--color-brand-sand) 45%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 55% 70% at 95% 40%,
            color-mix(in oklab, var(--color-brand-teal) 45%, transparent) 0%,
            transparent 65%
        ),
        var(--card);
}

/* Brand-grain: noise overlay; requiere SVG filter #hoteliaGrain en root */
.brand-grain {
    position: relative;
    isolation: isolate;
}

.brand-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    filter: url('#hoteliaGrain');
    opacity: 0.08;
    mix-blend-mode: overlay;
    background: rgba(255, 255, 255, 0.4);
}

[data-bs-theme='dark'] .brand-grain::after {
    opacity: 0.12;
    mix-blend-mode: soft-light;
    background: rgba(255, 255, 255, 0.25);
}

/* Hairline section divider */
.brand-divider {
    border: 0;
    border-top: 1px solid var(--grid-color-strong);
    margin: 0;
}

.brand-hairline {
    border-color: var(--grid-line) !important;
}

/* Grid-cells pattern (architectural) */
.grid-cells {
    display: grid;
    border-top: 1px solid var(--grid-color-strong);
    border-left: 1px solid var(--grid-color-strong);
}

.grid-cells > .grid-cell {
    border-right: 1px solid var(--grid-color-strong);
    border-bottom: 1px solid var(--grid-color-strong);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .grid-cells[data-cols-md='2'] {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-cells[data-cols-md='3'] {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-cells[data-cols-md='4'] {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-cells[data-cols-md='5'] {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-cells[data-cols-md='6'] {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 992px) {
    .grid-cells[data-cols-lg='3'] {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-cells[data-cols-lg='4'] {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-cells[data-cols-lg='5'] {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================================================
   6 · BORDER-RADIUS — purge everything to zero (con excepciones)
   ========================================================================== */

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Excepciones brandsheet — primitivas que requieren círculo perfecto */
.rounded-pill,
.rounded-circle,
.avatar-rounded,
.avatar.rounded-circle,
.brand-dot,
.dot,
.status-dot,
.progress,
.progress-bar,
.form-switch .form-check-input,
.spinner-border,
.spinner-grow,
img.avatar-circle,
.avatar img.rounded-circle {
    border-radius: 9999px !important;
}

/* Avatares no-redondos: cuadrados */
.avatar:not(.avatar-rounded):not(.rounded-circle) {
    border-radius: 0 !important;
}

/* ==========================================================================
   7 · BUTTONS — primary/secondary/ghost/outline/destructive
   ========================================================================== */

.btn {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 0.875rem;
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid transparent;
    box-shadow: none;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease;
}

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

.btn:active {
    transform: translateY(0.5px);
}

/* Primary — foreground sólido (negro en light, blanco en dark) */
.btn-primary,
.btn-github,
.btn-dark {
    background-color: var(--foreground) !important;
    border-color: var(--foreground) !important;
    color: var(--background) !important;
}

.btn-primary:hover,
.btn-github:hover,
.btn-dark:hover,
.btn-primary:focus,
.btn-github:focus,
.btn-dark:focus {
    background-color: color-mix(in oklab, var(--foreground) 88%, transparent) !important;
    border-color: color-mix(in oklab, var(--foreground) 88%, transparent) !important;
    color: var(--background) !important;
    opacity: 1;
}

/* Success — Verde Hotelia */
.btn-success {
    background-color: var(--color-brand-green) !important;
    border-color: var(--color-brand-green) !important;
    color: oklch(0.16 0.04 270) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: color-mix(in oklab, var(--color-brand-green) 88%, var(--color-brand-deep)) !important;
    border-color: color-mix(in oklab, var(--color-brand-green) 88%, var(--color-brand-deep)) !important;
    color: oklch(0.16 0.04 270) !important;
}

/* Info — Teal Inteligente */
.btn-info {
    background-color: var(--color-brand-teal) !important;
    border-color: var(--color-brand-teal) !important;
    color: oklch(0.16 0.04 270) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: color-mix(in oklab, var(--color-brand-teal) 88%, var(--color-brand-deep)) !important;
    border-color: color-mix(in oklab, var(--color-brand-teal) 88%, var(--color-brand-deep)) !important;
}

/* Warning — Arena Cálida */
.btn-warning {
    background-color: var(--color-brand-sand) !important;
    border-color: var(--color-brand-sand) !important;
    color: oklch(0.16 0.04 270) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: color-mix(in oklab, var(--color-brand-sand) 88%, var(--color-brand-deep)) !important;
    border-color: color-mix(in oklab, var(--color-brand-sand) 88%, var(--color-brand-deep)) !important;
}

/* Secondary — card with hairline border */
.btn-secondary,
.btn-default {
    background-color: var(--card) !important;
    border-color: var(--grid-line) !important;
    color: var(--foreground) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-secondary:focus,
.btn-default:focus {
    background-color: var(--accent) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Destructive */
.btn-danger {
    background-color: var(--destructive) !important;
    border-color: var(--destructive) !important;
    color: oklch(1 0 0) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: color-mix(in oklab, var(--destructive) 85%, black) !important;
    border-color: color-mix(in oklab, var(--destructive) 85%, black) !important;
}

/* Outline */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-default,
.btn-primary-outlined,
.btn-github-outlined {
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-default:hover,
.btn-primary-outlined:hover,
.btn-github-outlined:hover {
    background-color: var(--accent) !important;
    border-color: var(--foreground) !important;
    color: var(--foreground) !important;
}

.btn-outline-success {
    background-color: transparent !important;
    border: 1px solid var(--color-brand-green) !important;
    color: color-mix(in oklab, var(--color-brand-green) 75%, var(--foreground)) !important;
}

.btn-outline-success:hover {
    background-color: color-mix(in oklab, var(--color-brand-green) 12%, transparent) !important;
    color: var(--foreground) !important;
}

.btn-outline-danger {
    background-color: transparent !important;
    border: 1px solid var(--destructive) !important;
    color: var(--destructive) !important;
}

.btn-outline-danger:hover {
    background-color: color-mix(in oklab, var(--destructive) 10%, transparent) !important;
}

/* Segmented toggle (btn-check) — estado seleccionado.
   Los .btn-outline-* fuerzan fondo transparente con !important, lo que anula el
   estado :checked nativo de Tabler. Lo re-aplicamos con mayor especificidad para
   que la opción activa se lea claramente (foreground sólido, estilo CTA primaria). */
.btn-check:checked + .btn,
.btn-check:checked + .btn:hover,
.btn-check:checked + .btn:focus {
    background-color: var(--foreground) !important;
    border-color: var(--foreground) !important;
    color: var(--background) !important;
}

/* Ghost — sin bg, sin border */
.btn-ghost,
.btn-ghost-secondary,
.btn-ghost-primary,
.btn-ghost-success,
.btn-ghost-warning,
.btn-ghost-danger,
.btn-ghost-info {
    background-color: transparent !important;
    border-color: transparent !important;
    color: color-mix(in oklab, var(--foreground) 75%, transparent) !important;
    box-shadow: none !important;
}

.btn-ghost:hover,
.btn-ghost-secondary:hover,
.btn-ghost-primary:hover,
.btn-ghost-success:hover,
.btn-ghost-warning:hover,
.btn-ghost-danger:hover,
.btn-ghost-info:hover {
    background-color: color-mix(in oklab, var(--foreground) 5%, transparent) !important;
    color: var(--foreground) !important;
}

/* Ghost variants colored — para estados activos toggled por JS */
.btn-ghost-success {
    color: color-mix(in oklab, var(--color-brand-green) 75%, var(--foreground)) !important;
}

.btn-ghost-success:hover {
    background-color: color-mix(in oklab, var(--color-brand-green) 10%, transparent) !important;
}

.btn-ghost-warning {
    color: color-mix(in oklab, var(--color-brand-sand) 60%, var(--foreground)) !important;
}

.btn-ghost-warning:hover {
    background-color: color-mix(in oklab, var(--color-brand-sand) 15%, transparent) !important;
}

.btn-ghost-danger {
    color: var(--destructive) !important;
}

.btn-ghost-danger:hover {
    background-color: color-mix(in oklab, var(--destructive) 10%, transparent) !important;
}

.btn-ghost-info {
    color: color-mix(in oklab, var(--color-brand-teal) 70%, var(--foreground)) !important;
}

.btn-ghost-info:hover {
    background-color: color-mix(in oklab, var(--color-brand-teal) 12%, transparent) !important;
}

/* Link */
.btn-link,
.btn.link-secondary {
    color: var(--muted-foreground) !important;
    text-decoration: none !important;
    text-underline-offset: 4px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 0.25rem;
}

.btn-link:hover,
.btn.link-secondary:hover {
    color: var(--foreground) !important;
    text-decoration: underline !important;
}

/* Sizes */
.btn-xs {
    height: var(--control-h-xs);
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.btn-sm {
    height: var(--control-h-sm);
    padding: 0 0.625rem;
    font-size: 0.75rem;
}

.btn-lg {
    height: var(--control-h-xl);
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.btn-icon {
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
}

.btn-icon.btn-xs {
    width: var(--control-h-xs);
    height: var(--control-h-xs);
}

/* bg-*-lt button variants — translucent brand tints */
.btn.bg-success-lt,
.btn.bg-green-lt {
    background-color: color-mix(in oklab, var(--color-brand-green) 14%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-green) 60%, var(--foreground)) !important;
    border: none !important;
}

.btn.bg-success-lt:hover,
.btn.bg-green-lt:hover {
    background-color: color-mix(in oklab, var(--color-brand-green) 24%, transparent) !important;
}

.btn.bg-info-lt,
.btn.bg-blue-lt {
    background-color: color-mix(in oklab, var(--color-brand-teal) 14%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-teal) 55%, var(--foreground)) !important;
    border: none !important;
}

.btn.bg-info-lt:hover,
.btn.bg-blue-lt:hover {
    background-color: color-mix(in oklab, var(--color-brand-teal) 24%, transparent) !important;
}

.btn.bg-warning-lt,
.btn.bg-orange-lt,
.btn.bg-yellow-lt {
    background-color: color-mix(in oklab, var(--color-brand-sand) 24%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-sand) 50%, var(--foreground)) !important;
    border: none !important;
}

.btn.bg-purple-lt {
    background-color: color-mix(in oklab, var(--color-brand-teal) 18%, transparent) !important;
    color: var(--foreground) !important;
    border: none !important;
}

/* ==========================================================================
   8 · CARDS
   ========================================================================== */

.card {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--foreground) 4%, transparent);
    overflow: visible;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--grid-line);
    padding: 0.875rem 1.125rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--foreground);
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--grid-line);
    padding: 0.75rem 1.125rem;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    letter-spacing: -0.018em;
    margin-bottom: 0.25rem;
    color: var(--foreground);
}

.card-subtitle,
.card-text {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.card-body {
    padding: 1.125rem;
}

[data-bs-theme='dark'] .card {
    box-shadow: none;
}

/* Premium card with mesh (use brand-mesh-* + brand-grain manually) */
.card-premium {
    box-shadow:
        0 24px 50px -22px rgba(0, 0, 0, 0.12),
        0 8px 20px -10px rgba(0, 0, 0, 0.06);
}

[data-bs-theme='dark'] .card-premium {
    box-shadow:
        0 24px 50px -22px rgba(0, 0, 0, 0.45),
        0 8px 20px -10px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   9 · FORM CONTROLS
   ========================================================================== */

.form-control,
.form-select {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 0.875rem;
    padding: 0 0.75rem !important;
    height: var(--control-h); /* match button height globally */
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

/* Input con icono — deja espacio para el addon (Tabler .input-icon) */
.input-icon {
    position: relative;
}

.input-icon > .form-control,
.input-icon .form-control {
    padding-right: 2.25rem !important;
}

.input-icon.input-icon-start > .form-control,
.input-icon > .input-icon-addon:first-child ~ .form-control {
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
}

.input-icon-addon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    pointer-events: none;
    color: var(--muted-foreground);
    z-index: 4;
}

.input-icon.input-icon-start > .input-icon-addon,
.input-icon > .input-icon-addon:first-child {
    right: auto;
    left: 0;
}

textarea.form-control {
    min-height: 4rem;
    height: auto;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.55;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
    box-shadow: 0 0 0 3px var(--ring);
    background-color: var(--card);
    color: var(--foreground);
}

.form-control::placeholder {
    color: var(--muted-foreground);
}

.form-control-sm,
.form-select-sm {
    height: var(--control-h);
    font-size: 0.8125rem;
    padding: 0 0.625rem !important;
}

.form-control-lg,
.form-select-lg {
    height: var(--control-h-xl);
    font-size: 0.9375rem;
    padding: 0 1rem !important;
}

.form-label,
label {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--foreground);
    margin-bottom: 0.375rem;
}

.form-hint {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Eyebrow-style label option */
.form-label-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

/* Input group */
.input-group-text {
    background-color: var(--secondary);
    border: 1px solid var(--grid-line);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    height: var(--control-h);
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
}

.input-group .form-control,
.input-group .form-select,
.input-group .btn {
    height: var(--control-h);
}

.input-group-sm > * {
    height: var(--control-h) !important;
}

.input-group-lg > * {
    height: var(--control-h-xl) !important;
}

/* Checkbox/radio */
.form-check-input {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    border: 1px solid var(--foreground);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
    margin-top: 0.2rem;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--ring);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--foreground);
    border-color: var(--foreground);
}

[data-bs-theme='dark'] .form-check-input {
    border-color: color-mix(in oklab, var(--foreground) 35%, transparent);
}

[data-bs-theme='dark'] .form-check-input:checked {
    background-color: var(--foreground);
    border-color: var(--foreground);
}

[data-bs-theme='dark'] .form-check-input:checked[type='checkbox'] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%230B1020' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}

[data-bs-theme='dark'] .form-check-input:checked[type='radio'] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%230B1020' cx='8' cy='8' /%3e%3c/svg%3e");
}

/* Switch — sólo affordance circular */
.form-switch .form-check-input {
    border: none;
    background-color: color-mix(in oklab, var(--foreground) 22%, transparent);
}

.form-switch .form-check-input:checked {
    background-color: var(--color-brand-green);
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--foreground);
}

/* ==========================================================================
   10 · BADGES — pills minimal
   ========================================================================== */

.badge {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 9999px !important;
    border: 1px solid transparent;
}

.badge.bg-primary {
    background-color: var(--foreground) !important;
    color: var(--background) !important;
}

.badge.bg-success {
    background-color: var(--color-brand-green) !important;
    color: oklch(0.16 0.04 270) !important;
}

.badge.bg-info {
    background-color: var(--color-brand-teal) !important;
    color: oklch(0.16 0.04 270) !important;
}

.badge.bg-warning {
    background-color: var(--color-brand-sand) !important;
    color: oklch(0.16 0.04 270) !important;
}

.badge.bg-danger {
    background-color: var(--destructive) !important;
    color: oklch(1 0 0) !important;
}

/* Soft variants */
.badge.bg-success-lt,
.badge.bg-green-lt {
    background-color: color-mix(in oklab, var(--color-brand-green) 14%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-green) 70%, var(--foreground)) !important;
    border-color: color-mix(in oklab, var(--color-brand-green) 25%, transparent);
}

.badge.bg-info-lt,
.badge.bg-blue-lt {
    background-color: color-mix(in oklab, var(--color-brand-teal) 14%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-teal) 65%, var(--foreground)) !important;
    border-color: color-mix(in oklab, var(--color-brand-teal) 25%, transparent);
}

.badge.bg-warning-lt,
.badge.bg-orange-lt,
.badge.bg-yellow-lt {
    background-color: color-mix(in oklab, var(--color-brand-sand) 22%, transparent) !important;
    color: color-mix(in oklab, var(--color-brand-sand) 55%, var(--foreground)) !important;
    border-color: color-mix(in oklab, var(--color-brand-sand) 35%, transparent);
}

.badge.bg-danger-lt,
.badge.bg-red-lt {
    background-color: color-mix(in oklab, var(--destructive) 12%, transparent) !important;
    color: var(--destructive) !important;
    border-color: color-mix(in oklab, var(--destructive) 25%, transparent);
}

.badge.bg-primary-lt {
    background-color: var(--secondary) !important;
    color: var(--foreground) !important;
    border-color: var(--border);
}

.badge.bg-secondary-lt {
    background-color: var(--secondary) !important;
    color: var(--muted-foreground) !important;
    border-color: var(--border);
}

/* ==========================================================================
   11 · DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    box-shadow:
        0 6px 16px -8px rgba(0, 0, 0, 0.12),
        0 2px 4px -2px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    font-size: 0.8125rem;
    color: var(--foreground);
    animation: hotelia-fade-in 0.12s ease-out;
}

@keyframes hotelia-fade-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--foreground);
    transition: background-color 0.1s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
    color: var(--foreground);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
    color: var(--foreground);
}

.dropdown-divider {
    border-color: var(--grid-line);
    margin: 0.25rem 0;
}

[data-bs-theme='dark'] .dropdown-menu {
    box-shadow:
        0 6px 16px -6px rgba(0, 0, 0, 0.45),
        0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   12 · MODALS
   ========================================================================== */

.modal-content {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    box-shadow:
        0 24px 50px -22px rgba(0, 0, 0, 0.18),
        0 8px 20px -10px rgba(0, 0, 0, 0.08);
}

.modal-header {
    background-color: transparent;
    border-bottom: 1px solid var(--grid-line);
    padding: 1rem 1.25rem;
}

.modal-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    letter-spacing: -0.018em;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    background-color: transparent;
    border-top: 1px solid var(--grid-line);
    padding: 0.875rem 1.25rem;
    gap: 0.625rem;
}

.modal-footer > * {
    margin: 0;
}

.modal-backdrop.show {
    opacity: 0.55;
    background-color: oklch(0.16 0.04 270);
}

/* ==========================================================================
   13 · TABLES
   ========================================================================== */

.table {
    font-size: 0.875rem;
    color: var(--foreground);
    --tblr-table-bg: transparent;
    --tblr-table-border-color: var(--grid-line);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--grid-line);
    padding: 0.625rem 0.75rem;
    background-color: transparent;
    color: var(--foreground);
}

.table thead th {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    background-color: transparent;
    border-bottom: 1px solid var(--grid-line);
    padding: 0.625rem 0.75rem;
}

.table-hover > tbody > tr:hover > * {
    background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
}

.card > .table-bordered,
.card > .card-body > .table-bordered {
    border: 0;
}

.card > .table-bordered > :not(caption) > *:last-child > * {
    border-bottom: 0;
}

/* DataTables polish */
.dataTables_wrapper {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.dataTables_filter input,
.dataTables_length select {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    color: var(--foreground);
    font-size: 0.8125rem;
    height: var(--control-h);
    padding: 0 0.5rem;
}

.dataTables_info {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* ==========================================================================
   14 · ALERTS
   ========================================================================== */

.alert {
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.alert-primary {
    background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    border-color: color-mix(in oklab, var(--foreground) 15%, transparent);
}

.alert-success {
    background-color: color-mix(in oklab, var(--color-brand-green) 10%, transparent);
    border-color: color-mix(in oklab, var(--color-brand-green) 28%, transparent);
}

.alert-info {
    background-color: color-mix(in oklab, var(--color-brand-teal) 10%, transparent);
    border-color: color-mix(in oklab, var(--color-brand-teal) 28%, transparent);
}

.alert-warning {
    background-color: color-mix(in oklab, var(--color-brand-sand) 18%, transparent);
    border-color: color-mix(in oklab, var(--color-brand-sand) 38%, transparent);
}

.alert-danger {
    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    color: var(--destructive);
}

/* ==========================================================================
   15 · TABS
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--grid-line);
}

.nav-tabs .nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.625rem 0.875rem;
    background-color: transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--foreground);
    border-bottom-color: color-mix(in oklab, var(--foreground) 15%, transparent);
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--foreground);
    border-bottom-color: var(--foreground);
    background-color: transparent;
}

.card-header-tabs .nav-link.active {
    border-bottom-color: var(--foreground) !important;
}

/* ==========================================================================
   16 · PAGINATION
   ========================================================================== */

.page-link {
    background-color: transparent;
    border: 1px solid var(--grid-line);
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 0.75rem;
    height: var(--control-h);
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
}

.page-link:hover {
    background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
    border-color: var(--grid-line);
    color: var(--foreground);
}

.page-item.active .page-link,
.active > .page-link {
    background-color: var(--foreground);
    border-color: var(--foreground);
    color: var(--background);
}

/* ==========================================================================
   17 · PROGRESS
   ========================================================================== */

.progress {
    background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    height: 0.375rem;
}

.progress-bar {
    background-color: var(--color-brand-green);
}

/* ==========================================================================
   18 · LIST GROUPS
   ========================================================================== */

.list-group {
    border: 1px solid var(--grid-line);
    background-color: var(--card);
}

.list-group-item {
    background-color: transparent;
    border-color: var(--grid-line);
    color: var(--foreground);
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
}

.list-group-item:hover {
    background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
}

/* ==========================================================================
   19 · ACCORDION
   ========================================================================== */

.accordion-item {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
}

.accordion-item:not(:first-of-type) {
    border-top: 0;
}

.accordion-button {
    background-color: transparent;
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--foreground);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--grid-line);
}

.accordion-body {
    padding: 0.75rem 1rem 1rem;
}

/* ==========================================================================
   20 · TOAST + TOASTR + OFFCANVAS + POPOVER + TOOLTIP
   ========================================================================== */

.toast {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    color: var(--foreground);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.12);
}

#toast-container > div {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.12) !important;
    background-color: var(--card) !important;
    border: 1px solid var(--grid-line) !important;
    color: var(--foreground) !important;
}

#toast-container .toast-header,
#toast-container .toast-body {
    background-color: transparent !important;
    color: var(--foreground) !important;
}

#toast-container .toast-progress {
    background-color: var(--color-brand-green) !important;
    opacity: 0.35 !important;
}

.offcanvas {
    background-color: var(--card);
    color: var(--foreground);
    border-color: var(--grid-line) !important;
}

.popover {
    background-color: var(--card);
    border: 1px solid var(--grid-line);
    box-shadow:
        0 6px 16px -8px rgba(0, 0, 0, 0.18),
        0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

.popover-header {
    background-color: transparent;
    border-bottom: 1px solid var(--grid-line);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.popover-body {
    color: var(--foreground);
    font-size: 0.8125rem;
    padding: 0.625rem 0.75rem;
}

.tooltip-inner {
    background-color: var(--foreground);
    color: var(--background);
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    font-family: var(--font-display);
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before {
    border-top-color: var(--foreground);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before {
    border-bottom-color: var(--foreground);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before {
    border-left-color: var(--foreground);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before {
    border-right-color: var(--foreground);
}

/* ==========================================================================
   21 · BREADCRUMB / RIBBON / PAGE
   ========================================================================== */

.breadcrumb {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.breadcrumb-item a {
    color: var(--foreground);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted-foreground);
}

.page-pretitle {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-foreground);
    font-weight: 500;
}

.page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.625rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--foreground);
}

/* Editorial page header — h2 compacto para vistas internas del SaaS.
   El estándar del sistema: una sola línea, 1.25rem, weight 400 (igual que .page-title del Inicio). */
.page-h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.022em;
    line-height: 1.25;
    color: var(--foreground);
    margin-bottom: 0;
}

.empty-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--foreground);
}

.empty-subtitle {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* ==========================================================================
   22 · SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--foreground) 14%, transparent);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--foreground) 28%, transparent);
}

/* ==========================================================================
   23 · HR + SEPARATOR + CLOSE BUTTON
   ========================================================================== */

hr,
.dropdown-divider {
    border: 0;
    border-top: 1px solid var(--grid-line);
    opacity: 1;
    margin: 0.75rem 0;
}

.btn-close {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.btn-close:hover {
    opacity: 1;
}

/* ==========================================================================
   24 · TOM SELECT (override completo)
   ========================================================================== */

.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-control,
.ts-wrapper.form-select {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ts-control,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control {
    background-color: var(--card) !important;
    border: 1px solid var(--grid-line) !important;
    color: var(--foreground) !important;
    font-family: var(--font-display) !important;
    font-size: 0.875rem !important;
    padding: 0 0.75rem !important;
    height: var(--control-h) !important;
    min-height: var(--control-h) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

.ts-wrapper.multi .ts-control {
    max-height: none !important;
    flex-wrap: wrap !important;
    min-height: var(--control-h) !important;
    height: auto !important;
}

.ts-control input {
    background: transparent !important;
    color: var(--foreground) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
}

.ts-control input::placeholder {
    color: var(--muted-foreground) !important;
}

.ts-wrapper.multi .ts-control > div {
    background-color: color-mix(in oklab, var(--foreground) 6%, transparent) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--grid-line) !important;
    padding: 0 0.375rem !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.3rem !important;
    height: 1.4rem !important;
}

.ts-wrapper.focus .ts-control,
.ts-control:focus-within {
    border-color: color-mix(in oklab, var(--foreground) 40%, transparent) !important;
    box-shadow: 0 0 0 3px var(--ring) !important;
}

.ts-dropdown {
    background-color: var(--card) !important;
    border: 1px solid var(--grid-line) !important;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.12) !important;
    padding: 0.25rem !important;
    color: var(--foreground) !important;
    font-family: var(--font-display) !important;
}

.ts-dropdown .option {
    font-size: 0.8125rem !important;
    padding: 0.4375rem 0.5rem !important;
    color: var(--foreground) !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: color-mix(in oklab, var(--foreground) 5%, transparent) !important;
    color: var(--foreground) !important;
}

.ts-dropdown .selected {
    background-color: color-mix(in oklab, var(--color-brand-green) 12%, transparent) !important;
}

/* ==========================================================================
   25 · FLATPICKR
   ========================================================================== */

.flatpickr-calendar {
    background-color: var(--card);
    border: 1px solid var(--grid-line) !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.18);
    font-family: var(--font-display);
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-current-month {
    background-color: transparent !important;
    color: var(--foreground);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background-color: transparent !important;
    color: var(--foreground) !important;
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
}

.flatpickr-weekday {
    color: var(--muted-foreground) !important;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.flatpickr-day {
    color: var(--foreground);
    font-size: 0.8125rem;
}

.flatpickr-day:hover {
    background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: var(--foreground) !important;
    border-color: var(--foreground) !important;
    color: var(--background) !important;
}

.flatpickr-day.inRange {
    background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
    border-color: transparent;
    box-shadow: none;
    color: var(--foreground);
}

.flatpickr-day.today {
    border-color: color-mix(in oklab, var(--color-brand-green) 60%, transparent);
}

/* ==========================================================================
   26 · NAVBAR / NAV LINKS — base
   ========================================================================== */

.navbar {
    background-color: var(--background);
    border-color: var(--grid-line);
    color: var(--foreground);
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--foreground);
}

.nav-link {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    color: color-mix(in oklab, var(--foreground) 75%, transparent);
    padding: 0.375rem 0.625rem;
    transition: color 0.12s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--foreground);
}

.navbar-vertical .nav-link {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.625rem;
}

/* current marker — usado por main.ejs JS */
.nav-link.current {
    color: var(--background) !important;
}

.nav-link.current::before {
    content: '';
    position: absolute;
    inset: 0.05rem 0.5rem;
    background: var(--foreground);
    z-index: 0;
}

.current * {
    color: var(--background) !important;
}

[data-bs-theme='dark'] .nav-link.current::before {
    background: color-mix(in oklab, var(--color-brand-green) 80%, var(--foreground));
}

[data-bs-theme='dark'] .current *,
[data-bs-theme='dark'] .nav-link.current {
    color: oklch(0.16 0.04 270) !important;
}

.nav-link > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   27 · SIDEBAR / PRE-SIDEBAR / TOP-BAR (overrides para main.ejs)
   ========================================================================== */

.pre-sidebar {
    background-color: var(--sidebar) !important;
    border-right: 1px solid var(--grid-line) !important;
}

.pre-sidebar-btn {
    color: var(--foreground) !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.pre-sidebar-btn:hover {
    background: color-mix(in oklab, var(--color-brand-green) 12%, transparent) !important;
    color: var(--foreground) !important;
}

.pre-sidebar-btn.active {
    background: var(--foreground) !important;
    color: var(--background) !important;
}

[data-bs-theme='dark'] .pre-sidebar-btn.active {
    background: var(--color-brand-green) !important;
    color: oklch(0.16 0.04 270) !important;
}

.fixed-top-bar {
    background-color: var(--topbar) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--grid-color-strong) !important;
}

.main-sidebar {
    background-color: var(--sidebar) !important;
    border-right: 1px solid var(--grid-line) !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

/* Tabler .navbar-vertical aplica sus propios borders y shadow — los anulamos
   para que solo el .main-sidebar aporte el hairline derecho. */
.navbar-vertical.main-sidebar,
.navbar-vertical.main-sidebar::after,
.navbar-vertical.main-sidebar::before {
    box-shadow: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Logo Cloudbeds — invertir cuando está sobre fondo oscuro
   (sidebar item active con .current, pre-sidebar btn active, dark mode global).
   El SVG default es café #261C0A que se pierde sobre el foreground (negro) del active state. */
.nav-link.current .cloudbeds-logo,
.current .cloudbeds-logo,
.pre-sidebar-btn.active .cloudbeds-logo,
.btn-primary .cloudbeds-logo,
.bg-foreground .cloudbeds-logo {
    filter: invert(1) brightness(2.2) grayscale(1);
}

/* En dark mode el mismo logo necesita invertirse para leerse sobre Azul Profundo */
[data-bs-theme='dark'] .cloudbeds-logo {
    filter: invert(1) grayscale(1) brightness(1.8);
}

/* Pero si en dark mode el logo está dentro de un item NO activo, queremos light tone
   (ya lo cubre la regla anterior). Y si está dentro de un item activo en dark mode,
   el active state es brand-green (sobre el cual el SVG light se vería raro). Lo
   forzamos a deep navy para contraste cálido sobre verde. */
[data-bs-theme='dark'] .nav-link.current .cloudbeds-logo,
[data-bs-theme='dark'] .current .cloudbeds-logo,
[data-bs-theme='dark'] .pre-sidebar-btn.active .cloudbeds-logo {
    filter: brightness(0.3);
}

/* Logos brand img genéricos en active state — adaptación para WhatsApp/Stripe
   (sus colores oficiales pueden quedar invisibles sobre fondo dark o brand-green).
   Aplica a cualquier <img> dentro de un nav-link active que apunte a /public/static/brands/. */
.nav-link.current img[src*='/static/brands/'],
.current img[src*='/static/brands/'],
.pre-sidebar-btn.active img[src*='/static/brands/'] {
    filter: brightness(0) invert(1);
}

[data-bs-theme='dark'] .nav-link.current img[src*='/static/brands/'],
[data-bs-theme='dark'] .current img[src*='/static/brands/'],
[data-bs-theme='dark'] .pre-sidebar-btn.active img[src*='/static/brands/'] {
    filter: brightness(0.3);
}

/* Oracle Opera (rojo): legible en ambos modos sin filtro. Al estar activo en dark
   mode lo pasamos a blanco (el brightness(0.3) genérico lo dejaría rojo oscuro
   sobre el verde del active state). En light-active ya queda blanco por la genérica. */
[data-bs-theme='dark'] .nav-link.current img.oracle-logo,
[data-bs-theme='dark'] .current img.oracle-logo,
[data-bs-theme='dark'] .pre-sidebar-btn.active img.oracle-logo {
    filter: brightness(0) invert(1);
}

.pre-sidebar-hover-panel {
    background: var(--card) !important;
    border: 1px solid var(--grid-line) !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.18) !important;
    border-radius: 0 !important;
}

.hover-panel-header,
.hover-panel-group {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-foreground);
    padding: 0.3rem 0.625rem;
}

/* Título del panel: un poco más presente y con aire debajo, separado de los grupos. */
.hover-panel-header {
    color: color-mix(in oklab, var(--foreground) 60%, transparent);
    padding-bottom: 0.45rem;
}

/* Subtítulos de grupo: respiro extra arriba para despegarlos del bloque anterior. */
.hover-panel-group {
    margin-top: 0.4rem;
}

.hover-panel-link {
    color: var(--foreground) !important;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    border-radius: 0 !important;
}

.hover-panel-link:hover {
    background: color-mix(in oklab, var(--foreground) 5%, transparent) !important;
    color: var(--foreground) !important;
}

[data-bs-theme='dark'] .hover-panel-link:hover {
    background: color-mix(in oklab, var(--foreground) 8%, transparent) !important;
}

.hover-panel-divider {
    height: 1px;
    background: var(--grid-line);
    margin: 0.25rem 0.625rem;
}

/* ==========================================================================
   28 · STATUS DOT + CHIP UTILITIES
   ========================================================================== */

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--grid-line);
    background-color: var(--card);
    color: color-mix(in oklab, var(--foreground) 75%, transparent);
}

.status-chip-success {
    background-color: color-mix(in oklab, var(--color-brand-green) 12%, var(--card));
}

.status-chip-info {
    background-color: color-mix(in oklab, var(--color-brand-teal) 12%, var(--card));
}

.status-chip-warning {
    background-color: color-mix(in oklab, var(--color-brand-sand) 18%, var(--card));
}

.status-chip-danger {
    background-color: color-mix(in oklab, var(--destructive) 10%, var(--card));
    color: var(--destructive);
}

/* Badge "Pronto" para items de sidebar (próximamente). Autocontenido para
   mantener contraste tanto en estado normal como seleccionado (.current fuerza
   color: var(--background) en todos los descendientes). */
.nav-soon {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--grid-line);
    background-color: color-mix(in oklab, var(--color-brand-teal) 14%, var(--card));
    color: color-mix(in oklab, var(--foreground) 78%, transparent);
}

/* Anula el override blanco de .current * para que el chip siga legible al estar
   seleccionado (fondo claro propio + texto oscuro). */
.nav-link.current .nav-soon,
[data-bs-theme='dark'] .nav-link.current .nav-soon {
    background-color: var(--card) !important;
    color: color-mix(in oklab, var(--foreground) 78%, transparent) !important;
}

/* ==========================================================================
   29 · KPI helpers (números grandes editorial)
   ========================================================================== */

.kpi-number {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}

.kpi-currency {
    font-family: var(--font-display);
    font-weight: 300;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
}

.kpi-unit {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-foreground);
}

.kpi-delta-up {
    color: color-mix(in oklab, var(--color-brand-green) 70%, var(--foreground));
    font-size: 0.75rem;
    font-weight: 500;
}

.kpi-delta-down {
    color: var(--destructive);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ==========================================================================
   30 · MISC — text colors, dropdown caret, focus, page wrappers
   ========================================================================== */

.text-primary,
.text-brand {
    color: color-mix(in oklab, var(--color-brand-green) 70%, var(--foreground)) !important;
}

.text-success,
.text-green,
.text-lime {
    color: color-mix(in oklab, var(--color-brand-green) 70%, var(--foreground)) !important;
}

.text-info,
.text-cyan,
.text-blue,
.text-azure,
.text-indigo,
.text-teal {
    color: color-mix(in oklab, var(--color-brand-teal) 65%, var(--foreground)) !important;
}

.text-warning,
.text-yellow,
.text-orange {
    color: color-mix(in oklab, var(--color-brand-sand) 55%, var(--foreground)) !important;
}

.text-danger,
.text-red,
.text-pink {
    color: var(--destructive) !important;
}

.text-purple,
.text-violet {
    color: color-mix(in oklab, var(--color-brand-teal) 50%, var(--foreground)) !important;
}

/* bg-*-lt standalone (avatars, banners, ribbon backgrounds) → brand-mapped pastels */
.bg-primary-lt {
    background-color: color-mix(in oklab, var(--foreground) 6%, transparent) !important;
}

.bg-success-lt,
.bg-green-lt,
.bg-lime-lt {
    background-color: color-mix(in oklab, var(--color-brand-green) 12%, transparent) !important;
}

.bg-info-lt,
.bg-cyan-lt,
.bg-blue-lt,
.bg-azure-lt,
.bg-indigo-lt,
.bg-teal-lt {
    background-color: color-mix(in oklab, var(--color-brand-teal) 12%, transparent) !important;
}

.bg-warning-lt,
.bg-yellow-lt,
.bg-orange-lt {
    background-color: color-mix(in oklab, var(--color-brand-sand) 18%, transparent) !important;
}

.bg-danger-lt,
.bg-red-lt,
.bg-pink-lt {
    background-color: color-mix(in oklab, var(--destructive) 10%, transparent) !important;
}

.bg-purple-lt,
.bg-violet-lt {
    background-color: color-mix(in oklab, var(--color-brand-teal) 14%, transparent) !important;
}

.bg-card {
    background-color: var(--card) !important;
}

.bg-sidebar {
    background-color: var(--sidebar) !important;
}

.bg-muted {
    background-color: var(--secondary) !important;
}

/* page-wrapper / page */
.page-wrapper {
    background-color: var(--background);
    min-height: 100vh;
}

.page-header {
    margin-bottom: 1rem;
}

.page-body {
    padding-top: 0;
}

/* row gutters editorial */
.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Skeleton */
.placeholder,
.skeleton-line {
    background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    animation: hotelia-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.placeholder:not(.btn):not([class*='bg-']) {
    background-color: color-mix(in oklab, var(--foreground) 8%, transparent) !important;
    color: color-mix(in oklab, var(--foreground) 8%, transparent) !important;
}

@keyframes hotelia-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Tabler icons baseline */
.ti {
    font-size: 1.05em;
    stroke-width: 1.5;
}

/* ==========================================================================
   31 · REDUCED MOTION
   ========================================================================== */

@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;
    }

    .brand-dot {
        animation: none;
    }
}