/* Paleta TISUR para el costeo por barco.
   Regla: cada color hace UN trabajo y no se repite con otro significado.
     · Verde TISUR  = qué se mueve: los barcos y la carga (acento, línea de tiempo, minigráficos, US$/TM) y el
                      Tipo de carga del libro en 3 claridades del mismo verde, más gris para los tipos con pocos barcos.
     · Colores vivos = en qué se gasta: los 4 rubros del costo, ninguno verde.
   Todo se comprobó con el validador de la skill dataviz (OKLab, daltonismo simulado con Machado 2009):
     rubros: vecinos ΔE ≥ 29 (claro) y ≥ 26 (oscuro), visión normal ≥ 35 / 27;
     tipos de carga: todos los pares ΔE ≥ 16 (claro) y ≥ 18 (oscuro), escalonados de oscuro a claro;
     entre rubros y tipos ΔE ≥ 16 (visión normal).
   El ámbar queda bajo 3:1 sobre blanco: lo compensan la leyenda, los rótulos de valor, el tooltip y la tabla. */
:root {
  /* Logo */
  --tisur-verde-oscuro: #113909;
  --tisur-verde: #307c29;

  /* Rubros, en el orden de la barra apilada: cada vecino es casi complementario (azul|ámbar, violeta|naranja) */
  --cds-chart-categorical-1: #2a78d6;   /* Personal */
  --cds-chart-categorical-2: #eda100;   /* Equipos y sistemas (ámbar de maquinaria) */
  --cds-chart-categorical-3: #6250d6;   /* Terceros */
  --cds-chart-categorical-4: #eb6834;   /* Movilizadores */

  /* Tipo de carga (columna C del libro): más barcos = verde más intenso */
  --tipo-granel: #104a0b;               /* Sólida a granel · 32 barcos */
  --tipo-fracc: #307c29;                /* Fraccionada · 7 */
  --tipo-cont: #75b255;                 /* Contenedores · 5 */
  --tipo-otro: var(--cds-chart-muted);  /* Big bags, líquida a granel y cargas sin familia */
  --tipo-granel-tinta: #ffffff;         /* texto dentro de cada color, elegido por APCA */
  --tipo-fracc-tinta: #ffffff;
  --tipo-cont-tinta: #0b0b0b;
  --tipo-otro-tinta: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cds-chart-categorical-1: #3987e5;
    --cds-chart-categorical-2: #c98500;
    --cds-chart-categorical-3: #9085e9;
    --cds-chart-categorical-4: #d95926;
    /* en oscuro el más llamativo es el más claro: el granel sigue siendo el más intenso */
    --tipo-granel: #8dcc6e;
    --tipo-fracc: #499442;
    --tipo-cont: #235b1e;
    --tipo-granel-tinta: #0b0b0b;
    --tipo-fracc-tinta: #ffffff;
    --tipo-cont-tinta: #ffffff;
    --tipo-otro-tinta: #ffffff;
  }
}

/* Acento = verde TISUR (en el artifact salía del primer color de serie, que ahora es Personal) */
.cb { --acc: var(--tisur-verde); }
@media (prefers-color-scheme: dark) { .cb { --acc: #5aa847; } }

/* Leyenda del color por tipo de carga */
.cb-tipos { display: block; margin-top: 4px; }
.cb-tipos .lgd:first-child { margin-left: 0; }

/* Cabecera con el logo */
.cb-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.cb-logo { display: block; height: 66px; width: auto; }
.cb-brand .cb-eyebrow { padding-left: 14px; border-left: 1px solid var(--line); }
.cb-brand .cb-eyebrow::before { display: none; }
.cb-head h1 { color: var(--tisur-verde-oscuro); }
@media (prefers-color-scheme: dark) {
  .cb-logo { background: #fff; border-radius: 10px; padding: 4px 8px; }
  .cb-head h1 { color: var(--ink); }
}
@media (max-width: 520px) {
  .cb-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cb-brand .cb-eyebrow { padding-left: 0; border-left: 0; }
  .cb-logo { height: 44px; }
}

/* Los puntos del original van al 60 % de opacidad: así el verde de granel se aclara hasta parecerse al de
   fraccionada. Al 85 % cada tipo conserva su color y las burbujas encimadas todavía se ven. */
#cb-scatter circle, #cb-horas circle { fill-opacity: .85 !important; }