/* ============================================================================
   temas.css · Tokens de tema por empresa · POS-EMPRESA
   ----------------------------------------------------------------------------
   ÚNICA fuente cromática del sistema (../../ESPECIFICACION_SISTEMA_TEMAS.md §14-16).
   - Solo tokens, perfiles de superficie, aliases y reglas de color/foco.
   - NADA de layout: tamaños, fuentes, radios y breakpoints viven en estilos.css
     o en el CSS local de cada página.
   - Se resuelve con TRES atributos en <html>:
       data-theme   = 'dark' | 'light'            (preferencia de la empresa)
       data-accent  = 'orange' | 'blue' | 'violet' (preferencia de la empresa)
       data-surface = 'internal' | 'pos' | 'public' (dato fijo de la pantalla)
   - `temas.js` estampa theme/accent antes del primer pintado. Este archivo se
     enlaza DESPUÉS de estilos.css y ANTES de temas.js y del <style> local.
   - El bloque :root de abajo es el fallback (oscuro + naranja, perfil interno)
     por si faltaran los atributos. No editar valores sueltos: la matriz de la
     especificación es normativa.
   ============================================================================ */

/* ── Fallback :root = dark + orange + internal ──────────────────────────── */
:root{
  /* Fundación (internal, oscuro) */
  --bg:#16140F;--surface-1:#1F1C16;--surface-2:#28241D;--surface-3:#322D25;--surface-4:#3D3830;
  --border:#3A342B;--border-soft:#2B261F;
  --ink:#F1EADF;--ink-soft:#C7BEAC;--ink-mute:#A69B87;--ink-faint:#8D8371;
  --browser-theme-color:#16140F;
  --bg-rgb:22,20,15;--surface-1-rgb:31,28,22;--surface-2-rgb:40,36,29;--border-rgb:58,52,43;
  /* Derivados (oscuro) */
  --card-bg:rgba(var(--surface-1-rgb),.90);
  --topbar-start:rgba(var(--bg-rgb),.98);
  --topbar-mid:rgba(var(--bg-rgb),.92);
  --topbar-end:rgba(var(--bg-rgb),0);
  --overlay:rgba(8,7,5,.82);
  --overlay-strong:rgba(0,0,0,.82);
  --shadow-sm:0 1px 3px rgba(0,0,0,.30);
  --shadow-md:0 4px 16px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.38);
  --shadow-lg:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.40);
  --noise-opacity:.028;
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A69B87' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color-scheme:dark;
  /* Acento (naranja, oscuro) */
  --accent:#D97F3D;--accent-hover:#F09554;--accent-pressed:#B8642A;--accent-highlight:#FFA96B;
  --accent-soft:#B8642A;--accent-tint:#3A2818;--accent-fill:#F97316;--accent-contrast:#1A0F08;
  --accent-rgb:217,127,61;--accent-fill-rgb:249,115,22;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
  /* Semánticos (oscuro) */
  --ok:#86D39A;--ok-soft:#5DA66E;--ok-tint:#182A1D;--ok-contrast:#0A1C0F;--ok-rgb:134,211,154;
  --warn:#E2BC65;--warn-soft:#A9853C;--warn-tint:#302716;--warn-contrast:#241700;--warn-rgb:226,188,101;
  --err:#F08A7D;--err-soft:#B9594F;--err-tint:#351916;--err-contrast:#2A0C08;--err-rgb:240,138,125;
  --info:#80B8F4;--info-soft:#4F7FB5;--info-tint:#16283D;--info-contrast:#091827;--info-rgb:128,184,244;
  /* Dominio (oscuro) — identidad separada del acento */
  --pay-cash:#34D399;--pay-cash-tint:#0E2A16;
  --pay-qr:#60A5FA;--pay-qr-tint:#0D1A2A;
  --pay-card:#A78BFA;--pay-card-tint:#2B203E;
  --whatsapp:#25D366;--whatsapp-tint:#0E2A16;
  --delivery:#7B93D4;--delivery-tint:#1C1E2C;
  --cyan:#06B6D4;--cyan-tint:#0A1A1F;
  --preview-orange:#D97F3D;--preview-blue:#60A5FA;--preview-violet:#A78BFA;
  /* Excepciones físicas: el QR necesita fondo blanco real para leerse */
  --qr-canvas:#fff;--qr-ink:#111;
  /* Aliases orientativos (sin valor propio) */
  --surface:var(--surface-1);--surface-alt:var(--surface-2);
  --text:var(--ink);--text-muted:var(--ink-mute);--shadow:var(--shadow-md);
  --accent-2:var(--accent-hover);--accent-3:var(--accent-highlight);
  --success:var(--ok);--warning:var(--warn);--danger:var(--err);
}

