/* ═══════════════════════════════════════════════════════════════════
   FLUX Restaurant — capa de marca del design system (claude.ai/design)
   Tokens + overrides de Bootstrap. Se carga DESPUÉS de bootstrap y
   ANTES del CSS específico de cada módulo (piso, kiosko, cocina…),
   que consume estos tokens.
   ═══════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap");

:root {
    /* ── Tinta (superficies oscuras) ── */
    --flux-ink-900: #0B0D12;
    --flux-ink-800: #101520;
    --flux-ink-700: #151A22;
    --flux-ink-600: #1C222D;
    --flux-ink-500: #2A303C;
    --flux-ink-400: #3A4250;
    --flux-ink-300: #5A6473;

    /* ── Neutros (superficies claras) ── */
    --flux-gray-050: #FFFFFF;
    --flux-gray-100: #F5F7FA;
    --flux-gray-200: #EDF0F5;
    --flux-gray-300: #E2E6ED;
    --flux-gray-400: #C7CDD8;
    --flux-gray-500: #98A1B0;
    --flux-gray-600: #6B7482;
    --flux-gray-700: #4A5261;

    /* ── Lima de marca ── */
    --flux-lime-500: #B8F23A;
    --flux-lime-600: #A5DE28;
    --flux-lime-700: #8CC114;
    --flux-lime-400: #C9F663;
    --flux-lime-300: #DDFA9C;
    --flux-lime-100: #F0FDD4;
    --flux-lime-a12: rgba(184,242,58,.12);
    --flux-lime-a24: rgba(184,242,58,.24);
    --flux-lime-a40: rgba(184,242,58,.40);

    /* ── Estado ── */
    --flux-success: #3FBF4F;
    --flux-success-soft: #E8F8EA;
    --flux-danger: #EF4444;
    --flux-danger-soft: #FDECEC;
    --flux-warning: #F5A623;
    --flux-warning-soft: #FEF4E2;
    --flux-info: #3B82F6;
    --flux-info-soft: #EAF1FE;

    /* ── Tipografía ── */
    --font-sans: "Inter", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    --tracking-eyebrow: .10em;
    --tracking-tight: -.02em;

    /* ── Forma y elevación ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(11,13,18,.04), 0 1px 3px rgba(11,13,18,.06);
    --shadow-card-hover: 0 2px 4px rgba(11,13,18,.05), 0 6px 16px rgba(11,13,18,.08);
    --shadow-pop: 0 8px 24px rgba(11,13,18,.12), 0 2px 6px rgba(11,13,18,.08);
    --focus-ring: var(--flux-lime-a40);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    background-color: var(--flux-gray-100);
    color: var(--flux-ink-700);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--flux-ink-900);
}
h1, .h3 { letter-spacing: var(--tracking-tight); }
.text-muted { color: var(--flux-gray-600) !important; }
.font-monospace { font-family: var(--font-mono) !important; }

/* ── Navbar del shell (tinta) ─────────────────────────────────────── */
.navbar-flux {
    background-color: var(--flux-ink-900) !important;
    border-bottom: 1px solid var(--flux-ink-500);
}
.navbar-flux .nav-link.active,
.navbar-flux .nav-link:hover { color: var(--flux-lime-500) !important; }
.navbar-flux .dropdown-menu {
    border-radius: var(--radius-lg);
    border: 1px solid var(--flux-gray-300);
    box-shadow: var(--shadow-pop);
}
.navbar-flux .btn-outline-light {
    border-color: var(--flux-ink-400);
    border-radius: var(--radius-md);
}
.navbar-flux .btn-outline-light:hover,
.navbar-flux .btn-outline-light:active {
    background: var(--flux-ink-600);
    border-color: var(--flux-ink-300);
    color: #fff;
}

/* ── Botones ──────────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-md); font-weight: 600; }

/* Acción primaria de la marca: lima con tinta encima. */
.btn-success {
    --bs-btn-bg: var(--flux-lime-500);
    --bs-btn-border-color: var(--flux-lime-500);
    --bs-btn-color: var(--flux-ink-900);
    --bs-btn-hover-bg: var(--flux-lime-600);
    --bs-btn-hover-border-color: var(--flux-lime-600);
    --bs-btn-hover-color: var(--flux-ink-900);
    --bs-btn-active-bg: var(--flux-lime-600);
    --bs-btn-active-border-color: var(--flux-lime-600);
    --bs-btn-active-color: var(--flux-ink-900);
    --bs-btn-disabled-bg: var(--flux-lime-300);
    --bs-btn-disabled-border-color: var(--flux-lime-300);
    --bs-btn-disabled-color: var(--flux-gray-600);
}
/* Acción secundaria: tinta. */
.btn-primary {
    --bs-btn-bg: var(--flux-ink-700);
    --bs-btn-border-color: var(--flux-ink-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--flux-ink-600);
    --bs-btn-hover-border-color: var(--flux-ink-400);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--flux-ink-600);
    --bs-btn-active-border-color: var(--flux-ink-400);
    --bs-btn-active-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: var(--flux-lime-700);
    --bs-btn-border-color: var(--flux-lime-600);
    --bs-btn-hover-bg: var(--flux-lime-100);
    --bs-btn-hover-border-color: var(--flux-lime-600);
    --bs-btn-hover-color: var(--flux-ink-900);
    --bs-btn-active-bg: var(--flux-lime-100);
    --bs-btn-active-border-color: var(--flux-lime-600);
    --bs-btn-active-color: var(--flux-ink-900);
}
.btn-outline-primary {
    --bs-btn-color: var(--flux-ink-700);
    --bs-btn-border-color: var(--flux-gray-400);
    --bs-btn-hover-bg: var(--flux-ink-700);
    --bs-btn-hover-border-color: var(--flux-ink-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--flux-ink-700);
    --bs-btn-active-border-color: var(--flux-ink-700);
    --bs-btn-active-color: #fff;
}
.btn-outline-secondary { --bs-btn-border-color: var(--flux-gray-400); }
.btn-warning {
    --bs-btn-bg: var(--flux-warning);
    --bs-btn-border-color: var(--flux-warning);
}
.btn-danger {
    --bs-btn-bg: var(--flux-danger);
    --bs-btn-border-color: var(--flux-danger);
}

