/* Portal de clientes INTERLOG — mismo diseño que se aprobó en las pantallas de muestra. */
:root {
  --azul: #0E2A47; --azul-2: #16395F; --azul-claro: #EEF4FC; --azul-borde: #BFD3EE;
  --acento: #2F6FBF; --tabla: #1E8AD4; --oro: #E8A33D; --oro-osc: #1F1405;
  --fondo: #F4F6F9; --tarjeta: #FFFFFF; --borde: #DDE3EA; --borde-2: #C8D1DC; --linea: #EEF1F5;
  --texto: #142233; --suave: #5A6878; --menu: #C9D5E3; --menu-2: #B9C7D8;
  --rojo: #A61B1B; --rojo-bg: #FDE7E7; --ambar: #7A4A00; --ambar-bg: #FFF1DB; --verde: #1D6B3F; --verde-bg: #E2F4EA;
  --radio: 12px;
}
* { box-sizing: border-box; }
html { color-scheme: only light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.45 "IBM Plex Sans", "Segoe UI", Arial, sans-serif; }
a { color: var(--azul-2); } a:hover { color: var(--azul); }
h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
h2 { margin: 0; font-size: 18px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }
.suave { color: var(--suave); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estructura ---------- */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.menu { flex: 1 1 236px; max-width: 280px; background: var(--azul); color: #fff; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
.menu .logo { padding: 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.menu .logo img { width: 190px; max-width: 100%; height: auto; display: block; }
.menu .logo span { font-size: 12px; color: var(--menu-2); letter-spacing: .02em; }
.menu nav { display: flex; flex-direction: column; gap: 3px; }
.nav { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--menu); text-decoration: none; font-size: 15px; }
.nav svg { flex: none; }
.nav:hover { background: var(--azul-2); color: #fff; }
.nav.on { background: var(--azul-2); color: #fff; font-weight: 600; }
.nav .num { margin-left: auto; background: var(--oro); color: var(--oro-osc); font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.asesor { margin-top: auto; background: var(--azul-2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.asesor small { font-size: 12px; color: var(--menu-2); }
.asesor b { font-size: 15px; }
.asesor a { color: #F2C46D; font-size: 14px; font-weight: 600; }
.menu .pie { display: flex; flex-direction: column; gap: 2px; }
.main { flex: 999 1 560px; min-width: 0; padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px; }
.cabecera { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.cabecera .t { display: flex; flex-direction: column; gap: 4px; }
.cabecera p { margin: 0; color: var(--suave); }
.barra-movil { display: none; }
.cintillo { background: #7A4A00; color: #fff; text-align: center; font-size: 13px; padding: 6px; font-weight: 600; }

/* ---------- piezas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
.tarjeta.pad { padding: 22px 24px; }
.tarjeta .tit { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: inherit; }
.kpi span { font-size: 13px; color: var(--suave); }
.kpi b { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi b.chico { font-size: 22px; }
.kpi small { font-size: 12px; color: var(--suave); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px; font: 600 14px "IBM Plex Sans", "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn.pri { background: var(--azul); color: #fff; } .btn.pri:hover { background: var(--azul-2); color: #fff; }
.btn.sec { background: #fff; color: var(--azul); border-color: var(--borde-2); } .btn.sec:hover { background: #EEF2F6; }
.btn.oro { background: var(--oro); color: var(--oro-osc); } .btn.oro:hover { background: #D9932B; color: var(--oro-osc); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pildoras { display: flex; gap: 6px; flex-wrap: wrap; }
.pildora { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px; border: 1px solid var(--borde-2); background: #fff; color: var(--azul); font: 600 13px "IBM Plex Sans", "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; }
.pildora.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.aviso { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border-radius: var(--radio); padding: 16px 20px; }
.aviso.ambar { background: #FFF3E6; border: 1px solid #F2C08F; color: #6E3A08; }
.aviso.azul { background: var(--azul-claro); border: 1px solid var(--azul-borde); color: var(--azul-2); }
.aviso .txt { display: flex; gap: 14px; align-items: center; flex: 1 1 320px; }
.flash { border-radius: 10px; padding: 12px 16px; font-weight: 600; font-size: 14px; }
.flash.ok { background: var(--verde-bg); color: var(--verde); border: 1px solid #B9E2CA; }
.flash.error { background: var(--rojo-bg); color: var(--rojo); border: 1px solid #F3B9B9; }
.vacio { padding: 28px 20px; text-align: center; color: var(--suave); }
.dos-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-a { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-b { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-b.angosta { flex: 1 1 280px; }

/* ---------- tablas ---------- */
.tabla-caja { overflow-x: auto; position: relative; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--linea); font-size: 14px; vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t .der { text-align: right; } table.t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra { height: 8px; background: var(--linea); border-radius: 4px; overflow: hidden; min-width: 90px; }
.barra i { display: block; height: 8px; border-radius: 4px; }
.acciones { display: inline-flex; gap: 6px; }

/* ---------- listas ---------- */
.fila-doc { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.fila-doc:last-child { border-bottom: 0; }
.fila-doc .info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fila-doc .info b { font-size: 15px; }
.fila-doc .info small { font-size: 13px; color: var(--suave); }
.icono-doc { width: 36px; height: 36px; border-radius: 8px; background: #E3EEFB; display: flex; align-items: center; justify-content: center; flex: none; color: #1A4F8F; }
.sello { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px; border: 1.5px solid; }

.lista-corta .fila-doc { flex-wrap: nowrap; }
.lista-corta .fila-doc .info { flex: 1 1 0; }

/* ---------- rastreo ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(108px, 1fr)); min-width: 780px; }
.pasos li { display: flex; flex-direction: column; gap: 10px; }
.pasos .punto { display: flex; align-items: center; width: 100%; }
.pasos .punto span { width: 28px; height: 28px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid #B5C0CC; background: #fff; color: #fff; font-size: 14px; font-weight: 700; }
.pasos .punto i { height: 3px; flex: 1; background: var(--borde); }
.pasos li.hecho .punto span { background: #2E8B57; border-color: #2E8B57; }
.pasos li.hecho .punto i { background: #2E8B57; }
.pasos li.actual .punto span { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 4px rgba(47,111,191,.18); }
.pasos li:last-child .punto i { background: transparent; }
.pasos .nom { font-size: 14px; font-weight: 500; color: var(--suave); padding-right: 8px; }
.pasos li.hecho .nom, .pasos li.actual .nom { color: var(--texto); }
.pasos li.actual .nom { font-weight: 700; }
.pasos small { font-size: 12px; color: var(--suave); }
.historial { display: flex; flex-direction: column; }
.ev { display: flex; gap: 14px; }
.ev .linea { display: flex; flex-direction: column; align-items: center; flex: none; width: 12px; }
.ev .linea b { width: 10px; height: 10px; border-radius: 5px; margin-top: 5px; }
.ev .linea i { width: 2px; flex: 1; background: var(--borde); }
.ev:last-child .linea i { background: transparent; }
.ev .txt { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.ev .txt b { font-size: 14px; } .ev .txt small { font-size: 13px; color: var(--suave); }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; border-top: 1px solid var(--linea); padding-top: 18px; }
.datos div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.datos span { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.datos b { font-size: 15px; overflow-wrap: anywhere; }
.burbuja { max-width: 85%; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.burbuja.ellos { align-self: flex-start; background: #EEF2F6; border-bottom-left-radius: 4px; }
.burbuja.yo { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.burbuja small { font-size: 12px; font-weight: 600; color: var(--azul-2); }
.burbuja.yo small { color: var(--menu-2); }
.burbuja p { margin: 0; white-space: pre-line; }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.campo input, .campo select, .campo textarea { min-height: 44px; border: 1px solid var(--borde-2); border-radius: 8px; padding: 0 12px; font: 400 15px "IBM Plex Sans", "Segoe UI", Arial, sans-serif; color: var(--texto); background: #fff; width: 100%; }
.campo textarea { padding: 10px 12px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo small { font-weight: 400; font-size: 12px; color: var(--suave); }
.campo .err, .err { color: var(--rojo); font-size: 13px; font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.seccion-f { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-2); margin: 0 0 4px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; }
.caja-check { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span { min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--borde); background: #fff; cursor: pointer; }
.opcion span b { font-size: 15px; } .opcion span small { font-size: 12px; color: var(--suave); font-weight: 400; }
.opcion input:checked + span { background: var(--azul-claro); border-color: var(--acento); }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.subir { border: 2px dashed #B5C0CC; border-radius: 10px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; background: #FBFCFD; position: relative; }
.subir:hover { border-color: var(--acento); background: var(--azul-claro); }
.subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subir b { font-size: 14px; color: var(--azul); } .subir small { font-size: 12px; color: var(--suave); }
.subir .elegido { font-size: 13px; color: var(--verde); font-weight: 600; }
.estrellas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #C8D1DC; font-size: 34px; line-height: 1; }
.estrellas input:checked ~ label, .estrellas label:hover, .estrellas label:hover ~ label { color: var(--oro); }
.estrellas input:focus-visible + label { outline: 2px solid var(--acento); border-radius: 6px; }
.estrellas.chicas label { width: 30px; height: 30px; font-size: 22px; }
.oro-txt { color: #C27A12; letter-spacing: 2px; }

/* ---------- login ---------- */
.login { display: flex; flex-wrap: wrap; min-height: 100vh; }
.login .lado { flex: 1 1 420px; background: var(--azul); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.login .lado img { width: 260px; max-width: 70%; height: auto; }
.login .lado h1 { font-size: 38px; max-width: 460px; }
.login .lado ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: #DCE5EF; font-size: 16px; }
.login .lado li { display: flex; gap: 12px; align-items: center; }
.login .lado li::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--oro); flex: none; }
.login .forma { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.login form { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- movil ---------- */
@media (max-width: 860px) {
  .menu { display: none; position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw; z-index: 30; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.menu-abierto .menu { display: flex; }
  body.menu-abierto .velo { display: block; }
  .velo { display: none; position: fixed; inset: 0; background: rgba(14,42,71,.45); z-index: 20; }
  .barra-movil { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--azul); padding: 10px 16px; position: sticky; top: 0; z-index: 10; width: 100%; }
  .barra-movil img { width: 150px; height: auto; }
  .barra-movil button { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
  .main { padding: 20px 16px 40px; }
  h1 { font-size: 24px; }
  .login .lado { padding: 32px 20px; gap: 20px; } .login .lado h1 { font-size: 26px; } .login .lado .extra { display: none; }
  .login form { padding: 24px; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: 1fr; min-width: 0; gap: 0; }
  .pasos li { flex-direction: row; gap: 12px; min-height: 52px; }
  .pasos .punto { flex-direction: column; width: 28px; flex: none; }
  .pasos .punto i { width: 3px; height: auto; min-height: 22px; flex: 1; }
}

/* ---------- impresion ---------- */
@media print {
  .menu, .barra-movil, .no-imprimir, .velo, .cintillo { display: none !important; }
  .main { padding: 0; } body { background: #fff; }
  .tarjeta { border: 0; }
}

/* Solicitar embarque: version compacta */
.sol-compacta .campo { gap: 4px; font-size: 13px; }
.sol-compacta .campo input, .sol-compacta .campo select { min-height: 38px; font-size: 14px; }
.sol-compacta .campo textarea { min-height: 38px; font-size: 14px; padding: 8px 12px; }
.sol-compacta .rejilla { gap: 10px; align-items: start; }
.sol-compacta .caja-check { padding: 4px 12px 8px; gap: 4px; }
.sol-compacta .caja-check .check { min-height: 36px; }
.sol-compacta .check { min-height: 34px; }
.sol-compacta .opciones { gap: 8px; }
.sol-compacta .opcion span { min-height: 50px; padding: 6px 12px; }
.sol-compacta .linea-carga { grid-template-columns: 90px minmax(0,1fr) 38px !important; gap: 8px !important; }
.sol-compacta .linea-carga .quitar { width: 38px !important; min-height: 38px; }
.sol-compacta #agregar { min-height: 28px !important; }
.sol-compacta .seccion-f { margin: 0; }
.rejilla-4 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: start; }
.rejilla-det { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: start; }
.subir-fila { flex-direction: row; justify-content: center; padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .rejilla-4, .rejilla-det { grid-template-columns: 1fr; } }

/* Vista previa de reportes: hoja como el PDF de MyOffice (logo, marca de agua y pie) */
.vista-rep { background: rgba(14,42,71,.06); border-radius: var(--radio); padding: 18px; overflow-x: auto; }
.hoja-rep { position: relative; background: #fff; min-width: 760px; padding: 30px 32px 22px; box-shadow: 0 10px 30px rgba(14,42,71,.12); display: flex; flex-direction: column; gap: 16px; border-radius: 6px; }
.hoja-rep::before { content: ""; position: absolute; inset: 120px 0 40px; background: url("img/marca-agua.png") center / min(60%, 420px) no-repeat; pointer-events: none; }
.hoja-cab { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--azul); padding-bottom: 12px; align-items: center; }
.hoja-logo { width: 210px; height: auto; }
.hoja-tabla { position: relative; }
.t.rep { font-size: 12px; }
.t.rep th { background: var(--tabla); color: #fff; padding: 7px 8px; font-size: 11px; white-space: nowrap; }
.t.rep td { padding: 7px 8px; font-size: 12px; vertical-align: top; background: transparent; }
.t.rep td.c-ref, .t.rep td.c-folio, .t.rep td.c-num, .t.rep td.c-bl { font-weight: 700; white-space: nowrap; }
.t.rep td.c-etd, .t.rep td.c-eta, .t.rep td.c-fecha, .t.rep td.c-emision, .t.rep td.c-vence, .t.rep td.c-cont,
.t.rep td.c-total, .t.rep td.c-total_l, .t.rep td.c-total_usd, .t.rep td.c-abonado, .t.rep td.c-saldo, .t.rep td.c-plazo { white-space: nowrap; }
.t.rep td.c-com { min-width: 160px; max-width: 260px; }
.hoja-pie { border-top: 1px solid var(--linea); padding-top: 8px; font-size: 11px; color: var(--suave); text-align: center; }

/* ======================================================================
   TEMA MODERNO: fondo con color, ventanas de vidrio y botones animados.
   Va al final para ganarle a lo de arriba sin tocar cada pantalla.
   ====================================================================== */
body {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(30,138,212,.22), transparent 60%),
    radial-gradient(800px 600px at 105% 10%, rgba(47,111,191,.20), transparent 55%),
    radial-gradient(700px 500px at 60% 110%, rgba(232,163,61,.14), transparent 60%),
    linear-gradient(160deg, #EEF3FA 0%, #F6F8FC 45%, #EAF1F9 100%);
  background-attachment: fixed;
}
.menu {
  background:
    radial-gradient(400px 300px at 0% 0%, rgba(30,138,212,.35), transparent 70%),
    radial-gradient(300px 400px at 100% 100%, rgba(232,163,61,.12), transparent 70%),
    linear-gradient(180deg, #0B2340 0%, #0E2A47 55%, #102F52 100%);
  box-shadow: 4px 0 30px rgba(8,25,45,.25);
}
@media (min-width: 861px) { .menu { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } }
.login .lado h1 { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
.nav { position: relative; transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.nav:hover { background: rgba(255,255,255,.08); transform: translateX(4px); }
.nav.on { background: linear-gradient(90deg, rgba(30,138,212,.45), rgba(30,138,212,.12)); box-shadow: inset 3px 0 0 #4FB3F6, 0 6px 18px rgba(0,0,0,.18); }
.nav svg { transition: transform .3s; } .nav:hover svg { transform: scale(1.12); }
.asesor { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Ventanas de vidrio */
.tarjeta, .kpi {
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(14,42,71,.08), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: 16px;
}
.kpi { position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(30,138,212,.18), transparent 70%); }
a.kpi:hover, .kpi:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,42,71,.14); }
.aviso.azul { background: rgba(238,244,252,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.campo input, .campo select, .campo textarea { background: rgba(255,255,255,.85); transition: border-color .2s, box-shadow .2s; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tabla); box-shadow: 0 0 0 4px rgba(30,138,212,.18); }

/* Botones animados */
.btn { position: relative; overflow: hidden; transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .25s; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.pri { background: linear-gradient(135deg, #1E8AD4 0%, #16518C 55%, #0E2A47 100%); background-size: 160% 160%; box-shadow: 0 8px 20px rgba(30,138,212,.30); }
.btn.pri:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(30,138,212,.40); color: #fff; }
.btn.pri::after, .btn.oro::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn.pri:hover::after, .btn.oro:hover::after { left: 130%; }
.btn.sec { background: rgba(255,255,255,.75); border-color: rgba(200,209,220,.9); }
.btn.sec:hover { background: #fff; border-color: var(--tabla); color: var(--tabla); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,42,71,.10); }
.btn.oro:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(232,163,61,.35); }
.pildora { transition: all .25s; background: rgba(255,255,255,.7); }
.pildora:hover { border-color: var(--tabla); color: var(--tabla); transform: translateY(-1px); }
.pildora.on { background: linear-gradient(135deg, #1E8AD4, #0E2A47); border-color: transparent; box-shadow: 0 6px 16px rgba(30,138,212,.30); color: #fff; }
.opcion span { transition: all .25s; background: rgba(255,255,255,.75); }
.opcion span:hover { border-color: var(--tabla); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,42,71,.08); }
.opcion input:checked + span { background: linear-gradient(135deg, rgba(30,138,212,.14), rgba(238,244,252,.9)); border-color: var(--tabla); box-shadow: 0 6px 16px rgba(30,138,212,.18); }

/* Listas y tablas */
.fila-doc { transition: background .2s, padding .2s; border-radius: 10px; }
.fila-doc:hover { background: rgba(30,138,212,.06); padding-left: 8px; padding-right: 8px; }
.icono-doc { background: linear-gradient(135deg, #E3EEFB, #CFE3F8); transition: transform .3s; }
.fila-doc:hover .icono-doc { transform: rotate(-6deg) scale(1.08); }
table.t tbody tr { transition: background .2s; }
table.t tbody tr:hover td { background: rgba(30,138,212,.06); }
.chip-il { font: 700 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #1E8AD4, #16518C); padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(30,138,212,.25); }
.buscador { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.85); border: 1px solid var(--borde-2); border-radius: 12px; padding: 0 14px; color: var(--suave); transition: border-color .2s, box-shadow .2s; }
.buscador:focus-within { border-color: var(--tabla); box-shadow: 0 0 0 4px rgba(30,138,212,.15); }
.buscador input { border: 0; outline: none; background: transparent; min-height: 42px; flex: 1; font: 400 15px "IBM Plex Sans", "Segoe UI", Arial, sans-serif; color: var(--texto); }
.barra i { background-image: linear-gradient(90deg, #1E8AD4, #4FB3F6) !important; position: relative; }
h1 { background: linear-gradient(90deg, #0E2A47, #1E6FB0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Entrada suave de la pantalla */
@keyframes subir-suave { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.main > * { animation: subir-suave .5s ease both; }
.main > *:nth-child(2) { animation-delay: .06s; } .main > *:nth-child(3) { animation-delay: .12s; }
.main > *:nth-child(4) { animation-delay: .18s; } .main > *:nth-child(5) { animation-delay: .24s; }
.kpis > * { animation: subir-suave .5s ease both; }
.kpis > *:nth-child(2) { animation-delay: .08s; } .kpis > *:nth-child(3) { animation-delay: .16s; } .kpis > *:nth-child(4) { animation-delay: .24s; }

/* Login con la misma estetica */
.login .lado { background:
    radial-gradient(500px 400px at 10% 10%, rgba(30,138,212,.35), transparent 70%),
    linear-gradient(160deg, #0B2340, #0E2A47 60%, #12355C) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body { background: #fff !important; }
  .tarjeta, .kpi { background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; }
  h1 { color: var(--azul) !important; background: none !important; }
}

/* Reportes: filtros arriba en una franja y la hoja a todo lo ancho */
.rep-layout { display: flex; flex-direction: column; gap: 20px; }
.rep-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
.rep-filtros .rep-tipos { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rep-filtros .rep-tipos legend { margin-bottom: 8px; }
.rep-filtros > .rejilla { grid-column: span 2; }
.rep-filtros > div[style*="border-top"] { grid-column: 1 / -1; flex-direction: row !important; flex-wrap: wrap; border-top: 0 !important; padding-top: 0 !important; justify-content: flex-end; }
.rep-filtros > div[style*="border-top"] .rejilla { display: flex !important; }
@media (max-width: 760px) { .rep-filtros > .rejilla { grid-column: 1 / -1; } }
.hoja-rep { min-width: 980px; }
.hoja-rep::before { opacity: .55; }
.t.rep td.c-prov { min-width: 150px; } .t.rep td.c-origen, .t.rep td.c-destino { min-width: 110px; }
.t.rep td.c-detalle { min-width: 150px; }