/* ── Fundaciones OSCURAS por superficie ─────────────────────────────────── */
:root[data-theme="dark"][data-surface="internal"]{
  --bg:#16140F;--surface-1:#1F1C16;--surface-2:#28241D;--surface-3:#322D25;--surface-4:#3D3830;
  --border:#3A342B;--border-soft:#2B261F;
  --ink:#F1EADF;--ink-soft:#C7BEAC;--ink-mute:#A69B87;--ink-faint:#8D8371;
  --browser-theme-color:#16140F;
  --bg-rgb:22,20,15;--surface-1-rgb:31,28,22;--surface-2-rgb:40,36,29;--border-rgb:58,52,43;
}
:root[data-theme="dark"][data-surface="pos"]{
  --bg:#0D0B08;--surface-1:#161310;--surface-2:#1E1910;--surface-3:#26211A;--surface-4:#302A22;
  --border:#3A342B;--border-soft:#2B261F;
  --ink:#F1EADF;--ink-soft:#C7BEAC;--ink-mute:#A69B87;--ink-faint:#8D8371;
  --browser-theme-color:#0D0B08;
  --bg-rgb:13,11,8;--surface-1-rgb:22,19,16;--surface-2-rgb:30,25,16;--border-rgb:58,52,43;
}
:root[data-theme="dark"][data-surface="public"]{
  --bg:#100C0B;--surface-1:#1C1614;--surface-2:#261D1A;--surface-3:#302521;--surface-4:#392D28;
  --border:#463631;--border-soft:#352925;
  --ink:#F4ECE0;--ink-soft:#C9BDB3;--ink-mute:#B1A49A;--ink-faint:#91857B;
  --browser-theme-color:#100C0B;
  --bg-rgb:16,12,11;--surface-1-rgb:28,22,20;--surface-2-rgb:38,29,26;--border-rgb:70,54,49;
}

/* ── Fundaciones CLARAS por superficie ──────────────────────────────────── */
:root[data-theme="light"][data-surface="internal"]{
  --bg:#F4F2ED;--surface-1:#FCFBF8;--surface-2:#EBE7DF;--surface-3:#E1DCD2;--surface-4:#D6D0C5;
  --border:#C9C1B5;--border-soft:#DED8CE;
  --ink:#211E19;--ink-soft:#4C463D;--ink-mute:#655E53;--ink-faint:#6F675B;
  --browser-theme-color:#F4F2ED;
  --bg-rgb:244,242,237;--surface-1-rgb:252,251,248;--surface-2-rgb:235,231,223;--border-rgb:201,193,181;
}
:root[data-theme="light"][data-surface="pos"]{
  --bg:#F1EEE8;--surface-1:#FAF8F4;--surface-2:#E8E3DA;--surface-3:#DDD6CB;--surface-4:#D2CABD;
  --border:#C3BAAC;--border-soft:#D9D2C7;
  --ink:#211E19;--ink-soft:#4C463D;--ink-mute:#655E53;--ink-faint:#6F675B;
  --browser-theme-color:#F1EEE8;
  --bg-rgb:241,238,232;--surface-1-rgb:250,248,244;--surface-2-rgb:232,227,218;--border-rgb:195,186,172;
}
:root[data-theme="light"][data-surface="public"]{
  --bg:#F3F0EA;--surface-1:#FCFAF6;--surface-2:#E9E3DA;--surface-3:#DED6CC;--surface-4:#D2C8BC;
  --border:#C8BDB1;--border-soft:#E0D8CF;
  --ink:#231E1A;--ink-soft:#4F4841;--ink-mute:#625A52;--ink-faint:#756B62;
  --browser-theme-color:#F3F0EA;
  --bg-rgb:243,240,234;--surface-1-rgb:252,250,246;--surface-2-rgb:233,227,218;--border-rgb:200,189,177;
}

