/* =========================================================
   NatBee Blue · Trazabilidad — UI minimalista premium
   ========================================================= */
:root{
  --bg:#f6f7f7;
  --surface:#ffffff;
  --surface-2:#fbfcfc;
  --line:#e9ebeb;
  --line-2:#f0f2f2;
  --text:#15201d;
  --muted:#6c7674;
  --faint:#9aa3a1;
  --accent:#1f7a6d;
  --accent-700:#175c52;
  --accent-soft:#eef5f3;
  --accent-soft-2:#e3efec;
  --azul:#3a6ea5;
  --azul-soft:#eaf1f8;
  --ambar:#9a6b16;
  --ambar-soft:#f7efe0;
  --rojo:#b23b32;
  --rojo-soft:#f8ece9;
  --radio:14px;
  --radio-sm:10px;
  --shadow:0 1px 2px rgba(17,32,29,.04), 0 2px 8px rgba(17,32,29,.04);
  --shadow-lg:0 12px 40px rgba(17,32,29,.16);
  --sb:248px;
  --font:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent-soft-2)}

/* ================= LAYOUT ================= */
.app{display:flex;min-height:100vh}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sb);flex:0 0 var(--sb);
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding:22px 16px;
}
.sb-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px}
.sb-logo{
  width:42px;height:42px;border-radius:12px;flex:0 0 42px;
  background:linear-gradient(150deg,var(--accent),var(--accent-700));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;letter-spacing:.5px;line-height:1;text-align:center;
  box-shadow:0 4px 12px rgba(31,122,109,.28);
}
.sb-brand .t{font-weight:700;font-size:15px;letter-spacing:-.2px}
.sb-brand .s{font-size:11.5px;color:var(--faint);margin-top:1px}

.sb-section{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px;font-weight:600}
.nav-item{
  width:100%;display:flex;align-items:center;gap:11px;
  background:transparent;border:0;cursor:pointer;
  padding:10px 11px;border-radius:10px;margin-bottom:2px;
  color:var(--muted);font-size:14px;font-weight:500;text-align:left;
  transition:background .15s,color .15s;
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;stroke-width:1.8}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-700);font-weight:600}
.nav-item.active svg{color:var(--accent)}

.sb-spacer{flex:1}
.sb-foot{border-top:1px solid var(--line);padding:14px 10px 4px;font-size:11.5px;color:var(--faint)}
.sb-foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34c08a;margin-right:7px;vertical-align:middle}

