/* ==========================================================================
   Estilos de la aplicación — Inspirado en Emil Kowalski Design Engineering
   - Espaciado coherente y respiración visual
   - Sombras multicapa (ambient + direct)
   - Transiciones declaradas y acotadas (nunca transition: all)
   - Retroalimentación táctil (:active scale(0.97))
   - Tipografía Inter, números tabulares (tnum)
   ========================================================================== */

:root {
    --sb-w: 64px;
    --sb-open: 232px;
    --top-h: 62px;
    --tr: 240ms var(--ease);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    font-family: var(--font-ui);
    background: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(44, 27, 20,0.035) 1px, transparent 0);
    background-size: 24px 24px;
    color: var(--text);
    text-rendering: optimizeLegibility;
}

/* ── SIDEBAR ───────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sb-w);
    background: var(--brand);
    color: var(--on-brand);
    display: flex;
    flex-direction: column;
    overflow: visible; /* la flecha sobresale del borde; cada bloque interno recorta su propio contenido */
    transition: width var(--tr);
    z-index: 200;
    border-right: 1px solid rgba(246, 235, 211, 0.12);
    box-shadow: 2px 0 16px rgba(44, 27, 20, 0.08);
}
.sidebar.open { width: var(--sb-open); }

.sb-arrow {
    position: absolute;
    right: -15px;
    top: 34px;   /* a la altura del logo, sobre el borde del menú */
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--gold, #C8973A);
    border: 2px solid var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 201;
    transition: background-color 150ms var(--ease), transform var(--tr), box-shadow 150ms var(--ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (hover: hover) and (pointer: fine) {
    .sb-arrow:hover {
        background: #E0AE55;
        box-shadow: 0 3px 12px rgba(200, 151, 58, 0.55);
        transform: translateY(-50%) scale(1.08);
    }
}
.sb-arrow:active { transform: translateY(-50%) scale(0.92); }
.sb-arrow svg {
    width: 14px;
    height: 14px;
    stroke: #2C1B14;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform var(--tr);
}
.sidebar.open .sb-arrow svg { transform: rotate(180deg); }

.sb-logo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    min-height: var(--top-h);
    border-bottom: 1px solid var(--color-line-on-brand);
    text-decoration: none;
    flex-shrink: 0;
    overflow: hidden;
}
.sb-logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(255, 255, 255,0.14);
    color: var(--on-brand);
    border: 1px solid rgba(255, 255, 255,0.22);
    border-radius: var(--r-control);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms var(--ease);
}
.sb-logo:hover .sb-logo-icon { transform: scale(1.04); }
.sb-logo-icon svg { width: 22px; height: 20px; fill: currentColor; }
.logo-burger-svg { width: 22px; height: 20px; display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; }
.sb-logo-text { opacity: 0; white-space: nowrap; transition: opacity var(--tr); pointer-events: none; }
.sidebar.open .sb-logo-text { opacity: 1; }
.sb-logo-text .name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--on-brand);
    display: block;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.sb-logo-text .sub {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-on-brand-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sb-section {
    font-size: 0.65rem;
    font-weight: 700;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 1.15rem 1.15rem 0.4rem;
    white-space: nowrap;
    transition: color var(--tr);
}
.sidebar.open .sb-section { color: rgba(228, 214, 190, 0.78); } /* Champaña / crema dorado */
.sb-nav { flex: 1; padding: 0.5rem 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }

/* Rol(es) que usan cada módulo del menú */
.sb-item .sb-lbl { display: flex !important; flex-direction: column; line-height: 1.2 !important; }
.sb-item .sb-lbl .sb-rol { display: block; font-size: 0.6rem !important; font-weight: 700 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; opacity: 0.6; margin-top: 2px; line-height: 1.1; color: inherit; }
.sb-item.active .sb-lbl .sb-rol { opacity: 0.85; }

.sb-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.15rem;
    color: #F6EBD3; /* Crema cálido de alta legibilidad */
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
    border-left: 3px solid transparent;
    cursor: pointer;
    border-top: none;
    border-right: none;
    border-bottom: none;
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
}
.sb-item:hover {
    background: rgba(246, 235, 211, 0.10);
    color: #FFFFFF;
}
.sb-item.active {
    background: rgba(246, 235, 211, 0.16);
    color: #FFFFFF;
    border-left-color: var(--gold); /* Detalle dorado/champaña en ítem activo */
}
.sb-item:active { transform: scale(0.985); }
.sb-item .ico {
    flex-shrink: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F6EBD3; /* Ícono en tono crema suave */
    transition: color 150ms var(--ease), transform 150ms var(--ease);
}
.sb-item:hover .ico {
    color: #FFFFFF;
    transform: scale(1.08);
}
.sb-item.active .ico {
    color: var(--gold);
}
.sb-item .ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.85; fill: none; }

