/* ================================================================
 * Nativa Pharma Colombia — Sistema v7
 * assets/sistema.css
 * Todos los estilos encapsulados bajo #nativa-sistema-wrap
 * Las variables CSS en :root son globales (no afectan otros estilos)
 * ================================================================ */

/* ── Variables globales del sistema ── */
:root {
  --bg:#F5F2ED;--white:#FFF;--ink:#1A1612;--t2:#4A453E;--t3:#9A9088;
  --border:#E4E0D8;--border2:#CCC8C0;
  --gold:#A87800;--gold-l:#FBF5E0;--gold-b:#D4A820;
  --green:#1A6040;--green-l:#E6F4EE;--green-b:#60B888;
  --ngreen:#3DB82A;
  --red:#B83020;--red-l:#FDECEA;--red-b:#E08080;
  --blue:#1A3C70;--blue-l:#E6EEF8;--blue-b:#80A8D8;
  --purple:#3A1880;--purple-l:#EEE8FA;
  --gray:#686460;--gray-l:#EEEAE6;
  --exec:#186050;--exec-l:#E6F4F0;
  --r:12px;--rs:8px;
  --sh:0 2px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.05);
  --sh2:0 8px 32px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.07);
}

/* ── Reset scoped ── */
#nativa-sistema-wrap *,
#nativa-sistema-wrap *::before,
#nativa-sistema-wrap *::after {
  box-sizing:border-box;margin:0;padding:0;
}

/* ── Contenedor raíz del sistema ── */
#nativa-sistema-wrap {
  background:var(--bg);color:var(--ink);
  font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;
  min-height:100vh;
}

/* ── App (visible directamente en WP, sin pantalla de login) ── */
#nativa-sistema-wrap #app { display:block; }

/* ── Barra de navegación superior ── */
#nativa-sistema-wrap .bar {
  background:var(--ink);height:52px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
#nativa-sistema-wrap .bar-logo img { height:28px;object-fit:contain; }
#nativa-sistema-wrap .bar-r { display:flex;align-items:center;gap:12px; }
#nativa-sistema-wrap .bar-user { font-size:13px;color:rgba(255,255,255,.5); }
#nativa-sistema-wrap .rtag {
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.5px;
}
#nativa-sistema-wrap .rt-dt      { background:var(--purple-l);color:var(--purple); }
#nativa-sistema-wrap .rt-director { background:var(--gold-l);color:var(--gold); }
#nativa-sistema-wrap .rt-ejecutivo{ background:var(--exec-l);color:var(--exec); }
#nativa-sistema-wrap .bar-notif {
  position:relative;cursor:pointer;font-size:18px;color:rgba(255,255,255,.6);
}
#nativa-sistema-wrap .notif-badge {
  position:absolute;top:-4px;right:-4px;width:16px;height:16px;
  background:var(--red);border-radius:50%;font-size:9px;font-weight:700;
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
#nativa-sistema-wrap .bar-out {
  font-size:12px;color:rgba(255,255,255,.4);cursor:pointer;
  padding:5px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
  text-decoration:none;
}
#nativa-sistema-wrap .bar-out:hover { color:var(--white); }

/* ── Área de contenido principal ── */
#nativa-sistema-wrap .wrap {
  max-width:900px;margin:0 auto;padding:24px 16px 100px;
}

/* ── Tarjetas ── */
#nativa-sistema-wrap .card {
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;
}
#nativa-sistema-wrap .card-hd {
  padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
#nativa-sistema-wrap .card-bd { padding:18px 20px; }
#nativa-sistema-wrap .cn {
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'DM Serif Display',serif;
  font-size:13px;font-weight:700;flex-shrink:0;
}
#nativa-sistema-wrap .cn-dk { background:var(--ink);color:var(--white); }
#nativa-sistema-wrap .cn-ok { background:var(--ngreen);color:var(--white);font-size:14px; }
#nativa-sistema-wrap .cn-gn { background:var(--green);color:var(--white); }
#nativa-sistema-wrap .cn-gd { background:var(--gold);color:var(--white); }
#nativa-sistema-wrap .cn-pu { background:var(--purple);color:var(--white); }
#nativa-sistema-wrap .cn-rd { background:var(--red);color:var(--white); }
#nativa-sistema-wrap .card-hd h2 {
  font-family:'DM Serif Display',serif;font-size:16px;
}
#nativa-sistema-wrap .card-hd p { font-size:12px;color:var(--t3);margin-top:1px; }