/* ---- Main ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:22px 34px 16px;
}
.topbar .titles{flex:1;min-width:0}
.topbar h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.3px}
.topbar .sub{color:var(--faint);font-size:13px;margin-top:2px}
.search{
  display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:300px;
  transition:border-color .15s,box-shadow .15s;
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{width:16px;height:16px;color:var(--faint);flex:0 0 16px}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--text)}
.search input::placeholder{color:var(--faint)}

.content{padding:6px 34px 40px;max-width:1320px;width:100%}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ================= BOTONES ================= */
.btn{
  border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .15s,border-color .15s,opacity .15s,transform .05s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primario,.btn-verde{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(31,122,109,.22)}
.btn-primario:hover,.btn-verde:hover{background:var(--accent-700)}
.btn-gris{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.btn-gris:hover{background:var(--surface-2);color:var(--text)}
.btn-rojo{background:transparent;color:var(--rojo);border:1px solid transparent}
.btn-rojo:hover{background:var(--rojo-soft)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn-ghost{background:transparent;color:var(--accent-700);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--accent-soft)}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:18px;height:18px}

/* ===================== MODO OSCURO ===================== */
body.dark{
  --bg:#0e1513; --surface:#15201d; --surface-2:#1b2723;
  --line:#26332e; --line-2:#1f2c28;
  --text:#e7eeeb; --muted:#9fb0aa; --faint:#6f807a;
  --accent:#2fa894; --accent-700:#3bbfa8; --accent-soft:#15302b; --accent-soft-2:#1b3d37;
  --azul:#7fb0e6; --azul-soft:#16263a;
  --ambar:#d8ad5a; --ambar-soft:#332915;
  --rojo:#e57a70; --rojo-soft:#33201e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 16px 50px rgba(0,0,0,.6);
}
body.dark thead th{background:var(--surface)}
body.dark .mundi-ocean{fill:#0f1a17}
body.dark .mundi-land{fill:#1d2a26;stroke:#26332e}
body.dark .mundi-label,body.dark .mx-label{stroke:#15201d}
body.dark .kpi .ic{background:var(--accent-soft)}
body.dark .splash{filter:none}

/* ================= KPIs ================= */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:14px 0 22px}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);
  padding:18px 20px;box-shadow:var(--shadow);position:relative;
}
.kpi .label{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kpi .value{font-size:27px;font-weight:750;margin-top:8px;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:6px}
.kpi .ic{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.kpi .ic svg{width:18px;height:18px}

/* ================= CARD / TABLA ================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);box-shadow:var(--shadow);overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h2{margin:0;font-size:15px;font-weight:650}
.card-head .meta{font-size:12.5px;color:var(--faint)}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 18px;text-align:left;vertical-align:middle}
thead th{
  background:var(--surface);color:var(--faint);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line);
  position:sticky;top:0;
}
tbody td{border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--text)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.lote-link{font-weight:650;color:var(--accent-700);cursor:pointer}
.lote-link:hover{color:var(--accent);text-decoration:underline}
.muted{color:var(--muted)}

.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.pill.UE{background:var(--azul-soft);color:var(--azul)}
.pill.NOP{background:var(--accent-soft);color:var(--accent-700)}
.pill.COR{background:var(--ambar-soft);color:var(--ambar)}
.pill.gris{background:#eef1f1;color:var(--muted)}
.doc-count{color:var(--muted);font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.doc-count svg{width:14px;height:14px;color:var(--faint)}
.empty{padding:54px 20px;text-align:center;color:var(--faint)}
.empty svg{width:34px;height:34px;color:#cdd4d2;margin-bottom:10px}
.empty b{color:var(--accent-700)}

/* ===== Resumen ===== */
.res-prod{font-weight:650}
.res-total td{background:var(--surface-2);font-weight:650}
.res-grand td{background:var(--accent-700);color:#fff;font-weight:750;font-size:14px}
.res-grand td:first-child{border-radius:0}

/* ================= MODAL ================= */
.modal-bg{position:fixed;inset:0;background:rgba(15,28,25,.42);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;z-index:60;overflow:auto;padding:32px 20px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:18px;width:100%;max-width:1080px;box-shadow:var(--shadow-lg);margin:auto;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);border-radius:18px 18px 0 0;z-index:3}
.modal-head h2,#modal-titulo{margin:0;font-size:18px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center}
.head-actions{display:flex;align-items:center;gap:8px}
.audit-note{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:12.5px;font-weight:500}
.audit-note svg{width:15px;height:15px}

/* ===== Ficha de solo lectura ===== */
.f-grid{display:grid;gap:16px 20px}
.f-item{min-width:0}
.f-label{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:4px}
.f-val{font-size:14px;color:var(--text);font-weight:500;word-break:break-word}
.f-empty{color:#bcc4c2;font-weight:400;font-style:italic}
.ficha-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--surface-2)}
.ficha-card-h{font-size:12px;font-weight:700;color:var(--accent-700);margin-bottom:14px;letter-spacing:.02em;text-transform:uppercase}
.modal-head .chip-lote{font-size:12px;color:var(--accent-700);background:var(--accent-soft);padding:3px 10px;border-radius:20px;margin-left:10px;font-weight:600}
.modal-body{padding:8px 26px 24px}
.modal-foot{display:flex;justify-content:space-between;gap:10px;padding:16px 26px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface);border-radius:0 0 18px 18px}
.x-btn{background:transparent;border:0;width:34px;height:34px;border-radius:9px;font-size:20px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.x-btn:hover{background:var(--surface-2);color:var(--text)}

.section{margin-top:24px}
.section h3{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-700);
  margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line);font-weight:700;
  display:flex;align-items:center;justify-content:space-between;
}
.section h3 .btn{background:var(--accent-soft);color:var(--accent-700);box-shadow:none}
.section h3 .btn:hover{background:var(--accent-soft-2)}

