/* ===========================================================================
   OMEGA — hoja de estilo base
   ---------------------------------------------------------------------------
   QUE HAY AQUI. La PALETA y las reglas de base. Los componentes siguen en
   orbit.css, que ya no define ningun color: los toma todos de este archivo.

   POR QUE SE SEPARO. El color estaba mezclado con 500 reglas de componentes, y
   cambiar la identidad obligaba a leerlas todas para saber que se movia. Aqui
   la paleta entera cabe en una pantalla y se puede cambiar entera de un vistazo
   -- que es exactamente lo que se hizo al escribirlo.

   SE CARGA ANTES QUE orbit.css. Si se invierte el orden, orbit.css no encuentra
   las variables y la pantalla sale sin color.
   =========================================================================== */

:root {
  /* --- LA MARCA: UN SOLO AZUL ------------------------------------------------
   *
   * Antes habia TRES familias de color compitiendo: un azul (#1e6bff), una
   * gama navy (--brand-900..600) y un acento teal (#00c9a7). Tres identidades
   * en una pantalla no son tres mensajes: son ninguno.
   *
   * El azul pasa de #1e6bff a #527898 — AZUL ACERO de verdad. La diferencia no
   * es de gusto: #1e6bff esta casi al maximo de saturacion, y un color asi NO
   * PUEDE SER ESCASO. Grita aunque cubra el 5% de la pantalla, y obliga a que
   * todo lo demas grite para que se le oiga. El acero se puede usar mas y sigue
   * tranquilo; eso es lo que se lee como «elegante».
   *
   * REVERSIBLE. Volver atras es cambiar estos seis valores. Nada mas depende
   * del color: ni una regla de orbit.css lleva un hex adentro. */
  --primary:      #527898;   /* acciones principales, foco, activo del menu */
  --primary-600:  #46688a;   /* un paso mas oscuro: hover */
  --primary-700:  #3b5b76;   /* enlaces de texto, pulsado */
  --primary-soft: #eef3f7;   /* relleno palido: fondos de icono, etiquetas */

  /* Los oscuros de la MISMA familia. Antes eran una gama navy aparte (#081229
   * y compania), que junto al azul brillante daba dos azules distintos en la
   * misma barra sin que ninguno significara nada. */
  --brand-900:    #1b2b38;
  --brand-800:    #22384a;
  --brand-700:    #2c4459;   /* el mas oscuro que se usa: barra, cabeceras */
  --brand-600:    #35526b;

  /* --- EL TEAL SE FUE, Y SU SIGNIFICADO SE QUEDO -----------------------------
   *
   * #00c9a7 significaba «sincronizacion / exito». Pero exito YA tenia color
   * —el verde de --success— asi que eran dos colores para una sola idea, y el
   * vendedor tenia que aprender cual era cual.
   *
   * `--accent` no se borra: se APUNTA al verde. Asi ninguna de las reglas que
   * lo usan hay que tocarla, y lo que antes salia teal ahora sale verde, que es
   * lo que siempre quiso decir. */
  --accent:       #2f7d5b;
  --accent-600:   #266a4c;
  --accent-soft:  #e9f4ee;

  /* --- SEMANTICOS: y SOLO para lo que significan -----------------------------
   *
   * Rojo, ambar y verde no son decoracion. Si algo se pinta de rojo, tiene que
   * haber alguien que deba hacer algo con eso. Un tono de azul distinto NO
   * comunica nada: no sirve para diferenciar estados. */
  --success:      #2f7d5b;   /* correcto, sincronizado, en curso */
  --success-soft: #e6f3ec;
  --warning:      #b8801a;   /* pendiente: ni bien ni mal, falta hacer algo */
  --warning-soft: #fdf6e7;
  --danger:       #b3453f;   /* requiere atencion, borrar, sin stock */
  --danger-soft:  #f8ebea;

  /* `--info` era un azul CLARO distinto del primario: un cuarto azul para no
   * decir nada. Es el mismo primario. */
  --info:         #527898;

  /* Estas tres SE USABAN SIN ESTAR DEFINIDAS. `--fg` no tenia ni valor de
   * reserva, asi que el texto de `.btn` (orbit.css) quedaba con un color
   * invalido y heredaba el de arriba — funcionaba de casualidad. `--warn` y
   * `--rose-600` sobrevivian por su fallback en cada sitio de uso, o sea que
   * el color estaba repetido a mano en ocho lugares. */
  --fg:           #2f3b45;   /* = --ink; lo pide .btn */
  --warn:         #b8801a;   /* = --warning; lo piden productos.js y supervisor.js */
  --rose-600:     #b3453f;   /* = --danger; lo pide sincronizar.js */

  /* --- NEUTROS --------------------------------------------------------------
   * Nunca negro puro: sobre un fondo casi blanco se ve duro y sucio. */
  --ink:          #2f3b45;   /* el texto */
  --ink-2:        #46545f;   /* texto secundario con peso */
  --muted:        #8a99a6;   /* etiquetas, metadatos, placeholders */
  --muted-2:      #a8b4bf;
  --line:         #dbe6ee;   /* borde de lo que se puede tocar */
  --line-2:       #eef2f5;   /* separadores y bordes de tarjeta: mas claro,
                                para que la tarjeta no compita con el campo */
  --surface:      #ffffff;   /* tarjetas, hojas, modales */
  --surface-2:    #f7f9fb;   /* cabeceras de tabla, filas al pasar */
  --bg:           #f4f7f9;   /* el lienzo */

  /* El fondo era un degradado radial azulado. Adorno: no separa nada ni marca
   * jerarquia, y le pone un tinte a cada tarjeta blanca que se apoya encima.
   * Plano. */
  --bg-grad:      var(--bg);

  /* --- TIPOGRAFIA -----------------------------------------------------------
   *
   * NO se carga ninguna fuente externa, y no es un olvido: esto es una PWA que
   * se usa con mala cobertura. Una fuente web son 40-80 KB y un parpadeo de
   * texto sin estilo antes de que llegue; la del sistema llega en cero
   * milisegundos y ademas es la que el vendedor ya lee todo el dia en su
   * telefono. Si alguien pide «una fuente mas bonita», este es el motivo del no.
   *
   * `Inter` se deja primero por si el equipo la tiene instalada; nunca se
   * descarga. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:   11.5px;   /* metadatos, pies, fecha de una fila */
  --fs-sm:   13px;     /* texto de una fila de lista, pestañas */
  --fs-md:   14.5px;   /* texto base */
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  34px;

  /* --- FORMA -----------------------------------------------------------------
   * Cuanto mas pequeño el elemento, menos radio: 16px en un chip de 20px de
   * alto lo convierte en una capsula deforme. */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* --- PROFUNDIDAD -----------------------------------------------------------
   *
   * Suaves a proposito: la separacion la hace el borde --line, no la sombra.
   * Una sombra fuerte sobre un fondo casi blanco se ve sucia. Se recalcaron
   * sobre el gris de la tinta en vez del azul de antes, que teñia de azul cada
   * borde de tarjeta. */
  --sh-1: 0 1px 2px rgba(47, 59, 69, .05), 0 1px 3px rgba(47, 59, 69, .04);
  --sh-2: 0 4px 14px rgba(47, 59, 69, .06);   /* reposo */
  --sh-3: 0 12px 34px rgba(47, 59, 69, .12);  /* lo que flota */
  --sh-4: 0 24px 60px rgba(27, 43, 56, .26);  /* modal sobre velo */

  /* El halo de foco. Es la señal de foco en TODA la app: nunca se quita el
   * outline sin poner el halo. */
  --ring: 0 0 0 4px rgba(82, 120, 152, .18);

  /* --- TEXTO SOBRE FONDO OSCURO ---------------------------------------------
   *
   * El menu lateral y la barra son oscuros, asi que su texto no puede salir de
   * --ink ni de --muted: se perderia. Estaban resueltos con azules sueltos
   * (#cdd8ec, #8da2c6, #b9c6df) que venian de la gama navy vieja — con la
   * paleta nueva chocaban, porque eran de otra familia.
   *
   * Aqui viven una vez y son de la MISMA familia que el resto. */
  --sobre-oscuro:   #c2d6e4;   /* texto legible sobre el azul profundo */
  --sobre-oscuro-2: #93aec4;   /* su version apagada: subtitulos, metadatos */

  --header-h:    64px;
  --rail-w:      256px;
  --bottomnav-h: 66px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================================================
   ZONA SEGURA
   ---------------------------------------------------------------------------
   Los telefonos con muesca se comen lo que quede pegado al borde. Estaba puesto
   en dos sitios sueltos; aqui va la regla general para que cualquier pantalla
   nueva la herede sin acordarse.
   =========================================================================== */
body { padding-bottom: env(safe-area-inset-bottom); }

/* ===========================================================================
   MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------------------
   NO ES OPCIONAL, y faltaba por completo. Hay gente a la que el movimiento le
   marea de verdad — no es una preferencia estetica, es un sintoma. Si el
   sistema lo pide, se apaga todo: transiciones, animaciones y el desplazamiento
   suave.

   Va al final y con `!important` a proposito: tiene que ganarle a cualquier
   regla de componente, incluidas las que se escriban mañana.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}