/**
 * Design tokens — fuente única de colores, tipografía, espaciado y radios.
 * Todas las hojas de estilo deben referenciar estas variables.
 */
:root {
  /* Colores de marca */
  --navy: #0e2545;
  --navy-700: #15315a;
  --navy-900: #0a1c36;
  --gold: #c8a44d;
  --gold-600: #b08f3c;
  --violet: #6d28d9;
  --violet-600: #7c3aed;
  --violet-700: #5b21b6;

  /* Superficies y texto */
  --bg: #f5f6f8;
  --white: #ffffff;
  --text: #1a2233;
  --text-light: #647089;
  --border: #e3e7ee;

  /* Estados */
  --success: #0f9d6b;
  --error: #d6453d;
  --info: #2f6fdb;
  --warning: #8a6d00;
  --warning-bg: #fff8e6;

  /* Paleta pastel (Admin › Colores; override en :root vía config) */
  --pastel-rojo: #f6d6d6;
  --pastel-azul: #d9e9fb;
  --pastel-verde: #d4f3e8;
  --pastel-amarillo: #fff8db;
  --pastel-gris: #e8eaee;
  --pastel-rojo-border: color-mix(in srgb, var(--pastel-rojo) 55%, #6b2020);
  --pastel-rojo-fg: color-mix(in srgb, var(--pastel-rojo) 22%, #4a1212);
  --pastel-azul-border: color-mix(in srgb, var(--pastel-azul) 55%, #2a5080);
  --pastel-azul-fg: color-mix(in srgb, var(--pastel-azul) 22%, #1a3050);
  --pastel-verde-border: color-mix(in srgb, var(--pastel-verde) 55%, #1a6b45);
  --pastel-verde-fg: color-mix(in srgb, var(--pastel-verde) 22%, #0f3d28);
  --pastel-amarillo-border: color-mix(in srgb, var(--pastel-amarillo) 55%, #8a6e2f);
  --pastel-amarillo-fg: color-mix(in srgb, var(--pastel-amarillo) 22%, #5c4a10);
  --pastel-gris-border: color-mix(in srgb, var(--pastel-gris) 55%, #4a5160);
  --pastel-gris-fg: color-mix(in srgb, var(--pastel-gris) 22%, #2f3540);

  /* Escala de calificación 5 → 1 (botonera de Calificaciones; el pastel se deriva) */
  --calif-escala-5: #16a34a;
  --calif-escala-4: #2563eb;
  --calif-escala-3: #eab308;
  --calif-escala-2: #f97316;
  --calif-escala-1: #dc2626;

  /* Tintes pastel — acciones (bg / borde / texto) */
  --tint-edit-bg: #e8f5ee;
  --tint-edit-border: #b7e0c8;
  --tint-edit-fg: #1b7a4a;
  --tint-danger-bg: #fdecec;
  --tint-danger-border: #f3b4b0;
  --tint-danger-fg: #b42318;
  --tint-info-bg: #e8f0fb;
  --tint-info-border: #b7cceb;
  --tint-info-fg: #2f6fdb;
  --tint-gold-bg: #f8f1de;
  --tint-gold-border: #e0cfa0;
  --tint-gold-fg: #8a6e2f;
  --tint-deliver-bg: #e6f3fa;
  --tint-deliver-border: #b9d9eb;
  --tint-deliver-fg: #1a6a8a;

  /* Fondos de etapa en listado ventas */
  --venta-stage-pedido-bg: var(--pastel-amarillo);
  --venta-stage-pedido-bg-hover: color-mix(in srgb, var(--pastel-amarillo) 88%, #000);
  --venta-stage-pedido-border: var(--pastel-amarillo-border);
  --venta-stage-preparacion-bg: var(--pastel-azul);
  --venta-stage-preparacion-bg-hover: color-mix(in srgb, var(--pastel-azul) 88%, #000);
  --venta-stage-preparacion-border: var(--pastel-azul-border);
  --venta-stage-entregado-bg: var(--pastel-verde);
  --venta-stage-entregado-bg-hover: color-mix(in srgb, var(--pastel-verde) 88%, #000);
  --venta-stage-entregado-border: var(--pastel-verde-border);

  /* Fondos de etapa en listado traslados (solicitud → en curso → entregado) */
  --traslado-stage-solicitud-bg: var(--pastel-amarillo);
  --traslado-stage-solicitud-bg-hover: color-mix(in srgb, var(--pastel-amarillo) 88%, #000);
  --traslado-stage-solicitud-border: var(--pastel-amarillo-border);
  --traslado-stage-en_curso-bg: var(--pastel-azul);
  --traslado-stage-en_curso-bg-hover: color-mix(in srgb, var(--pastel-azul) 88%, #000);
  --traslado-stage-en_curso-border: var(--pastel-azul-border);
  --traslado-stage-entregado-bg: var(--pastel-verde);
  --traslado-stage-entregado-bg-hover: color-mix(in srgb, var(--pastel-verde) 88%, #000);
  --traslado-stage-entregado-border: var(--pastel-verde-border);

  /* Canvas de documento (Admin › Colores; override en :root vía config) */
  --doc-venta-bg: var(--pastel-amarillo);
  --doc-venta-border: var(--pastel-amarillo-border);
  --doc-devolucion-bg: var(--pastel-rojo);
  --doc-devolucion-border: var(--pastel-rojo-border);
  --doc-gasto-bg: var(--pastel-amarillo);
  --doc-gasto-border: var(--pastel-amarillo-border);
  --doc-tesoreria-bg: var(--pastel-azul);
  --doc-tesoreria-border: var(--pastel-azul-border);
  --doc-cheque-bg: var(--pastel-rojo);
  --doc-cheque-border: var(--pastel-rojo-border);
  --doc-produccion-faena-bg: var(--pastel-rojo);
  --doc-produccion-faena-border: var(--pastel-rojo-border);
  --doc-produccion-transformacion-bg: var(--pastel-azul);
  --doc-produccion-transformacion-border: var(--pastel-azul-border);
  --doc-produccion-compra-bg: var(--pastel-verde);
  --doc-produccion-compra-border: var(--pastel-verde-border);
  --doc-produccion-devolucion-bg: var(--pastel-amarillo);
  --doc-produccion-devolucion-border: var(--pastel-amarillo-border);
  --doc-faena-bg: var(--pastel-rojo);
  --doc-faena-border: var(--pastel-rojo-border);
  --doc-traslado-bg: var(--pastel-verde);
  --doc-traslado-border: var(--pastel-verde-border);
  --doc-solicitud-bg: var(--pastel-azul);
  --doc-solicitud-border: var(--pastel-azul-border);
  --doc-arca-bg: var(--pastel-gris);
  --doc-arca-border: var(--pastel-gris-border);
  --doc-sticky-bg: #f7f8fa;
  --doc-page-gutter: 5px;

  /* Fondos por tipo en listado de producciones (mismo canvas que el documento) */
  --produccion-tipo-faena-bg: var(--doc-produccion-faena-bg);
  --produccion-tipo-faena-bg-hover: color-mix(in srgb, var(--doc-produccion-faena-bg) 88%, #000);
  --produccion-tipo-faena-border: var(--doc-produccion-faena-border);
  --produccion-tipo-produccion-bg: var(--doc-produccion-transformacion-bg);
  --produccion-tipo-produccion-bg-hover: color-mix(in srgb, var(--doc-produccion-transformacion-bg) 88%, #000);
  --produccion-tipo-produccion-border: var(--doc-produccion-transformacion-border);
  --produccion-tipo-compra-bg: var(--doc-produccion-compra-bg);
  --produccion-tipo-compra-bg-hover: color-mix(in srgb, var(--doc-produccion-compra-bg) 88%, #000);
  --produccion-tipo-compra-border: var(--doc-produccion-compra-border);
  --produccion-tipo-devolucion-bg: var(--doc-produccion-devolucion-bg);
  --produccion-tipo-devolucion-bg-hover: color-mix(in srgb, var(--doc-produccion-devolucion-bg) 88%, #000);
  --produccion-tipo-devolucion-border: var(--doc-produccion-devolucion-border);

  /* Fondos por estado en listado de cheques */
  --cheque-estado-rechazado-bg: var(--pastel-rojo);
  --cheque-estado-rechazado-border: var(--pastel-rojo-border);
  --cheque-estado-entregado-bg: var(--pastel-verde);
  --cheque-estado-entregado-border: var(--pastel-verde-border);
  --cheque-estado-cartera-bg: var(--pastel-azul);
  --cheque-estado-cartera-border: var(--pastel-azul-border);

  /* Fondos por estado de pago en listado de gastos (Admin › Colores → gasto_*) */
  --gasto-estado-pendiente-bg: var(--pastel-rojo);
  --gasto-estado-pendiente-bg-hover: color-mix(in srgb, var(--pastel-rojo) 88%, #000);
  --gasto-estado-pendiente-border: var(--pastel-rojo-border);
  --gasto-estado-pendiente-fg: var(--pastel-rojo-fg);
  --gasto-estado-parcial-bg: var(--pastel-amarillo);
  --gasto-estado-parcial-bg-hover: color-mix(in srgb, var(--pastel-amarillo) 88%, #000);
  --gasto-estado-parcial-border: var(--pastel-amarillo-border);
  --gasto-estado-parcial-fg: var(--pastel-amarillo-fg);
  --gasto-estado-pagado-bg: var(--pastel-verde);
  --gasto-estado-pagado-bg-hover: color-mix(in srgb, var(--pastel-verde) 88%, #000);
  --gasto-estado-pagado-border: var(--pastel-verde-border);
  --gasto-estado-pagado-fg: var(--pastel-verde-fg);
  --gasto-estado-cta-cte-bg: var(--pastel-azul);
  --gasto-estado-cta-cte-bg-hover: color-mix(in srgb, var(--pastel-azul) 88%, #000);
  --gasto-estado-cta-cte-border: var(--pastel-azul-border);
  --gasto-estado-cta-cte-fg: var(--pastel-azul-fg);

  /* Chips de Tipo en listado de cuenta corriente */
  --ctacte-tipo-venta-bg: var(--pastel-amarillo);
  --ctacte-tipo-venta-fg: var(--pastel-amarillo-fg);
  --ctacte-tipo-venta-border: var(--pastel-amarillo-border);
  --ctacte-tipo-devolucion-bg: var(--pastel-rojo);
  --ctacte-tipo-devolucion-fg: var(--pastel-rojo-fg);
  --ctacte-tipo-devolucion-border: var(--pastel-rojo-border);
  --ctacte-tipo-pago-bg: var(--pastel-verde);
  --ctacte-tipo-pago-fg: var(--pastel-verde-fg);
  --ctacte-tipo-pago-border: var(--pastel-verde-border);
  --ctacte-tipo-gasto-bg: var(--pastel-amarillo);
  --ctacte-tipo-gasto-fg: var(--pastel-amarillo-fg);
  --ctacte-tipo-gasto-border: var(--pastel-amarillo-border);
  --ctacte-tipo-faena-bg: var(--pastel-rojo);
  --ctacte-tipo-faena-fg: var(--pastel-rojo-fg);
  --ctacte-tipo-faena-border: var(--pastel-rojo-border);
  --ctacte-tipo-produccion-bg: var(--pastel-azul);
  --ctacte-tipo-produccion-fg: var(--pastel-azul-fg);
  --ctacte-tipo-produccion-border: var(--pastel-azul-border);
  --ctacte-tipo-ingreso-bg: var(--pastel-verde);
  --ctacte-tipo-ingreso-fg: var(--pastel-verde-fg);
  --ctacte-tipo-ingreso-border: var(--pastel-verde-border);
  --ctacte-tipo-egreso-bg: var(--pastel-rojo);
  --ctacte-tipo-egreso-fg: var(--pastel-rojo-fg);
  --ctacte-tipo-egreso-border: var(--pastel-rojo-border);
  --ctacte-tipo-ajuste-bg: var(--pastel-azul);
  --ctacte-tipo-ajuste-fg: var(--pastel-azul-fg);
  --ctacte-tipo-ajuste-border: var(--pastel-azul-border);

  /* Tintes pastel — secciones de carga (bg / borde / título) */
  --tint-cliente-bg: var(--pastel-azul);
  --tint-cliente-border: var(--pastel-azul-border);
  --tint-cliente-fg: var(--pastel-azul-fg);
  --tint-entrega-bg: var(--pastel-azul);
  --tint-entrega-border: var(--pastel-azul-border);
  --tint-entrega-fg: var(--pastel-azul-fg);
  --tint-articulos-bg: var(--pastel-verde);
  --tint-articulos-border: var(--pastel-verde-border);
  --tint-articulos-fg: var(--pastel-verde-fg);
  --tint-totales-bg: var(--pastel-amarillo);
  --tint-totales-border: var(--pastel-amarillo-border);
  --tint-totales-fg: var(--pastel-amarillo-fg);
  --tint-origen-bg: var(--pastel-azul);
  --tint-origen-border: var(--pastel-azul-border);
  --tint-origen-fg: var(--pastel-azul-fg);
  --tint-destino-bg: var(--pastel-verde);
  --tint-destino-border: var(--pastel-verde-border);
  --tint-destino-fg: var(--pastel-verde-fg);
  --tint-monto-bg: var(--pastel-amarillo);
  --tint-monto-border: var(--pastel-amarillo-border);
  --tint-monto-fg: var(--pastel-amarillo-fg);
  --tint-cheque-bg: var(--pastel-rojo);
  --tint-cheque-border: var(--pastel-rojo-border);
  --tint-cheque-fg: var(--pastel-rojo-fg);
  --tint-notas-bg: var(--pastel-amarillo);
  --tint-notas-border: var(--pastel-amarillo-border);
  --tint-notas-fg: var(--pastel-amarillo-fg);
  --tint-cabecera-bg: var(--pastel-azul);
  --tint-cabecera-border: var(--pastel-azul-border);
  --tint-cabecera-fg: var(--pastel-azul-fg);
  --tint-costos-bg: var(--pastel-amarillo);
  --tint-costos-border: var(--pastel-amarillo-border);
  --tint-costos-fg: var(--pastel-amarillo-fg);
  --tint-produccion-general-bg: var(--pastel-azul);
  --tint-produccion-general-border: var(--pastel-azul-border);
  --tint-produccion-general-fg: var(--pastel-azul-fg);

  /* Fondos por tipo en listado de movimientos (cuentas institucionales) */
  --pago-tipo-ingreso-bg: var(--pastel-verde);
  --pago-tipo-egreso-bg: var(--pastel-azul);
  --pago-tipo-transferencia-interna-bg: #e8eaee;
  --pago-tipo-transferencia-externa-bg: var(--pastel-amarillo);
  --pago-tipo-ajuste-bg: #f3f4f6;
  --ayuda-border: var(--pastel-amarillo-border);
  --ayuda-fg: var(--pastel-amarillo-fg);

  /* Tipografía */
  --font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-size-2xs: 0.68rem;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.78rem;
  --font-size-md: 0.85rem;
  --font-size-base: 0.88rem;
  --font-size-body: 0.92rem;
  --font-size-input: 0.9375rem;
  --font-size-lg: 1.05rem;
  --font-size-xl: 1.12rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.55rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.35;
  --line-height-relaxed: 1.5;
  --line-height-body: 1.6;

  /* Espaciado */
  --space-2xs: 0.15rem;
  --space-xs: 0.25rem;
  --space-sm: 0.35rem;
  --space-md: 0.5rem;
  --space-lg: 0.75rem;
  --space-xl: 1rem;
  --space-2xl: 1.25rem;
  --space-3xl: 1.5rem;
  --space-4xl: 1.75rem;
  --space-5xl: 2rem;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius: 14px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(14, 37, 69, 0.08);
  --shadow-dropdown: 0 12px 32px rgba(14, 37, 69, 0.14);
  --shadow-nav: -8px 0 32px rgba(14, 37, 69, 0.15);

  /* Layout */
  --header-h: 52px;
  --bottom-nav-h: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --content-max-width: 1600px;
  --content-width-desktop: 94%;
  --tap-target: 44px;

  /* Listados */
  --listing-articulo-min: 12rem;
  --listing-font-size: var(--font-size-md);
  --listing-line-height: var(--line-height-tight);
  --listing-clamp-lines: 2;
  --listing-btn-icon-size: 34px;
  --listing-btn-icon-svg: 16px;
  --listing-entity-link-font: inherit;
  --listing-filter-label-size: var(--font-size-sm);
  --listing-filter-input-padding: 0.45rem 0.65rem;
  --listing-cell-padding-y: 0.4rem;
  --listing-cell-padding-x: 0.5rem;
  --listing-card-gap: 0.5rem;
  --listing-card-padding: 0.75rem;
  --listing-actions-gap: 0.45rem;
  --listing-actions-min-compact: 10rem;
  --listing-actions-min-wide: 20rem;
  --listing-actions-min-ventas: 38rem;
  --listing-actions-max-ventas: 44rem;
  --listing-actions-rows-ventas: calc(
    var(--listing-btn-icon-size) + 2.4rem
  );
  --listing-amount-weight: var(--font-weight-bold);

  /* Formularios */
  --field-label-size: var(--font-size-md);
  --field-input-padding: 0.45rem 0.65rem;
  --field-input-radius: var(--radius-md);
  --entity-id-size: var(--font-size-sm);
  --line-product-name-size: var(--font-size-xl);
  --line-header-size: var(--font-size-sm);
  --total-amount-size: var(--font-size-lg);

  /* Detalle / fichas */
  --detail-label-size: var(--font-size-sm);
  --detail-value-weight: var(--font-weight-semibold);
  --section-title-size: var(--font-size-input);
  --entity-title-size: var(--font-size-2xl);
}