.sb-item .sb-lbl,
.sb-item .lbl {
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--tr), color 150ms var(--ease);
    color: #F6EBD3 !important; /* Crema cálido nítido sobre borgoña */
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    line-height: 1.25 !important;
}
.sidebar.open .sb-item .sb-lbl,
.sidebar.open .sb-item .lbl {
    opacity: 1;
}
.sb-item:hover .sb-lbl,
.sb-item:hover .lbl {
    color: #FFFFFF !important;
}
.sb-item.active .sb-lbl,
.sb-item.active .lbl {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.sb-bottom { padding: 0.65rem 0; border-top: 1px solid rgba(246, 235, 211, 0.14); flex-shrink: 0; overflow: hidden; }
.sb-bottom .sb-item:hover { background: rgba(214, 69, 61, 0.18); color: #FFFFFF; }

/* ── TOPBAR ────────────────────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sb-w);
    right: 0;
    height: var(--top-h);
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 1.5rem 0 1.25rem;
    gap: 0.85rem;
    z-index: 100;
    transition: left var(--tr);
    box-shadow: var(--shadow-sm);
}
.sidebar.open ~ .topbar { left: var(--sb-open); }

.sb-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line, #D9C197);
    background: var(--surface-2, #F6EBD3);
    color: var(--text, #2C1B14);
    cursor: pointer;
    border-radius: var(--r-control, 10px);
    flex-shrink: 0;
    margin-right: 0.25rem;
    transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.sb-toggle:hover {
    background: var(--brand-soft, rgba(107, 66, 38,0.1));
    border-color: var(--brand, #6B4226);
    color: var(--brand, #6B4226);
}
.sb-toggle:active { transform: scale(0.94); }
.sb-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
}
.sb-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    margin: 0;
    border-radius: 2px;
}

.top-page-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ink);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.015em;
}

/* Si la página ya trae su propio encabezado (icono + título), no se repite el título en la barra superior */
body:has(.pg-header) .top-page-title { display: none; }
.top-spacer { flex: 1; }

.top-search { position: relative; width: 230px; flex-shrink: 0; }
.top-search input {
    width: 100%;
    padding: 0.48rem 0.95rem 0.48rem 2.15rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r-control);
    font-size: 0.83rem;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--surface-2); /* Toque crema/beige cálido */
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), width 220ms var(--ease), background-color 160ms var(--ease);
    outline: none;
}
.top-search input:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    width: 270px;
}
.top-search .search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.top-search .search-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

.top-profile { position: relative; flex-shrink: 0; }
.top-avatar {
    width: 36px;
    height: 36px;
    background: var(--surface-2); /* Toque crema/beige con monograma borgoña */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    border: 1.5px solid var(--line-2);
    box-shadow: var(--shadow-sm);
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 140ms var(--ease), background-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .top-avatar:hover {
        background: var(--surface);
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
        transform: scale(1.04);
    }
}
.top-avatar:active { transform: scale(0.94); }

.profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    overflow: hidden;
    z-index: 400;
    transform-origin: top right;
    animation: popoverEnter 180ms var(--ease-out) forwards;
}
.profile-dropdown.show { display: block; }
@keyframes popoverEnter {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.pd-header { padding: 0.95rem 1.1rem 0.75rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pd-name { font-weight: 700; font-size: 0.9rem; }
.pd-role {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.25rem;
    display: inline-block;
    padding: 0.22em 0.65em;
    border-radius: 9999px;
    color: var(--ink);
    border: 1px solid var(--line-2);
    background: var(--surface-2);
}
.pd-role.admin   { background: var(--brand-soft); border-color: var(--brand); }
.pd-role.cajero  { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-ink); }
.pd-role.mesero  { background: var(--surface-2); border-color: var(--line-2); color: var(--muted); }
.pd-role.cliente { background: var(--surface-2); border-color: var(--gold); color: var(--ink); }
.pd-role.cocinero { background: rgba(220, 38, 38, 0.10); border-color: #DC2626; color: var(--text); }
.pd-role.domiciliario { background: rgba(14, 165, 233, 0.12); border-color: #0EA5E9; color: var(--text); }

.pd-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background-color 140ms var(--ease);
    font-family: var(--font-ui);
}
.pd-item svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; fill: none; }
.pd-item:hover { background: var(--surface-2); }
.pd-item:active { transform: scale(0.985); }
.pd-item.danger { color: var(--danger-ink); }
.pd-divider { height: 1px; background: var(--line); margin: 0.25rem 0; }

/* ── MAIN LAYOUT ───────────────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sb-w);
    padding-top: var(--top-h);
    min-height: 100vh;
    transition: margin-left var(--tr);
}
.sidebar.open ~ .main-content { margin-left: var(--sb-open); }
.page-body {
    padding: 2rem 2.25rem 4rem;
    max-width: 1440px;
    margin: 0 auto;
    animation: pageEnter 220ms var(--ease-out) both;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BOTONES CON MICROINTERACCIONES (EMIL KOWALSKI) ────────────────────── */
.btn-brand, .btn-gold {
    background: var(--brand);
    border: 1.5px solid var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    padding: 0.55rem 1.35rem;
    border-radius: var(--r-control);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-family: var(--font-ui);
    box-shadow: var(--shadow-sm);
    will-change: transform;
    transition: background-color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 180ms var(--ease), transform 140ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .btn-brand:hover, .btn-gold:hover {
        background: var(--brand-hover);
        border-color: var(--brand-hover);
        color: var(--on-brand);
        transform: translateY(-1.5px);
        box-shadow: 0 6px 16px -2px rgba(107, 66, 38, 0.28);
    }
}
.btn-brand:active, .btn-gold:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(107, 66, 38, 0.20);
}
.btn-brand:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
    background: var(--surface-2);
    border: 1.5px solid var(--line-2);
    color: var(--ink);
    font-weight: 500;
    padding: 0.52rem 1.25rem;
    border-radius: var(--r-control);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-family: var(--font-ui);
    transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover {
        border-color: var(--brand);
        background: var(--surface);
        color: var(--ink);
        transform: translateY(-1px);
    }
}
.btn-ghost:active { transform: scale(0.97); }

.btn-cream {
    background: var(--surface-2);
    border: 1.5px solid var(--line-2);
    color: var(--ink);
    font-weight: 600;
    padding: 0.52rem 1.25rem;
    border-radius: var(--r-control);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-family: var(--font-ui);
    box-shadow: var(--shadow-sm);
    transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease), box-shadow 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .btn-cream:hover {
        border-color: var(--brand);
        background: var(--surface);
        color: var(--ink);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }
}
.btn-cream:active { transform: scale(0.97); }

.btn-chip {
    border: 1px solid var(--line-2);
    border-radius: var(--r-control);
    padding: 0.28rem 0.75rem;
    font-size: 0.76rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-ui);
    transition: background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), transform 120ms var(--ease);
}
.btn-chip:active { transform: scale(0.96); }
.btn-chip-brand { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .btn-chip-brand:hover { background: var(--brand); color: var(--on-brand); }
}
.btn-chip-ok { background: var(--success-bg); border-color: var(--success); }
@media (hover: hover) and (pointer: fine) {
    .btn-chip-ok:hover { background: var(--color-success-bg-hover); }
}