/* ── Badges y chips ───────────────────────────────────────────────── */
.badge { border-radius: var(--radius-sm); font-weight: 600; }
.badge.bg-success { background-color: var(--flux-lime-500) !important; color: var(--flux-ink-900); }
.badge.bg-primary { background-color: var(--flux-ink-700) !important; }
.badge.bg-danger { background-color: var(--flux-danger) !important; }
.badge.bg-warning { background-color: var(--flux-warning) !important; }
.badge.bg-info { background-color: var(--flux-info-soft) !important; color: var(--flux-info) !important; }
.badge.bg-secondary { background-color: var(--flux-gray-200) !important; color: var(--flux-gray-700) !important; }
.badge.bg-dark { background-color: var(--flux-ink-900) !important; }
.badge.bg-light { background-color: var(--flux-gray-100) !important; }

/* ── Tarjetas ─────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--flux-gray-300);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    background: var(--flux-gray-050);
}
.card.border-success { border-color: var(--flux-lime-600) !important; }
.card.border-primary { border-color: var(--flux-ink-500) !important; }
.card.border-warning { border-color: var(--flux-warning) !important; }

/* ── Tablas ───────────────────────────────────────────────────────── */
.table { --bs-table-hover-bg: var(--flux-gray-100); }
.table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--flux-gray-600);
    font-weight: 600;
    border-bottom: 1px solid var(--flux-gray-300);
}
.table > :not(caption) > * > * { border-bottom-color: var(--flux-gray-200); }
.table-light { --bs-table-bg: var(--flux-gray-100); }

/* ── Formularios ──────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border-color: var(--flux-gray-400);
    color: var(--flux-ink-700);
}
.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--flux-lime-600);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-check-input:checked {
    background-color: var(--flux-lime-500);
    border-color: var(--flux-lime-600);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--flux-lime-600); }
.form-label { font-weight: 500; color: var(--flux-ink-700); }

/* ── Alertas ──────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-lg); }
.alert-success { background: var(--flux-lime-100); border-color: var(--flux-lime-300); color: var(--flux-ink-700); }
.alert-danger { background: var(--flux-danger-soft); border-color: #F5B5B5; color: #7A1F1F; }
.alert-warning { background: var(--flux-warning-soft); border-color: #F2D9A6; color: #6B4A0E; }
.alert-info { background: var(--flux-info-soft); border-color: #BBD3F8; color: #1D4E9E; }

/* ── Migas, dropdowns y detalles ──────────────────────────────────── */
.breadcrumb-item a { color: var(--flux-lime-700); }
.dropdown-menu { border-radius: var(--radius-lg); border-color: var(--flux-gray-300); box-shadow: var(--shadow-pop); }
.dropdown-item.active, .dropdown-item:active { background: var(--flux-ink-900); }
.text-success { color: var(--flux-lime-700) !important; }

/* ── Navbar en resoluciones no-escritorio ─────────────────────────────
   Debajo del corte lg el menú se apila; los controles de la derecha
   (sucursal, modo, salir) bajan al FINAL del menú a lo ancho, para que
   la composición quede equilibrada en tableta y móvil. ── */
@media (max-width: 991.98px) {
    .navbar-flux .navbar-collapse { flex-direction: column; align-items: stretch; }
    .navbar-flux .navbar-collapse > .d-flex {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem .75rem;
        margin-top: .5rem;
        padding-top: .85rem;
        border-top: 1px solid var(--flux-ink-500);
    }
}

/* ── Iconografía (Lucide outline vía sprite _FluxIcons) ───────────── */
.flux-ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: -3.5px;
    flex: 0 0 auto;
}
.dropdown-item .flux-ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--flux-gray-600); }
.dropdown-item:active .flux-ico { color: inherit; }

/* Pie del admin */
.footer { color: var(--flux-gray-500); }