/* ═══════════════════════════════════════════════════════════════════════
   PORTAL ALS · CUSTOMS WAY — portal-theme.css
   Tema visual v1 · Estilo "CargoFront" (navy + verde esmeralda)
   ─────────────────────────────────────────────────────────────────────────
   ⚠ ESTE ARCHIVO ES UNA CAPA: no modifica HTML ni JS.
   Para DESACTIVAR el tema: eliminar la línea
     <link rel="stylesheet" href="portal-theme.css">
   de cada HTML. El portal vuelve al aspecto anterior al instante.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. PALETA ──────────────────────────────────────────────────────────
   Redefine las variables compartidas por todos los módulos.
   Navy estructural + verde esmeralda como color primario de acción.    */
:root{
  /* Grises fríos (slate con matiz navy) */
  --g50:#f4f6fa;
  --g100:#edf0f6;
  --g200:#e0e6ef;
  --g300:#c8d2e0;
  --g400:#96a3bb;
  --g500:#64748b;
  --g600:#475569;
  --g700:#334155;
  --g800:#22304a;
  --g900:#1d2d50;          /* headings navy CargoFront */

  /* Primario → verde esmeralda CargoFront (antes azul) */
  --b50:#e6f7f2;
  --b100:#c2eee0;
  --b200:#8fdfc8;
  --b500:#10b893;
  --b600:#0aa37e;
  --b700:#078a69;

  /* Semáforos sin cambios de tono pero armonizados */
  --gr50:#ecfdf5; --gr500:#10b981; --gr600:#059669; --gr700:#047857;
  --am50:#fffbeb; --am500:#f59e0b; --am600:#d97706;
  --rd50:#fef2f2; --rd500:#ef4444; --rd600:#dc2626;
  --tl500:#14b8a6; --tl600:#0d9488;

  /* Geometría y sombras más suaves */
  --r:10px;
  --rl:14px;
  --rxl:18px;
  --sh0:0 1px 2px rgba(20,30,55,.06);
  --sh:0 2px 8px rgba(20,30,55,.08);
  --shl:0 12px 32px rgba(20,30,55,.14);

  /* ── Variables propias del tema (namespace pgt-) ── */
  --pgt-nav-bg1:#2e4170;
  --pgt-nav-bg2:#233155;
  --pgt-nav-txt:#b9c6e2;
  --pgt-nav-txt-dim:rgba(255,255,255,.45);
  --pgt-nav-active-txt:#22335c;
  --pgt-accent:#0aa37e;
  --pgt-accent-soft:#3ee6b8;

  /* tarifas.html usa sus propias vars de sidebar → redefinidas aquí */
  --sb-bg:#2e4170;
  --sb-accent:#0aa37e;

  /* Anchura de sidebar unificada al referente (airport_cargo: 230px) */
  --sw:230px;
  --sb-w:230px;
}

/* ── 2. SIDEBARS → NAVY (index, airport, taric, gibraltar) ────────────── */
#sidebar, #sb{
  background:linear-gradient(180deg,var(--pgt-nav-bg1) 0%,var(--pgt-nav-bg2) 100%) !important;
  border-right:none !important;
}

/* Items de navegación */
#sidebar .nav-item, #sb .ni{
  color:var(--pgt-nav-txt) !important;
}
#sidebar .nav-item:hover, #sb .ni:hover{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  transform:none !important;
}
#sidebar .nav-item.active, #sb .ni.active, .sidebar .sb-item.active{
  /* FUSIÓN CON EL PANEL: mismo color que el fondo del contenido,
     pegado al borde derecho, con curvas de transición (notches) */
  background:var(--g50) !important;
  color:var(--pgt-nav-active-txt) !important;
  font-weight:600 !important;
  box-shadow:none !important;
  margin-right:0 !important;
  border-radius:14px 0 0 14px !important;
  position:relative !important;
  overflow:visible !important;
  z-index:1;
}
/* Notches cóncavos que crean el efecto "llave" de airport_cargo.
   Sobresalen del item hacia la zona navy (arriba/abajo). Para que NO los
   recorte el overflow del contenedor en index/tarifas, ese overflow se
   neutraliza más abajo (sección scroll). */