/* ── TARJETAS Y ENCABEZADOS DE PÁGINA ─────────────────────────────────── */
.card-pro {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow), var(--shadow-inner);
    padding: 1.75rem 2rem;
    transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}

.pg-header { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 0.5rem; }
.pg-icon {
    width: 44px;
    height: 44px;
    background: var(--surface-2); /* Toque crema cálido */
    color: var(--ink); /* Ícono borgoña */
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-control);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: transform 160ms var(--ease);
}
.pg-header:hover .pg-icon { transform: scale(1.04); }
.pg-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.pg-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.pg-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.div-gold {
    height: 1px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--line-2) 40%, transparent 85%);
    border: none;
    margin: 1rem 0 1.5rem;
    opacity: 1;
}

/* ── ALERTAS Y TOASTS ─────────────────────────────────────────────────── */
.alert-ok  { background: var(--success-bg); border-left: 4px solid var(--success); border-radius: var(--r-control); color: var(--text); padding: 0.85rem 1.15rem; font-size: 0.875rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.alert-err { background: var(--danger-bg);  border-left: 4px solid var(--danger);  border-radius: var(--r-control); color: var(--danger-ink); padding: 0.85rem 1.15rem; font-size: 0.875rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }

/* Avisos con icono (.alert-pro en Caja; .alerta + .alerta-ok/.alerta-err en Cocina, Domicilios y Reseñas).
   Estas clases no tenían CSS: el icono SVG, sin tamaño, se estiraba a más de 1000 px. */
.alert-pro, .alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.875rem;
    border-radius: var(--r-control);
    box-shadow: var(--shadow-sm);
}
.alert-pro > svg, .alerta > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-pro > span, .alerta > span { min-width: 0; overflow-wrap: anywhere; }
.alerta-ok  { background: var(--success-bg); border-left: 4px solid var(--success); color: var(--text); }
.alerta-err { background: var(--danger-bg);  border-left: 4px solid var(--danger);  color: var(--danger-ink); }

/* ── TABLAS CON ESPACIADO ELEGANTE Y MICROINTERACCIÓN ─────────────────── */
.tbl-wrap {
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow), var(--shadow-inner);
    overflow-x: auto;
    border: 1px solid var(--line);
    background: var(--surface);
}
.tbl-wrap table { margin: 0; width: 100%; border-collapse: collapse; min-width: 550px; }
.tbl-wrap thead { background: var(--brand); color: var(--on-brand); }
.tbl-wrap thead th {
    padding: 0.85rem 1.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid var(--gold); /* Detalle dorado/champaña */
    font-weight: 600;
    white-space: nowrap;
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.tbl-wrap tbody tr {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    transition: background-color 140ms var(--ease);
}
.tbl-wrap tbody tr:last-child { border-bottom: none; }
.tbl-wrap tbody tr:hover { background: var(--surface-2); }
.tbl-wrap tbody td {
    padding: 0.92rem 1.25rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── FORMULARIOS Y CONTROLES ──────────────────────────────────────────── */
.lbl {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
    display: block;
}
.req { color: var(--ink); font-weight: 700; margin-left: 0.15rem; }

.form-control, .form-select {
    border-radius: var(--r-control);
    border: 1.5px solid var(--line-2);
    font-size: 0.88rem;
    font-family: var(--font-ui);
    padding: 0.58rem 0.95rem;
    width: 100%;
    min-height: 42px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
    outline: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(107, 66, 38, 0.14);
}
.form-control[readonly] { background: var(--surface-2); cursor: not-allowed; color: var(--muted); }

/* ── INSIGNIAS Y ESTADOS ──────────────────────────────────────────────── */
.badge-emit {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: 9999px;
    padding: 0.25em 0.75em;
    font-size: 0.72rem;
    font-weight: 600;
}
.badge-anul {
    background: var(--danger-bg);
    color: var(--danger-ink);
    border: 1px solid var(--danger);
    border-radius: 9999px;
    padding: 0.25em 0.75em;
    font-size: 0.72rem;
    font-weight: 600;
}

.txt-ok, .txt-err { font-weight: 600; }
.txt-ok  { color: var(--success); }
.txt-err { color: var(--danger-ink); }
.txt-ok::before, .txt-err::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.4em; }
.txt-ok::before  { background: var(--success); }
.txt-err::before { background: var(--danger); }

.estado-pill {
    border-radius: 9999px;
    padding: 0.25em 0.75em;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text);
    border: 1px solid var(--line-2);
    background: var(--surface-2);
    display: inline-block;
}
.estado-pendiente     { background: var(--amber-bg);    border-color: var(--amber);   color: var(--amber-ink); }
.estado-enpreparacion { background: var(--brand-soft);  border-color: var(--brand);   color: var(--ink); }
.estado-listo         { background: var(--success-bg);  border-color: var(--success); color: var(--success); }
.estado-facturado     { background: var(--surface-2);   border-color: var(--line-2);  color: var(--muted); }
.estado-cancelado     { background: var(--danger-bg);   border-color: var(--danger);  color: var(--danger-ink); }

