/* Paletas
   -------------------------------------------------------------------------
   Cada cliente elige la cara de su sistema en Configuración → Apariencia.
   La elección viaja como `data-paleta` en el <html> y acá solo se redefinen
   los tokens: ni un componente sabe de qué paleta se trata.

   La original ("clasica") no está en este archivo a propósito: es la de
   base.css, y no tener que repetirla es lo que garantiza que siga siendo el
   punto de partida de todo lo demás.

   La textura del fondo son gradientes, nunca imágenes. El sistema corre desde
   el disco del local y tiene que seguir corriendo sin internet. Los periodos
   no son números redondos: si lo fueran, la veta se leería como pana rayada.

   El contraste de los 17 pares que importan —texto, texto apagado, acento,
   botones, los seis chips de estado y el borde de los campos— está calculado,
   no estimado, y pasa AA en claro y en oscuro. El borde de campo llega a 3:1,
   que es lo que hace visible dónde se escribe. */

body { background-image: var(--textura, none); }

/* ===================================================== 1 · ROBLE Y LATÓN ===
   La mesa de madera clara con el riel de latón y el mantel de lino. La más
   luminosa: aguanta un local con ventanas. */

:root[data-paleta="roble"] {
  --bg: #f1ebdf;
  --surface: #fffdf8;
  --surface-2: #f7f1e5;
  --line: #e3d9c6;
  --line-2: #9a8666;
  --ink: #231d14;
  --ink-2: #4e4332;
  --ink-3: #6e624d;
  --accent: #7d5f16;
  --accent-soft: #f0e4c4;
  --focus: #a8862a;
  --hover: #f4e9cf;
  --ring: rgba(168, 134, 42, .32);
  --mesa-libre: #f5f0e3;

  --warn: #7a5000;    --warn-bg: #f8ebcb;
  --obs: #9a3c13;     --obs-bg: #fbe2d5;
  --bad: #992525;     --bad-bg: #f8dcdc;
  --mute: #5c5750;    --mute-bg: #e9e3d7;

  --inv-bg: #231d14;  --inv-ink: #fffdf8;
  --pri-bg: #231d14;  --pri-ink: #fffdf8;  --pri-hover: #120e08;

  --shadow: 0 1px 3px rgba(40, 28, 12, .08), 0 1px 1px rgba(40, 28, 12, .05);
  --shadow-lg: 0 18px 50px -14px rgba(60, 44, 20, .26);

  /* Lino: dos hilos cruzados cada 4px. Es el mantel. */
  --textura:
    repeating-linear-gradient(0deg, rgba(60, 44, 20, .026) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(60, 44, 20, .026) 0 1px, transparent 1px 4px);
}

:root[data-paleta="roble"][data-tema="oscuro"] {
  --bg: #15110a;
  --surface: #1e1911;
  --surface-2: #262016;
  --line: #38301e;
  --line-2: #7a6c4a;
  --ink: #f1e8d6;
  --ink-2: #cdc1a8;
  --ink-3: #9b8f76;
  --accent: #d9b155;
  --accent-soft: #3c2f13;
  --focus: #e6c470;
  --hover: #2c2415;
  --ring: rgba(230, 196, 112, .32);
  --mesa-libre: #17130c;

  --ok: #74c79b;      --ok-bg: #15301f;
  --warn: #e3ba57;    --warn-bg: #322711;
  --obs: #e59262;     --obs-bg: #362110;
  --info: #86b4f2;    --info-bg: #16253c;
  --bad: #f09292;     --bad-bg: #351a1a;
  --mute: #b0a998;    --mute-bg: #272419;

  --inv-bg: #2c2619;  --inv-ink: #f1e8d6;
  --pri-bg: #d9b155;  --pri-ink: #1b1610;  --pri-hover: #e6c470;
  --ok-solid: #2f8b5d; --obs-solid: #b4551f; --bad-solid: #a83434;

  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);

  --textura:
    repeating-linear-gradient(0deg, rgba(255, 253, 245, .022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 253, 245, .022) 0 1px, transparent 1px 4px);
}

/* ===================================================== 2 · NOGAL Y COBRE ===
   La barra de nogal, el jigger de cobre, el cuero del reservado. Ningún
   blanco puro en toda la pantalla: hasta el papel está tostado. */