/* ── Derivados, semánticos y dominio por MODO (comunes a las superficies) ── */
:root[data-theme="dark"]{
  --card-bg:rgba(var(--surface-1-rgb),.90);
  --topbar-start:rgba(var(--bg-rgb),.98);
  --topbar-mid:rgba(var(--bg-rgb),.92);
  --topbar-end:rgba(var(--bg-rgb),0);
  --overlay:rgba(8,7,5,.82);
  --overlay-strong:rgba(0,0,0,.82);
  --shadow-sm:0 1px 3px rgba(0,0,0,.30);
  --shadow-md:0 4px 16px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.38);
  --shadow-lg:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.40);
  --noise-opacity:.028;
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A69B87' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color-scheme:dark;
  --ok:#86D39A;--ok-soft:#5DA66E;--ok-tint:#182A1D;--ok-contrast:#0A1C0F;--ok-rgb:134,211,154;
  --warn:#E2BC65;--warn-soft:#A9853C;--warn-tint:#302716;--warn-contrast:#241700;--warn-rgb:226,188,101;
  --err:#F08A7D;--err-soft:#B9594F;--err-tint:#351916;--err-contrast:#2A0C08;--err-rgb:240,138,125;
  --info:#80B8F4;--info-soft:#4F7FB5;--info-tint:#16283D;--info-contrast:#091827;--info-rgb:128,184,244;
  --pay-cash:#34D399;--pay-cash-tint:#0E2A16;
  --pay-qr:#60A5FA;--pay-qr-tint:#0D1A2A;
  --pay-card:#A78BFA;--pay-card-tint:#2B203E;
  --whatsapp:#25D366;--whatsapp-tint:#0E2A16;
  --delivery:#7B93D4;--delivery-tint:#1C1E2C;
  --cyan:#06B6D4;--cyan-tint:#0A1A1F;
}
:root[data-theme="light"]{
  --card-bg:rgba(var(--surface-1-rgb),.96);
  --topbar-start:rgba(var(--bg-rgb),.98);
  --topbar-mid:rgba(var(--bg-rgb),.94);
  --topbar-end:rgba(var(--bg-rgb),0);
  --overlay:rgba(33,30,25,.42);
  --overlay-strong:rgba(33,30,25,.70);
  --shadow-sm:0 1px 3px rgba(51,43,31,.10);
  --shadow-md:0 4px 16px rgba(51,43,31,.12),0 1px 4px rgba(51,43,31,.10);
  --shadow-lg:0 10px 34px rgba(51,43,31,.18),0 2px 8px rgba(51,43,31,.12);
  --noise-opacity:.018;
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23655E53' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color-scheme:light;
  --ok:#1F6A3A;--ok-soft:#8BB99A;--ok-tint:#E3F2E7;--ok-contrast:#FFFFFF;--ok-rgb:31,106,58;
  --warn:#745000;--warn-soft:#C7A34C;--warn-tint:#FFF2CE;--warn-contrast:#FFFFFF;--warn-rgb:116,80,0;
  --err:#A83B30;--err-soft:#D18A82;--err-tint:#F9E4E1;--err-contrast:#FFFFFF;--err-rgb:168,59,48;
  --info:#245EA8;--info-soft:#8BAAD0;--info-tint:#E3EEF9;--info-contrast:#FFFFFF;--info-rgb:36,94,168;
  --pay-cash:#146C43;--pay-cash-tint:#E3F2E7;
  --pay-qr:#1D4ED8;--pay-qr-tint:#E3ECFA;
  --pay-card:#6D28D9;--pay-card-tint:#EDE7FA;
  --whatsapp:#157A34;--whatsapp-tint:#E4F5E8;
  --delivery:#36558F;--delivery-tint:#E8EDF8;
  --cyan:#0E7490;--cyan-tint:#DFF4F7;
}

