/* Inter auto-hospedada: DESIGN.md promete que la fuente vive en el repo y que el sistema
   no depende de que un tercero la sirva. La ruta es relativa a ESTE archivo. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../marca/tipografia/Inter-Variable.ttf') format('truetype-variations');
}

/* GENERADO por scripts/generar-tokens.py desde tokens.source.json — NO EDITAR A MANO
   manda — Remesas que te acercan.
   El logo es DIBUJO, no tipografía: son contornos trazados del PNG que aprobó el founder y no dependen de ninguna fuente. No existe una 'tipografía de marca' que alguien pueda componer para imitar el logo. La UI es Inter, sin excepción. Si algo tiene que parecerse al logo, se usa el logo.
*/

:root {
  /* ---------- primitivos: rampa neutra (anclada en los colores de marca) ---------- */
  --manda-neutral-0: #FFFFFF; /* blanco puro, superficies elevadas */
  --manda-neutral-25: #FAFAFB; /*  MARCA: Fondo. fondo general de la app */
  --manda-neutral-50: #F0F1F3; /* superficie sutil, filas alternas */
  --manda-neutral-100: #E4E6E9; /* divisores suaves */
  --manda-neutral-200: #CFD5D9; /* borde decorativo */
  --manda-neutral-300: #B3BCC3; /* borde de campo en reposo */
  --manda-neutral-400: #94A1AB; /*  MARCA: Gris. SOLO decorativo en claro (2,53:1). En oscuro es texto secundario válido (7,06:1). */
  --manda-neutral-500: #85939F; /* borde interactivo mínimo en claro (3,02:1) */
  --manda-neutral-600: #667582; /* texto secundario en claro (4,54:1) */
  --manda-neutral-700: #4A545C; /* texto terciario fuerte */
  --manda-neutral-800: #364048; /* borde en modo oscuro */
  --manda-neutral-900: #283139; /* superficie elevada oscura */
  --manda-neutral-950: #1C252C; /*  MARCA: Antracita. texto principal, titulares, navegación */

  /* ---------- primitivos: rampa rosa (anclada en los colores de marca) ---------- */
  --manda-rosa-50: #FAF4F6; /* tinte apenas perceptible */
  --manda-rosa-100: #F3E6EA; /*  MARCA: Rosa muy claro. superficie de marca, fondo de botón secundario */
  --manda-rosa-200: #E6B6C3; /* borde de botón secundario */
  --manda-rosa-300: #D77B94; /*  MARCA: Rosa claro. DECORATIVO. Nunca texto (2,82:1), nunca con blanco encima (2,94:1). */
  --manda-rosa-400: #C55F7C; /* rosa de marca en modo oscuro (4,71:1 sobre el fondo oscuro) */
  --manda-rosa-500: #AD3F5F; /*  MARCA: Rosa principal. acciones, CTA, iconos activos, el punto. 5,51:1 como texto, 5,75:1 con blanco encima. */
  --manda-rosa-600: #913550; /* hover del primario */
  --manda-rosa-700: #792C42; /* pressed del primario */
  --manda-rosa-800: #5D2233; /* tinte de marca en superficie oscura */
  --manda-rosa-900: #421824; /* extremo oscuro de la rampa */

  /* ---------- primitivos: estado ---------- */
  --manda-exito-fill: #16A34A; /*  MARCA: Éxito. relleno de icono, punto y badge. Con blanco encima da 3,30:1: sirve para gráfico, NO para texto. */
  --manda-exito-tinta: #11803B; /* verde como TEXTO. Derivado para pasar 4,5:1 sobre el fondo general (4,82) Y sobre su propio tinte (4,51), que es donde vive. */
  --manda-exito-tinte: #E8F6EE; /* fondo de mensaje positivo */
  --manda-exito-tintaOscura: #16A34A; /* en modo oscuro el verde de marca ya cumple */
  --manda-exito-tinteOscuro: #10251A; /* fondo de mensaje positivo en oscuro */
  --manda-error-fill: #DC2626; /*  MARCA: Error. cumple en los dos sentidos: 4,63:1 como texto y 4,83:1 con blanco encima */
  --manda-error-tinta: #D22222; /* rojo como TEXTO. El #DC2626 de marca pasa sobre el fondo general pero se cae a 4,16:1 sobre su propio tinte; este pasa en los dos (5,04 y 4,53). */
  --manda-error-tinte: #FCEAEA; /* fondo de mensaje de error */
  --manda-error-tintaOscura: #EA6060; /* rojo como TEXTO en oscuro: 5,64:1 sobre el fondo y 5,25:1 sobre su propio tinte. El relleno del botón destructivo sigue siendo el #DC2626 de marca con blanco encima. */
  --manda-error-tinteOscuro: #2A1414; /* fondo de mensaje de error en oscuro */
  --manda-aviso-fill: #1C252C; /* antracita. Relleno del icono y del punto del estado desconocido. 14,91:1 sobre el fondo general, muy por encima del 3:1 de gráfico. */
  --manda-aviso-tinta: #1C252C; /* antracita como texto del mensaje: 14,91:1 sobre el fondo y 13,76:1 sobre su propio tinte. */
  --manda-aviso-tinte: #F0F1F3; /* neutral.50. Fondo del mensaje. Se despega del fondo general 1,08:1, el mismo peso que el tinte de éxito (1,07) y el de error (1,11): las tres alertas tienen que pesar igual. */
  --manda-aviso-tintaOscura: #E4E6E9; /* en oscuro la antracita es invisible (1,20:1 sobre el fondo oscuro), así que el estado usa su contraparte clara, igual que hace `texto`. 14,93:1 sobre el fondo oscuro. */
  --manda-aviso-tinteOscuro: #1A2229; /* la antracita al 93% de luminosidad: conserva su tono en vez de ser un gris genérico. 1,16:1 contra el fondo oscuro, el mismo despegue que éxito y error en oscuro. */

  /* ---------- semánticos: modo claro ---------- */
  --manda-bg: var(--manda-neutral-25);
  --manda-bg-elevado: var(--manda-neutral-0);
  --manda-superficie: var(--manda-neutral-0);
  --manda-superficie-sutil: var(--manda-neutral-50);
  --manda-superficie-marca: var(--manda-rosa-100);
  --manda-superficie-inversa: var(--manda-neutral-950);
  --manda-texto-sobre-inversa: var(--manda-rosa-100);
  --manda-marca-sobre-inversa: var(--manda-rosa-300);
  --manda-texto: var(--manda-neutral-950);
  --manda-texto-secundario: var(--manda-neutral-600);
  --manda-texto-tenue: var(--manda-neutral-500);
  --manda-texto-inverso: var(--manda-neutral-0);
  --manda-texto-marca: var(--manda-rosa-500);
  --manda-borde: var(--manda-neutral-200);
  --manda-borde-campo: var(--manda-neutral-500);
  --manda-borde-fuerte: var(--manda-neutral-500);
  --manda-deshabilitado-bg: var(--manda-neutral-50);
  --manda-deshabilitado-fg: var(--manda-neutral-400);
  --manda-deshabilitado-borde: var(--manda-neutral-200);
  --manda-borde-marca: var(--manda-rosa-500);
  --manda-primario: var(--manda-rosa-500);
  --manda-primario-hover: var(--manda-rosa-600);
  --manda-primario-activo: var(--manda-rosa-700);
  --manda-primario-fg: var(--manda-neutral-0);
  --manda-secundario-bg: var(--manda-rosa-100);
  --manda-secundario-fg: var(--manda-rosa-500);
  --manda-secundario-borde: var(--manda-rosa-200);
  --manda-secundario-bg-hover: var(--manda-rosa-200);
  --manda-secundario-fg-hover: var(--manda-rosa-700);
  --manda-terciario-bg: var(--manda-neutral-0);
  --manda-terciario-fg: var(--manda-rosa-500);
  --manda-terciario-borde: var(--manda-rosa-300);
  --manda-terciario-bg-hover: var(--manda-neutral-50);
  --manda-terciario-bg-activo: var(--manda-neutral-100);
  --manda-exito: var(--manda-exito-fill);
  --manda-exito-texto: var(--manda-exito-tinta);
  --manda-exito-bg: var(--manda-exito-tinte);
  --manda-exito-fg: var(--manda-neutral-0);
  --manda-error: var(--manda-error-fill);
  --manda-error-texto: var(--manda-error-tinta);
  --manda-error-bg: var(--manda-error-tinte);
  --manda-error-fg: var(--manda-neutral-0);
  --manda-foco: var(--manda-rosa-500);
  --manda-aviso: var(--manda-aviso-fill);
  --manda-aviso-texto: var(--manda-aviso-tinta);
  --manda-aviso-bg: var(--manda-aviso-tinte);
  --manda-aviso-fg: var(--manda-neutral-0);

  /* ---------- tipografía ---------- */
  --manda-font-ui: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* todo el producto. Es la única tipografía del sistema. */
  --manda-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* referencias tipo #MDA23871. Pila del sistema a propósito: no se descarga nada y no hay una segunda familia que mantener. */

  --manda-size-displayMarketing: 76px;
  --manda-lh-displayMarketing: 1.02;
  --manda-peso-displayMarketing: 700;
  --manda-track-displayMarketing: -0.035em;
  --manda-size-display: 36px;
  --manda-lh-display: 1.15;
  --manda-peso-display: 700;
  --manda-track-display: -0.02em;
  --manda-size-titulo1: 28px;
  --manda-lh-titulo1: 1.2;
  --manda-peso-titulo1: 700;
  --manda-track-titulo1: -0.015em;
  --manda-size-titulo2: 22px;
  --manda-lh-titulo2: 1.25;
  --manda-peso-titulo2: 600;
  --manda-track-titulo2: -0.01em;
  --manda-size-titulo3: 18px;
  --manda-lh-titulo3: 1.3;
  --manda-peso-titulo3: 600;
  --manda-track-titulo3: 0;
  --manda-size-cuerpo: 16px;
  --manda-lh-cuerpo: 1.5;
  --manda-peso-cuerpo: 400;
  --manda-track-cuerpo: 0;
  --manda-size-cuerpoFuerte: 16px;
  --manda-lh-cuerpoFuerte: 1.5;
  --manda-peso-cuerpoFuerte: 600;
  --manda-track-cuerpoFuerte: 0;
  --manda-size-detalle: 14px;
  --manda-lh-detalle: 1.45;
  --manda-peso-detalle: 400;
  --manda-track-detalle: 0;
  --manda-size-micro: 12px;
  --manda-lh-micro: 1.4;
  --manda-peso-micro: 500;
  --manda-track-micro: 0.01em;
  --manda-size-montoGrande: 34px;
  --manda-lh-montoGrande: 1.1;
  --manda-peso-montoGrande: 700;
  --manda-track-montoGrande: -0.02em;
  --manda-size-monto: 20px;
  --manda-lh-monto: 1.2;
  --manda-peso-monto: 600;
  --manda-track-monto: -0.01em;

  /* ---------- espaciado: escala de 4 · ritmo de 8 ---------- */
  /* 9 de 12 pasos caen en el ritmo de 8. Los otros 3 (4, 12, 20) son SÓLO para adentro de un componente. */
  --manda-space-0: 0px;
  --manda-space-1: 4px;  /* fuera del ritmo de 8: sólo intra-componente */
  --manda-space-2: 8px;
  --manda-space-3: 12px;  /* fuera del ritmo de 8: sólo intra-componente */
  --manda-space-4: 16px;
  --manda-space-5: 20px;  /* fuera del ritmo de 8: sólo intra-componente */
  --manda-space-6: 24px;
  --manda-space-8: 32px;
  --manda-space-10: 40px;
  --manda-space-12: 48px;
  --manda-space-16: 64px;
  --manda-space-20: 80px;

  /* ---------- radios ---------- */
  --manda-radio-0: 0px;
  --manda-radio-xs: 4px;
  --manda-radio-sm: 8px;
  --manda-radio-md: 12px;
  --manda-radio-lg: 16px;
  --manda-radio-xl: 20px;
  --manda-radio-pill: 999px;

  /* ---------- sombras ---------- */
  --manda-sombra-sm: 0 1px 2px 0 rgb(28 37 44 / 0.06);
  --manda-sombra-md: 0 4px 12px -2px rgb(28 37 44 / 0.10), 0 2px 4px -2px rgb(28 37 44 / 0.06);
  --manda-sombra-lg: 0 12px 28px -6px rgb(28 37 44 / 0.14), 0 4px 8px -4px rgb(28 37 44 / 0.08);
  --manda-sombra-foco: 0 0 0 3px rgb(173 63 95 / 0.35);

  /* ---------- movimiento ---------- */
  --manda-motion-rapido: 120ms;
  --manda-motion-normal: 180ms;
  --manda-motion-lento: 240ms;
  --manda-motion-curva: cubic-bezier(0.2, 0, 0, 1);
  --manda-motion-latido: 1400ms;
  --manda-motion-giro: 900ms;

  /* ---------- componentes (tercera capa: primitivo -> semántico -> componente) ---------- */
  /* boton-primario: 52px de alto: el mínimo accesible es 44, y el usuario de manda tiene 25-55 y toca de pie en la calle. */
  --manda-boton-primario-bg: var(--manda-primario);
  --manda-boton-primario-fg: var(--manda-primario-fg);
  --manda-boton-primario-bg-hover: var(--manda-primario-hover);
  --manda-boton-primario-bg-activo: var(--manda-primario-activo);
  --manda-boton-primario-radio: var(--manda-radio-pill);
  --manda-boton-primario-alto: 52px;
  --manda-boton-primario-padding-x: var(--manda-space-6);
  --manda-boton-primario-size: var(--manda-size-cuerpoFuerte);
  --manda-boton-primario-peso: var(--manda-peso-cuerpoFuerte);
  /* boton-secundario: El hover mueve el fondo Y el texto juntos. Sólo oscurecer el fondo no se puede: el reposo ya está en 4,74:1 y el escalón más oscuro que aguanta 4,5 es #F1E0E5, un 13% del camino — invisible como hover. Con los dos, rosa.200 + rosa.700 da 5,26:1 y el cambio se ve. */
  --manda-boton-secundario-bg: var(--manda-secundario-bg);
  --manda-boton-secundario-fg: var(--manda-secundario-fg);
  --manda-boton-secundario-borde: var(--manda-secundario-borde);
  --manda-boton-secundario-radio: var(--manda-radio-pill);
  --manda-boton-secundario-alto: 52px;
  --manda-boton-secundario-padding-x: var(--manda-space-6);
  --manda-boton-secundario-bg-hover: var(--manda-secundario-bg-hover);
  --manda-boton-secundario-fg-hover: var(--manda-secundario-fg-hover);
  --manda-boton-terciario-bg: var(--manda-terciario-bg);
  --manda-boton-terciario-fg: var(--manda-terciario-fg);
  --manda-boton-terciario-borde: var(--manda-terciario-borde);
  --manda-boton-terciario-radio: var(--manda-radio-pill);
  --manda-boton-terciario-alto: 52px;
  --manda-boton-terciario-padding-x: var(--manda-space-6);
  --manda-boton-terciario-bg-hover: var(--manda-terciario-bg-hover);
  --manda-boton-terciario-bg-activo: var(--manda-terciario-bg-activo);
  /* campo: El borde de reposo usa `borde-campo`, que ahora es el escalón que ALCANZA el 3:1 de componente: 3,15:1 en claro y 3,28:1 en oscuro. Antes era neutral.300 y neutral.800 —1,93:1 y 1,47:1— o sea un campo cuyo contorno no se ve, que es lo único que dice dónde tocar. Ningún par lo miraba: estaba fuera del filtro del gate de contraste, y por eso pudo estar mal sin que nada saliera rojo. Ahora está declarado como par de clase `componente`. El foco sigue siendo un salto visible, pero no por color: es un anillo de 3px, un cambio de TAMAÑO. Por color solo, reposo contra foco da 1,83:1 en claro. */
  --manda-campo-bg: var(--manda-superficie);
  --manda-campo-fg: var(--manda-texto);
  --manda-campo-placeholder: var(--manda-texto-tenue);
  --manda-campo-borde: var(--manda-borde-campo);
  --manda-campo-borde-foco: var(--manda-foco);
  --manda-campo-borde-error: var(--manda-error);
  --manda-campo-radio: var(--manda-radio-md);
  --manda-campo-alto: 52px;
  --manda-campo-padding-x: var(--manda-space-4);
  --manda-campo-size: var(--manda-size-cuerpo);
  /* select: Hereda de `campo` todo lo que comparte: es un campo con una lista. Lo propio son tres cosas. (1) `fg-sin-elegir` NO hereda `placeholder`: medido, `texto-tenue` sobre `superficie` da 3,15:1, que alcanza el 3,0 de un borde y no el 4,5 de un texto — y la opción sin elegir ES texto que hay que leer. Va `texto-secundario`, 4,74:1. (2) El cheurón es un componente gráfico: mismo token, 4,74:1 contra el piso de 3,0. (3) `padding-derecha` deja sitio al cheurón sin que el nombre del país lo pise. El foco es el mismo salto de TAMAÑO que en `campo`: anillo de 3px, nunca color solo. */
  --manda-select-bg: var(--manda-superficie);
  --manda-select-fg: var(--manda-texto);
  --manda-select-fg-sin-elegir: var(--manda-texto-secundario);
  --manda-select-cheuron: var(--manda-texto-secundario);
  --manda-select-borde: var(--manda-borde-campo);
  --manda-select-borde-foco: var(--manda-foco);
  --manda-select-borde-error: var(--manda-error);
  --manda-select-radio: var(--manda-radio-md);
  --manda-select-alto: 52px;
  --manda-select-padding-x: var(--manda-space-4);
  --manda-select-padding-derecha: var(--manda-space-8);
  --manda-select-size: var(--manda-size-cuerpo);
  /* tarjeta: Nunca una tarjeta dentro de otra tarjeta. Si hace falta jerarquía adentro, es un separador o un cambio de fondo, no otra caja. */
  --manda-tarjeta-bg: var(--manda-superficie);
  --manda-tarjeta-borde: var(--manda-borde);
  --manda-tarjeta-radio: var(--manda-radio-lg);
  --manda-tarjeta-sombra: var(--manda-sombra-sm);
  --manda-tarjeta-padding: var(--manda-space-4);
  /* alerta: El color del fondo y del texto sale del estado (exito-bg/exito-texto, error-bg/error-texto, aviso-bg/aviso-texto). Siempre con punto, ÍCONO y palabra, nunca color solo. */
  --manda-alerta-radio: var(--manda-radio-md);
  --manda-alerta-padding: var(--manda-space-3);
  --manda-alerta-gap: var(--manda-space-2);
  --manda-alerta-borde-ancho: 1px;
  /* punto-estado: Es el punto del logo haciendo trabajo, junto al ícono y a la palabra. El punto distingue TRES formas de verdad —aro, sólido, medio lleno— y «procesando» se separa de «pendiente» por el latido, que prefers-reduced-motion apaga: ahí lo que los separa es el ícono. Medido a siete tamaños en gris, ese par da 0,61 a 10px y 29,4 a 80px contra 106 de los pares que sí se distinguen, y ninguna forma alternativa que probé lo arregla. Si el punto aparece como adorno en cualquier lado, deja de significar. */
  --manda-punto-estado-tamano: 10px;
  --manda-punto-estado-tamano-grande: 14px;
  --manda-punto-estado-borde-ancho: 2px;
  --manda-punto-estado-radio: var(--manda-radio-pill);
  --manda-punto-estado-pendiente: var(--manda-borde-fuerte);
  --manda-punto-estado-procesando: var(--manda-primario);
  --manda-punto-estado-entregado: var(--manda-exito);
  --manda-punto-estado-desconocido: var(--manda-aviso);
  --manda-punto-estado-formas: {'pendiente': 'aro', 'procesando': 'aro con latido', 'entregado': 'sólido', 'desconocido': 'medio lleno'};
  --manda-avatar-tamano: 40px;
  --manda-avatar-tamano-grande: 56px;
  --manda-avatar-radio: var(--manda-radio-pill);
  --manda-avatar-bg: var(--manda-superficie-marca);
  --manda-avatar-fg: var(--manda-texto-marca);
  --manda-avatar-size: var(--manda-size-detalle);
  --manda-avatar-peso: 600;
  /* fila-persona: El objeto principal del Home. El nombre va en cuerpo; el último envío va en detalle, como SUBTÍTULO de la persona, nunca al revés. */
  --manda-fila-persona-alto: 64px;
  --manda-fila-persona-gap: var(--manda-space-3);
  --manda-fila-persona-padding-x: var(--manda-space-4);
  --manda-fila-persona-separador: var(--manda-borde);
  --manda-barra-inferior-alto: 64px;
  --manda-barra-inferior-bg: var(--manda-superficie);
  --manda-barra-inferior-borde-top: var(--manda-borde);
  --manda-barra-inferior-fg: var(--manda-texto-secundario);
  --manda-barra-inferior-fg-activo: var(--manda-primario);
  --manda-barra-inferior-size: var(--manda-size-micro);
  --manda-encabezado-alto: 56px;
  --manda-encabezado-bg: var(--manda-bg);
  --manda-encabezado-fg: var(--manda-texto);
  --manda-encabezado-size: var(--manda-size-titulo2);
  --manda-encabezado-peso: var(--manda-peso-titulo2);
  /* monto-entrada: Números tabulares obligatorios. Sin eso la cifra cambia de ancho al teclear y el monto salta. */
  --manda-monto-entrada-fg: var(--manda-texto);
  --manda-monto-entrada-size: var(--manda-size-montoGrande);
  --manda-monto-entrada-peso: var(--manda-peso-montoGrande);
  --manda-monto-entrada-tracking: var(--manda-track-montoGrande);
  --manda-monto-entrada-moneda-fg: var(--manda-texto-secundario);
  --manda-fila-resumen-alto: 44px;
  --manda-fila-resumen-etiqueta-fg: var(--manda-texto-secundario);
  --manda-fila-resumen-etiqueta-size: var(--manda-size-detalle);
  --manda-fila-resumen-valor-fg: var(--manda-texto);
  --manda-fila-resumen-valor-size: var(--manda-size-cuerpoFuerte);
  --manda-fila-resumen-valor-peso: var(--manda-peso-cuerpoFuerte);
  --manda-fila-resumen-separador: var(--manda-borde);
  /* sello-confianza: Las DOS mitades del riesgo R2: quién cobra el euro en Europa y quién entrega el bolívar en Venezuela. Siempre las dos juntas; una sola miente por omisión. Va sobre la SUPERFICIE INVERSA: es la mitad «estructura bancaria» del North Star hecha visible, y es la superficie donde dos marcas ajenas conviven sin pelearse con la paleta (decisión abierta 9, co-branding). Antes iba sobre superficie-sutil con texto-secundario: 4,19:1 medido, por debajo de 4,5. El ícono NO usa `texto-marca`: sobre la superficie inversa da 2,71:1 en claro y 2,42:1 en oscuro, bajo el umbral de 3,0 de gráfico. Usa `marca-sobre-inversa`, que se invierte con el fondo: 5,30:1 y 6,12:1. */
  --manda-sello-confianza-bg: var(--manda-superficie-inversa);
  --manda-sello-confianza-fg: var(--manda-texto-sobre-inversa);
  --manda-sello-confianza-radio: var(--manda-radio-sm);
  --manda-sello-confianza-padding: var(--manda-space-2);
  --manda-sello-confianza-size: var(--manda-size-micro);
  --manda-sello-confianza-icono-fg: var(--manda-marca-sobre-inversa);
  /* cargando: «Cargando» es estado obligatorio en DESIGN.md y no tenía un solo token: el preview lo resolvía con 15px, 2px y 900ms escritos a mano. El esqueleto usa la FORMA de la fila real, no un spinner centrado, para que la página no salte. */
  --manda-cargando-tamano: 15px;
  --manda-cargando-borde-ancho: 2px;
  --manda-cargando-duracion: var(--manda-motion-giro);
  --manda-cargando-esqueleto-bg: var(--manda-superficie-sutil);
  --manda-cargando-esqueleto-radio: var(--manda-radio-xs);
}

