:root {
    --bg-canvas: #14120E;
    --bg-surface: #1C1A14;
    --bg-highlight: #24211A;
    --border-dim: #35312A;
    --border-light: #463F34;
    --accent: #AEB98C;
    --accent-glow: rgba(174,185,140,0.14);
    --danger: #C8796B;
    --success: #9DB07E;
    --txt-main: #ECE6D9;
    --txt-dim: #A39A89;
    --txt-dark: #6B6356;
    --font-ui: 'Manrope', sans-serif;
    --font-data: 'Space Mono', monospace;
    --font-display: 'Fraunces', Georgia, serif;
    --nav-height: 66px;
    --header-height: 60px;
    --radius: 12px;
    --safe-area-bottom: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    /* Fondo editorial RestoAdmin: carbon calido + brillos sutiles + grano fino */
    background-color:#131109;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(95% 58% at 50% -12%, rgba(122,99,58,0.16) 0%, rgba(20,18,14,0) 60%),
        radial-gradient(82% 70% at 110% 114%, rgba(120,134,96,0.10) 0%, rgba(20,18,14,0) 55%),
        radial-gradient(135% 125% at 50% 36%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.36) 100%),
        linear-gradient(180deg, #1A1711 0%, #141109 52%, #0F0D07 100%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    color: var(--txt-main);
    font-family: var(--font-ui);
    height: 100vh;
    overflow: hidden;
}

/* CLASES UTILITARIAS */
.hidden { display: none !important; }
.text-copper { color: var(--accent); }
.text-mono { font-family: var(--font-data); }
/* ---- Compatibility aliases (avoid invisible text if older controllers use --text-main / --txt) ---- */
:root{
  --text-main: var(--txt-main);
  --text-dim: var(--txt-dim);
  --txt: var(--txt-main);
  --text: var(--txt-main);
}

/* ==========================================================================
   ACCESSIBILITY FIXES — WCAG 2.1 AA
   ========================================================================== */

/* color-scheme: native dark scrollbars + input styling on supporting browsers */
:root { color-scheme: dark; }

/* Focus-visible: keyboard navigation outline (ring of copper) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* user-select: text is the default for content; only interactive elements block selection */
button, [role="button"], nav, .nav-item, .brew-method-card,
.dash-tile, .bottom-nav-item, .chip, .pill {
  user-select: none;
  -webkit-user-select: none;
}

/* Minimum touch target size (Apple HIG: 44px, Google: 48px) */
button, [role="button"], .btn-arch, .nav-item, .bottom-nav-item,
.chip, .sop-dot, .pantry-item .pill {
  min-height: 44px;
  min-width: 44px;
}

/* SOP step dots: increase to 44px for HIG compliance */
.sop-dot {
  width: 44px !important;
  height: 44px !important;
  font-size: 0.9rem;
}

/* CRM FAB: safe-area bottom */
.crm-fab {
  bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}

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


/* =====================================================================
   RESPONSIVE / SAFE-AREA HARDENING
   UI-only patch: no auth / sync / PWA flow changes.
   ===================================================================== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);

    --header-base-height: 52px;
    --header-height: calc(var(--header-base-height) + var(--safe-area-top));

    --nav-base-height: 66px;
    --nav-height: var(--nav-base-height);

    --app-height: 100dvh;
    --app-width: 100vw;
    --app-max-width: 1440px;
    --content-max-width: 1180px;
    --dock-max-width: 860px;

    --viewport-pad-x: clamp(16px, 3.2vw, 28px);
    --viewport-pad-top-gap: 10px;
    --viewport-pad-bottom-gap: 6px;
    --dock-side-gap: clamp(10px, 2.4vw, 22px);
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: var(--app-height, 100dvh);
    height: auto;
    padding-left: max(0px, var(--safe-area-left));
    padding-right: max(0px, var(--safe-area-right));
}