#sidebar .nav-item.active::before, #sb .ni.active::before, .sidebar .sb-item.active::before,
#sidebar .nav-item.active::after,  #sb .ni.active::after,  .sidebar .sb-item.active::after{
  content:'' !important;
  position:absolute !important;
  right:0 !important;
  width:16px !important;
  height:16px !important;
  pointer-events:none !important;
  border:none !important;
  background-repeat:no-repeat !important;
  z-index:3 !important;
  /* SOLO la curva cóncava: cualquier otra forma (triángulos, flechas,
     cuadrados navy) significa que un override está pisando este bloque. */
}
#sidebar .nav-item.active::before, #sb .ni.active::before, .sidebar .sb-item.active::before{
  top:-16px !important;
  /* rampa de 1px (15px→16px) para borde suave, sin dentado */
  background:radial-gradient(circle 16px at 0 0, transparent 0 15px, var(--g50) 16px) !important;
}
#sidebar .nav-item.active::after, #sb .ni.active::after, .sidebar .sb-item.active::after{
  bottom:-16px !important;
  background:radial-gradient(circle 16px at 0 100%, transparent 0 15px, var(--g50) 16px) !important;
}

/* Texto e iconos del item activo en navy (claro) / claro (dark) */
:root.dark #sidebar .nav-item.active, :root.dark #sb .ni.active, :root.dark .sidebar .sb-item.active{
  color:var(--g900) !important;
}
/* Sidebar colapsado: mantener la fusión */
#sidebar.collapsed .nav-item.active{
  margin-right:0 !important;
}
/* Icono dentro del item activo hereda el navy */
#sidebar .nav-item.active .ni, #sidebar .nav-item.active .nav-item-txt{
  color:inherit !important;
}

/* Etiquetas de sección */
#sidebar .sb-sec, #sb .sb-tag{
  color:var(--pgt-nav-txt-dim) !important;
}
/* Contenedores de navegación de index (#nav-op,#nav-alm,#nav-adm):
   su overflow-y:auto inline recorta los notches. Lo neutralizamos a 'visible'
   y damos el scroll al propio #sidebar (como hace airport_cargo). */
#sidebar [id^="nav-"]{
  overflow:visible !important;
  flex:0 0 auto !important;
}
#sidebar{
  overflow-y:auto !important;
  overflow-x:visible !important;
}

/* Cabecera del sidebar: logo y textos en claro */
#sidebar-logo-txt, #sb-logo-txt{ color:#fff !important; }
#sidebar-header, #sb-header, .sb-hd{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
#sidebar-logo-mark, #sb-logo-mark{
  background:var(--pgt-accent) !important;
  color:#fff !important;
}
.sidebar-toggle-btn, .sb-toggle{
  color:rgba(255,255,255,.55) !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.15) !important;
}

/* Bloque de usuario al pie del sidebar */
#sidebar .sb-user, .sb-user{
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.sb-user .sb-name, #sb-name{ color:#fff !important; }
.sb-user .sb-role, #sb-role{ color:var(--pgt-nav-txt-dim) !important; }
.sb-av, #sb-av{
  background:var(--pgt-accent) !important;
  color:#fff !important;
}
/* Pie del sidebar gibraltar */
#sb .sb-ft, #sb .sb-back{ color:var(--pgt-nav-txt) !important; border-color:rgba(255,255,255,.10) !important; }
#sb .sb-hd div{ color:var(--pgt-nav-txt-dim) !important; }
#sb .sb-upd{ color:var(--pgt-nav-txt-dim) !important; }

/* Badges dentro del sidebar (contadores) */
#sidebar .nb, #sidebar .alert-badge{
  background:var(--pgt-accent) !important;
  color:#fff !important;
}

/* Modo oscuro: sidebar aún más profundo, vence al !important de taric
   porque este archivo carga después con la misma especificidad        */
