:root {
  /* Azul noche: un solo azul es la base de toda la app (menú, textos, botón principal), en
     todas las empresas. Ver DESIGN.md. */
  --color-principal: #001d3d;
  --color-principal-claro: #0b2b52;
  --color-mar: #0466c8;
  --color-accion: var(--color-principal);
  --color-accion-oscuro: var(--color-principal-claro);
  --color-accion-suave: #e8edf3;
  --color-sobre-accion: #fff;

  --color-fondo: #f3f5f8;
  --color-superficie: #ffffff;
  --color-borde: #dfe4ea;
  --color-borde-suave: #edf0f4;
  --color-texto: var(--color-principal);
  --color-texto-suave: #56677a;
  --color-primario: var(--color-accion);
  --color-primario-oscuro: var(--color-accion-oscuro);
  --color-primario-suave: #eef2f6;
  --color-enlace: #0353a4;
  --color-exito: #12805c;
  --color-exito-suave: #e1f5ee;
  --color-exito-texto: #0e6b4c;
  --color-alerta: #7a4b00;
  --color-alerta-suave: #fdf1dc;
  --color-peligro: #a82019;
  --color-peligro-suave: #fdebea;
  --color-neutro-suave: #eef1f5;

  /* Menú lateral: azul noche fijo. El color de la empresa va solo en su logo, en Registrar pago,
     en la marca del menú activo y en las gráficas (public/js/marca.js cambia estas variables;
     sin color quedan en el azul mar de sumar). */
  --menu-fondo: var(--color-principal);
  --menu-texto: #e6ebf1;
  --menu-texto-suave: #a3b0bf;
  --menu-activo: rgb(255 255 255 / 10%);
  --menu-hover: rgb(255 255 255 / 6%);
  --marca-acento: #5aa2ec;
  --marca-pago-fondo: var(--color-mar);
  --marca-pago-texto: #fff;
  --marca-pago-hover: #0353a4;

  /* Gráficos: tonos de un solo color, el de la empresa (o el azul mar de sumar). Del más claro
     al más oscuro: menos a más vendido, menos a más atraso. */
  --grafico-base: var(--color-mar);
  --grafico-base-texto: #fff;
  --grafico-disponible: color-mix(in srgb, var(--grafico-base) 18%, white);
  --grafico-reservado: color-mix(in srgb, var(--grafico-base) 50%, white);
  --grafico-vendido: var(--grafico-base);
  --grafico-bloqueado: #d3d9e1;
  --grafico-suave: color-mix(in srgb, var(--grafico-base) 40%, white);
  --grafico-mora-1: color-mix(in srgb, var(--grafico-base) 28%, white);
  --grafico-mora-2: color-mix(in srgb, var(--grafico-base) 58%, white);
  --grafico-mora-3: var(--grafico-base);
  --grafico-mora-4: color-mix(in srgb, var(--grafico-base) 55%, #001d3d);

  --radio: 8px;
  --radio-chico: 6px;
  /* Solo lo que flota (menús, ventanas, avisos) lleva sombra; las tarjetas, un borde. */
  --sombra: none;
  --sombra-flotante: 0 10px 30px rgb(0 15 34 / 18%), 0 2px 6px rgb(0 15 34 / 10%);
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-numeros: var(--fuente);
  --ancho-menu: 240px;
  --alto-barra: 52px;

  /* Movimiento: curvas de salida fuertes y tiempos cortos (ver DESIGN.md). */
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Manrope servida desde la app (latín, peso variable 200–800, 25 KB). Licencia en fonts/OFL-manrope.txt. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
/* Lo oculto con el atributo hidden se oculta aunque su clase tenga display: grid/flex. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 700; }
h3 { font-size: 1rem; }

a { color: var(--color-enlace); }

.indicador__valor, .tabla__celda--numero, .recibo__numero, .recibo__total { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--color-enlace); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

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