/* COL-RPL · hoja de estilos compartida (sin dependencias externas) */
:root {
  --navy:#0b2e59; --azul:#0874c7; --cian:#4ac8e4; --slate:#364f6b;
  --bg:#f3f6fa; --card:#fff; --line:#e1e8f0; --line-2:#cbd6e2;
  --text:#1b2733; --muted:#5b6b7b;
  --ok:#1c7c45; --ok-bg:#e4f5ea; --warn:#8a5a00; --warn-bg:#fff2d1; --naranja:#9a3b00; --naranja-bg:#ffe5d3;
  --info:#0b4f93; --info-bg:#e1eefb; --err:#a8261d; --err-bg:#fdeceb;
  --radio:10px; --sombra:0 1px 2px rgba(11,46,89,.06), 0 4px 16px rgba(11,46,89,.06);
}
* { box-sizing:border-box; }

/* ---------- Barra superior (todas las pantallas) ---------- */
.topbar { background:#fff; border-bottom:1px solid var(--line); border-top:4px solid var(--navy); box-shadow:0 1px 3px rgba(11,46,89,.06); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:.92rem; margin-bottom:1.2rem; }
.topbar-in { max-width:1440px; margin:0 auto; padding:.5rem 1.5rem; display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .4rem; }
.topbar .marca { display:flex; align-items:center; margin-right:1rem; }
.topbar .marca img { height:30px; width:auto; display:block; }
.topbar a, .topbar summary { color:var(--slate); text-decoration:none; padding:.4rem .6rem; border-radius:8px; cursor:pointer; list-style:none; display:block; }
.topbar summary::-webkit-details-marker { display:none; }
.topbar summary::after { content:"▾"; margin-left:.3rem; font-size:.75em; }
.topbar a:hover, .topbar summary:hover { background:#eef3f9; color:var(--navy); }
.topbar a.on, .topbar details.on > summary { color:var(--navy); font-weight:600; background:var(--info-bg); }
.topbar details { position:relative; }
.topbar .lista { position:absolute; z-index:30; top:2.5rem; left:0; min-width:12rem; padding:.35rem; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(11,46,89,.16); }
.topbar .lista a { padding:.4rem .7rem; }
.topbar .usuario { margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.topbar .usuario .quien { text-align:right; line-height:1.2; }
.topbar .usuario .quien b { display:block; color:var(--navy); font-size:.88rem; }
.topbar .usuario .quien span { color:var(--muted); font-size:.75rem; }
.topbar .usuario form { margin:0; }
.topbar .usuario button { padding:.35rem .8rem; font:inherit; color:var(--slate); background:#fff; border:1px solid var(--line-2); border-radius:8px; cursor:pointer; }
.topbar .usuario button:hover { background:#eef3f9; color:var(--navy); }

/* ---------- Páginas rediseñadas: <body class="ui"> ---------- */
body.ui { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ui .wrap { max-width:1440px; margin:0 auto; padding:0 1.5rem 3rem; }
.ui .page-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.8rem; margin:0 0 1.1rem; }
.ui .page-head h1 { margin:0; font-size:1.5rem; color:var(--navy); letter-spacing:-.01em; }
.ui .page-head p { margin:.15rem 0 0; color:var(--muted); font-size:.9rem; }
.ui h2 { font-size:1rem; color:var(--navy); margin:1.8rem 0 .7rem; display:flex; align-items:center; gap:.5rem; }
.ui h2 small { color:var(--muted); font-weight:400; font-size:.8rem; }
.ui .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radio); box-shadow:var(--sombra); }

/* Botones */
.ui .btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; font:inherit; font-size:.9rem; color:var(--navy); text-decoration:none; background:#fff; border:1px solid var(--line-2); border-radius:8px; cursor:pointer; line-height:1.2; }
.ui .btn:hover { background:#eef3f9; border-color:#b6c5d6; }
.ui .btn-primary { color:#fff; background:var(--navy); border-color:var(--navy); }
.ui .btn-primary:hover { background:var(--azul); border-color:var(--azul); }
.ui .btn-sm { padding:.25rem .6rem; font-size:.8rem; border-radius:6px; }
.ui .btn-peligro { color:var(--err); }
.ui .btn-peligro:hover { background:var(--err-bg); border-color:#efb9b5; }

/* Avisos */
.ui .alert { padding:.7rem .9rem; border-radius:8px; margin:0 0 1rem; border:1px solid; font-size:.92rem; }
.ui .alert-ok { color:var(--ok); background:var(--ok-bg); border-color:#b5e0c6; }
.ui .alert-error { color:var(--err); background:var(--err-bg); border-color:#f1bdb9; }

/* Tablas */
.ui .tabla-wrap { overflow:auto; max-height:72vh; background:#fff; border:1px solid var(--line); border-radius:var(--radio); box-shadow:var(--sombra); }
.ui table.t { width:100%; border-collapse:separate; border-spacing:0; font-size:.87rem; }
.ui table.t th { position:sticky; top:0; z-index:2; background:#eef3f9; color:var(--slate); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:.65rem .7rem; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.ui table.t td { padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.ui table.t td.nw, .ui table.t td.folio, .ui table.t td.n { white-space:nowrap; }
.ui table.t tbody tr:hover td { background:#f6faff; }
.ui table.t tr:last-child td { border-bottom:0; }
.ui table.t td.n, .ui table.t th.n { text-align:right; font-variant-numeric:tabular-nums; }
.ui table.t tr.sub td { background:#fafcfe; color:var(--muted); }
.ui table.t tr.sub td:first-child { padding-left:1.8rem; }
.ui table.t td.vacio { text-align:center; color:var(--muted); padding:2rem; }
.ui .folio { font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.ui .acciones { display:flex; gap:.35rem; align-items:center; }
.ui .acciones form { margin:0; }

/* Etiquetas de estado */
.ui .badge { display:inline-block; padding:.1rem .6rem; border-radius:999px; font-size:.74rem; font-weight:600; background:var(--info-bg); color:var(--info); white-space:nowrap; }
.ui .b-ok, .ui .est-entregado { background:var(--ok-bg); color:var(--ok); }
.ui .b-warn, .ui .est-en_destino { background:var(--warn-bg); color:var(--warn); }
.ui .b-naranja, .ui .est-en_descarga { background:var(--naranja-bg); color:var(--naranja); }
.ui .b-muted { background:#e9eef3; color:var(--muted); }
.ui .est-en_ruta { background:var(--info-bg); color:var(--info); }

/* Barra de herramientas sobre tablas */
.ui .herramientas { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 .8rem; }
.ui .buscar { flex:1; min-width:220px; max-width:380px; padding:.5rem .8rem .5rem 2.1rem; font:inherit; font-size:.9rem; border:1px solid var(--line-2); border-radius:8px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6b7b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") .65rem 50% no-repeat; }
.ui .buscar:focus { outline:2px solid var(--azul); border-color:var(--azul); }
.ui .contador { color:var(--muted); font-size:.85rem; margin-left:auto; }

/* Tarjetas de indicadores (inicio) */
.ui .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.9rem; margin:0 0 1.4rem; }
.ui .stat { padding:1rem 1.1rem; background:#fff; border:1px solid var(--line); border-left:4px solid var(--azul); border-radius:var(--radio); box-shadow:var(--sombra); }
.ui .stat .l { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.ui .stat .v { font-size:1.7rem; font-weight:700; color:var(--navy); line-height:1.2; margin-top:.1rem; font-variant-numeric:tabular-nums; }
.ui .stat .d { font-size:.8rem; color:var(--muted); }
.ui .stat.s-warn { border-left-color:#e0a200; } .ui .stat.s-naranja { border-left-color:#e2701d; }
.ui .stat.s-ok { border-left-color:#2aa05c; } .ui .stat.s-navy { border-left-color:var(--navy); }

/* Accesos (inicio) */
.ui .accesos { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem; }
.ui .acceso { display:flex; gap:.85rem; align-items:center; padding:.9rem 1rem; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:var(--radio); box-shadow:var(--sombra); transition:transform .12s, border-color .12s; }
.ui .acceso:hover { transform:translateY(-2px); border-color:var(--azul); }
.ui .acceso .ico { flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--info-bg); color:var(--azul); }
.ui .acceso .ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ui .acceso strong { display:block; color:var(--navy); }
.ui .acceso span.d { font-size:.82rem; color:var(--muted); }

/* ---------- Login ---------- */
body.login { margin:0; min-height:100vh; display:grid; place-items:center; padding:1.5rem; position:relative; overflow:hidden; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:linear-gradient(135deg,#082448 0%,var(--navy) 45%,#0a5da6 100%); }
body.login::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 0 56%,rgba(74,200,228,.38) 56% 56.5%,transparent 56.5% 58%,rgba(255,255,255,.14) 58% 58.4%,transparent 58.4%); pointer-events:none; }
.login .tarjeta { position:relative; width:100%; max-width:400px; background:#fff; border-radius:16px; padding:2.2rem 2rem 1.8rem; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.login .logo { display:block; width:100%; max-width:290px; height:auto; margin:0 auto 1.3rem; }
.login h1 { margin:0; text-align:center; font-size:1.25rem; color:var(--navy); letter-spacing:.02em; }
.login .sub { margin:.2rem 0 1.4rem; text-align:center; color:var(--muted); font-size:.88rem; }
.login label { display:block; margin-top:1rem; font-size:.85rem; font-weight:600; color:var(--slate); }
.login input { width:100%; margin-top:.3rem; padding:.7rem .8rem; font:inherit; font-size:1rem; border:1px solid var(--line-2); border-radius:8px; background:#f8fafc; }
.login input:focus { outline:2px solid var(--azul); border-color:var(--azul); background:#fff; }
.login button { width:100%; margin-top:1.5rem; padding:.8rem; font:inherit; font-size:1rem; font-weight:600; color:#fff; background:var(--navy); border:0; border-radius:8px; cursor:pointer; }
.login button:hover { background:var(--azul); }
.login .error { margin:0 0 .4rem; padding:.6rem .8rem; color:var(--err); background:var(--err-bg); border:1px solid #f1bdb9; border-radius:8px; font-size:.88rem; }
.login .pie { margin:1.4rem 0 0; text-align:center; font-size:.75rem; color:var(--muted); }

@media (max-width:700px) {
  .topbar-in { padding:.5rem 1rem; } .ui .wrap { padding:0 1rem 2rem; }
  .topbar .usuario { width:100%; margin-left:0; justify-content:space-between; }
}