/* ── Etiquetas y campos de formulario ── */
#nativa-sistema-wrap .fl {
  display:block;font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;
}
#nativa-sistema-wrap .fi,
#nativa-sistema-wrap .fs {
  width:100%;padding:10px 12px;border:1.5px solid var(--border2);
  border-radius:var(--rs);font-family:'DM Sans',sans-serif;font-size:14px;
  font-weight:500;color:var(--ink);background:var(--bg);outline:none;display:block;
}
#nativa-sistema-wrap .fi:focus,
#nativa-sistema-wrap .fs:focus {
  border-color:var(--ngreen);background:var(--white);
}
#nativa-sistema-wrap .fi[type=number] { -moz-appearance:textfield; }
#nativa-sistema-wrap .fi::-webkit-inner-spin-button,
#nativa-sistema-wrap .fi::-webkit-outer-spin-button { -webkit-appearance:none; }
#nativa-sistema-wrap .fld { margin-bottom:12px; }
#nativa-sistema-wrap .fhint { font-size:11px;color:var(--t3);margin-top:3px; }

/* ── Grids ── */
#nativa-sistema-wrap .g2 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
#nativa-sistema-wrap .g3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }
@media(max-width:560px){
  #nativa-sistema-wrap .g2,
  #nativa-sistema-wrap .g3 { grid-template-columns:1fr; }
}
#nativa-sistema-wrap .og { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media(max-width:480px){
  #nativa-sistema-wrap .og { grid-template-columns:1fr; }
}

/* ── Opciones seleccionables ── */
#nativa-sistema-wrap .oc {
  border:2px solid var(--border);border-radius:var(--rs);padding:12px 14px;
  cursor:pointer;background:var(--bg);transition:all .15s;
  display:flex;align-items:center;gap:10px;
}
#nativa-sistema-wrap .oc:hover { border-color:var(--ngreen);background:var(--white); }
#nativa-sistema-wrap .oc.on {
  border-color:var(--ngreen);background:var(--white);box-shadow:var(--sh);
}
#nativa-sistema-wrap .oc-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
#nativa-sistema-wrap .oc-info { flex:1; }
#nativa-sistema-wrap .oc-name {
  font-family:'DM Serif Display',serif;font-size:14px;color:var(--ink);
}
#nativa-sistema-wrap .oc-sub { font-size:11px;color:var(--t3);margin-top:1px; }
#nativa-sistema-wrap .oc-chk {
  width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;
}
#nativa-sistema-wrap .oc.on .oc-chk {
  background:var(--ngreen);border-color:var(--ngreen);color:var(--white);
}

/* ── Métricas ── */
#nativa-sistema-wrap .mrow {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;margin-bottom:14px;
}
#nativa-sistema-wrap .mc {
  border-radius:var(--rs);padding:12px 10px;text-align:center;
  border:1.5px solid var(--border);
}
#nativa-sistema-wrap .mc-l {
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);margin-bottom:4px;
}
#nativa-sistema-wrap .mc-v {
  font-family:'DM Serif Display',serif;font-size:20px;
  color:var(--ink);line-height:1.1;
}
#nativa-sistema-wrap .mc-s { font-size:11px;color:var(--t3);margin-top:2px; }
#nativa-sistema-wrap .mc.gd { border-color:var(--gold-b);background:var(--gold-l); }
#nativa-sistema-wrap .mc.gd .mc-v { color:var(--gold); }
#nativa-sistema-wrap .mc.gn { border-color:var(--green-b);background:var(--green-l); }
#nativa-sistema-wrap .mc.gn .mc-v { color:var(--green); }
#nativa-sistema-wrap .mc.rd { border-color:var(--red-b);background:var(--red-l); }
#nativa-sistema-wrap .mc.rd .mc-v { color:var(--red); }
#nativa-sistema-wrap .mc.bl { border-color:var(--blue-b);background:var(--blue-l); }
#nativa-sistema-wrap .mc.bl .mc-v { color:var(--blue); }
#nativa-sistema-wrap .mc.pu { border-color:#A090D8;background:var(--purple-l); }
#nativa-sistema-wrap .mc.pu .mc-v { color:var(--purple); }
#nativa-sistema-wrap .mc.gy { border-color:var(--border2);background:var(--gray-l); }
#nativa-sistema-wrap .mc.gy .mc-v { color:var(--gray); }
#nativa-sistema-wrap .mc.ex { border-color:#60B090;background:var(--exec-l); }
#nativa-sistema-wrap .mc.ex .mc-v { color:var(--exec); }