.badge-cream {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 9999px;
    padding: 0.24em 0.8em;
    font-size: 0.74rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.02em;
}
.pg-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 9999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text);
}

/* Global Scrollbar Customization – matches the project palette */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--brand);
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.15);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-hover);
}
/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--brand) rgba(0,0,0,0.12);
}

/* ── MODALES (EMIL KOWALSKI: SCALE 0.96 -> 1, NUNCA SCALE 0) ──────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 220ms var(--ease);
}
.modal-overlay.show {
    display: flex;
    opacity: 1;
}
.modal-box {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 2.25rem;
    max-width: 440px;
    width: 92%;
    box-shadow: var(--shadow-lg), var(--shadow-inner);
    text-align: center;
    transform: scale(0.96);
    opacity: 0;
    transform-origin: center;
    transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.modal-overlay.show .modal-box {
    transform: scale(1);
    opacity: 1;
}
.modal-box.left-align { text-align: left; }
.modal-icon {
    width: 52px;
    height: 52px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.modal-icon.ok  { background: var(--success-bg); border-color: var(--success); }
.modal-icon.ok svg { stroke: var(--success); }
.modal-icon.err { background: var(--danger-bg); border-color: var(--danger); }
.modal-icon.err svg { stroke: var(--danger); }

/* ── TOASTS (SPATIAL CONSISTENCY & SMOOTH TIMING) ──────────────────────── */
.toast-wrap {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.35rem;
    border-radius: var(--r-control);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    animation: toastIn 240ms var(--ease-out), toastOut 300ms var(--ease) 2.9s forwards;
    max-width: 440px;
    width: max-content;
}
.toast.ok   { border: 1px solid var(--success); border-left: 4px solid var(--success); }
.toast.err  { border: 1px solid var(--danger);  border-left: 4px solid var(--danger); }
.toast.warn { border: 1px solid var(--amber);   border-left: 4px solid var(--amber); }
.toast.ok svg   { stroke: var(--success); }
.toast.err svg  { stroke: var(--danger); }
.toast.warn svg { stroke: var(--amber); }
.toast svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; fill: none; }

@keyframes toastIn  {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* ── RESPONSIVE & ACCESSIBILITY ────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { width: 0 !important; }
    .sidebar.open { width: var(--sb-open) !important; }
    .topbar { left: 0 !important; }
    .main-content { margin-left: 0 !important; }
    .sb-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .top-search { width: 150px; }
    .top-search input:focus { width: 175px; }
    .page-body { padding: 1.25rem 1.25rem 3rem; }
}

@media (max-width: 480px) {
    .top-search { width: 110px; }
    .page-body { padding: 1rem 0.9rem 2.5rem; }
}

