/* ============================================================
   PolloCheff Inventario — main.css
   Variables, reset, base y utilidades.
   Paleta inspirada en ByPolloCheff + modo oscuro nocturno.
   ============================================================ */

:root {
    /* Colores - paleta ByPolloCheff (modo claro) */
    --color-primary: #b71c1c;
    --color-primary-hover: #ad3202;
    --color-primary-soft: #ffdbd0;
    --color-primary-border: #ffb59f;

    --color-secondary: #ffc107;
    --color-secondary-hover: #f5bf00;
    --color-secondary-soft: #ffdf94;
    --color-secondary-border: #f5bf00;
    --color-on-secondary: #6e5400;

    --color-bg: #fff8f6;
    --color-surface: #ffffff;
    --color-surface-hover: #fff1eb;
    --color-border: #e1bfb5;
    --color-border-strong: #8d7169;

    --color-text: #251913;
    --color-text-secondary: #59413a;
    --color-text-muted: #8d7169;

    --color-success: #16a34a;
    --color-success-soft: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-danger: #ba1a1a;
    --color-danger-soft: #ffdad6;
    --color-danger-border: #ffb4ab;
    --color-warning: #d97706;
    --color-warning-soft: #fffbeb;
    --color-warning-border: #fde68a;
    --color-info: #0284c7;
    --color-info-soft: #f0f9ff;
    --color-info-border: #bae6fd;

    --color-whatsapp: #25d366;

    /* Tipografía - ByPolloCheff */
    --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-label: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Radios - más redondeados estilo ByPolloCheff */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(37, 25, 19, 0.05);
    --shadow-md: 0 4px 12px rgba(37, 25, 19, 0.08);
    --shadow-lg: 0 12px 32px rgba(37, 25, 19, 0.12);
    --shadow-soft: 0 4px 20px rgba(37, 25, 19, 0.08);
    --shadow-strong: 0 8px 30px rgba(37, 25, 19, 0.14);

    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 64px;

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}

/* ============================================================
   MODO OSCURO NOCTURNO - colores apagados para la vista
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #ff8a6c;
        --color-primary-hover: #ffb59f;
        --color-primary-soft: #4a1a0f;
        --color-primary-border: #7a2500;

        --color-secondary: #e6b83a;
        --color-secondary-hover: #c99b00;
        --color-secondary-soft: #3d2f00;
        --color-secondary-border: #5c4700;
        --color-on-secondary: #ffdf94;

        --color-bg: #12100e;
        --color-surface: #1a1613;
        --color-surface-hover: #25201c;
        --color-border: #3d3430;
        --color-border-strong: #5e514c;

        --color-text: #f0e6e1;
        --color-text-secondary: #b8a89f;
        --color-text-muted: #8d7169;

        --color-success: #4ade80;
        --color-success-soft: #0f2a18;
        --color-success-border: #1f4d2e;
        --color-danger: #ffb4ab;
        --color-danger-soft: #3a1210;
        --color-danger-border: #5c1a16;
        --color-warning: #fbbf24;
        --color-warning-soft: #2e2205;
        --color-warning-border: #4d3a08;
        --color-info: #38bdf8;
        --color-info-soft: #0a1f2e;
        --color-info-border: #123a52;

        --color-whatsapp: #4ade80;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
        --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.45);
    }
}

/* Toggle manual con clase .dark (sobreescribe el modo automático) */
.dark {
    --color-primary: #ff8a6c;
    --color-primary-hover: #ffb59f;
    --color-primary-soft: #4a1a0f;
    --color-primary-border: #7a2500;

    --color-secondary: #e6b83a;
    --color-secondary-hover: #c99b00;
    --color-secondary-soft: #3d2f00;
    --color-secondary-border: #5c4700;
    --color-on-secondary: #ffdf94;

    --color-bg: #12100e;
    --color-surface: #1a1613;
    --color-surface-hover: #25201c;
    --color-border: #3d3430;
    --color-border-strong: #5e514c;

    --color-text: #f0e6e1;
    --color-text-secondary: #b8a89f;
    --color-text-muted: #8d7169;

    --color-success: #4ade80;
    --color-success-soft: #0f2a18;
    --color-success-border: #1f4d2e;
    --color-danger: #ffb4ab;
    --color-danger-soft: #3a1210;
    --color-danger-border: #5c1a16;
    --color-warning: #fbbf24;
    --color-warning-soft: #2e2205;
    --color-warning-border: #4d3a08;
    --color-info: #38bdf8;
    --color-info-soft: #0a1f2e;
    --color-info-border: #123a52;

    --color-whatsapp: #4ade80;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Clase .light: fuerza el modo claro aunque el sistema esté en oscuro */
.light {
    --color-primary: #b71c1c;
    --color-primary-hover: #ad3202;
    --color-primary-soft: #ffdbd0;
    --color-primary-border: #ffb59f;

    --color-secondary: #ffc107;
    --color-secondary-hover: #f5bf00;
    --color-secondary-soft: #ffdf94;
    --color-secondary-border: #f5bf00;
    --color-on-secondary: #6e5400;

    --color-bg: #fff8f6;
    --color-surface: #ffffff;
    --color-surface-hover: #fff1eb;
    --color-border: #e1bfb5;
    --color-border-strong: #8d7169;

    --color-text: #251913;
    --color-text-secondary: #59413a;
    --color-text-muted: #8d7169;

    --color-success: #16a34a;
    --color-success-soft: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-danger: #ba1a1a;
    --color-danger-soft: #ffdad6;
    --color-danger-border: #ffb4ab;
    --color-warning: #d97706;
    --color-warning-soft: #fffbeb;
    --color-warning-border: #fde68a;
    --color-info: #0284c7;
    --color-info-soft: #f0f9ff;
    --color-info-border: #bae6fd;

    --color-whatsapp: #25d366;

    --shadow-sm: 0 1px 2px rgba(37, 25, 19, 0.05);
    --shadow-md: 0 4px 12px rgba(37, 25, 19, 0.08);
    --shadow-lg: 0 12px 32px rgba(37, 25, 19, 0.12);
    --shadow-soft: 0 4px 20px rgba(37, 25, 19, 0.08);
    --shadow-strong: 0 8px 30px rgba(37, 25, 19, 0.14);
}

/* ============================================================
   PREFERS-REDUCED-MOTION — respeta la configuración del usuario
   ============================================================ */
@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;
    }
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-base), color var(--transition-base);
}

img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
code { font-family: var(--font-mono); font-size: 0.9em; }

/* ============ Utilidades ============ */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--color-text-secondary); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.w-full { width: 100%; }

/* ============ Toggle de tema ============ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

/* ============ Bloqueo de scroll (drawer / modales) ============ */
body.sidebar-open,
body.modal-open {
    overflow: hidden;
    touch-action: none;
}