/* Base común de las tres apps (gestión, taller y panel): colores, letra,
   foco y lo mínimo de reinicio. Cada app pone encima su propia hoja.
   Criterio: herramienta de trabajo. Color solo para estados y acciones,
   una sola familia de letra y los mismos estados en todas partes. */

:root
{
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --superficie-2: #f9fafb;
  --borde: #e2e5ea;
  --borde-fuerte: #c9ced6;
  --texto: #14181f;
  --texto-suave: #5a6270;
  --lateral: #151a22;
  --lateral-texto: #c6ccd6;
  --lateral-activo: #262d38;

  --acento: #1f4fd1;
  --acento-hover: #1a43b3;
  --acento-suave: #e8eefc;

  /* Vocabulario de estados: el mismo significado en todas las apps. */
  --ok: #17663a;
  --ok-fondo: #e3f5ea;
  --atencion: #8a4b06;
  --atencion-fondo: #fdf1dc;
  --peligro: #b42318;
  --peligro-fondo: #fde8e6;
  --proceso: #5b3fc4;
  --proceso-fondo: #efeafd;
  --neutro: #3d4450;
  --neutro-fondo: #eef0f3;

  --t-xs: 0.75rem;
  --t-s: 0.8125rem;
  --t-m: 0.9375rem;
  --t-l: 1.125rem;
  --t-xl: 1.375rem;

  --radio: 6px;
  --sombra: 0 1px 2px rgb(20 24 31 / 6%), 0 1px 3px rgb(20 24 31 / 8%);
  --sombra-flotante: 0 8px 28px rgb(20 24 31 / 18%);
  --foco: 0 0 0 3px rgb(31 79 209 / 35%);
  --rapido: 150ms;

  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark)
{
  :root
  {
    --fondo: #0f1217;
    --superficie: #171b22;
    --superficie-2: #1c212a;
    --borde: #2a303b;
    --borde-fuerte: #3a4250;
    --texto: #e8ebf0;
    --texto-suave: #9aa3b2;
    --lateral: #0a0d11;
    --lateral-texto: #aeb6c3;
    --lateral-activo: #1c222c;

    --acento: #6f95ff;
    --acento-hover: #8eabff;
    --acento-suave: #1b2645;

    --ok: #6fd69a;
    --ok-fondo: #12301f;
    --atencion: #f2b866;
    --atencion-fondo: #35270f;
    --peligro: #ff8f86;
    --peligro-fondo: #3a1715;
    --proceso: #b6a3ff;
    --proceso-fondo: #261d47;
    --neutro: #c3cad5;
    --neutro-fondo: #262c36;

    --sombra: 0 1px 2px rgb(0 0 0 / 40%);
    --sombra-flotante: 0 8px 28px rgb(0 0 0 / 55%);
    --foco: 0 0 0 3px rgb(111 149 255 / 45%);

    color-scheme: dark;
  }
}

*,
*::before,
*::after
{
  box-sizing: border-box;
}

html
{
  -webkit-text-size-adjust: 100%;
}

body
{
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: var(--t-m);
  line-height: 1.5;
}

::selection
{
  background: var(--acento-suave);
  color: var(--texto);
}

[hidden]
{
  display: none !important;
}

img
{
  max-width: 100%;
}

button,
input,
select,
textarea
{
  font: inherit;
  color: inherit;
}

button
{
  cursor: pointer;
}

h1,
h2,
h3
{
  margin: 0;
  line-height: 1.25;
  font-weight: 650;
}

code
{
  font-family: var(--letra-mono);
}

:focus-visible
{
  outline: none;
  box-shadow: var(--foco);
}

/* Barras de scroll discretas, con el tema. */
*
{
  scrollbar-color: var(--borde-fuerte) transparent;
  scrollbar-width: thin;
}

.icono
{
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sr
{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.esqueleto
{
  display: block;
  height: 0.75rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--neutro-fondo) 25%, var(--superficie-2) 50%, var(--neutro-fondo) 75%);
  background-size: 200% 100%;
  animation: brillo 1.2s ease-in-out infinite;
}

@keyframes brillo
{
  from
  {
    background-position: 100% 0;
  }

  to
  {
    background-position: -100% 0;
  }
}

@keyframes entrar
{
  from
  {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce)
{
  *,
  *::before,
  *::after
  {
    animation: none !important;
    transition: none !important;
  }
}