:root.dark #sidebar, :root.dark #sb{
  background:linear-gradient(180deg,#1a2440 0%,#131b31 100%) !important;
  border-color:#1e293b !important;
}

/* ── 3. HEADER UNIFICADO (pg-header de auth-guard.js) ─────────────────
   El JS inyecta su <style> en runtime después de este archivo,
   por eso estos overrides llevan !important.                          */
.pg-header{
  border-bottom:1px solid var(--g200) !important;
}
.pg-avatar{ background:var(--pgt-accent) !important; }
.pg-brand-pill{ background:linear-gradient(135deg,#2e4170,#22335c) !important; }
.pg-brand-pill.cw{ background:linear-gradient(135deg,#0aa37e,#078a69) !important; }
.pg-btn-p{
  background:var(--pgt-accent) !important;
  border-color:var(--pgt-accent) !important;
}
.pg-btn-p:hover{ background:#078a69 !important; }
.pg-bc-module:hover{ color:var(--pgt-accent) !important; }
.pg-user-btn.open{ background:var(--b50) !important; border-color:var(--b200) !important; }

/* ── 4. CARDS DEL HOME → unificadas en navy CargoFront ────────────────
   Las cards tienen gradientes inline hardcodeados distintos entre sí;
   este override las uniforma sin tocar HTML.                          */
.hm-card{
  background:linear-gradient(160deg,#2e4170 0%,#22335c 100%) !important;
  border-radius:var(--rxl) !important;
  box-shadow:0 4px 18px rgba(20,30,55,.16) !important;
}
.hm-card:hover{
  box-shadow:0 14px 38px rgba(20,30,55,.26) !important;
}
.hm-card-cta{ color:var(--pgt-accent-soft) !important; }
.hm-card-feats span{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

/* Quick-links del home */
.hm-qbtn{
  border-radius:var(--rl) !important;
  border:1px solid var(--g200) !important;
  box-shadow:var(--sh0) !important;
}
.hm-qbtn:hover{
  border-color:var(--b200) !important;
  background:var(--b50) !important;
}

/* ── 5. BOTONES PRIMARIOS → verde (heredan --b600 automáticamente; se
   refuerzan aquí los que tenían azul hardcodeado)                     */
.btn-p, .btn.btn-p, .btn-primary{
  background:var(--pgt-accent) !important;
  border-color:var(--pgt-accent) !important;
  color:#fff !important;
}
.btn-p:hover, .btn.btn-p:hover, .btn-primary:hover{
  background:#078a69 !important;
}

/* ── 6. SUPERFICIES Y TABLAS ──────────────────────────────────────────── */
body{ background:var(--g50); }
table thead th{
  background:var(--g100) !important;
  color:var(--g600) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  font-size:11px !important;
  letter-spacing:.04em;
}
tbody tr:hover{ background:var(--g50) !important; }

/* KPIs y stat-cards más suaves */
.kpi, .stat-card{
  border:1px solid var(--g200) !important;
  border-radius:var(--rl) !important;
  box-shadow:var(--sh0) !important;
}

/* ── 7. SCROLLBARS finos y discretos ──────────────────────────────────── */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{
  background:var(--g300);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--g400); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── 8. MODO OSCURO: armonizar fondos con el navy ─────────────────────── */
:root.dark{
  --g50:#0f1626;
  --g100:#16203a;
  --g200:#1f2c4a;
  --g900:#e8edf7;
}
:root.dark .pg-header{ border-bottom-color:#1f2c4a !important; }
:root.dark .hm-card{
  background:linear-gradient(160deg,#1a2440 0%,#131b31 100%) !important;
}

/* ── 9. SIDEBAR: clonar el look de Gibraltar en todos los módulos ─────────
   Métricas exactas del referente + transiciones suaves + scroll invisible */

/* Items: geometría Gibraltar (7px 10px, 12.5px, peso 500) */
#sidebar .nav-item, #sb .ni, .sidebar .sb-item{
  padding:7px 10px !important;
  gap:9px !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  align-items:center !important;
  transition:background-color .22s ease, color .22s ease,
             margin .25s ease, border-radius .25s ease, box-shadow .22s ease !important;
}
#sidebar .nav-item:not(.active), #sb .ni:not(.active), .sidebar .sb-item:not(.active){
  margin:1px 6px !important;
  border-radius:10px !important;
}
#sidebar .nav-item.active, #sb .ni.active, .sidebar .sb-item.active{
  margin:1px 0 1px 6px !important;
  font-weight:600 !important;
}

/* Iconos en columna fija de 18px a tamaño 14px (como .ic de Gibraltar).
   En index/taric/airport el span .ni es el ICONO dentro de .nav-item. */
#sidebar .nav-item .ni{
  font-size:14px !important;
  width:18px !important;
  text-align:center !important;
  flex-shrink:0 !important;
  margin:0 !important;
}
/* SVGs de iconize: tamaño uniforme */
#sidebar .nav-item .ni svg, #sb .ni .ic svg, .ic svg{
  width:16px !important; height:16px !important;
}

/* Etiquetas de sección: estilo .sb-tag de Gibraltar */
#sidebar .sb-sec{
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:12px 14px 4px !important;
  height:auto !important;
  opacity:1 !important;
}
#sidebar.collapsed .sb-sec{ opacity:0 !important; height:0 !important; padding:0 !important; }

/* Anchura unificada: todos los sidebars expandidos a 230px como airport */
#sidebar:not(.collapsed), #sb, .sidebar{
  width:230px !important;
}

/* SCROLL INVISIBLE: el carril del scrollbar rompía la fusión con el panel.
   Se oculta la barra pero el scroll sigue funcionando (rueda/táctil). */
#sidebar, #sidebar nav, #sidebar [id^="nav-"], #sb, .sidebar{
  scrollbar-width:none !important;          /* Firefox */
  -ms-overflow-style:none !important;       /* IE/Edge legacy */
}
#sidebar::-webkit-scrollbar,
#sidebar nav::-webkit-scrollbar,
#sidebar [id^="nav-"]::-webkit-scrollbar,
#sb::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{
  display:none !important;                   /* Chrome/Safari/Edge */
}

