/* ═══════════════════════════════════════════════════════════════════════════
   POSventas · Paleta de la pantalla de entrada
   ═══════════════════════════════════════════════════════════════════════════

   Este archivo NO maqueta nada: solo declara los tokens `--esc-*`. La
   maquetación (tarjeta, campos, rejilla de dos columnas) vive en escena.css y
   el dibujo en Views/Shared/_Escena.cshtml. Están separados a propósito.

   Antes esto era un juego de reglas `.login-*` que ya no cargaba nadie: las
   tres pantallas de entrada habían pasado a `.escena-*` y este archivo se quedó
   atrás, huérfano. Un archivo huérfano en wwwroot es peor que ninguno, porque
   el siguiente que abra la carpeta lo edita creyendo que toca la pantalla real,
   recarga, y no ve cambiar nada. Se le dio el trabajo que faltaba.

   El trabajo que faltaba es este: la ilustración de la entrada es un SVG
   incrustado que se pinta ENTERO con estas variables, y el requisito es que
   ningún color quede escrito a fuego donde deba cambiar. Con todos los tonos
   en un archivo, comprobar que un skin nuevo o el modo oscuro no dejan un color
   suelto es leer una pantalla, en vez de rastrear un SVG de trescientas líneas.

   ─── Cuidado con el ORDEN, que es lo único delicado de aquí ───────────────

   `html[data-skin="winnet"]` y `html[data-modo="oscuro"]` tienen EXACTAMENTE la
   misma especificidad (0,1,1). A igual especificidad gana el que va después, así
   que si el bloque oscuro se escribiera antes que los skins, un usuario de
   Winnet en oscuro recibiría los colores CLAROS de Winnet: texto claro sobre
   fondo claro y una tarjeta ilegible.

   Por eso el orden es: estándar claro → estándar oscuro → skins claros → cada
   skin en oscuro con su selector doble (0,2,1), que gana siempre. Y por eso
   cada bloque repite el juego COMPLETO de tokens en vez de retocar cuatro: un
   bloque incompleto hereda del anterior de la lista, no del que uno cree.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════ ESTÁNDAR · claro (el de fábrica) ══════════════════ */
:root {
  /* Verde muy lavado, no blanco puro: el blanco puro deslumbra bajo tubo
     fluorescente y además impide que la tarjeta se despegue del fondo. */
  --esc-fondo:     #eef4f1;
  --esc-papel:     #ffffff;
  --esc-texto:     #14342a;
  --esc-suave:     #5b7a6e;
  --esc-tinta:     #10b981;
  --esc-brillo:    #059669;
  --esc-chispa:    #f59e0b;
  --esc-sello-txt: #ffffff;

  /* Dibujo */
  --esc-linea:     #14614b;   /* trazo del vector: el único «negro» que hay */
  --esc-mueble:    #ffffff;   /* cara iluminada del mostrador y la estantería */
  --esc-mueble-2:  #d8ebe2;   /* cara en sombra: baldas, cajones, pliegues */
  --esc-pantalla:  #d1fae5;   /* pantalla del terminal, encendida */
  --esc-prod-1:    #a7f3d0;
  --esc-prod-2:    #fde68a;
  --esc-prod-3:    #bae6fd;
  --esc-piso:      rgba(16, 70, 52, .12);

  /* Aviso de error. Va en tokens porque el rojo pálido de siempre sobre la
     tarjeta oscura no se lee: queda granate sobre casi negro, y ese aviso es
     justo el que hay que poder leer con prisa. */
  --esc-mal-fondo: #fef2f2;
  --esc-mal-borde: #fecaca;
  --esc-mal-tinta: #991b1b;
}

/* ══════════════════════ ESTÁNDAR · oscuro ═════════════════════════════════ */
html[data-modo="oscuro"] {
  --esc-fondo:     #0f1a16;
  --esc-papel:     #17241f;
  --esc-texto:     #e6efea;
  --esc-suave:     #93aaa0;
  --esc-tinta:     #10b981;
  --esc-brillo:    #6ee7b7;
  --esc-chispa:    #fbbf24;
  --esc-sello-txt: #04140f;

  /* En oscuro el trazo se INVIERTE. Sigue siendo el contorno del dibujo, pero
     ahora tiene que ser lo claro sobre lo oscuro: un contorno oscuro sobre
     fondo oscuro no desaparece limpiamente, deja un halo sucio alrededor de
     cada figura y el dibujo se ve emborronado, no sobrio. */
  --esc-linea:     #78d9b6;
  --esc-mueble:    #1e2f28;
  --esc-mueble-2:  #16241f;
  --esc-pantalla:  #08211a;
  --esc-prod-1:    #2f6b56;
  --esc-prod-2:    #6b5a2a;
  --esc-prod-3:    #2c4d63;
  --esc-piso:      rgba(0, 0, 0, .40);

  --esc-mal-fondo: #34181a;
  --esc-mal-borde: #6b2b2f;
  --esc-mal-tinta: #ffb4ae;
}

