/* SEMÁFORO DE ESTADO
   ──────────────────
   El color de cada SIGNIFICADO de estado, en un solo sitio. Qué significado tiene cada estado lo decide
   Application (SemaforoEstado); la pantalla solo pone la clase (SemaforoCss). Así el mismo estado se ve
   igual en el listado de documentos, en las fichas, en cobros y pagos y en los vencimientos.

   Los tonos son los pastel del listado de documentos (la referencia). Criterio fijo: lo pendiente va en
   la familia cálida (naranja a tiempo, rojo vencido) y lo completo en verde.

   Cada significado tiene cuatro variables en :root —texto, fondo, borde y un sólido para cuando la
   insignia se reduce a un punto—. Cambiar un color es cambiar su variable, y se cambia en todas las
   pantallas a la vez. Una empresa podría sobrescribirlas con un <style> propio sin tocar nada más.

   Hoja GLOBAL a propósito: la insignia se pinta dentro de plantillas de TablaPaginada o de Syncfusion,
   donde el CSS aislado de una página no llega (y en las de Syncfusion, ni con ::deep). */

:root {
    --sem-borrador-fg: #475569;
    --sem-borrador-bg: #f8fafc;
    --sem-borrador-bd: #e2e8f0;
    --sem-borrador-solido: #94a3b8;

    --sem-pendiente-fg: #b45309;
    --sem-pendiente-bg: #fffbeb;
    --sem-pendiente-bd: #fde68a;
    --sem-pendiente-solido: #d97706;

    /* Hecho en parte: sigue siendo pendiente, así que nace con su mismo tono. Variable propia para poder
       separarlo sin tocar lo pendiente. */
    --sem-parcial-fg: #b45309;
    --sem-parcial-bg: #fffbeb;
    --sem-parcial-bd: #fde68a;
    --sem-parcial-solido: #d97706;

    --sem-vencido-fg: #b91c1c;
    --sem-vencido-bg: #fef2f2;
    --sem-vencido-bd: #fecaca;
    --sem-vencido-solido: #dc2626;

    --sem-completo-fg: #15803d;
    --sem-completo-bg: #f0fdf4;
    --sem-completo-bd: #bbf7d0;
    --sem-completo-solido: #16a34a;

    --sem-servido-fg: #6d28d9;
    --sem-servido-bg: #f5f3ff;
    --sem-servido-bd: #ddd6fe;
    --sem-servido-solido: #7c3aed;

    --sem-encurso-fg: #1d4ed8;
    --sem-encurso-bg: #eff6ff;
    --sem-encurso-bd: #bfdbfe;
    --sem-encurso-solido: #2563eb;

    --sem-anticipo-fg: #a16207;
    --sem-anticipo-bg: #fefce8;
    --sem-anticipo-bd: #fef08a;
    --sem-anticipo-solido: #ca8a04;

    --sem-historico-fg: #1d4ed8;
    --sem-historico-bg: #eff6ff;
    --sem-historico-bd: #bfdbfe;
    --sem-historico-solido: #2563eb;

    --sem-anulado-fg: #b91c1c;
    --sem-anulado-bg: #fef2f2;
    --sem-anulado-bd: #fecaca;
    --sem-anulado-solido: #dc2626;
}

/* La clase del significado solo elige variables: la forma la pone la insignia que la lleve. */
.sem-borrador  { --sem-fg: var(--sem-borrador-fg);  --sem-bg: var(--sem-borrador-bg);  --sem-bd: var(--sem-borrador-bd);  --sem-solido: var(--sem-borrador-solido); }
.sem-pendiente { --sem-fg: var(--sem-pendiente-fg); --sem-bg: var(--sem-pendiente-bg); --sem-bd: var(--sem-pendiente-bd); --sem-solido: var(--sem-pendiente-solido); }
.sem-parcial   { --sem-fg: var(--sem-parcial-fg);   --sem-bg: var(--sem-parcial-bg);   --sem-bd: var(--sem-parcial-bd);   --sem-solido: var(--sem-parcial-solido); }
.sem-vencido   { --sem-fg: var(--sem-vencido-fg);   --sem-bg: var(--sem-vencido-bg);   --sem-bd: var(--sem-vencido-bd);   --sem-solido: var(--sem-vencido-solido); }
.sem-completo  { --sem-fg: var(--sem-completo-fg);  --sem-bg: var(--sem-completo-bg);  --sem-bd: var(--sem-completo-bd);  --sem-solido: var(--sem-completo-solido); }
.sem-servido   { --sem-fg: var(--sem-servido-fg);   --sem-bg: var(--sem-servido-bg);   --sem-bd: var(--sem-servido-bd);   --sem-solido: var(--sem-servido-solido); }
.sem-encurso   { --sem-fg: var(--sem-encurso-fg);   --sem-bg: var(--sem-encurso-bg);   --sem-bd: var(--sem-encurso-bd);   --sem-solido: var(--sem-encurso-solido); }
.sem-anticipo  { --sem-fg: var(--sem-anticipo-fg);  --sem-bg: var(--sem-anticipo-bg);  --sem-bd: var(--sem-anticipo-bd);  --sem-solido: var(--sem-anticipo-solido); }
.sem-historico { --sem-fg: var(--sem-historico-fg); --sem-bg: var(--sem-historico-bg); --sem-bd: var(--sem-historico-bd); --sem-solido: var(--sem-historico-solido); }
.sem-anulado   { --sem-fg: var(--sem-anulado-fg);   --sem-bg: var(--sem-anulado-bg);   --sem-bd: var(--sem-anulado-bd);   --sem-solido: var(--sem-anulado-solido); }

/* MARCAS DE PUNTEO DEL DIARIO
   Cada punteo se pinta con su marca (símbolo y color), como en el ERP de escritorio: azul, verde, rojo o
   neutro. Qué color lleva cada punteo lo dice la configuración de la empresa (Contabilidad.Punteos); aquí
   solo vive cómo se ve cada color. Se apoyan en los sólidos del semáforo para no abrir otra paleta, pero
   con variables propias: cambiar el color de un punteo no debe cambiar el de un estado ni al revés.
   Hoja global porque la marca se pinta dentro de la celda del diario desde un fragmento compartido. */
:root {
    --punteo-azul: var(--sem-encurso-solido);
    --punteo-verde: var(--sem-completo-solido);
    --punteo-rojo: var(--sem-vencido-solido);
    --punteo-neutro: var(--sem-borrador-fg);
}

.pt-marca  { font-weight: 800; }
.pt-azul   { color: var(--punteo-azul); }
.pt-verde  { color: var(--punteo-verde); }
.pt-rojo   { color: var(--punteo-rojo); }
.pt-neutro { color: var(--punteo-neutro); }

/* La insignia del semáforo: la píldora del listado de documentos. Sin significado (sem-neutro) no hay
   variables y cae a texto normal sin fondo ni borde, como la insignia sin color de antes. */
.sem-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--sem-fg, inherit);
    background: var(--sem-bg, transparent);
    border: 0.0625rem solid var(--sem-bd, transparent);
}