.grid{display:grid;gap:14px 16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;
  font-family:inherit;outline:none;color:var(--text);background:var(--surface);
  transition:border-color .15s,box-shadow .15s;
}
.field input:hover,.field select:hover{border-color:#d8dcdc}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.rep{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;background:var(--surface-2);position:relative}
.rep .rep-x{position:absolute;top:10px;right:10px}
.rep-h{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
/* colores pastel discretos por bloque de remisión */
.pastel-0{background:#f1f7f5;border-color:#dcebe6}
.pastel-1{background:#f3f6fb;border-color:#dde7f3}
.pastel-2{background:#fbf5ef;border-color:#f0e4d6}
.pastel-3{background:#f7f2fa;border-color:#e9def0}
.pastel-4{background:#fef6f6;border-color:#f4e0df}
.pastel-5{background:#f4f8ee;border-color:#e4eed7}

/* arrastrar y soltar */
.docfield.dropzone{border:1px dashed transparent;border-radius:9px;padding:4px;transition:background .15s,border-color .15s}
.docfield.dropzone.drag{background:var(--accent-soft);border-color:var(--accent)}

/* acciones admin en la lista */
.col-admin{display:none}
body.admin .col-admin{display:table-cell;white-space:nowrap}
.col-admin .btn{margin-right:6px}
.row-oculto{opacity:.5}
.row-oculto td:first-child::after{content:" (oculto)";color:var(--faint);font-size:11px;font-weight:400}

/* indicador admin en sidebar */
.admin-indicator{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent-700);
  background:var(--accent-soft);border-radius:9px;padding:8px 10px;margin:0 4px 10px;font-weight:600}
.admin-indicator .dot-admin{width:8px;height:8px;border-radius:50%;background:#34c08a}
.btn-salir{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;text-decoration:underline}
.btn-salir:hover{color:var(--rojo)}

/* login */
.login-modal{max-width:420px}
.login-info{color:var(--muted);font-size:13px;margin:4px 0 16px}
.login-modal .field{margin-bottom:14px}
.pass-wrap{position:relative;display:flex}
.pass-wrap input{width:100%;padding-right:36px}
.pass-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;
  cursor:pointer;color:var(--faint);padding:4px;display:flex;align-items:center;border-radius:6px}
.pass-eye:hover{color:var(--muted)}
.pass-eye.activo{color:var(--accent)}
.pass-hint{font-size:11.5px;color:var(--faint)}

.date-wrap{position:relative}
.date-wrap input[type=date]{color:transparent}
.date-wrap input[type=date]::-webkit-datetime-edit{color:transparent}
.date-wrap .date-disp{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:13.5px;color:var(--text);white-space:nowrap}
.login-err{color:var(--rojo);font-size:12.5px;min-height:16px}

/* ===== Documento de trazabilidad ===== */
.reporte-modal{max-width:1040px}
.reporte-sel{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rep-chk{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}
.rep-doc{border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:18px;background:var(--surface)}
.rep-doc-head{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--accent);padding-bottom:14px;margin-bottom:16px}
.rep-logo{width:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center}
.rep-logo .brand-mark{width:54px;height:auto}
.rep-brand{display:flex;align-items:center;flex:0 0 auto}
.rep-brand .brand-mark{width:46px;height:auto}
.rep-brand .wm-sub{color:#7a8a85}
.rep-titles{flex:1}
.rep-h1{font-size:18px;font-weight:800;color:var(--accent-700)}
.rep-sub{font-size:12.5px;color:var(--muted)}
.rep-lote{font-size:15px;font-weight:800;color:var(--text);background:var(--accent-soft);padding:6px 12px;border-radius:8px}
.rep-sec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-700);margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.rep-kv{width:100%;border-collapse:collapse;margin-bottom:6px}
.rep-kv th{text-align:left;width:210px;color:var(--muted);font-weight:600;font-size:12.5px;padding:5px 8px;vertical-align:top}
.rep-kv td{font-size:13px;padding:5px 8px}
.rep-tbl{width:100%;border-collapse:collapse;font-size:12px}
.rep-tbl th{background:var(--accent-soft);color:var(--accent-700);text-align:left;padding:6px 8px;font-weight:600;border:1px solid var(--line)}
.rep-tbl td{padding:6px 8px;border:1px solid var(--line-2)}
.rep-docs{margin-top:14px;font-size:12px;color:var(--muted)}
.rep-docs a,.rep-tbl a,.rep-kv a{color:var(--accent);text-decoration:underline}
.rep-obs{font-size:12.5px;white-space:pre-wrap;line-height:1.5}

/* Capa de impresion (oculta en pantalla, fluye en varias hojas al imprimir) */
#print-area{display:none}
@page{ size:A4; margin:14mm 12mm; }
@media print{
  html,body{ background:#fff !important; }
  body.printing > *{ display:none !important; }
  body.printing > #print-area{ display:block !important; position:static !important; }
  #print-area, #print-area *{
    visibility:visible !important;
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
  #print-area{ color:#33403c; font-family:var(--font); }
  #print-area .rep-doc{ background:#fff; border:0; border-radius:0; padding:0 4px;
    page-break-after:always; break-after:page; }
  #print-area .rep-doc:last-child{ page-break-after:auto; break-after:auto; }
  /* evitar cortes feos */
  #print-area table, #print-area .rep-doc-head{ page-break-inside:avoid; }
  #print-area tr, #print-area .rep-sec{ page-break-inside:avoid; }
  /* colores claros explicitos para el documento */
  #print-area .rep-logo{ background:#1f8f78; color:#fff; }
  #print-area .rep-h1{ color:#15756a; }
  #print-area .rep-sub{ color:#5b6770; }
  #print-area .rep-lote{ background:#e9f6f1; color:#33403c; }
  #print-area .rep-doc-head{ border-bottom:2px solid #2bb673; }
  #print-area .rep-sec{ color:#15756a; border-bottom:1px solid #d7e3df; }
  #print-area .rep-kv th{ color:#5b6770; }
  #print-area .rep-kv td{ color:#33403c; }
  #print-area .rep-tbl th{ background:#e9f6f1 !important; color:#15756a; border:1px solid #cfe0db; }
  #print-area .rep-tbl td{ border:1px solid #e2e6e5; color:#33403c; }
  #print-area .rep-docs{ color:#5b6770; }
  #print-area a{ color:#15756a; text-decoration:underline; }
}

/* =====================================================================
   REALCE VISUAL  ·  gradientes, brillos, profundidad y animacion
   (No afecta la pantalla de bienvenida / splash)
   ===================================================================== */
:root{
  --grad-brand: linear-gradient(135deg, #1f8f78 0%, #2cc074 100%);
  --grad-blue:  linear-gradient(135deg, #2f72c4 0%, #57b2e8 100%);
}

/* ---- Fondo con aurora sutil ---- */
body{
  background:
    radial-gradient(900px 520px at 6% -6%, rgba(44,192,116,.12), transparent 60%),
    radial-gradient(820px 540px at 104% 6%, rgba(47,114,196,.12), transparent 55%),
    radial-gradient(760px 620px at 50% 116%, rgba(31,143,120,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.dark{
  background:
    radial-gradient(900px 520px at 6% -6%, rgba(44,192,116,.16), transparent 60%),
    radial-gradient(820px 540px at 104% 6%, rgba(47,114,196,.16), transparent 55%),
    radial-gradient(760px 620px at 50% 116%, rgba(31,143,120,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Marca / logo con plato y brillo ---- */
.sb-brand{padding:4px 6px 18px}
.brand-plate{
  position:relative; width:100%; border-radius:16px; padding:14px 16px;
  background:linear-gradient(140deg,#103029 0%,#0a1f1b 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 30px -16px rgba(31,143,120,.7);
  overflow:hidden; min-height:60px; display:flex; align-items:center;
}
.brand-plate::before{
  content:""; position:absolute; inset:-50% -15% auto -15%; height:160%;
  background:radial-gradient(55% 80% at 25% 10%, rgba(44,192,116,.45), transparent 70%);
  animation:brandGlow 5s ease-in-out infinite; pointer-events:none;
}
.brand-img{position:relative; display:block; width:100%; max-height:64px; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.brand-fallback{position:relative; display:flex; align-items:center; gap:12px; width:100%}
.brand-fallback .sb-logo{box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.brand-fallback .t{color:#fff; font-weight:800}
.brand-fallback .s{color:rgba(255,255,255,.6)}
@keyframes brandGlow{0%,100%{opacity:.45;transform:translateX(-7%)}50%{opacity:1;transform:translateX(7%)}}

/* ---- Sidebar nav activo con gradiente y brillo ---- */
.nav-item{transition:background .15s,color .15s,transform .12s,box-shadow .15s}
.nav-item:hover{transform:translateX(2px)}
.nav-item.active{background:var(--grad-brand); color:#fff; box-shadow:0 12px 24px -12px rgba(31,143,120,.75)}
.nav-item.active svg{color:#fff}

/* ---- KPIs con brillo, gradiente y elevacion ---- */
.kpi{overflow:hidden; transition:transform .18s, box-shadow .18s}
.kpi::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-brand); opacity:.95}
.kpi:nth-child(2)::after,.kpi:nth-child(4)::after{background:var(--grad-blue)}
.kpi:hover{transform:translateY(-5px); box-shadow:0 22px 42px -18px rgba(17,32,29,.32)}
.kpi .ic{background:var(--grad-brand); color:#fff; box-shadow:0 8px 18px -8px rgba(31,143,120,.7)}
.kpi:nth-child(2) .ic,.kpi:nth-child(4) .ic{background:var(--grad-blue); box-shadow:0 8px 18px -8px rgba(47,114,196,.7)}
.kpi .value{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.kpi:nth-child(2) .value,.kpi:nth-child(4) .value{background:var(--grad-blue); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ---- Botones con gradiente y destello ---- */
.btn-primario,.btn-verde{background-image:var(--grad-brand); color:#fff; border:0; position:relative; overflow:hidden;
  box-shadow:0 8px 20px -8px rgba(31,143,120,.65)}
.btn-primario:hover,.btn-verde:hover{filter:brightness(1.06); box-shadow:0 12px 28px -8px rgba(31,143,120,.8)}
.btn-primario::after,.btn-verde::after{content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg)}
.btn-primario:hover::after,.btn-verde:hover::after{animation:sheen .85s ease}
@keyframes sheen{to{left:130%}}
.btn-entrar{position:relative; overflow:hidden}  /* splash: solo permitir el sheen si ya existe, sin cambiar nada mas */

/* ---- Tarjetas y tablas con mas profundidad ---- */
.card{box-shadow:0 1px 2px rgba(17,32,29,.04), 0 18px 36px -24px rgba(17,32,29,.24)}
.card-head{background:linear-gradient(180deg, rgba(31,143,120,.05), transparent)}
thead th{background:linear-gradient(180deg, rgba(31,143,120,.09), rgba(31,143,120,.02))}
body.dark thead th{background:linear-gradient(180deg, rgba(47,168,148,.14), transparent)}
tbody tr{transition:background .12s, box-shadow .12s}
tbody tr:hover{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}

/* ---- Titulo con gradiente ---- */
.topbar h1{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; width:fit-content}

/* ---- Graficos y mapa con brillo y flujo ---- */
#chart-cert svg{filter:drop-shadow(0 6px 14px rgba(31,143,120,.22))}
#mapa-mx{filter:drop-shadow(0 10px 22px rgba(31,143,120,.12))}
.mundi-arc{animation:dashflow 1.3s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-20}}
.mundi-dot{filter:drop-shadow(0 0 6px rgba(31,143,120,.75))}
.mundi-home{filter:drop-shadow(0 0 7px rgba(47,114,196,.8))}

/* ---- Botones de idioma/tema con realce ---- */
.icon-btn:hover{box-shadow:0 6px 16px -8px rgba(31,143,120,.6); color:var(--accent-700)}

/* ---- Lockup de marca (emblema SVG + wordmark) ---- */
.brand-lockup{display:flex;align-items:center;gap:9px;width:100%}
.brand-mark{width:46px;height:auto;flex:0 0 46px;filter:drop-shadow(0 0 9px rgba(63,176,232,.55))}
.wordmark{line-height:1.05;min-width:0}
.wm-top{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.wm-nat{font-weight:800;font-size:16px;letter-spacing:.3px;color:#39b84f}
.wm-reg{font-size:8px;color:#39b84f;align-self:flex-start}
.wm-blue{font-size:8.5px;font-weight:800;letter-spacing:1.5px;color:#46aef7;margin-left:2px}
.wm-sub{font-size:7.5px;letter-spacing:2.5px;color:rgba(255,255,255,.55);margin-top:3px;white-space:nowrap}

/* =====================================================================
   MODO CLARO  ·  profundidad, color, glass y sombras de color
   ===================================================================== */
body:not(.dark){
  background:
    radial-gradient(1000px 560px at 3% -8%, rgba(44,192,116,.18), transparent 58%),
    radial-gradient(920px 600px at 107% 2%, rgba(47,114,196,.16), transparent 54%),
    radial-gradient(840px 700px at 50% 122%, rgba(31,143,120,.10), transparent 60%),
    linear-gradient(180deg,#edf4f1 0%, #f3f8f6 100%);
  background-attachment:fixed;
}
body:not(.dark) .sidebar{
  background:linear-gradient(180deg,#ffffff 0%, #f0f8f4 100%);
  border-right-color:#e4efea;
  box-shadow:1px 0 0 #e7f0ec, 20px 0 44px -30px rgba(31,143,120,.40);
}
body:not(.dark) .card{
  background:linear-gradient(180deg,#ffffff 0%, #fbfefc 100%);
  border-color:#e6efeb;
  box-shadow:0 1px 2px rgba(17,32,29,.04), 0 24px 46px -30px rgba(31,143,120,.32), 0 10px 24px -20px rgba(47,114,196,.16);
}
body:not(.dark) .kpi{
  background:linear-gradient(158deg,#ffffff 0%, #ecf9f2 100%);
  border-color:#dcefe7;
  box-shadow:0 1px 2px rgba(17,32,29,.05), 0 22px 40px -22px rgba(31,143,120,.45);
}
body:not(.dark) .kpi:nth-child(2),
body:not(.dark) .kpi:nth-child(4){
  background:linear-gradient(158deg,#ffffff 0%, #eaf2fd 100%);
  border-color:#dde9f8;
  box-shadow:0 1px 2px rgba(17,32,29,.05), 0 22px 40px -22px rgba(47,114,196,.42);
}
body:not(.dark) .kpi:hover{box-shadow:0 28px 54px -22px rgba(31,143,120,.55)}
body:not(.dark) .kpi:nth-child(2):hover,
body:not(.dark) .kpi:nth-child(4):hover{box-shadow:0 28px 54px -22px rgba(47,114,196,.55)}
body:not(.dark) thead th{background:linear-gradient(180deg, rgba(31,143,120,.13), rgba(31,143,120,.03)); color:var(--accent-700)}
body:not(.dark) .card-head h2{color:#163b34}
body:not(.dark) .search{box-shadow:0 8px 20px -14px rgba(31,143,120,.45)}
body:not(.dark) .icon-btn{box-shadow:0 8px 18px -14px rgba(31,143,120,.4)}
body:not(.dark) .modal{box-shadow:0 30px 80px -24px rgba(31,143,120,.45), 0 12px 30px -18px rgba(47,114,196,.3)}
body:not(.dark) .mundi-ocean{fill:#eaf4f0}
body:not(.dark) .mundi-land{fill:#d8e9e3; stroke:#c9e0d8}
/* linea de marca bajo el encabezado */
.topbar{position:relative}
body:not(.dark) .topbar::after{content:""; position:absolute; left:34px; right:24px; bottom:8px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(31,143,120,.40) 30%, rgba(47,114,196,.40) 70%, transparent)}
body:not(.dark) .rep-doc{box-shadow:0 18px 40px -26px rgba(31,143,120,.4)}

/* ---- Filtros + paginación en Lotes ---- */
.head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mini-select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;background:var(--surface);color:var(--text);outline:none;max-width:180px;cursor:pointer}
.mini-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border-top:1px solid var(--line)}
.pager:empty{display:none}
.pager-info{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
/* ---- Aviso del total de agave ---- */
.total-warn{color:var(--ambar);font-size:12.5px;font-weight:600}
/* ---- Bitácora de cambios ---- */
.section.bitacora h3{color:var(--muted);justify-content:flex-start;gap:7px}
.section.bitacora h3 svg{width:14px;height:14px;flex:0 0 14px;stroke-width:1.8}
.bit-list{display:flex;flex-direction:column;gap:6px}
.bit-item{display:flex;align-items:center;gap:12px;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.bit-when{color:var(--faint);font-variant-numeric:tabular-nums;min-width:128px}
.bit-item b{color:var(--accent-700);font-weight:700}
.bit-acc{color:var(--muted)}

/* ---- Tarjetas KPI del panel: leve animacion de entrada ---- */
#dash-kpis .kpi{animation:kpiIn .5s ease both}
#dash-kpis .kpi:nth-child(2){animation-delay:.05s}
#dash-kpis .kpi:nth-child(3){animation-delay:.10s}
#dash-kpis .kpi:nth-child(4){animation-delay:.15s}
#dash-kpis .kpi:nth-child(5){animation-delay:.20s}
@keyframes kpiIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.docfield{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.doc-chip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-700);border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:600;max-width:170px}
.doc-chip svg{width:14px;height:14px;flex:0 0 14px}
.doc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-none{color:var(--faint);font-size:12.5px;font-style:italic}
.total-box{background:var(--accent-soft);border-radius:9px;padding:9px 14px;font-weight:600;color:var(--accent-700);display:inline-flex;align-items:center;gap:6px;font-size:13px}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--text);color:#fff;padding:12px 20px;border-radius:12px;
  box-shadow:var(--shadow-lg);z-index:90;opacity:0;transition:opacity .25s,transform .25s;
  font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:9px;pointer-events:none;
}
.toast .dot{width:8px;height:8px;border-radius:50%;background:#34c08a}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= PANTALLA DE BIENVENIDA ================= */
.splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s;overflow:hidden}
.splash.hide{opacity:0;visibility:hidden}
.splash-bg{position:absolute;inset:0;
  background:radial-gradient(1200px 700px at 70% -10%, #2a9d8a 0%, transparent 60%),
             radial-gradient(900px 600px at 0% 110%, #123f38 0%, transparent 55%),
             linear-gradient(140deg,#14564c 0%, #0f3b34 55%, #0b2c27 100%);}
.splash-bg{background-size:160% 160%; animation:bgShift 22s ease-in-out infinite}
.splash-bg::after{content:"";position:absolute;inset:0;opacity:.10;
  background-image:radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2px),
                   radial-gradient(circle at 65% 60%, #fff 0 1.5px, transparent 2px),
                   radial-gradient(circle at 85% 20%, #fff 0 1.5px, transparent 2px);
  background-size:180px 180px,240px 240px,200px 200px;
  animation:dotDrift 38s linear infinite;}
#splash-canvas{position:absolute; inset:0; z-index:1; pointer-events:none}
@keyframes bgShift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes dotDrift{to{background-position:200px 180px, -240px 220px, 220px -180px}}
.splash-card{position:relative;z-index:2;text-align:center;color:#fff;padding:40px;animation:rise .6s ease}
.splash-logo{animation:floaty 4.8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* mismo emblema que dentro de la app, grande y con brillo */
.splash-logo{width:auto;height:auto;background:transparent;box-shadow:none;border-radius:0;
  margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.splash-logo .brand-mark{width:132px;height:auto;
  filter:drop-shadow(0 0 20px rgba(63,176,232,.6)) drop-shadow(0 10px 34px rgba(31,143,120,.45))}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.splash-logo{width:auto;height:auto;margin:0 auto 16px;background:transparent;box-shadow:none;border-radius:0;
  display:flex;align-items:center;justify-content:center}
.splash-card h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-.5px}
.splash-sub{margin:10px 0 0;font-size:17px;opacity:.92;font-weight:500}
.splash-plant{margin:2px 0 0;font-size:13px;opacity:.65;letter-spacing:.18em;text-transform:uppercase}
.btn-entrar{margin-top:30px;background:#fff;color:var(--accent-700);border:0;border-radius:30px;
  padding:15px 46px;font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.28);transition:transform .15s, box-shadow .15s}
.btn-entrar:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.34)}
.btn-entrar .arrow{display:inline-block;transition:transform .15s;margin-left:4px}
.btn-entrar:hover .arrow{transform:translateX(4px)}
.splash-foot{margin-top:40px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.5}

/* ================= DASHBOARD ================= */
#dash-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.dash-row{display:grid;gap:16px;margin-bottom:18px}
.dash-2-1{grid-template-columns:1.85fr 1fr}
.dash-1-1{grid-template-columns:1fr 1fr}
.dash-full{grid-template-columns:1fr}
.map-wrap-full{padding:8px 12px 14px}
.map-wrap-full #mapa-mx{width:100%;height:auto;display:block}
.rank-box{padding:16px 20px}
.rank-box h4{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.chart-box{padding:18px 20px}
.chart-box svg{width:100%;height:auto;display:block;overflow:visible}

/* mapa */
.map-layout{display:grid;grid-template-columns:1fr 240px;gap:8px}
.map-wrap{padding:6px 4px}
#mapa-mx{width:100%;height:auto}
.mx-land{fill:url(#mxFill);stroke:#bcd3cd;stroke-width:1.1}
.mx-bubble{fill:var(--accent);fill-opacity:.55;stroke:var(--accent-700);stroke-width:1.4;transition:fill-opacity .15s}
.mx-bubble:hover{fill-opacity:.85}
.mx-bubble-core{fill:var(--accent-700)}
.mx-label{font-size:13px;fill:var(--accent-700);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
/* mapa mundial de destinos */
.mundi-ocean{fill:#f2f6f8}
.mundi-land{fill:#e3eae9;stroke:#d2dcd9;stroke-width:.8}
.mundi-arc{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-opacity:.55;stroke-dasharray:4 4}
.mundi-home{fill:var(--accent-700);stroke:#fff;stroke-width:1.5}
.mundi-dot{fill:var(--accent-700);stroke:#fff;stroke-width:1.5}
.mundi-pulse{fill:var(--accent);fill-opacity:.35;transform-box:fill-box;transform-origin:center;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(.5);fill-opacity:.5}70%{transform:scale(1.25);fill-opacity:0}100%{transform:scale(1.25);fill-opacity:0}}
.mundi-label{font-size:13px;fill:var(--accent-700);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
.mundi-compass .cmp-bg{fill:rgba(255,255,255,.74);stroke:#cdd9d4;stroke-width:1}
.mundi-compass .cmp-n-arrow{fill:var(--accent-700)}
.mundi-compass .cmp-s-arrow{fill:#bcc7c2}
.mundi-compass .cmp-n{font-size:9px;font-weight:800;fill:var(--accent-700);text-anchor:middle}
body.dark .mundi-compass .cmp-bg{fill:rgba(16,26,23,.72);stroke:#2a3a34}
body.dark .mundi-compass .cmp-n-arrow{fill:#3bbfa8}
body.dark .mundi-compass .cmp-s-arrow{fill:#3a4a44}
body.dark .mundi-compass .cmp-n{fill:#3bbfa8}
body.dark .mundi-label{stroke:#101a17}

.map-rank{padding:14px 16px 14px 8px;border-left:1px solid var(--line);align-self:stretch}
.map-rank h4{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.rank-item{margin-bottom:11px}
.rank-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.rank-top b{color:var(--text);font-weight:600}
.rank-top span{color:var(--muted);font-variant-numeric:tabular-nums}
.rank-bar{height:7px;border-radius:5px;background:var(--line-2);overflow:hidden}
.rank-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#34c0a0)}
.rank-empty{color:var(--faint);font-size:12.5px;font-style:italic}
.rank-warn{margin-top:10px;font-size:11.5px;color:var(--ambar);background:var(--ambar-soft);padding:8px 10px;border-radius:8px;line-height:1.35}

/* leyenda dona */
.legend{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.legend .li{display:flex;align-items:center;gap:9px;font-size:13px}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.legend .lv{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.chart-empty{padding:30px;text-align:center;color:var(--faint);font-size:13px}

@media(max-width:1180px){
  .dash-2-1,.dash-1-1{grid-template-columns:1fr}
  .map-layout{grid-template-columns:1fr}
  .map-rank{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.btn-menu-movil{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--text);flex:0 0 auto}
.btn-menu-movil svg{width:20px;height:20px}
.sidebar-backdrop{display:none}

@media(max-width:720px){
  :root{--sb:0px}
  .sidebar{
    display:flex;
    position:fixed; top:0; left:0; height:100vh; width:260px; max-width:82vw;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:60;
    box-shadow:20px 0 40px -20px rgba(0,0,0,.35);
  }
  .sidebar.abierto{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .sidebar-backdrop.abierto{opacity:1;pointer-events:auto}
  .btn-menu-movil{display:flex}
  .topbar{padding:16px 16px 10px; flex-wrap:wrap; row-gap:10px}
  .topbar .titles{order:2; flex:1 1 100%; min-width:0}
  .search{order:3; flex:1 1 100%; width:auto; margin:0}
  #btn-lang{margin-left:auto}
  .content{padding:6px 18px 30px}
  .kpi{padding:14px 14px}
  .kpi .value{font-size:22px}
  .kpi .ic{top:14px;right:14px;width:28px;height:28px}
}

/* ================= ACCIONES — botones verdes en el sidebar ================= */
.acc-list{display:flex;flex-direction:column;gap:8px;padding:2px 0 4px}
.acc-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 14px;border:0;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:#fff;
  background-image:var(--grad-brand);position:relative;overflow:hidden;
  box-shadow:0 12px 24px -12px rgba(31,143,120,.75);
  transition:filter .15s, box-shadow .15s, transform .12s}
.acc-btn svg{width:18px;height:18px;flex:0 0 18px;stroke-width:1.9}
.acc-btn:hover{filter:brightness(1.06);transform:translateX(2px);
  box-shadow:0 16px 30px -12px rgba(31,143,120,.85)}
.acc-btn:active{transform:translateX(2px) scale(.99)}
/* brillo espejo (sheen) al pasar el cursor */
.acc-btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.acc-btn:hover::after{animation:sheen .85s ease}
/* variante destructiva (Borrar todo) */
.acc-btn.danger{background-image:linear-gradient(135deg,#d8443a 0%,#f0685a 100%);
  box-shadow:0 12px 24px -12px rgba(216,68,58,.7)}
.acc-btn.danger:hover{box-shadow:0 16px 30px -12px rgba(216,68,58,.85)}

/* visibles solo en modo administrador */
.solo-admin{display:none !important}
body.admin .solo-admin{display:flex !important}
.solo-rol-admin{display:none !important}
body.rol-admin .solo-rol-admin{display:flex !important}

/* ================= ACCESO ADMINISTRADOR — texto fijo (no botón) ================= */
.admin-control{padding:4px 2px 8px}
.admin-link{display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;border:0;cursor:pointer;padding:8px 6px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  border-radius:8px;transition:color .15s,background .15s}
.admin-link svg{width:15px;height:15px;flex:0 0 15px;stroke-width:1.8}
.admin-link:hover{color:var(--accent-700);background:var(--surface-2)}
.admin-active{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--accent-700);padding:8px 6px;font-weight:600}
.admin-active .dot-admin{width:8px;height:8px;border-radius:50%;background:#34c08a;
  box-shadow:0 0 0 4px rgba(52,192,138,.18)}
.admin-active-info{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.en-linea-label{font-size:10.5px;color:var(--faint);font-weight:500}

/* ================= MODO OSCURO — fondos de bloques del formulario ================= */
body.dark .rep{background:var(--surface-2);border-color:var(--line)}
body.dark .pastel-0{background:#15241f;border-color:#26382f}
body.dark .pastel-1{background:#161f2b;border-color:#26354b}
body.dark .pastel-2{background:#241f15;border-color:#3b3422}
body.dark .pastel-3{background:#1f1826;border-color:#342a3f}
body.dark .pastel-4{background:#241717;border-color:#3d2726}
body.dark .pastel-5{background:#1a2417;border-color:#2d3b27}
body.dark .rep-h{color:#9fb4ad}

/* ================= SELECTOR DE LOTES DEL REPORTE (autocompletar) ================= */
.rep-pick{position:relative;margin-bottom:12px}
.rep-sel-search{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;font-size:13.5px;background:var(--surface);color:var(--text);outline:none}
.rep-sel-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rep-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.5);max-height:260px;overflow:auto;
  padding:6px;display:none}
.rep-results.open{display:block}
.rep-res-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;border:0;background:transparent;cursor:pointer;border-radius:8px;padding:9px 11px;
  font-family:inherit;color:var(--text)}
.rep-res-item:hover{background:var(--accent-soft)}
.rep-res-item b{font-size:13px;font-weight:700;color:var(--accent-700)}
.rep-res-item span{font-size:12px;color:var(--muted)}
.rep-res-empty{padding:10px 12px;font-size:12.5px;color:var(--faint);font-style:italic}
.rep-chips-empty{color:var(--faint);font-size:12.5px;font-style:italic}
.rep-chips-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rep-sel-count{font-size:12.5px;color:var(--accent-700);font-weight:700;font-variant-numeric:tabular-nums}
.rep-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.rep-chip{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  color:var(--accent-700);border:1px solid var(--line);border-radius:999px;
  padding:6px 8px 6px 13px;font-size:12.5px;font-weight:700}
.rep-chip-x{border:0;background:rgba(0,0,0,.08);color:inherit;cursor:pointer;
  width:18px;height:18px;border-radius:50%;font-size:14px;line-height:1;display:flex;
  align-items:center;justify-content:center;padding:0}
.rep-chip-x:hover{background:var(--rojo);color:#fff}
body.dark .rep-chip-x{background:rgba(255,255,255,.12)}

/* ================= VENTANA DE CONFIRMACIÓN ================= */
.confirm-modal{max-width:440px;width:92%}
.confirm-modal .modal-body{text-align:center;padding:24px 26px 8px}
.confirm-ico{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ambar-soft);color:var(--ambar)}
.confirm-ico svg{width:28px;height:28px}
#confirm-msg{font-size:14.5px;line-height:1.5;color:var(--text);white-space:pre-line;margin:0}