/* ══════════════════════ WINNET · claro ════════════════════════════════════ */
html[data-skin="winnet"] {
  --esc-fondo:     #eef2f7;
  --esc-papel:     #ffffff;
  --esc-texto:     #10243a;
  --esc-suave:     #566b82;
  --esc-tinta:     #0078d4;
  --esc-brillo:    #005a9e;
  --esc-chispa:    #ca8a04;
  --esc-sello-txt: #ffffff;

  --esc-linea:     #17456e;
  --esc-mueble:    #ffffff;
  --esc-mueble-2:  #dbe7f3;
  --esc-pantalla:  #d6e8f8;
  --esc-prod-1:    #bfdcf5;
  --esc-prod-2:    #f6e3ae;
  --esc-prod-3:    #cdd8e6;
  --esc-piso:      rgba(16, 40, 70, .12);

  --esc-mal-fondo: #fdeeec;
  --esc-mal-borde: #e0aaa4;
  --esc-mal-tinta: #8b1f14;
}

/* ══════════════════════ SPYRO · claro ═════════════════════════════════════ */
html[data-skin="spyro"] {
  --esc-fondo:     #faf1e8;
  --esc-papel:     #fffaf5;
  --esc-texto:     #3d2415;
  --esc-suave:     #8a6b56;
  --esc-tinta:     #c2703f;
  --esc-brillo:    #9a5730;
  --esc-chispa:    #0d9488;
  --esc-sello-txt: #fff7f0;

  --esc-linea:     #7a4423;
  --esc-mueble:    #fffaf5;
  --esc-mueble-2:  #f0dcc9;
  --esc-pantalla:  #f7e5d4;
  --esc-prod-1:    #f5d6b8;
  --esc-prod-2:    #cfe8dd;
  --esc-prod-3:    #f3c9a8;
  --esc-piso:      rgba(120, 68, 35, .14);

  --esc-mal-fondo: #f7e8e7;
  --esc-mal-borde: #ddb8b6;
  --esc-mal-tinta: #8a3a39;
}

/* ══════════════════════ WINNET · oscuro ═══════════════════════════════════ */
html[data-skin="winnet"][data-modo="oscuro"] {
  --esc-fondo:     #1a222d;
  --esc-papel:     #232d3b;
  --esc-texto:     #e8eef5;
  --esc-suave:     #92a6bd;
  --esc-tinta:     #2a90e0;
  --esc-brillo:    #7cc0f5;
  --esc-chispa:    #e0b34a;
  --esc-sello-txt: #06121d;

  --esc-linea:     #82b9e6;
  --esc-mueble:    #2b3746;
  --esc-mueble-2:  #1f2a36;
  --esc-pantalla:  #0e1d2b;
  --esc-prod-1:    #2b4a66;
  --esc-prod-2:    #5d4f2a;
  --esc-prod-3:    #33465c;
  --esc-piso:      rgba(0, 0, 0, .45);

  --esc-mal-fondo: #3a2320;
  --esc-mal-borde: #5e3a33;
  --esc-mal-tinta: #eaa79e;
}

/* ══════════════════════ SPYRO · oscuro ════════════════════════════════════ */
html[data-skin="spyro"][data-modo="oscuro"] {
  --esc-fondo:     #1c1512;
  --esc-papel:     #2a201a;
  --esc-texto:     #f5ebe2;
  --esc-suave:     #b39a85;
  --esc-tinta:     #cf7f4c;
  --esc-brillo:    #e0a274;
  --esc-chispa:    #4fbfa8;
  --esc-sello-txt: #1a0f08;

  --esc-linea:     #dba87e;
  --esc-mueble:    #33261e;
  --esc-mueble-2:  #241b16;
  --esc-pantalla:  #241610;
  --esc-prod-1:    #4a3526;
  --esc-prod-2:    #2b4038;
  --esc-prod-3:    #56392a;
  --esc-piso:      rgba(0, 0, 0, .45);

  --esc-mal-fondo: #3a2028;
  --esc-mal-borde: #5c3340;
  --esc-mal-tinta: #f3aab8;
}

/* ══════════════════════ PROVEEDOR · la otra puerta ════════════════════════
   El panel del proveedor administra TODAS las empresas del sistema, y quien lo
   usa tiene las dos pantallas abiertas en el mismo navegador. Si las dos
   puertas se parecieran, tarde o temprano alguien teclea la clave de root en la
   caja de la tienda —o al revés— y esa clave termina en la bitácora de intentos
   fallidos del otro sistema, escrita en claro por quien la escribió.

   Por eso esta puerta es azul pizarra y NO sigue ni al skin ni al modo: es
   siempre la misma, y se reconoce desde el otro extremo del mostrador. Los
   selectores repetidos suben la especificidad por encima de cualquier
   combinación de data-skin y data-modo, para que siga ganando aunque mañana
   alguien decida pintar también data-skin en el <html> del panel. */
html.esc-root,
html.esc-root[data-modo],
html.esc-root[data-skin],
html.esc-root[data-skin][data-modo] {
  --esc-fondo:     #0e1626;
  --esc-papel:     #18223a;
  --esc-texto:     #e7edf7;
  --esc-suave:     #8497b7;
  --esc-tinta:     #38bdf8;
  --esc-brillo:    #7dd3fc;
  --esc-chispa:    #fbbf24;
  --esc-sello-txt: #051021;

  --esc-linea:     #5f89c0;
  --esc-mueble:    #1d2942;
  --esc-mueble-2:  #151e33;
  --esc-pantalla:  #0a1424;
  --esc-prod-1:    #23405f;
  --esc-prod-2:    #4b4327;
  --esc-prod-3:    #2b3a55;
  --esc-piso:      rgba(0, 0, 0, .50);

  --esc-mal-fondo: #331a22;
  --esc-mal-borde: #63313f;
  --esc-mal-tinta: #ffb0bf;
}