/* Paleta unificada — Caja / Garzón / Admin / Cocina */
:root {
    /* === Colores personalizables (panel Apariencia / Personalización) ===
       El tema dinámico (api/tema.css.php) sobreescribe SOLO estas variables de
       entrada según lo guardado en la BD. Sin personalización, reproducen
       exactamente la marca original, así que el diseño no cambia. */
    --color-primario: #C0392B;
    --color-primario-hover: #A93226;
    --color-primario-tint-muted: #E6B0AA;
    --color-primario-tint-pale: #EBC0BB;
    --color-primario-tint-light: #F6E3E1;
    --color-secundario: #0F0F0F;
    --color-secundario-elevated: #1C1C1C;
    --color-acento: #C0392B;
    --color-fondo: #FFFFFF;

    --bg-app: #F9F7F2;
    --bg-card: var(--color-fondo);
    --bg-sidebar: var(--color-secundario);
    --bg-sidebar-elevated: var(--color-secundario-elevated);
    --bg-hover: #F2F2F2;
    --bg-chip: var(--color-primario-tint-pale);

    --gold: var(--color-primario);
    --gold-hover: var(--color-primario-hover);
    --gold-muted: var(--color-primario-tint-muted);
    --gold-light: var(--color-primario-tint-light);
    --gold-pale: var(--color-primario-tint-pale);
    /** Fondo zona cobro (caja) — negro humo */
    --bg-cobro-footer: #2E2E2E;

    --primary: var(--color-primario);
    --primary-hover: var(--color-primario-hover);
    --success: var(--color-primario);
    --success-hover: var(--color-primario-hover);
    --danger: #DC2626;
    --danger-hover: #B91C1C;

    --text-primary: #262626;
    --text-secondary: #57534E;
    --text-heading: var(--color-secundario);
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: rgba(255, 255, 255, 0.72);

    --border: #E5E5E5;
    --border-soft: #D4D4D4;
    --border-gold: var(--color-primario);
    --border-dark: rgba(255, 255, 255, 0.14);
    --surface-dark: #262626;
    --surface-dark-hover: #333333;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
    --shadow-sidebar: -8px 0 24px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 0 0 2px var(--primary), 0 0 14px rgba(192, 57, 43, 0.35);

    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --transition: 200ms ease;

    --mesa-disponible-bg: #FFFFFF;
    --mesa-disponible-text: #20A06B;
    --mesa-disponible-border: #20A06B;

    --mesa-ocupada-bg: #20A06B;
    --mesa-ocupada-text: #FFFFFF;
    --mesa-ocupada-border: #20A06B;

    --mesa-reservada-bg: #ECFDF5;
    --mesa-reservada-text: #15803D;
    --mesa-reservada-border: #22C55E;

    --accent-llevar: var(--color-acento);
    --accent-delivery: var(--color-acento);

    /* Alias legacy Con Sabor Peruano */
    --csp-blanco: var(--bg-card);
    --csp-borde: var(--border);
    --csp-fondo: var(--bg-app);
    --csp-texto: var(--text-primary);
    --csp-texto-sec: var(--text-secondary);
    --csp-texto-suave: var(--text-secondary);
    --csp-texto-claro: #737373;
    --csp-azul: var(--bg-sidebar);
    --csp-azul-oscuro: var(--bg-sidebar-elevated);
    --csp-azul-claro: #F3F3F3;
    --csp-rojo: var(--danger);
    --csp-rojo-oscuro: var(--danger-hover);
    --csp-rojo-claro: #FEE2E2;
    --csp-verde: #20A06B;
    --csp-verde-oscuro: #178A5C;
    --csp-verde-claro: #ECFDF5;
    --csp-naranja: var(--primary);
    --csp-naranja-claro: var(--gold-pale);
    --csp-naranja-oscuro: var(--primary-hover);
    --csp-sombra: rgba(0, 0, 0, 0.10);
    --csp-trans: 0.18s ease;
}

/* === Logo del negocio (panel Apariencia) ===
   Lo pobla negocio_config.js desde la BD. Oculto si no hay logo configurado,
   por lo que el diseño por defecto (sin logo) queda exactamente igual.
   Tamaño conservador para no alterar la altura de los headers. */
.negocio-logo {
    height: 1.7em;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 6px;
}
.negocio-logo[hidden] {
    display: none;
}
/* Variante grande para la pantalla de login del garzón. */
.garzon-login-logo .negocio-logo {
    height: auto;
    max-height: 64px;
    max-width: 200px;
    border-radius: 12px;
}

/* === Controles del panel Apariencia (configuracion.html) === */
.apariencia-titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-heading);
}
.apariencia-logo-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.apariencia-logo-preview {
    width: 120px;
    height: 64px;
    border: 1px dashed var(--border-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app);
    overflow: hidden;
}
.apariencia-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.apariencia-logo-vacio {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.apariencia-logo-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.apariencia-colores {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.apariencia-color {
    display: flex;
    gap: 10px;
    align-items: center;
}
.apariencia-color input[type="color"] {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 2px;
    background: var(--bg-card);
    cursor: pointer;
}
.apariencia-color > div {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.apariencia-color span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}