/* ── Barra de progreso ── */
#nativa-sistema-wrap .prog-wrap { margin-top:8px; }
#nativa-sistema-wrap .prog-label {
  display:flex;justify-content:space-between;font-size:12px;
  color:var(--t3);margin-bottom:4px;
}
#nativa-sistema-wrap .prog-bar {
  height:8px;background:var(--border);border-radius:4px;overflow:hidden;
}
#nativa-sistema-wrap .prog-fill { height:100%;border-radius:4px;transition:width .3s; }
#nativa-sistema-wrap .prog-fill.gn { background:var(--ngreen); }
#nativa-sistema-wrap .prog-fill.gd { background:var(--gold); }

/* ── Filas de cotización ── */
#nativa-sistema-wrap .crows {
  border:1.5px solid var(--border);border-radius:var(--rs);overflow:hidden;
}
#nativa-sistema-wrap .cr {
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:10px 14px;border-bottom:1px solid var(--border);gap:10px;
}
#nativa-sistema-wrap .cr:last-child { border-bottom:none; }
#nativa-sistema-wrap .cr-l { flex:1; }
#nativa-sistema-wrap .cr-n { font-size:13px;color:var(--t2); }
#nativa-sistema-wrap .cr-d { font-size:11px;color:var(--t3);margin-top:1px; }
#nativa-sistema-wrap .cr-v { font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap; }
#nativa-sistema-wrap .cr-v.gd { color:var(--gold); }
#nativa-sistema-wrap .cr-v.gn { color:var(--green); }
#nativa-sistema-wrap .cr-v.rd { color:var(--red); }
#nativa-sistema-wrap .cr-v.gy { color:var(--gray);font-weight:500; }
#nativa-sistema-wrap .cr-v.mt { color:var(--t3);font-weight:400; }
#nativa-sistema-wrap .cr.sub { background:var(--bg); }
#nativa-sistema-wrap .cr.sub .cr-n,
#nativa-sistema-wrap .cr.sub .cr-v { font-size:12px;color:var(--t3); }
#nativa-sistema-wrap .cr.tot { background:var(--ink); }
#nativa-sistema-wrap .cr.tot .cr-n {
  font-size:14px;font-weight:700;color:var(--white);
}
#nativa-sistema-wrap .cr.tot .cr-v {
  font-family:'DM Serif Display',serif;font-size:20px;color:#FFD166;
}
#nativa-sistema-wrap .cr.piso { background:var(--red-l); }
#nativa-sistema-wrap .cr.piso .cr-n,
#nativa-sistema-wrap .cr.piso .cr-v { color:var(--red); }
#nativa-sistema-wrap .cr.techo { background:var(--green-l); }
#nativa-sistema-wrap .cr.techo .cr-n,
#nativa-sistema-wrap .cr.techo .cr-v { color:var(--green); }
#nativa-sistema-wrap .cr.util { background:var(--purple-l); }
#nativa-sistema-wrap .cr.util .cr-v { color:var(--purple); }
#nativa-sistema-wrap .cr.hi { background:var(--gold-l); }
#nativa-sistema-wrap .cr.hi .cr-n { color:var(--gold); }
#nativa-sistema-wrap .cr.hi .cr-v { color:var(--gold); }
#nativa-sistema-wrap .gray-box {
  background:var(--gray-l);border:2px dashed var(--border2);
  border-radius:var(--rs);padding:14px 16px;margin:12px 0;
}
#nativa-sistema-wrap .gray-title {
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--gray);margin-bottom:10px;
}
#nativa-sistema-wrap .cr.gray {
  background:var(--gray-l);border-bottom:1px solid var(--border2);
}
#nativa-sistema-wrap .cr.gray .cr-n { color:var(--gray); }
#nativa-sistema-wrap .cr.gray .cr-v { color:var(--gray);font-weight:600; }
#nativa-sistema-wrap .cr.gray-tot { background:var(--gray); }
#nativa-sistema-wrap .cr.gray-tot .cr-n {
  font-weight:700;color:rgba(255,255,255,.8);
}
#nativa-sistema-wrap .cr.gray-tot .cr-v {
  font-family:'DM Serif Display',serif;font-size:18px;color:var(--white);
}

