/* =====================================================================
   tema.css — Paleta y bases compartidas de TODO el sistema TEO-CALLY.
   Lo usan tanto el login (login.css) como el panel interno (app.css),
   así que aquí solo van cosas que NO cambian entre pantallas: colores,
   la fuente de marca y un reset mínimo. Cada hoja de estilos que lo
   necesite debe cargar este archivo ANTES que la suya propia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   VARIABLES DE MARCA
   Un solo lugar para toda la paleta: si el taller pide cambiar el
   acento dorado o el negro base, se edita aquí y se actualiza todo
   el sistema (login + panel interno) a la vez.
   --------------------------------------------------------------------- */
:root{
  /* --- superficies (de más oscura a más clara) --- */
  --negro: #050506;               /* fondo base de toda la app */
  --negro-panel: #0b0b0d;         /* paneles grandes (login, contenido) */
  --negro-elevado: #131316;       /* tarjetas, sidebar, filas de tabla, modal: "flotan" sobre el fondo */
  --gris-campo: #17171a;          /* relleno de inputs tipo "pill" */

  /* --- bordes --- */
  --borde: rgba(255,255,255,0.14);      /* separaciones sutiles (tarjetas, tablas, inputs) */
  --borde-fuerte: rgba(255,255,255,0.4);/* elementos que deben notarse más (botón principal, foco) */

  /* --- texto --- */
  --texto: #f4f3f0;                     /* texto principal, blanco hueso */
  --texto-tenue: rgba(244,243,240,0.5); /* labels, placeholders, texto secundario */

  /* --- acento de marca --- */
  --acento: #c9a86a;              /* dorado: link activo del menú, foco de marca, KPI destacado */

  /* --- estados (badges de estatus de orden, stock, usuarios activos, etc.) --- */
  --info: #82868f;                /* estatus "Recibido" -- gris neutro (sin azul) */
  --alerta: #f2c14e;              /* estatus "En Proceso", stock cerca del mínimo */
  --exito: #7ed9a8;               /* estatus "Entregado/Terminado", usuario activo */
  --error: #ff8a80;               /* errores de formulario, stock bajo, usuario inactivo */

  /* --- geometría reutilizable --- */
  --radio-pill: 999px;            /* inputs y botones tipo cápsula */
  --radio-card: 14px;             /* tarjetas, tablas, modales */
}

/* Reset mínimo: sin esto, paddings/bordes de inputs y tarjetas suman
   al ancho declarado y rompen los layouts de cápsula/columna. */
*{ box-sizing: border-box; }

/* El atributo hidden del HTML se apoya en una regla del navegador de
   muy baja prioridad (display:none), así que CUALQUIER regla propia
   que fije display -- un .algo{display:flex} -- se la gana y el
   elemento sigue visible aunque diga hidden. Esto lo vuelve a poner
   por encima, para que hidden signifique oculto siempre. */
[hidden]{ display: none !important; }

/* El azul del navegador se cuela por tres lados; los tres se cambian
   al dorado de la marca para que ningún control se salga de la paleta:
     - accent-color: el relleno de checkboxes/radios (azul por defecto).
     - ::selection: el resaltado al seleccionar texto.
     - caret-color: la barrita que parpadea al escribir.
   (El autorrelleno de Chrome, que también pinta de azul, se resuelve
   aparte en app.css y login.css porque cada uno tiene su propio color
   de fondo.) */
:root{ accent-color: var(--acento); }
input, textarea, select{ caret-color: var(--acento); }
::selection{ background: rgba(201,168,106,0.32); }

/* Base de tipografía y color de fondo. Cada página puede sobreescribir
   comportamiento de scroll/alto (el login es 100vh fijo sin scroll, el
   panel interno sí hace scroll) -- eso NO va aquí, va en login.css/app.css. */
html, body{
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   TIPOGRAFÍA DE MARCA
   Montserrat Light: trazos finos, el mismo look que ya se definió en
   el mockup del login. Se declara una sola vez aquí para que ninguna
   otra hoja de estilos vuelva a apuntar al archivo .otf.
   --------------------------------------------------------------------- */
@font-face{
  font-family: 'Montserrat';
  src: url('../_fnt/Montserrat-Light.otf');
  font-weight: 300;
}

/* ---------------------------------------------------------------------
   TEXTURA DE GRANO
   Capa de ruido fotográfico (filtro SVG feTurbulence en data-URI, sin
   depender de ningún archivo de imagen) que tanto el login como el
   panel interno colocan sobre su fondo para que no se vea "plano" de
   CSS. Cada pantalla decide su propio fondo de color (.fondo-auto en
   login.css, .fondo-app en app.css); esta capa va siempre encima.
   --------------------------------------------------------------------- */
.fondo-grano{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}