:root[data-paleta="nogal"] {
  --bg: #e9dfd1;
  --surface: #fdf8f0;
  --surface-2: #f4ebdd;
  --line: #dccdb7;
  --line-2: #a08868;
  --ink: #2a1d13;
  --ink-2: #56412f;
  --ink-3: #6f5a45;
  --accent: #8f4f20;
  --accent-soft: #f3dbc3;
  --focus: #b56a33;
  --hover: #f6e3cf;
  --ring: rgba(181, 106, 51, .3);
  --mesa-libre: #f1e7d8;

  --ok: #1a6540;      --ok-bg: #daeee2;
  --warn: #78500b;    --warn-bg: #f7e9c9;
  --obs: #93380f;     --obs-bg: #fadfd0;
  --info: #1c4f96;    --info-bg: #dce6f6;
  --bad: #942323;     --bad-bg: #f7dad9;
  --mute: #5d5347;    --mute-bg: #e8ddcd;

  --inv-bg: #2a1d13;  --inv-ink: #fdf8f0;
  --pri-bg: #2a1d13;  --pri-ink: #fdf8f0;  --pri-hover: #180f07;

  --shadow: 0 1px 3px rgba(50, 32, 14, .09), 0 1px 1px rgba(50, 32, 14, .05);
  --shadow-lg: 0 18px 50px -14px rgba(60, 38, 16, .3);

  /* Veta: tres pasos de 3, 11 y 29 px. No son redondos a propósito — si lo
     fueran se leería como pana rayada en vez de como madera. */
  --textura:
    repeating-linear-gradient(91deg, rgba(74, 48, 20, .026) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(91deg, rgba(74, 48, 20, .018) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(91deg, rgba(74, 48, 20, .014) 0 2px, transparent 2px 29px);
}

:root[data-paleta="nogal"][data-tema="oscuro"] {
  --bg: #160f08;
  --surface: #20170e;
  --surface-2: #2a1e13;
  --line: #3d2d1c;
  --line-2: #806242;
  --ink: #f3e7d6;
  --ink-2: #d4bfa5;
  --ink-3: #a08a71;
  --accent: #e0905a;
  --accent-soft: #43270f;
  --focus: #eda572;
  --hover: #2e2114;
  --ring: rgba(237, 165, 114, .3);
  --mesa-libre: #18110a;

  --ok: #78c99e;      --ok-bg: #163020;
  --warn: #e5bc5c;    --warn-bg: #332712;
  --obs: #eb9a68;     --obs-bg: #382210;
  --info: #8ab6f3;    --info-bg: #17263d;
  --bad: #f29595;     --bad-bg: #361b1b;
  --mute: #b3ab99;    --mute-bg: #28241a;

  --inv-bg: #2e2417;  --inv-ink: #f3e7d6;
  --pri-bg: #e0905a;  --pri-ink: #1c1209;  --pri-hover: #eda572;
  --ok-solid: #2f8b5d; --obs-solid: #b4551f; --bad-solid: #a83434;

  --shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 1px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .72);

  --textura:
    repeating-linear-gradient(91deg, rgba(255, 240, 215, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(91deg, rgba(255, 240, 215, .013) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 29px);
}

/* ================================================ 3 · ÉBANO Y ORO VIEJO ===
   Madera teñida oscura, pan de oro gastado, luz baja. Es la única pensada
   para vivir de noche: el modo claro existe, pero es el de respaldo. */

:root[data-paleta="ebano"] {
  --bg: #eae6de;
  --surface: #fbf9f5;
  --surface-2: #f2eee6;
  --line: #ded8cc;
  --line-2: #918878;
  --ink: #1c1a15;
  --ink-2: #49453c;
  --ink-3: #6b655a;
  --accent: #756118;
  --accent-soft: #ece3c4;
  --focus: #a68c2e;
  --hover: #f0e9d2;
  --ring: rgba(166, 140, 46, .3);
  --mesa-libre: #f1eee6;

  --warn: #755000;    --warn-bg: #f6ebcc;
  --obs: #973c14;     --obs-bg: #fae2d6;
  --bad: #962525;     --bad-bg: #f7dcdc;
  --mute: #5a564e;    --mute-bg: #e7e3da;

  --inv-bg: #1c1a15;  --inv-ink: #fbf9f5;
  --pri-bg: #1c1a15;  --pri-ink: #fbf9f5;  --pri-hover: #000;

  --shadow: 0 1px 3px rgba(30, 26, 16, .08), 0 1px 1px rgba(30, 26, 16, .05);
  --shadow-lg: 0 18px 50px -14px rgba(40, 34, 20, .26);

  /* Listones: el panel ranurado detrás de una barra, con la luz cayendo
     desde arriba. */
  --textura:
    radial-gradient(120% 80% at 50% -10%, rgba(166, 140, 46, .05), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 2px,
      rgba(70, 58, 30, .035) 2px 3px, transparent 3px 19px);
}

:root[data-paleta="ebano"][data-tema="oscuro"] {
  --bg: #0d0c0a;
  --surface: #191714;
  --surface-2: #211e1a;
  --line: #2f2b25;
  --line-2: #6f6658;
  --ink: #ede9e0;
  --ink-2: #c5bfb2;
  --ink-3: #938c7f;
  --accent: #cba736;
  --accent-soft: #352d0f;
  --focus: #dfbc4e;
  --hover: #272217;
  --ring: rgba(223, 188, 78, .32);
  --mesa-libre: #100f0c;

  --ok: #71c498;      --ok-bg: #132e1d;
  --warn: #e0b854;    --warn-bg: #30260f;
  --obs: #e2905f;     --obs-bg: #34200e;
  --info: #83b2f0;    --info-bg: #14233a;
  --bad: #ee9090;     --bad-bg: #331919;
  --mute: #ada695;    --mute-bg: #252218;

  --inv-bg: #282419;  --inv-ink: #ede9e0;
  --pri-bg: #cba736;  --pri-ink: #17150f;  --pri-hover: #dfbc4e;
  --ok-solid: #2f8b5d; --obs-solid: #b4551f; --bad-solid: #a83434;

  --shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 1px rgba(0, 0, 0, .4);
  --shadow-lg: 0 20px 56px -14px rgba(0, 0, 0, .78);

  --textura:
    radial-gradient(120% 80% at 50% -10%, rgba(203, 167, 54, .07), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 236, 185, .022) 0 1px, transparent 1px 2px,
      rgba(0, 0, 0, .32) 2px 3px, transparent 3px 19px);
}

/* La barra lateral se tiñe con la paleta. base.css le pone un gris fijo en
   modo noche, de cuando había una sola; acá cada una pone el suyo. */
:root[data-paleta="roble"][data-tema="oscuro"] .side { background: #191409; }
:root[data-paleta="nogal"][data-tema="oscuro"] .side { background: #1a1209; }
:root[data-paleta="ebano"][data-tema="oscuro"] .side { background: #141210; }


/* El papel no lleva textura ni fondo: la impresora no imprime decoración, y
   una trama al 2% sobre un ticket térmico sale como suciedad. */
@media print {
  body { background-image: none; }
}