/* ── Alertas ── */
#nativa-sistema-wrap .al {
  border-radius:var(--rs);padding:10px 13px;font-size:13px;line-height:1.6;
  margin-bottom:10px;display:flex;gap:9px;align-items:flex-start;
}
#nativa-sistema-wrap .al.info {
  background:var(--blue-l);border:1.5px solid var(--blue-b);color:var(--blue);
}
#nativa-sistema-wrap .al.ok {
  background:var(--green-l);border:1.5px solid var(--green-b);color:var(--green);
}
#nativa-sistema-wrap .al.warn {
  background:#FFFBEA;border:1.5px solid #E8C060;color:#7A5800;
}
#nativa-sistema-wrap .al.err {
  background:var(--red-l);border:1.5px solid var(--red-b);color:var(--red);
}
#nativa-sistema-wrap .al.piloto {
  background:var(--gold-l);border:1.5px solid var(--gold-b);color:var(--gold);
}

/* ── Tablas ── */
#nativa-sistema-wrap .tw { overflow-x:auto; }
#nativa-sistema-wrap .tbl {
  width:100%;border-collapse:collapse;font-size:12px;min-width:360px;
}
#nativa-sistema-wrap .tbl th {
  text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);padding:8px 10px;
  border-bottom:2px solid var(--border);background:var(--bg);
}
#nativa-sistema-wrap .tbl td {
  padding:8px 10px;border-bottom:1px solid var(--border);color:var(--t2);
}
#nativa-sistema-wrap .tbl tr:last-child td { border-bottom:none; }
#nativa-sistema-wrap .tbl tr.hl td {
  background:var(--gold-l);font-weight:600;color:var(--gold);
}
#nativa-sistema-wrap .tbl tr.best td {
  background:var(--green-l);font-weight:600;color:var(--green);
}
#nativa-sistema-wrap .tbl td.s { font-weight:700;color:var(--ink); }

/* ── Panel de novedades ── */
#nativa-sistema-wrap .notif-panel {
  background:var(--white);border-radius:var(--r);box-shadow:var(--sh2);
  padding:18px 20px;margin-bottom:14px;border-left:4px solid var(--red);
}
#nativa-sistema-wrap .notif-panel h3 {
  font-family:'DM Serif Display',serif;font-size:16px;
  color:var(--red);margin-bottom:12px;
}
#nativa-sistema-wrap .notif-item {
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
#nativa-sistema-wrap .notif-item:last-child { border-bottom:none; }

/* ── Slider ── */
#nativa-sistema-wrap .sl-wrap {
  display:flex;align-items:center;gap:10px;margin-top:6px;
}
#nativa-sistema-wrap .sl-wrap input[type=range] {
  flex:1;accent-color:var(--ngreen);
}
#nativa-sistema-wrap .sl-val {
  font-family:'DM Serif Display',serif;font-size:17px;font-weight:700;
  color:var(--ngreen);min-width:42px;text-align:right;
}

/* ── Botones ── */
#nativa-sistema-wrap .br {
  display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;
}
#nativa-sistema-wrap .btn {
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  padding:10px 20px;border-radius:var(--rs);border:none;
  cursor:pointer;transition:all .2s;
}
#nativa-sistema-wrap .btn-ink { background:var(--ink);color:var(--white); }
#nativa-sistema-wrap .btn-ink:hover { background:var(--ngreen); }
#nativa-sistema-wrap .btn-gn { background:var(--ngreen);color:var(--white); }
#nativa-sistema-wrap .btn-gn:hover { background:#2a9a1c; }
#nativa-sistema-wrap .btn-rd { background:var(--red);color:var(--white); }
#nativa-sistema-wrap .btn-gd { background:var(--gold);color:var(--white); }
#nativa-sistema-wrap .btn-s {
  background:var(--white);color:var(--ink);border:1.5px solid var(--border2);
}
#nativa-sistema-wrap .btn-s:hover { border-color:var(--ink); }
#nativa-sistema-wrap .btn-sm { font-size:12px;padding:7px 14px; }
#nativa-sistema-wrap .btn-print {
  background:linear-gradient(135deg,var(--blue),#0F2A50);color:var(--white);
}

