/* ============================================================
   FriendlySystem Group · tokens de marca
   ============================================================
   ÚNICA fuente de la paleta. La consumen panel.css, publico.css
   y cualquier vista nueva. Antes cada archivo copiaba sus propios
   hex y por eso el panel quedó con los colores viejos cuando el
   sitio cambió: si vuelve a cambiar, se cambia aquí y nada más.

   Los seis colores salen del logo:
     #0080B0 azul del camión     #E85820 naranja de la nube
     #243C90 azul del wordmark   #E8A820 amarillo de la billetera
     #00B8C0 cian de la "F"      #48B838 verde del reloj

   Cada color tiene un rol fijo. Si un color aparece, significa
   siempre lo mismo. Y no hay degradados: la profundidad la dan
   bordes de 1px y sombras suaves.
   ============================================================ */
:root{
	/* --- Superficies --- */
	--paper:#FFFFFF;        /* tarjetas, barra superior */
	--canvas:#F4F8FB;       /* fondo del área de trabajo */
	--canvas-2:#E8F1F6;     /* zonas alternas, cabeceras de tabla */
	--navy:#243C90;         /* barra lateral y anclas de marca */
	--navy-deep:#1C2F73;    /* hover dentro del navy */

	/* --- Tinta (contraste verificado sobre blanco) --- */
	--ink:#16233D;          /* ~15:1  títulos y datos */
	--ink-soft:#5A6A85;     /* 5.5:1  texto secundario */
	--ink-mute:#8593A8;     /* 3.3:1  solo etiquetas ≥18px o no esenciales */
	--line:#DCE5ED;         /* bordes de 1px */
	--line-soft:#EDF2F7;    /* separadores internos de tabla */

	/* --- Acción: un solo color de acción --- */
	--action:#006C96;       /* 5.9:1 con texto blanco encima */
	--action-hover:#00567A;
	--link:#00618A;         /* 6.8:1 enlaces sobre claro */
	--action-wash:#E6F0F5;  /* fondo tenue de la fila activa */
	--cyan:#00B8C0;         /* SOLO decorativo: sobre blanco da 1.9:1 */

	/* --- Estado. El color acompaña al texto, nunca lo sustituye:
	       "Suspendida" se lee aunque no se distinga el tono. --- */
	--ok:#1F7A14;           /* 5.5:1  activo, al día, pagado */
	--ok-bg:#E7F5E4;
	--ok-solid:#48B838;

	--warn:#B8791A;         /* 4.6:1  por vencer, cupo cerca del tope */
	--warn-bg:#FCF3E0;
	--warn-solid:#E8A820;

	--bad:#C2410C;          /* 5.2:1  vencida, en mora, caída, suspendida */
	--bad-bg:#FDEDE4;
	--bad-solid:#E85820;

	--info:#00618A;         /* neutro informativo */
	--info-bg:#E6F0F5;

	/* --- Forma --- */
	--radius:14px;
	--radius-sm:10px;
	--shadow-sm:0 1px 2px rgba(22,35,61,.06);
	--shadow:0 1px 2px rgba(22,35,61,.06),0 8px 24px rgba(22,35,61,.06);
	--shadow-lg:0 2px 4px rgba(22,35,61,.06),0 16px 40px rgba(22,35,61,.10);
	--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

	/* --- Alias de compatibilidad ---
	   Las vistas traen estilos en línea con var(--muted), var(--text),
	   var(--line) y var(--primary). Se mantienen para que nada se rompa;
	   en reglas nuevas usar los nombres de arriba. */
	--primary:var(--action);
	--secondary:var(--navy);
	--accent:var(--link);
	--success:var(--ok);
	--warning:var(--warn);
	--danger:var(--bad);
	--text:var(--ink);
	--muted:var(--ink-soft);
	--dark:var(--canvas-2);
	--darker:var(--canvas);
	--panel:var(--paper);
	--panel-2:var(--canvas);
}