/* DBS Seaport — ajustes de marca sobre Filament (manual de marca: Fira Sans, gradiente índigo→verde, franja de rayas).
   Los colores salen del manual (muestreados del PDF): confirmar los hex oficiales. */
:root {
  --dbs-indigo: #40429B;
  --dbs-grad: linear-gradient(90deg, #434A98 0%, #4181C1 28%, #48A2DB 44%, #4EB3B1 62%, #87C650 84%, #99CB2B 100%);
}

/* Franja de marca: banda índigo + rayas blancas diagonales, arriba de la barra superior */
.fi-topbar { position: sticky; }
.fi-topbar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; z-index: 5;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.92) 7px 11px),
    var(--dbs-indigo);
}
.fi-topbar > nav, .fi-topbar-ctn { padding-top: 9px; }

/* Logo: sobre fondo claro se funde (multiply); sobre oscuro va en una placa blanca (el manual no define versión inversa) */
.fi-logo { mix-blend-mode: multiply; }
.dark .fi-logo { mix-blend-mode: normal; background: #fff; border-radius: .6rem; padding: .35rem .6rem; }

/* Pesos: cifras proporcionales en tarjetas grandes, tabulares en tablas */
.fi-ta-table td, .fi-ta-table th { font-variant-numeric: tabular-nums; }

/* Barra de avance con el gradiente de la marca */
.dbs-meter { height: .5rem; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.dark .dbs-meter { background: var(--gray-700); }
.dbs-meter > b { display: block; height: 100%; border-radius: 999px; background: var(--dbs-grad); }

/* Página pública de carga de guía (sin cuenta) */
.dbs-public { font-family: "Fira Sans", system-ui, sans-serif; background: #F1F3FA; color: #15173F; min-height: 100vh; }

/* ---- Rampa ordinal de los 7 estados de la gándola (validada con validate_palette.js --ordinal) ---- */
:root {
  --dbs-o1:#A5B0FF; --dbs-o2:#8E99EF; --dbs-o3:#7A84D7; --dbs-o4:#666EC0; --dbs-o5:#535AA9; --dbs-o6:#414593; --dbs-o7:#30317D;
  --dbs-s1:#4A4EAE; --dbs-s2:#7DBE3F; --dbs-s3:#2F95D6;
}
.dark {
  --dbs-o1:#444A97; --dbs-o2:#575EAE; --dbs-o3:#6A73C5; --dbs-o4:#7E88DC; --dbs-o5:#939EF4; --dbs-o6:#ABB6FF; --dbs-o7:#C5CEFF;
  --dbs-s1:#7A74E0; --dbs-s2:#64AA32; --dbs-s3:#1FA6B8;
}
.dbs-states { display: flex; flex-direction: column; gap: .6rem; }
.dbs-state { display: grid; grid-template-columns: 1.4rem 9.5rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .875rem; }
.dbs-state-n { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 600; border: 1px solid var(--gray-300); color: var(--gray-600); }
.dark .dbs-state-n { border-color: var(--gray-600); color: var(--gray-300); }
.dbs-state-bar { height: .9rem; border-left: 1px solid var(--gray-300); }
.dbs-state-bar > b { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dbs-state-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dbs-note { margin-top: .9rem; font-size: .8rem; color: var(--gray-500); }
.dbs-ship + .dbs-ship { margin-top: 1rem; }
.dbs-ship-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.dbs-ship-top b { font-weight: 600; }
.dbs-ship-meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gray-500); margin-top: .3rem; }
.dbs-ship .dbs-meter { margin-top: .4rem; }

/* ---- Stock (Fase 2) ---- */
.dbs-rank { display: flex; flex-direction: column; gap: 1rem; }
.dbs-rank-top { display: flex; justify-content: space-between; font-size: .875rem; margin-bottom: .3rem; }
.dbs-rank-top span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.dbs-rank-bar { height: .9rem; border-left: 1px solid var(--gray-300); }
.dbs-rank-bar > b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--dbs-s1); }
.dbs-rank-bar > b.otros { background: var(--gray-400); }
.dbs-bal-row { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--gray-200); font-size: .875rem; }
.dark .dbs-bal-row { border-color: var(--gray-700); }
.dbs-bal-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.dbs-bal-row.total { border-bottom-color: var(--gray-400); font-weight: 600; }
.dbs-silos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem .5rem; }
.dbs-silo { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .8rem; color: var(--gray-500); }
.dbs-silo b { color: inherit; font-size: .85rem; font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; }
.dbs-silo b, .dbs-silo svg { margin-top: .25rem; }
.dbs-silo .s-track { fill: var(--gray-100); stroke: var(--gray-300); }
.dark .dbs-silo .s-track { fill: var(--gray-800); stroke: var(--gray-600); }
.dbs-silo .s-fill { fill: var(--dbs-s1); }
.dbs-silo .s-limit { stroke: var(--gray-500); opacity: .6; }
.dbs-tank { display: grid; grid-template-columns: 2.2rem 1fr 6.5rem; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--gray-200); }
.dark .dbs-tank { border-color: var(--gray-700); }
.dbs-tank:last-child { border-bottom: 0; }
.dbs-tank .s-track { fill: var(--gray-100); stroke: var(--gray-300); }
.dark .dbs-tank .s-track { fill: var(--gray-800); stroke: var(--gray-600); }
.dbs-tank .s-fill { fill: var(--dbs-s3); }
.dbs-tank-lvl { text-align: right; font-size: 1.15rem; font-weight: 600; line-height: 1; }
.dbs-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 500; color: var(--gray-500); }
.dbs-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #0CA30C; box-shadow: 0 0 0 .25rem rgba(12,163,12,.15); }
.dbs-live.off i { background: var(--gray-400); box-shadow: none; }
.dbs-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .05rem .55rem; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--gray-50); }
.dark .dbs-chip { border-color: var(--gray-700); background: var(--gray-800); }

/* Flujo "Direct": del barco, directo al silo */
.dbs-direct { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin: .25rem 0 1.25rem; }
.dbs-direct-end { font-size: .8rem; color: var(--gray-500); }
.dbs-direct-end b { display: block; font-size: 1rem; color: inherit; font-weight: 600; }
.dbs-direct-line { position: relative; height: 6px; border-radius: 999px; background: var(--dbs-grad); }
.dbs-direct-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--dbs-indigo); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .16em; padding: .2rem .8rem; border-radius: 999px; border: 2px solid var(--gray-50); }
.dark .dbs-direct-line span { border-color: var(--gray-900); }
.dbs-stats { display: flex; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); }
.dark .dbs-stats { border-color: var(--gray-700); }
.dbs-stats > div { flex: 1; padding-left: 1rem; border-left: 1px solid var(--gray-200); }
.dark .dbs-stats > div { border-color: var(--gray-700); }
.dbs-stats > div:first-child { padding-left: 0; border-left: 0; }
.dbs-stats small { display: block; font-size: .75rem; color: var(--gray-500); }
.dbs-stats b { font-size: 1.05rem; font-weight: 600; }

/* Tablas simples de Reportes */
.dbs-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dbs-table th { text-align: left; font-weight: 500; font-size: .75rem; color: var(--gray-500); padding: 0 0 .5rem; border-bottom: 1px solid var(--gray-200); }
.dbs-table td { padding: .55rem 0; border-bottom: 1px solid var(--gray-100); }
.dark .dbs-table th { border-color: var(--gray-700); } .dark .dbs-table td { border-color: var(--gray-800); }
.dbs-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.dbs-table .vacio { color: var(--gray-500); text-align: center; padding: 1rem 0; }