/* Modo oscuro por preferencia del sistema. El guard :not([data-theme="light"])
   existe para que una elección explícita de tema clara le gane a la preferencia. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --manda-bg: #0E1318;
    --manda-bg-elevado: var(--manda-neutral-900);
    --manda-superficie: var(--manda-neutral-950);
    --manda-superficie-sutil: var(--manda-neutral-900);
    --manda-superficie-marca: var(--manda-rosa-900);
    --manda-superficie-inversa: var(--manda-rosa-100);
    --manda-texto-sobre-inversa: var(--manda-neutral-950);
    --manda-marca-sobre-inversa: var(--manda-rosa-600);
    --manda-texto: var(--manda-rosa-100);
    --manda-texto-secundario: var(--manda-neutral-400);
    --manda-texto-tenue: var(--manda-neutral-500);
    --manda-texto-inverso: var(--manda-neutral-950);
    --manda-texto-marca: var(--manda-rosa-300);
    --manda-borde: var(--manda-neutral-800);
    --manda-borde-campo: var(--manda-neutral-600);
    --manda-borde-fuerte: var(--manda-neutral-600);
    --manda-deshabilitado-bg: var(--manda-neutral-900);
    --manda-deshabilitado-fg: var(--manda-neutral-700);
    --manda-deshabilitado-borde: var(--manda-neutral-800);
    --manda-borde-marca: var(--manda-rosa-400);
    --manda-primario: var(--manda-rosa-500);
    --manda-primario-hover: var(--manda-rosa-600);
    --manda-primario-activo: var(--manda-rosa-700);
    --manda-primario-fg: var(--manda-neutral-0);
    --manda-secundario-bg: var(--manda-rosa-800);
    --manda-secundario-fg: var(--manda-rosa-200);
    --manda-secundario-borde: var(--manda-rosa-700);
    --manda-secundario-bg-hover: var(--manda-rosa-800);
    --manda-secundario-fg-hover: var(--manda-rosa-100);
    --manda-terciario-bg: var(--manda-neutral-950);
    --manda-terciario-fg: var(--manda-rosa-300);
    --manda-terciario-borde: var(--manda-rosa-700);
    --manda-terciario-bg-hover: var(--manda-neutral-900);
    --manda-terciario-bg-activo: var(--manda-neutral-800);
    --manda-exito: var(--manda-exito-tintaOscura);
    --manda-exito-texto: var(--manda-exito-tintaOscura);
    --manda-exito-bg: var(--manda-exito-tinteOscuro);
    --manda-exito-fg: var(--manda-neutral-950);
    --manda-error: var(--manda-error-fill);
    --manda-error-texto: var(--manda-error-tintaOscura);
    --manda-error-bg: var(--manda-error-tinteOscuro);
    --manda-error-fg: var(--manda-neutral-0);
    --manda-foco: var(--manda-rosa-400);
    --manda-aviso: var(--manda-aviso-tintaOscura);
    --manda-aviso-texto: var(--manda-aviso-tintaOscura);
    --manda-aviso-bg: var(--manda-aviso-tinteOscuro);
    --manda-aviso-fg: var(--manda-neutral-950);
  }
}

/* Modo oscuro por elección explícita. */
:root[data-theme="dark"] {
  --manda-bg: #0E1318;
  --manda-bg-elevado: var(--manda-neutral-900);
  --manda-superficie: var(--manda-neutral-950);
  --manda-superficie-sutil: var(--manda-neutral-900);
  --manda-superficie-marca: var(--manda-rosa-900);
  --manda-superficie-inversa: var(--manda-rosa-100);
  --manda-texto-sobre-inversa: var(--manda-neutral-950);
  --manda-marca-sobre-inversa: var(--manda-rosa-600);
  --manda-texto: var(--manda-rosa-100);
  --manda-texto-secundario: var(--manda-neutral-400);
  --manda-texto-tenue: var(--manda-neutral-500);
  --manda-texto-inverso: var(--manda-neutral-950);
  --manda-texto-marca: var(--manda-rosa-300);
  --manda-borde: var(--manda-neutral-800);
  --manda-borde-campo: var(--manda-neutral-600);
  --manda-borde-fuerte: var(--manda-neutral-600);
  --manda-deshabilitado-bg: var(--manda-neutral-900);
  --manda-deshabilitado-fg: var(--manda-neutral-700);
  --manda-deshabilitado-borde: var(--manda-neutral-800);
  --manda-borde-marca: var(--manda-rosa-400);
  --manda-primario: var(--manda-rosa-500);
  --manda-primario-hover: var(--manda-rosa-600);
  --manda-primario-activo: var(--manda-rosa-700);
  --manda-primario-fg: var(--manda-neutral-0);
  --manda-secundario-bg: var(--manda-rosa-800);
  --manda-secundario-fg: var(--manda-rosa-200);
  --manda-secundario-borde: var(--manda-rosa-700);
  --manda-secundario-bg-hover: var(--manda-rosa-800);
  --manda-secundario-fg-hover: var(--manda-rosa-100);
  --manda-terciario-bg: var(--manda-neutral-950);
  --manda-terciario-fg: var(--manda-rosa-300);
  --manda-terciario-borde: var(--manda-rosa-700);
  --manda-terciario-bg-hover: var(--manda-neutral-900);
  --manda-terciario-bg-activo: var(--manda-neutral-800);
  --manda-exito: var(--manda-exito-tintaOscura);
  --manda-exito-texto: var(--manda-exito-tintaOscura);
  --manda-exito-bg: var(--manda-exito-tinteOscuro);
  --manda-exito-fg: var(--manda-neutral-950);
  --manda-error: var(--manda-error-fill);
  --manda-error-texto: var(--manda-error-tintaOscura);
  --manda-error-bg: var(--manda-error-tinteOscuro);
  --manda-error-fg: var(--manda-neutral-0);
  --manda-foco: var(--manda-rosa-400);
  --manda-aviso: var(--manda-aviso-tintaOscura);
  --manda-aviso-texto: var(--manda-aviso-tintaOscura);
  --manda-aviso-bg: var(--manda-aviso-tinteOscuro);
  --manda-aviso-fg: var(--manda-neutral-950);
}

/* Números de dinero: sin esto la columna de totales baila al actualizarse. */
.manda-num,
[data-manda-num] {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv05' 1;
}