/* ── Separador ── */
#nativa-sistema-wrap .divl {
  display:flex;align-items:center;gap:10px;margin:14px 0 10px;
}
#nativa-sistema-wrap .divl span {
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--t3);white-space:nowrap;
}
#nativa-sistema-wrap .divl::before,
#nativa-sistema-wrap .divl::after {
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── Grid de niveles ── */
#nativa-sistema-wrap .ng {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media(max-width:600px){
  #nativa-sistema-wrap .ng { grid-template-columns:1fr 1fr; }
}
#nativa-sistema-wrap .nc {
  border:2px solid var(--border);border-radius:var(--rs);
  padding:12px;text-align:center;background:var(--bg);
}
#nativa-sistema-wrap .nc-name {
  font-family:'DM Serif Display',serif;font-size:13px;
  color:var(--ink);margin-bottom:3px;
}
#nativa-sistema-wrap .nc-kg { font-size:11px;color:var(--t3);margin-bottom:5px; }
#nativa-sistema-wrap .nc-precio {
  font-size:14px;font-weight:700;color:var(--gold);
}
#nativa-sistema-wrap .nc-costo { font-size:10px;color:var(--t3);margin-top:2px; }

/* ── Modal ── */
#nativa-sistema-wrap .modal-ov {
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;z-index:200;
}
#nativa-sistema-wrap .modal {
  background:var(--white);border-radius:var(--r);padding:28px;
  max-width:480px;width:92%;box-shadow:var(--sh2);
}
#nativa-sistema-wrap .modal h3 {
  font-family:'DM Serif Display',serif;font-size:19px;margin-bottom:6px;
}
#nativa-sistema-wrap .modal p {
  font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:18px;
}
#nativa-sistema-wrap .modal-btns { display:flex;gap:10px; }

/* ── Mensaje de acceso denegado ── */
#nativa-sistema-wrap .nativa-acceso-denegado {
  max-width:480px;margin:60px auto;padding:32px;
  background:var(--white);border-radius:var(--r);box-shadow:var(--sh);
  text-align:center;
}
#nativa-sistema-wrap .nativa-acceso-denegado h2 {
  font-family:'DM Serif Display',serif;font-size:22px;
  color:var(--ink);margin-bottom:10px;
}
#nativa-sistema-wrap .nativa-acceso-denegado p {
  color:var(--t3);font-size:14px;line-height:1.6;
}

/* ── Impresión ── */
@media print {
  #nativa-sistema-wrap .bar,
  #nativa-sistema-wrap .br,
  #nativa-sistema-wrap .btn,
  #nativa-sistema-wrap .no-print { display:none !important; }
  #nativa-sistema-wrap .card { box-shadow:none;border:1px solid #ddd; }
  #nativa-sistema-wrap .wrap { padding:0;max-width:100%; }
}

/* ── Responsive móvil ── */
@media(max-width:480px) {
  #nativa-sistema-wrap .mrow { grid-template-columns:1fr 1fr; }
  #nativa-sistema-wrap .bar  { padding:0 14px; }
  #nativa-sistema-wrap .wrap { padding:14px 12px 80px; }
}

/* ── Corrección WordPress: barra fija sobre el portal ── */
body.page-id-portal #nativa-sistema-wrap .bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* Empujar contenido para compensar el bar fijo */
body #nativa-sistema-wrap .wrap {
  padding-top: 76px;
}

/* Ocultar header y footer de WordPress en esta página */
.page-template-elementor_canvas .site-header,
.page-template-elementor_canvas .site-footer,
.elementor-location-header,
.elementor-location-footer { display: none !important; }