/* ── Acentos OSCUROS ────────────────────────────────────────────────────── */
:root[data-theme="dark"][data-accent="orange"]{
  --accent:#D97F3D;--accent-hover:#F09554;--accent-pressed:#B8642A;--accent-highlight:#FFA96B;
  --accent-soft:#B8642A;--accent-tint:#3A2818;--accent-fill:#F97316;--accent-contrast:#1A0F08;
  --accent-rgb:217,127,61;--accent-fill-rgb:249,115,22;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}
:root[data-theme="dark"][data-accent="blue"]{
  --accent:#60A5FA;--accent-hover:#7DB5FB;--accent-pressed:#3B82F6;--accent-highlight:#93C5FD;
  --accent-soft:#3B6FAF;--accent-tint:#172A43;--accent-fill:#60A5FA;--accent-contrast:#081A2E;
  --accent-rgb:96,165,250;--accent-fill-rgb:96,165,250;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}
:root[data-theme="dark"][data-accent="violet"]{
  --accent:#A78BFA;--accent-hover:#B9A4FB;--accent-pressed:#8B5CF6;--accent-highlight:#C4B5FD;
  --accent-soft:#7459B5;--accent-tint:#2B203E;--accent-fill:#A78BFA;--accent-contrast:#160D27;
  --accent-rgb:167,139,250;--accent-fill-rgb:167,139,250;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}

/* ── Acentos CLAROS ─────────────────────────────────────────────────────── */
:root[data-theme="light"][data-accent="orange"]{
  --accent:#A94F0D;--accent-hover:#873A06;--accent-pressed:#6F2E04;--accent-highlight:#C7611A;
  --accent-soft:#C9793A;--accent-tint:#F8E6D6;--accent-fill:#A94F0D;--accent-contrast:#FFFFFF;
  --accent-rgb:169,79,13;--accent-fill-rgb:169,79,13;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}
:root[data-theme="light"][data-accent="blue"]{
  --accent:#1D4ED8;--accent-hover:#1E40AF;--accent-pressed:#1E3A8A;--accent-highlight:#2563EB;
  --accent-soft:#6D8FD8;--accent-tint:#E3ECFA;--accent-fill:#1D4ED8;--accent-contrast:#FFFFFF;
  --accent-rgb:29,78,216;--accent-fill-rgb:29,78,216;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}
:root[data-theme="light"][data-accent="violet"]{
  --accent:#6D28D9;--accent-hover:#5B21B6;--accent-pressed:#4C1D95;--accent-highlight:#7C3AED;
  --accent-soft:#9A74D6;--accent-tint:#EDE7FA;--accent-fill:#6D28D9;--accent-contrast:#FFFFFF;
  --accent-rgb:109,40,217;--accent-fill-rgb:109,40,217;
  --focus-ring:rgba(var(--accent-rgb),.22);--accent-glow:rgba(var(--accent-rgb),.20);
}

/* ── Aliases del perfil público (recepción conserva sus nombres) ────────── */
:root[data-surface="public"]{
  --carbon:var(--bg);--carbon2:var(--surface-1);--carbon3:var(--surface-2);
  --linea:var(--border-soft);
  --brasa:var(--accent-fill);--brasa-deep:var(--accent-pressed);
  --crema:var(--ink);--ceniza:var(--ink-mute);--ceniza2:var(--ink-faint);
  --ambar:var(--warn);--verde:var(--ok);
}

/* ── Gate anti-parpadeo de la recepción pública (§22.2) ─────────────────── */
/* Solo oculta el CONTENIDO (.app) mientras se resuelve el tema por RPC; el
   fondo del documento queda visible. temas.js quita el atributo con
   revelarPublica() o al vencer el temporizador de seguridad. */
:root[data-theme-pending="true"] .app{visibility:hidden}

/* ── Foco visible universal (§17) — solo color, no layout ───────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