/* ── OCULTAR WIDGETS FLOTANTES EN PANEL DE ADMINISTRACIÓN / STAFF ────── */
.sidebar ~ .luxury-whatsapp-wrap,
.sidebar ~ #saboratorAiWidget,
.sidebar ~ .ai-widget-container,
.sidebar ~ .btn-floating-cookie-reopen,
.main-content ~ .luxury-whatsapp-wrap,
.main-content ~ #saboratorAiWidget,
.main-content ~ .ai-widget-container,
.main-content ~ .btn-floating-cookie-reopen,
#topbar ~ .luxury-whatsapp-wrap,
#topbar ~ #saboratorAiWidget,
#topbar ~ .ai-widget-container,
#topbar ~ .btn-floating-cookie-reopen {
    display: none !important;
}

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

/* ── DIÁLOGOS (reemplazan alert/confirm del navegador) ──────────────────── */
.dlg-fondo { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(44, 27, 20, 0.55); backdrop-filter: blur(3px); animation: dlgFondo 160ms ease-out; }
.dlg-fondo[hidden] { display: none; }
.dlg { width: min(420px, 100%); background: var(--surface, #FFFFFF); color: var(--text, #2C1B14); border: 1px solid var(--line, #E8DFD0); border-radius: 12px; padding: 1.6rem 1.5rem 1.25rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); text-align: center; animation: dlgEntra 200ms cubic-bezier(.2,.9,.3,1.2); }
.dlg-icono { width: 52px; height: 52px; margin: 0 auto 0.85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-soft, rgba(107, 66, 38, 0.1)); color: var(--brand, #6B4226); }
.dlg[data-tono="peligro"] .dlg-icono { background: rgba(214, 69, 61, 0.13); color: var(--danger, #D6453D); }
.dlg-icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg-titulo { font-size: 1.12rem; font-weight: 800; margin: 0 0 0.45rem; color: var(--text, #2C1B14); }
.dlg-mensaje { font-size: 0.92rem; line-height: 1.5; color: var(--muted, #7B6249); margin: 0 0 1.25rem; white-space: pre-line; overflow-wrap: anywhere; }
.dlg-acciones { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.dlg-btn { min-width: 120px; padding: 0.62rem 1.1rem; border-radius: 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: filter 120ms ease, transform 100ms ease; }
.dlg-btn:hover { filter: brightness(1.06); }
.dlg-btn:active { transform: scale(0.97); }
.dlg-btn:focus-visible { outline: 3px solid rgba(255, 224, 130, 0.9); outline-offset: 2px; }
.dlg-btn[hidden] { display: none; }
.dlg-btn-sec { background: var(--surface-2, #F6EBD3); color: var(--text, #2C1B14); border-color: var(--line, #E8DFD0); }
.dlg-btn-pri { background: var(--brand, #6B4226); color: #fff; }
.dlg-btn-peligro { background: var(--danger, #D6453D); color: #fff; }
html.dlg-abierto { overflow: hidden; }
@keyframes dlgFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgEntra { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dlg-fondo, .dlg { animation: none; } }
/* ── ENCABEZADO DE PÁGINA DENTRO DE LA BARRA SUPERIOR ─────────────────────
   El script del layout mueve aquí el primer .pg-header (icono + título + descripción) */
.topbar .pg-header { margin: 0 !important; flex-wrap: nowrap !important; gap: 0.7rem; min-width: 0; flex: 0 1 auto; }
.topbar .pg-icon { width: 38px; height: 38px; }
.topbar .pg-icon svg { width: 19px; height: 19px; }
.topbar .pg-header > div:not(.pg-icon) { min-width: 0; }
.topbar .pg-title { font-size: 1.3rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .pg-sub { font-size: 0.72rem; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
@media (max-width: 820px) {
    .topbar .pg-sub { display: none; }
    .topbar .pg-title { font-size: 1.1rem; }
}

/* ── PULIDO VISUAL: más amable y menos rígido ────────────────────────────── */
.card-pro:hover { box-shadow: var(--shadow-md), var(--shadow-inner); }
.card-pro[href]:hover, a.card-pro:hover { transform: translateY(-2px); }
.tbl-wrap { border-radius: var(--r-card); overflow: hidden; }
.tbl-wrap tbody tr { transition: background-color 150ms var(--ease); }
.btn-gold, .btn-ghost { border-radius: 999px; } /* botones en píldora: más cercanos */