/* Tablero Troncales - hoja de estilo.
   Extraida tal cual del mockup aprobado (pauladonaire/MockupTableroTroncales,
   commit eca9716). El diseno es el que se aprobo: no se toca sin pedido.
*/
  :root{
    --azul:#00519B; --azul-osc:#003B72; --azul-claro:#2E7CC4;
    --cian:#4FC3E8; --cian-suave:#E3F2FB;
    --amarillo:#F5A623; --verde:#1E9E6A; --rojo:#D64550; --violeta:#5E35B1;
    --gris-bg:#F0F3F7; --gris-panel:#FFFFFF; --gris-linea:#E2E8F0;
    --gris-txt:#33475B; --gris-suave:#6B7C93;
    --sombra:0 1px 3px rgba(0,40,90,.08),0 4px 16px rgba(0,40,90,.06);
    --radio:12px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:'Segoe UI',-apple-system,Roboto,Helvetica,Arial,sans-serif;background:var(--gris-bg);color:var(--gris-txt);-webkit-font-smoothing:antialiased}
  .hidden{display:none !important}

  /* LOGIN */
  #login{position:fixed;inset:0;z-index:100;background:linear-gradient(135deg,var(--azul-osc) 0%,var(--azul) 60%,var(--azul-claro) 100%);display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
  .login-chevrons{position:absolute;top:-60px;right:-40px;opacity:.12;font-size:340px;font-weight:800;color:#fff;letter-spacing:-30px;user-select:none;pointer-events:none}
  .login-card{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:410px;padding:40px 36px;position:relative;z-index:2}
  .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .brand-mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--azul),var(--cian));display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 4px 12px rgba(0,81,155,.4)}
  .brand h1{font-size:19px;color:var(--azul);letter-spacing:.3px}
  .brand span{display:block;font-size:11px;color:var(--gris-suave);font-weight:600;letter-spacing:2px;text-transform:uppercase}
  .login-card h2{font-size:15px;font-weight:600;color:var(--gris-txt);margin:24px 0 4px}
  .login-card p.sub{font-size:13px;color:var(--gris-suave);margin-bottom:22px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--gris-suave);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
  .field input,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--gris-linea);border-radius:9px;font-size:14px;color:var(--gris-txt);transition:border .15s,box-shadow .15s;background:#fff}
  .field input:focus,.field select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,81,155,.12)}
  .btn-login{width:100%;padding:13px;background:var(--azul);color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s;margin-top:4px}
  .btn-login:hover{background:var(--azul-osc)} .btn-login:active{transform:scale(.99)}
  .demo-hint{margin-top:20px;padding-top:18px;border-top:1px solid var(--gris-linea);font-size:12px;color:var(--gris-suave)}
  .demo-hint b{color:var(--gris-txt)}
  .role-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .role-chip{font-size:11px;padding:5px 10px;border-radius:20px;background:var(--cian-suave);color:var(--azul);cursor:pointer;font-weight:600;border:1px solid transparent}
  .role-chip:hover{border-color:var(--azul-claro)}

  /* SHELL */
  #app{display:flex;min-height:100vh}
  #sidebar{width:255px;background:linear-gradient(180deg,var(--azul-osc),var(--azul));color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40;transition:transform .25s ease}
  .side-brand{padding:20px 20px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.12)}
  .side-brand .brand-mark{width:38px;height:38px;font-size:19px}
  .side-brand h1{font-size:15px;color:#fff;line-height:1.1}
  .side-brand span{font-size:9px;color:var(--cian);letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
  .nav{flex:1;padding:14px 12px;overflow-y:auto}
  .nav-group-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.45);padding:14px 12px 6px;font-weight:700}
  .nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;cursor:pointer;color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:background .12s,color .12s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
  .nav-item:hover{background:rgba(255,255,255,.10);color:#fff}
  .nav-item.active{background:#fff;color:var(--azul);font-weight:600}
  .nav-item .ico{width:20px;text-align:center;font-size:15px;flex-shrink:0}
  .nav-item.locked{opacity:.38;cursor:not-allowed}
  .nav-item.locked:hover{background:none;color:rgba(255,255,255,.82)}
  .side-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:11px}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--cian);color:var(--azul-osc);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
  .side-user .u-info{flex:1;min-width:0}
  .side-user .u-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-user .u-role{font-size:11px;color:var(--cian)}
  .btn-logout{background:rgba(255,255,255,.12);border:none;color:#fff;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px}
  .btn-logout:hover{background:rgba(255,255,255,.24)}

  #main{flex:1;margin-left:255px;display:flex;flex-direction:column;min-width:0}
  .topbar{background:#fff;border-bottom:1px solid var(--gris-linea);padding:0 26px;height:64px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:30}
  .hamburger{display:none;background:none;border:none;font-size:22px;color:var(--azul);cursor:pointer}
  .topbar h2{font-size:19px;color:var(--gris-txt);font-weight:700;flex:1}
  .btn-export{display:flex;align-items:center;gap:7px;background:var(--azul);color:#fff;border:none;padding:9px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
  .btn-export:hover{background:var(--azul-osc)}
  .btn-export:disabled{background:var(--gris-linea);color:var(--gris-suave);cursor:not-allowed}
  .live-badge{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--verde);background:#E8F7F0;padding:6px 12px;border-radius:20px}
  .live-dot{width:8px;height:8px;border-radius:50%;background:var(--verde);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,158,106,.5)}70%{box-shadow:0 0 0 7px rgba(30,158,106,0)}100%{box-shadow:0 0 0 0 rgba(30,158,106,0)}}
  .last-upd{font-size:12px;color:var(--gris-suave)}
  .content{padding:26px;max-width:1500px;width:100%}

  /* FILTROS */
  .filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;align-items:end}
  .filter{display:flex;flex-direction:column;gap:5px}
  .filter label{font-size:11px;font-weight:700;color:var(--gris-suave);text-transform:uppercase;letter-spacing:.5px}
  .filter select,.filter input{padding:9px 12px;border:1.5px solid var(--gris-linea);border-radius:8px;font-size:13px;background:#fff;color:var(--gris-txt);min-width:150px}
  .filter select:focus,.filter input:focus{outline:none;border-color:var(--azul)}
  /* Boton "Limpiar filtros" (pedido del usuario, 16/09). Alineado al pie de
     los combos, con el mismo alto, y discreto: no compite con los filtros. */
  .btn-limpiar{padding:9px 14px;border:1.5px solid var(--gris-linea);border-radius:8px;background:#fff;color:var(--gris-suave);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;align-self:end}
  .btn-limpiar:hover{border-color:var(--azul);color:var(--azul);background:var(--cian-suave)}
  .filter-note{font-size:11px;color:var(--gris-suave);width:100%;margin-top:-8px}

  /* KPIs */
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
  .kpi{background:var(--gris-panel);border-radius:var(--radio);padding:20px 22px;box-shadow:var(--sombra);position:relative;overflow:hidden;border-left:4px solid var(--azul)}
  .kpi.amar{border-left-color:var(--amarillo)} .kpi.verde{border-left-color:var(--verde)}
  .kpi.rojo{border-left-color:var(--rojo)} .kpi.cian{border-left-color:var(--cian)} .kpi.viol{border-left-color:var(--violeta)}
  .kpi .k-label{font-size:12px;color:var(--gris-suave);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
  .kpi .k-val{font-size:27px;font-weight:800;color:var(--gris-txt);line-height:1;letter-spacing:-.5px}
  .kpi .k-val small{font-size:14px;font-weight:600;color:var(--gris-suave)}
  .kpi .k-sub{font-size:12px;color:var(--gris-suave);margin-top:7px}
  .kpi .k-sub.up{color:var(--verde)} .kpi .k-sub.down{color:var(--rojo)}
  .kpi .k-ico{position:absolute;right:16px;top:16px;font-size:22px;opacity:.18}

  /* PANELES */
  .panel{background:var(--gris-panel);border-radius:var(--radio);box-shadow:var(--sombra);margin-bottom:24px;overflow:hidden}
  .panel-head{padding:18px 22px;border-bottom:1px solid var(--gris-linea);display:flex;align-items:center;gap:12px}
  .panel-head h3{font-size:16px;color:var(--gris-txt);font-weight:700;flex:1}
  .panel-head .tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}
  .tag.amar{background:#FEF3E2;color:#B9740F} .tag.verde{background:#E8F7F0;color:#0F7A4F} .tag.rojo{background:#FBE9EA;color:#B02A34} .tag.azul{background:var(--cian-suave);color:var(--azul)} .tag.viol{background:#EDE7F6;color:#5E35B1}
  .panel-body{padding:22px} .panel-body.nopad{padding:0}

  /* TABLA */
  /* La tabla scrollea de costado, pero se le esconde la barra nativa: la unica
     visible es .tbl-scroll, que queda pegada al fondo de la pantalla (si no, la
     barra vive al final de la tabla y con muchas filas nadie la ve). */
  .tbl-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .tbl-wrap::-webkit-scrollbar{display:none}
  .tbl-scroll{position:sticky;bottom:0;z-index:6;display:none;overflow-x:scroll;overflow-y:hidden;height:16px;background:var(--gris-panel);border-top:1px solid var(--gris-linea);scrollbar-width:auto}
  .tbl-scroll::-webkit-scrollbar{height:14px}
  .tbl-scroll::-webkit-scrollbar-track{background:var(--gris-bg)}
  .tbl-scroll::-webkit-scrollbar-thumb{background:#9FB3C8;border-radius:7px;border:3px solid var(--gris-bg)}
  .tbl-scroll::-webkit-scrollbar-thumb:hover{background:#7C93A8}
  .tbl-scroll-inner{height:1px}
  /* overflow:hidden en el panel romperia el sticky de la barra. Se libera solo
     donde hace falta y el redondeo pasa a los hijos de los extremos. */
  .panel.con-scroll-x{overflow:visible}
  .panel.con-scroll-x>:first-child{border-top-left-radius:var(--radio);border-top-right-radius:var(--radio)}
  .panel.con-scroll-x>:last-child{border-bottom-left-radius:var(--radio);border-bottom-right-radius:var(--radio)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  thead th{background:var(--azul);color:#fff;text-align:left;padding:11px 14px;font-weight:600;white-space:nowrap;font-size:12px;letter-spacing:.3px}
  thead th.num{text-align:right}
  tbody td{padding:10px 14px;border-bottom:1px solid var(--gris-linea);white-space:nowrap;color:var(--gris-txt)}
  tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
  tbody tr:hover{background:var(--cian-suave)} tbody tr:nth-child(even){background:#FAFBFD} tbody tr:nth-child(even):hover{background:var(--cian-suave)}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
  .pill.fact{background:#E8F7F0;color:#0F7A4F} .pill.pend{background:#FEF3E2;color:#B9740F} .pill.crit{background:#FBE9EA;color:#B02A34} .pill.prov{background:var(--cian-suave);color:var(--azul)} .pill.empl{background:#EDE7F6;color:#5E35B1}
  /* VIAJES AGRUPADOS (Fase 2, 2026-10-02). Una fila CRPP representa varias
     paradas: va con fondo propio y una etiqueta que la despliega. El color es
     el violeta que el mockup ya usa para "empleador", para no inventar uno. */
  tbody tr.fila-viaje{background:#F6F3FC}
  tbody tr.fila-viaje:hover{background:#EDE7F6}
  tbody tr.fila-viaje td:first-child{box-shadow:inset 3px 0 0 #5E35B1}
  .badge-viaje{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 8px;
               border-radius:20px;background:#EDE7F6;color:#5E35B1;cursor:pointer;white-space:nowrap}
  .badge-viaje:hover{background:#5E35B1;color:#fff}
  tr.fila-paradas > td{padding:0;background:#FAF8FD}
  .paradas-box{padding:12px 16px 14px;font-size:12px;color:var(--gris-txt)}
  .paradas-tit{font-weight:700;color:#5E35B1;margin-bottom:8px;font-size:12px;letter-spacing:.3px}
  .tbl-paradas{width:100%;border-collapse:collapse;font-size:12px;background:#fff;border:1px solid var(--gris-linea);border-radius:8px;overflow:hidden}
  .tbl-paradas thead th{background:#EDE7F6;color:#4527A0;padding:7px 10px;text-align:left;font-size:11px;white-space:nowrap}
  .tbl-paradas thead th.num,.tbl-paradas tbody td.num{text-align:right}
  .tbl-paradas tbody td{padding:6px 10px;border-top:1px solid var(--gris-linea);white-space:nowrap}

  .tbl-foot{padding:12px 18px;font-size:12px;color:var(--gris-suave);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--gris-linea)}
  .pager{display:flex;gap:6px}
  .pager button{border:1px solid var(--gris-linea);background:#fff;border-radius:6px;padding:5px 10px;cursor:pointer;color:var(--gris-txt)}
  .pager button:hover{border-color:var(--azul);color:var(--azul)}

  /* BARRAS */
  .chart{display:flex;align-items:flex-end;gap:14px;height:240px;padding:10px 4px 0}
  .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;position:relative}
  .bar-stack{width:100%;max-width:54px;display:flex;flex-direction:column-reverse;border-radius:6px 6px 0 0;overflow:hidden}
  .bar-seg{width:100%;transition:height .5s ease}
  .bar-seg.pend{background:var(--amarillo)} .bar-seg.fact{background:var(--azul)}
  .bar-label{font-size:12px;color:var(--gris-suave);font-weight:600}
  .bar-val{font-size:11px;color:var(--gris-txt);font-weight:700;position:absolute;top:-2px;transform:translateY(-100%)}
  .legend{display:flex;gap:20px;justify-content:center;margin-top:16px;font-size:12px;color:var(--gris-suave)}
  .legend span{display:flex;align-items:center;gap:7px}
  .dot{width:12px;height:12px;border-radius:3px} .dot.pend{background:var(--amarillo)} .dot.fact{background:var(--azul)}

  /* DONUT */
  .fact-row{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center}
  .donut{position:relative;width:200px;height:200px;margin:0 auto}
  .donut svg{transform:rotate(-90deg)}
  .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .donut .center .big{font-size:38px;font-weight:800;color:var(--azul)}
  .donut .center .lbl{font-size:12px;color:var(--gris-suave);font-weight:600}
  .fact-breakdown{display:flex;flex-direction:column;gap:14px}
  .fb-row{display:flex;align-items:center;gap:12px}
  .fb-bar{flex:1;height:26px;background:var(--gris-bg);border-radius:6px;overflow:hidden;position:relative}
  .fb-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:12px;font-weight:700}
  .fb-name{font-size:13px;font-weight:600;width:170px;color:var(--gris-txt)}
  .fb-val{font-size:13px;font-weight:700;width:70px;text-align:right}

  .locked-banner{background:linear-gradient(135deg,#FBE9EA,#FEF3E2);border:1px solid #F5C9A0;border-radius:var(--radio);padding:40px;text-align:center;color:var(--gris-txt)}
  .locked-banner .lock-ico{font-size:44px;margin-bottom:12px}
  .locked-banner h3{font-size:19px;margin-bottom:8px} .locked-banner p{font-size:14px;color:var(--gris-suave);max-width:440px;margin:0 auto}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .info-banner{background:var(--cian-suave);border:1px solid var(--azul-claro);border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:13px;color:var(--azul-osc)}

  /* MODAL EXPORT */
  .modal-bg{position:fixed;inset:0;background:rgba(0,20,50,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
  .modal{background:#fff;border-radius:14px;width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  .modal-head{padding:20px 24px;border-bottom:1px solid var(--gris-linea);display:flex;align-items:center;gap:12px}
  .modal-head h3{font-size:17px;flex:1;color:var(--gris-txt)}
  .modal-close{background:none;border:none;font-size:22px;color:var(--gris-suave);cursor:pointer;line-height:1}
  .modal-body{padding:20px 24px;overflow-y:auto}
  .export-toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
  .export-toolbar .mini-btn{font-size:12px;padding:6px 12px;border:1px solid var(--gris-linea);background:#fff;border-radius:7px;cursor:pointer;color:var(--azul);font-weight:600}
  .export-toolbar .mini-btn:hover{border-color:var(--azul);background:var(--cian-suave)}
  .export-count{font-size:12px;color:var(--gris-suave);margin-left:auto}
  .fmt-select{margin-left:8px;padding:6px 10px;border:1px solid var(--gris-linea);border-radius:7px;font-size:12px}
  .col-groups{display:flex;flex-direction:column;gap:18px}
  .col-group h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris-suave);margin-bottom:10px;font-weight:700}
  .col-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
  .col-check{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:12.5px;cursor:pointer;transition:background .1s;color:var(--gris-txt)}
  .col-check:hover{background:var(--cian-suave)}
  .col-check input{width:15px;height:15px;accent-color:var(--azul);cursor:pointer}
  .modal-foot{padding:16px 24px;border-top:1px solid var(--gris-linea);display:flex;gap:12px;align-items:center}
  .modal-foot .btn-primary{background:var(--verde);color:#fff;border:none;padding:11px 20px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;flex:1}
  .modal-foot .btn-primary:hover{background:#178553}
  .modal-foot .btn-ghost{background:#fff;border:1px solid var(--gris-linea);padding:11px 18px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;color:var(--gris-txt)}

  @media(max-width:1000px){
    #sidebar{transform:translateX(-100%)} #sidebar.open{transform:translateX(0)}
    #main{margin-left:0} .hamburger{display:block}
    .split{grid-template-columns:1fr} .fact-row{grid-template-columns:1fr;gap:20px}
  }
  @media(max-width:560px){
    .content{padding:16px} .topbar{padding:0 14px} .kpi .k-val{font-size:23px} .last-upd{display:none}
    .btn-export span.lbl{display:none}
  }
  .sidebar-backdrop{display:none}
  .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,20,50,.5);z-index:35}

  /* BUSCADOR GLOBAL POR N° DE ORDEN */
  .order-search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--gris-linea);border-radius:8px;padding:0 10px;min-width:260px}
  .order-search:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,81,155,.10)}
  .order-search .ico{color:var(--gris-suave);font-size:15px}
  .order-search input{border:none;outline:none;padding:9px 4px;font-size:13px;flex:1;color:var(--gris-txt);background:transparent;min-width:0}
  .order-search button{border:none;background:none;color:var(--gris-suave);cursor:pointer;font-size:15px;padding:2px 4px}
  .order-search button:hover{color:var(--rojo)}
  .search-info{background:#FEF9E7;border:1px solid var(--amarillo);color:#8a6400;border-radius:8px;padding:8px 14px;font-size:12.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
  .search-info b{color:#6a4d00}
  tbody tr.match-row td{background:#FFF7DE !important}
  @media(max-width:560px){.order-search{min-width:0;flex:1}}

  /* RECEPCIÓN DE REMITOS */
  .rcpt-check{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .rcpt-check input{width:17px;height:17px;accent-color:var(--verde);cursor:pointer}
  .rcpt-check.disabled{opacity:.35;cursor:not-allowed}
  .rcpt-check.disabled input{cursor:not-allowed}
  .pill.rend-pend{background:#FBE9EA;color:#B02A34}
  .pill.rend-traf{background:#FEF3E2;color:#B9740F}
  .pill.rend-adm{background:#E8F7F0;color:#0F7A4F}
  .rcpt-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--gris-suave);padding:14px 18px;border-top:1px solid var(--gris-linea)}
  .rcpt-legend span{display:flex;align-items:center;gap:6px}

  /* MINI-TARJETAS DE RENDICIÓN DE REMITOS */
  .mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
  .mini-kpi{background:var(--gris-panel);border-radius:10px;padding:12px 14px;box-shadow:var(--sombra);border-left:3px solid var(--azul);cursor:pointer;transition:transform .08s}
  .mini-kpi:hover{transform:translateY(-1px)}
  .mini-kpi.rojo{border-left-color:var(--rojo)} .mini-kpi.amar{border-left-color:var(--amarillo)} .mini-kpi.verde{border-left-color:var(--verde)} .mini-kpi.cian{border-left-color:var(--cian)}
  .mini-kpi .m-label{font-size:10.5px;color:var(--gris-suave);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
  .mini-kpi .m-val{font-size:20px;font-weight:800;color:var(--gris-txt);line-height:1.1;margin-top:4px}
  .mini-kpi .m-val small{font-size:12px;font-weight:600;color:var(--gris-suave)}
  .mini-kpi .m-sub{font-size:10.5px;color:var(--gris-suave);margin-top:3px}
  .rcpt-perm{font-size:12px;color:var(--gris-suave);margin:-8px 0 18px}

  /* NÚMEROS DE REMITO + BADGES */
  .rem-num{font-family:'Segoe UI',monospace;font-weight:700;font-size:12.5px;color:var(--gris-txt)}
  .rem-empty{color:var(--gris-suave)}
  .rem-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;display:inline-block;white-space:nowrap}
  .rem-badge.ok{background:#E8F7F0;color:#0F7A4F}
  .rem-badge.fix{background:#FBE9EA;color:#B02A34}
  /* Modal de remito: input y opciones de validación */
  #remitoModal .field{margin-top:14px}
  #remitoModal .field label{display:block;font-size:12px;font-weight:700;color:var(--gris-suave);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
  #remitoModal .field input{width:100%;padding:11px 13px;border:1.5px solid var(--gris-linea);border-radius:9px;font-size:14px;font-family:monospace;color:var(--gris-txt)}
  #remitoModal .field input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,81,155,.12)}
  .rem-informado{display:flex;justify-content:space-between;align-items:center;background:var(--cian-suave);border:1px solid var(--azul-claro);border-radius:9px;padding:12px 14px;margin-top:14px}
  .rem-informado .ri-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul-osc)}
  .rem-informado .ri-val{font-family:monospace;font-weight:800;font-size:15px;color:var(--azul-osc)}
  .val-opts{display:flex;flex-direction:column;gap:8px}
  .val-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1.5px solid var(--gris-linea);border-radius:9px;cursor:pointer;font-size:13px;color:var(--gris-txt)}
  .val-opt:hover{border-color:var(--azul-claro);background:var(--cian-suave)}
  .val-opt input{margin-top:2px;width:16px;height:16px;accent-color:var(--azul);cursor:pointer}
  /* Bloque de remitos en el histórico */
  .rem-hist{border:1px solid var(--gris-linea);border-radius:10px;overflow:hidden;margin:14px 0}
  .rem-hist-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--gris-linea)}
  .rem-hist-row:last-child{border-bottom:none}
  .rem-hist-row.final{background:#FAFBFD}
  .rem-hist-row .rh-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gris-suave)}
  .rem-hist-row .rh-val{font-family:monospace;font-weight:700;color:var(--gris-txt)}
  .hist-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-suave);margin:16px 0 8px}

  /* HISTÓRICO DE FECHAS POR ORDEN (modal) */
  .hist-link{color:var(--azul);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;font-weight:600}
  .hist-link:hover{color:var(--azul-osc)}
  .timeline{list-style:none;padding:6px 0;margin:0}
  .timeline li{position:relative;padding:0 0 20px 30px;border-left:2px solid var(--gris-linea)}
  .timeline li:last-child{border-left-color:transparent;padding-bottom:4px}
  .timeline li .tl-dot{position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--gris-linea)}
  .timeline li.done .tl-dot{border-color:var(--verde);background:var(--verde)}
  .timeline li.done{border-left-color:var(--verde)}
  .timeline .tl-label{font-size:12px;font-weight:700;color:var(--gris-txt);text-transform:uppercase;letter-spacing:.4px}
  .timeline .tl-date{font-size:14px;font-weight:700;color:var(--azul);margin-top:2px}
  .timeline .tl-date.empty{color:var(--gris-suave);font-weight:600;font-style:italic}
  .hist-head-order{font-size:12px;color:var(--gris-suave);margin-bottom:14px}
  .hist-head-order b{color:var(--gris-txt);font-size:14px}

/* =============================================================================
   Agregados del front real. El mockup no los necesitaba porque no hablaba con
   una base: son los estados que aparecen cuando los datos vienen de verdad
   (cargando, error, dato faltante) mas el grafico y las donas, que en el
   mockup eran valores fijos.
   ============================================================================= */

/* --- login --- */
.login-error{margin-top:12px;font-size:13px;color:var(--rojo);min-height:18px}
.login-estado{margin-top:16px;padding-top:14px;border-top:1px solid var(--gris-linea);font-size:12px;color:var(--gris-suave)}
.login-estado.ok{color:var(--verde)}
.login-estado.aviso{color:#B9740F}
.login-estado.error{color:var(--rojo)}
.field-nota{display:block;margin-top:5px;font-size:11px;color:var(--gris-suave);line-height:1.35;text-transform:none;letter-spacing:0;font-weight:400}

/* --- estados de carga y error --- */
.cargando{padding:34px;text-align:center;font-size:13px;color:var(--gris-suave)}
.error-banner{background:#FBE9EA;border-left:4px solid var(--rojo);color:#8E2028;padding:14px 18px;border-radius:var(--radio);font-size:13px;margin-bottom:20px;line-height:1.5}
.aviso-banner{background:#FEF3E2;border-left:4px solid var(--amarillo);color:#8A5608;padding:14px 18px;border-radius:var(--radio);font-size:13px;margin-bottom:20px;line-height:1.5}
.filter-cargando{font-size:10px;color:var(--gris-suave);margin-top:3px}

/* --- dato faltante ---
   Una raya gris, nunca "$ 0": null es "no se pudo resolver la tarifa" y 0 es
   una tarifa que vale cero (nota 4.3 del handoff). */
tbody td.nulo{color:#B6C2D1;font-weight:400}
.vacio{padding:28px !important;text-align:center;color:var(--gris-suave);font-style:italic}
.falta{color:#B9740F;font-weight:600}

/* --- tarjetas de estado clickeables --- */
.kpi.clickeable{cursor:pointer;transition:transform .08s,box-shadow .15s}
.kpi.clickeable:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,40,90,.12),0 8px 24px rgba(0,40,90,.08)}
.kpi.activo{outline:3px solid var(--azul);outline-offset:-1px}

/* --- grafico de barras (7.8) --- */
.barras{display:flex;align-items:flex-end;gap:14px;overflow-x:auto;padding:10px 4px 0;min-height:240px}
.barra-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:58px;flex:1}
.barra{width:100%;max-width:52px;background:linear-gradient(180deg,var(--azul-claro),var(--azul));border-radius:6px 6px 0 0;min-height:3px;transition:height .3s ease}
.barra-lbl{font-size:11px;color:var(--gris-suave);margin-top:8px;font-weight:600;white-space:nowrap}
.barra-val{font-size:11px;color:var(--gris-txt);font-weight:700;margin-top:2px;white-space:nowrap}

/* --- donas (7.9) --- */
.donas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.dona-panel .panel-body{display:flex;justify-content:center}

/* --- selector de columnas del export --- */
.col-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.col-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gris-txt);padding:6px 8px;border-radius:6px;cursor:pointer}
.col-chk:hover{background:var(--cian-suave)}
.col-tipo{margin-left:auto;font-size:10px;color:var(--gris-suave);font-family:Consolas,monospace}

/* --- varios --- */
.pager-info{font-size:12px;color:var(--gris-suave);padding:5px 4px;font-variant-numeric:tabular-nums}
.panel-nota{margin-top:14px;font-size:12px;color:var(--gris-suave);line-height:1.5}