/* Notches con aparición suave */
@keyframes pgt-notch-in{ from{opacity:0} to{opacity:1} }
#sidebar .nav-item.active::before, #sb .ni.active::before, .sidebar .sb-item.active::before,
#sidebar .nav-item.active::after,  #sb .ni.active::after,  .sidebar .sb-item.active::after{
  animation:pgt-notch-in .28s ease .08s both;
}

/* ── 10. VISTA CALENDARIO CONTINUO ──────────────────────────────────────
   Tira vertical de semanas con scroll, sin saltos de mes. */
.cal-continuo{
  max-height:calc(100vh - 240px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scroll-behavior:smooth;
}
.cal-continuo .cal-cont-mes{
  position:sticky;
  top:0;
  z-index:5;
  background:linear-gradient(90deg,var(--b600),var(--b700));
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  padding:7px 14px;
  border-radius:8px;
  margin:14px 0 6px;
  box-shadow:0 2px 8px rgba(20,30,55,.15);
}
.cal-continuo .cal-cont-mes:first-child{ margin-top:0; }
.cal-continuo .cal-cont-row{
  margin-bottom:3px;
}
/* Días de otro mes en la tira: atenuados pero operativos para drag&drop */
.cal-continuo .cal-day.om{
  opacity:.5;
  background:var(--g100);
}
.cal-continuo .cal-day.today{
  outline:2px solid var(--b500);
  outline-offset:-2px;
}
/* Scrollbar fino para la tira continua */
.cal-continuo::-webkit-scrollbar{ width:8px; }
.cal-continuo::-webkit-scrollbar-thumb{ background:var(--g300); border-radius:6px; }
.cal-continuo::-webkit-scrollbar-thumb:hover{ background:var(--g400); }