/* ============================================================
   COTIZADOR SURAGUANTES — CSS de rediseño v3.0
   Base: cotizador_final_v12.html (mockup aprobado)
   Adaptado para convivir con el HTML productivo:
   - Oculta .header, .substatus y .tabs originales (.legacy-hidden)
   - Activa .panel.active dentro de .main (sin renombrar a .screen)
   - Mantiene el lock-overlay y los modales intactos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ────────────────────────────────────────────────────────────
   IMPORTANTE: TODO el CSS del rediseño se aplica SOLO en
   pantalla (@media screen). El cotizador productivo tiene su
   propio CSS de impresión (@media print) y la print view de
   PDF (los pv_*) — esos NO se tocan.
   ──────────────────────────────────────────────────────────── */
@media screen {

*,*::before,*::after{box-sizing:border-box;}

:root{
  --orange:#e8620a;--navy:#0d1530;--navy2:#080e24;
  --bg:#f4f5f7;--white:#fff;--border:#e2e5ea;
  --text-1:#111827;--text-2:#374151;--text-3:#6b7280;--text-4:#9ca3af;
  --green:#16a34a;--green-bg:#f0fdf4;--green-bd:#bbf7d0;
  --red:#dc2626;--red-bg:#fef2f2;--red-bd:#fecaca;
  --yellow:#d97706;--yellow-bg:#fffbeb;--yellow-bd:#fde68a;
  --blue:#2563eb;--blue-bg:#eff6ff;--blue-bd:#bfdbfe;
  --purple:#7c3aed;
  --sb-w:220px;--sb-w-col:52px;
  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:10px;
  --shadow:0 1px 4px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.04);
}

/* ── Body y fondo general ── */
body{
  font-family:var(--font);
  background:linear-gradient(135deg,#060c1e 0%,#0d1530 40%,#111d42 70%,#080e24 100%);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
}
.app{max-width:none !important; margin:0 !important;}

/* Ocultar elementos legacy del cotizador (los reemplaza el shell nuevo) */
.legacy-hidden{display:none !important;}

/* ══ SHELL ══ */
.shell{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:1fr;
  height:100vh;
  width:100vw;
  max-width:100%;
  overflow:hidden;
  position:relative;
}
/* .shell.col ya no cambia el grid — el ancho del sidebar dicta la columna automáticamente */

/* ══ SIDEBAR ══ */
.sidebar{
  grid-row:1;
  background:rgba(8,14,36,0.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;
  width:var(--sb-w);
  min-width:var(--sb-w);
  max-width:var(--sb-w);
  transition:width .22s cubic-bezier(.4,0,.2,1), min-width .22s cubic-bezier(.4,0,.2,1), max-width .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;position:relative;z-index:10;
}
.shell.col .sidebar{width:var(--sb-w-col);min-width:var(--sb-w-col);max-width:var(--sb-w-col);}
.shell.col .sidebar:hover{
  width:var(--sb-w) !important;
  min-width:var(--sb-w) !important;
  max-width:var(--sb-w) !important;
  box-shadow:4px 0 12px rgba(0,0,0,.18);
}

/* ── Logo area ── */
.sb-logo-area{
  padding:16px 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;min-height:84px;
}
.sb-logo-full{max-height:64px;max-width:184px;width:auto;height:auto;flex-shrink:0;transition:all .22s;display:block;object-fit:contain;}
.sb-logo-icon{height:36px;width:36px;object-fit:cover;flex-shrink:0;transition:all .22s;display:none;border-radius:8px;}
.shell.col .sidebar:not(:hover) .sb-logo-full{display:none;}
.shell.col .sidebar:not(:hover) .sb-logo-icon{display:flex;}
.shell.col .sidebar:hover .sb-logo-full{display:block;}
.shell.col .sidebar:hover .sb-logo-icon{display:none;}

/* ── Card cotizacion activa ── */
.sb-cot{
  margin:8px;
  background:rgba(232,98,10,.07);
  border:1px solid rgba(232,98,10,.18);
  border-left:3px solid var(--orange);
  border-radius:0 8px 8px 0;
  padding:10px 12px;
  flex-shrink:0;overflow:hidden;
  transition:all .22s;
}
.shell.col .sidebar:not(:hover) .sb-cot{height:0;padding:0;margin:0;border:none;opacity:0;}
.sb-cot-lbl{font-size:9px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);margin-bottom:5px;}
.sb-cot-id{font-size:13px;font-weight:700;color:white;font-family:var(--mono);letter-spacing:-.3px;}
.sb-cot-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.sb-cot-st{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;font-family:var(--mono);}
.sb-cot-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ── Estados ── */
.st-draft{color:#94a3b8;}.st-draft .sb-cot-dot{background:#64748b;}
.st-sent{color:#22d3ee;}.st-sent .sb-cot-dot{background:#06b6d4;}
.st-approved{color:#34d399;}.st-approved .sb-cot-dot{background:#10b981;}
.st-imported{color:#a78bfa;}.st-imported .sb-cot-dot{background:#8b5cf6;}
.st-rejected{color:#fb7185;}.st-rejected .sb-cot-dot{background:#f43f5e;}

/* ── Nav ── */
.sb-nav{padding:8px 6px;flex:1;overflow-y:auto;overflow-x:hidden;}
.sb-section-lbl{
  font-size:9px;color:rgba(255,255,255,.18);
  text-transform:uppercase;letter-spacing:1px;
  font-family:var(--mono);padding:8px 8px 4px;
  white-space:nowrap;overflow:hidden;transition:opacity .15s;
}
.shell.col .sidebar:not(:hover) .sb-section-lbl{opacity:0;height:0;padding:0;}

.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 8px;border-radius:7px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.38);
  cursor:pointer;transition:all .13s;
  margin-bottom:1px;white-space:nowrap;
  position:relative;
}
.sb-item:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.80);}
.sb-item.on{background:rgba(232,98,10,.13);color:rgba(255,255,255,.95);font-weight:600;}
.sb-item.on::before{
  content:'';position:absolute;left:0;top:20%;
  width:3px;height:60%;background:var(--orange);
  border-radius:0 2px 2px 0;
}
.sb-ico{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.65;transition:opacity .13s;color:currentColor;}
.sb-item:hover .sb-ico,.sb-item.on .sb-ico{opacity:1;}
.sb-item-txt{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;}
.shell.col .sidebar:not(:hover) .sb-item-txt{opacity:0;width:0;overflow:hidden;padding:0;margin:0;}
.shell.col .sidebar:not(:hover) .sb-item{padding:10px;justify-content:center;gap:0;}

/* Tooltip en modo colapsado */
.sb-item[data-label]::after{
  content:attr(data-label);
  position:absolute;left:calc(var(--sb-w-col) - 4px);top:50%;
  transform:translateY(-50%);
  background:#1e2d50;color:rgba(255,255,255,.90);
  font-size:11px;font-weight:600;padding:5px 10px;
  border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .12s;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  z-index:300;font-family:var(--font);
}
.shell.col .sidebar:not(:hover) .sb-item:hover::after{opacity:1;}

/* ── Usuario ── */
.sb-user{
  padding:10px 10px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:9px;flex-shrink:0;overflow:hidden;
}
.shell.col .sidebar:not(:hover) .sb-user{justify-content:center;padding:10px 8px;}
.sb-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e8620a,#f07828);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:white;border:2px solid rgba(255,255,255,.15);flex-shrink:0;}
.sb-uname{font-size:12px;font-weight:600;color:rgba(255,255,255,.80);white-space:nowrap;overflow:hidden;transition:opacity .15s;}
.sb-urole{font-size:9px;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);white-space:nowrap;overflow:hidden;transition:opacity .15s;}
.shell.col .sidebar:not(:hover) .sb-uname,.shell.col .sidebar:not(:hover) .sb-urole{opacity:0;width:0;}
.sb-pass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0;margin-right:4px;}
.sb-pass:hover{background:rgba(96,165,250,.20);border-color:rgba(96,165,250,.55);color:#bfdbfe;transform:translateX(-1px);}
.sb-pass:active{transform:scale(.94);}
.shell.col .sidebar:not(:hover) .sb-pass{display:none;}
.sb-logout{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0;}
.sb-logout:hover{background:rgba(239,68,68,.20);border-color:rgba(239,68,68,.55);color:#fecaca;transform:translateX(-1px);}
.sb-logout:active{transform:scale(.94);}
.shell.col .sidebar:not(:hover) .sb-logout{display:none;}

/* ══ MAIN AREA ══ */
.main-wrap{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  min-width:0 !important;
  width:100% !important;
  height:100vh !important;
  position:relative !important;
  z-index:1 !important;
  background:transparent !important;
}

/* ── Topbar ── */
.topbar{
  background:rgba(13,21,48,0.80);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:3px solid var(--orange);
  height:46px;display:flex;align-items:center;
  padding:0 16px;gap:4px;flex-shrink:0;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  overflow-x:auto;
}
.tb-btn{
  padding:5px 11px;border-radius:6px;
  font-size:11px;font-weight:500;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.70);
  font-family:var(--font);cursor:pointer;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;transition:all .13s;
}
.tb-btn:hover{background:rgba(255,255,255,.11);color:white;border-color:rgba(255,255,255,.18);}
.tb-new{background:rgba(232,98,10,.13);color:#fb923c;border-color:rgba(232,98,10,.28);font-weight:700;}
.tb-new:hover{background:rgba(232,98,10,.22);color:white;}
.tb-pdf{background:rgba(232,98,10,.13);color:#fb923c;border-color:rgba(232,98,10,.26);font-weight:600;}
.tb-pdf:hover{background:rgba(232,98,10,.22);color:white;}
.tb-div{width:1px;height:18px;background:rgba(255,255,255,.09);margin:0 3px;flex-shrink:0;}
.tb-spacer{flex:1;}
/* === Estado de inventario en el sidebar (debajo de la navegación) === */
.sb-inv{padding:8px 14px 10px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.shell.col .sidebar:not(:hover) .sb-inv{padding:8px 8px 10px;}
.sb-inv-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:5px;}
.sb-inv-lbl{font-size:9px;color:rgba(255,255,255,.40);text-transform:uppercase;letter-spacing:.6px;font-weight:700;font-family:var(--mono);}
.shell.col .sidebar:not(:hover) .sb-inv-lbl{display:none;}
.sb-inv-status{font-size:11px;font-weight:500;padding:6px 9px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.62);line-height:1.35;transition:all .2s;word-break:break-word;overflow-wrap:anywhere;}
.sb-inv-status .sb-inv-empty{font-style:italic;opacity:.7;color:rgba(255,255,255,.42);}
.sb-inv-status.loading{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.28);color:#fbbf24;animation:sb-inv-pulse 1.4s ease-in-out infinite;}
.sb-inv-status.on{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.32);color:#86efac;font-weight:600;}
.sb-inv-status.on strong{color:#bbf7d0;font-weight:700;}
.shell.col .sidebar:not(:hover) .sb-inv-status{font-size:0;padding:8px;text-align:center;}
.shell.col .sidebar:not(:hover) .sb-inv-status::before{content:'📦';font-size:13px;}
.shell.col .sidebar:not(:hover) .sb-inv-status.on::before{content:'✓';color:#86efac;font-size:12px;font-weight:700;}
.shell.col .sidebar:not(:hover) .sb-inv-status.loading::before{content:'⏳';font-size:12px;}
@keyframes sb-inv-pulse{0%,100%{opacity:.85}50%{opacity:1}}
.sb-inv-clear{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.28);color:#fca5a5;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:all .15s;flex-shrink:0;}
.sb-inv-clear:hover{background:rgba(239,68,68,.25);color:#fecaca;border-color:rgba(239,68,68,.5);}
.shell.col .sidebar:not(:hover) .sb-inv-clear{display:none !important;}

/* ══ MAIN CONTENT ══ */
.main{
  overflow-y:auto !important;
  flex:1 1 auto !important;
  background:rgba(244,245,247,0.94) !important;
  padding:20px !important;
  min-height:0 !important;
  min-width:0 !important;
  width:100% !important;
  position:relative !important;
  z-index:1 !important;
}

/* Compatibilidad: que los .panel del cotizador se muestren cuando son .active */
.main .panel{display:none;}
.main .panel.active{display:block;}

/* Asegurar que cualquier .tabs hijo del .main no se vea (legacy) */
.main > .tabs,
.main > .header,
.main > .substatus{display:none !important;}

/* ══ LOCK SCREEN — NO TOCAR (mantener su diseño existente) ══ */
.lock-overlay{font-family:var(--font);}

/* ══ MODALES — NO TOCAR layout, solo asegurar font ══ */
.modal-overlay{font-family:var(--font);}

/* ══ FAB (Seguimiento) — respetar pero ajustar font ══ */
.segFAB, #segFAB{font-family:var(--font);}

/* ══ Body en login (sin shell) ══ */
body.no-shell{overflow:auto;background:#f8fafc;}

/* ════════════════════════════════════════════════════════════
   PANEL COTIZACIÓN (Fase 2) — adaptar .qi, .qi-h, .cform y sus
   botones a la estética del mockup (.card, .card-hd, .ab-*)
   ════════════════════════════════════════════════════════════ */

/* ── .cform como card del mockup ── */
.main .cform{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  margin-bottom:14px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
  padding:0 !important;
}
.main .cform h3{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 18px !important;
  margin:0 !important;
  border-bottom:1px solid var(--border) !important;
  background:#fafbfc !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  font-family:var(--font) !important;
  position:relative !important;
}
.main .cform h3::before{
  content:'';
  display:block;
  width:4px;
  height:20px;
  background:var(--orange);
  border-radius:2px;
  flex-shrink:0;
}
/* Body del cform (todo lo que no es h3) con padding */
.main .cform > *:not(h3):not(.np){padding-left:18px;padding-right:18px;}
.main .cform > .fgrid,
.main .cform > .fgrid4,
.main .cform > .fg{margin:14px 18px !important;}
.main .cform > *:last-child{padding-bottom:18px;}

/* Labels y campos */
.main .cform label{
  font-size:11px !important;
  font-weight:600 !important;
  color:var(--text-3) !important;
  margin-bottom:5px !important;
  display:block !important;
}
.main .cform input,
.main .cform select,
.main .cform textarea,
.main .cform input[type="text"],
.main .cform input[type="date"],
.main .cform input[type="email"],
.main .cform input[type="tel"],
.main .cform input[type="number"]{
  width:100% !important;
  padding:9px 12px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  background:#f9fafb !important;
  font-size:13px !important;
  line-height:1.5 !important;
  color:var(--text-1) !important;
  font-family:var(--font) !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  transition:all .14s !important;
  height:auto !important;
  box-sizing:border-box !important;
}
.main .cform input::placeholder,
.main .cform textarea::placeholder{
  color:var(--text-4) !important;
  font-size:13px !important;
  font-weight:400 !important;
  opacity:1 !important;
}
.main .cform input::placeholder,
.main .cform textarea::placeholder{
  color:var(--text-4) !important;
  font-size:14px !important;
  font-weight:400 !important;
  opacity:1 !important;
}
.main .cform select{
  appearance:auto;
  -webkit-appearance:auto;
}
.main .cform input:focus,
.main .cform select:focus,
.main .cform textarea:focus{
  border-color:var(--orange) !important;
  background:#fffaf6 !important;
  box-shadow:0 0 0 3px rgba(232,98,10,.10) !important;
  outline:none !important;
}

/* ── .qi (card de ítems cotizados) ── */
.main .qi{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  margin-bottom:14px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
.main .qi-h{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 18px !important;
  background:#fafbfc !important;
  border-bottom:1px solid var(--border) !important;
  color:var(--navy) !important;
  font-weight:800 !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  font-family:var(--font) !important;
  position:relative !important;
}
.main .qi-h::before{
  content:'';
  display:block;
  width:4px;
  height:20px;
  background:var(--orange);
  border-radius:2px;
  flex-shrink:0;
  order:-1;
}
.main .qi-h > span:first-child{flex:1;color:var(--navy);}
.main .qi-h .np{margin-left:auto;display:flex !important;gap:6px !important;align-items:center !important;flex-wrap:wrap !important;}
.main .qi-b{background:#ffffff !important;}

/* Botones del header de .qi (sobreescribir styles inline) */
.main .qi-h button{
  padding:7px 13px !important;
  border-radius:7px !important;
  font-size:11px !important;
  font-weight:600 !important;
  border:1.5px solid transparent !important;
  cursor:pointer !important;
  font-family:var(--font) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  transition:all .14s !important;
  box-shadow:none !important;
  color:initial;
}
/* + Ítem libre → naranja translúcido */
.main .qi-h button[onclick*="agregarItemLibre"]{
  background:rgba(232,98,10,.12) !important;
  color:#fb923c !important;
  border-color:rgba(232,98,10,.28) !important;
}
.main .qi-h button[onclick*="agregarItemLibre"]:hover{
  background:rgba(232,98,10,.22) !important;
  color:white !important;
}
/* PDF Proveedor → rojo suave */
.main .qi-h button[onclick*="abrirCotizacionProveedor"],
.main .qi-h button[onclick*="abrirCotProv"]{
  background:var(--red-bg) !important;
  color:var(--red) !important;
  border-color:var(--red-bd) !important;
}
.main .qi-h button[onclick*="abrirCotizacionProveedor"]:hover,
.main .qi-h button[onclick*="abrirCotProv"]:hover{
  background:#fde2e2 !important;
}
/* Recalcular margen → azul suave */
.main .qi-h button[onclick*="abrirRecalcMargen"],
.main .qi-h button[onclick*="recalcMargen"]{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border-color:var(--blue-bd) !important;
}
.main .qi-h button[onclick*="abrirRecalcMargen"]:hover,
.main .qi-h button[onclick*="recalcMargen"]:hover{
  background:#dbeafe !important;
}
/* Limpiar items → outline */
.main .qi-h button[onclick*="limpiarItems"]{
  background:#ffffff !important;
  color:var(--text-2) !important;
  border-color:var(--border) !important;
}
.main .qi-h button[onclick*="limpiarItems"]:hover{
  border-color:#cbd5e1 !important;
  color:var(--text-1) !important;
}
/* Ver margen (mgbtn) → verde suave */
.main .qi-h button.mgbtn,
.main .qi-h button[onclick*="togMg"]{
  background:var(--green-bg) !important;
  color:var(--green) !important;
  border-color:var(--green-bd) !important;
}
.main .qi-h button.mgbtn:hover,
.main .qi-h button[onclick*="togMg"]:hover{
  background:#dcfce7 !important;
}

/* ── Tabla de items .qr ── */
.main .qr.hd{
  background:var(--navy) !important;
  color:rgba(255,255,255,.85) !important;
  font-family:var(--mono) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
  padding:13px 10px !important;
  border-bottom:none !important;
  min-height:42px !important;
  align-items:center !important;
}
.main .qr.hd > div{color:rgba(255,255,255,.85) !important;}
.main .qr:not(.hd){
  border-bottom:1px solid var(--border) !important;
  font-size:12.5px !important;
  font-family:var(--font) !important;
}
.main .qr:not(.hd):hover{background:#f8f9fc !important;}

/* ── Totales (.tots, .tr, .grand) ── */
.main .tots{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  overflow:hidden !important;
  margin-left:auto !important;
  width:320px !important;
  max-width:100% !important;
  margin-top:10px !important;
}
.main .tots .tr{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:9px 15px !important;
  border-bottom:1px solid var(--border) !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
.main .tots .tr:last-child{border-bottom:none !important;}
.main .tots .tr > span{color:var(--text-3) !important;}
.main .tots .tr > strong{
  color:var(--text-1) !important;
  font-weight:600 !important;
  font-family:var(--mono) !important;
}
.main .tots .tr.grand{
  background:var(--navy) !important;
  padding:13px 15px !important;
}
.main .tots .tr.grand > span{color:rgba(255,255,255,.65) !important;font-weight:700 !important;}
.main .tots .tr.grand > strong{
  color:white !important;
  font-size:16px !important;
  font-weight:800 !important;
  font-family:var(--mono) !important;
}

/* ── Alerta de revisión de precios ── */
.main #priceReviewBox{
  background:var(--red-bg) !important;
  border:1.5px solid var(--red-bd) !important;
  border-radius:9px !important;
  padding:13px 16px !important;
  margin-bottom:14px !important;
}
.main #priceReviewBox label{
  display:flex !important;
  align-items:flex-start !important;
  gap:11px !important;
  cursor:pointer !important;
  font-size:13px !important;
  line-height:1.55 !important;
  margin:0 !important;
}
.main #priceReviewBox label > input[type="checkbox"]{
  margin:0 !important;
  margin-top:3px !important;
  width:15px !important;
  height:15px !important;
  flex-shrink:0 !important;
  accent-color:var(--orange) !important;
  cursor:pointer !important;
}
.main #priceReviewBox label > span{
  flex:1 !important;
  display:block !important;
  color:var(--text-2) !important;
  font-size:13px !important;
  line-height:1.55 !important;
}
.main #priceReviewBox label > span > strong:first-child{
  color:var(--red) !important;
  font-size:13px !important;
  font-weight:700 !important;
  display:block !important;
  margin-bottom:6px !important;
}
.main #priceReviewBox label > span > br{
  display:none !important;
}
.main #priceReviewBox label > span > span{
  display:inline !important;
  color:var(--text-2) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
}
.main #priceReviewBox label > span > span > strong{
  display:inline !important;
  color:var(--red) !important;
  font-weight:700 !important;
  font-size:13px !important;
  margin:0 !important;
}

/* ── Caja de margen interno ── */
.main .mgbox{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:14px 16px !important;
  margin-bottom:14px !important;
  box-shadow:var(--shadow) !important;
}
.main .mgbox h4{
  color:var(--navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  margin-bottom:10px !important;
  font-family:var(--font) !important;
}
.main .mgbox .mgr{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:6px 0 !important;
  font-size:12.5px !important;
}
.main .mgbox .mgr strong{font-family:var(--mono) !important;}

/* ════════════════════════════════════════════════════════════
   ESTADO VACÍO DE ÍTEMS (#emptyQ .empty) — estilo plano del mockup
   ════════════════════════════════════════════════════════════ */
.main #emptyQ.empty,
.main .empty{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:42px 24px !important;
  text-align:center !important;
  color:var(--text-4) !important;
  font-size:15px !important;
  margin:0 !important;
  box-shadow:none !important;
}
.main .empty .big{
  font-size:38px !important;
  margin-bottom:14px !important;
  opacity:.25 !important;
  filter:none !important;
  line-height:1 !important;
}
.main .empty p{
  margin:0 !important;
  color:var(--text-3) !important;
  font-size:15px !important;
  font-family:var(--font) !important;
  line-height:1.6 !important;
  font-weight:400 !important;
}
.main .empty strong,
.main .empty a{
  color:var(--orange) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  cursor:pointer !important;
}

/* ════════════════════════════════════════════════════════════
   POLÍTICA DE DATOS PERSONALES
   En PANTALLA: se inyecta un .pol-card con el look del mockup
   En PDF: la .legal-datos original se imprime intacta (compacta)
   ════════════════════════════════════════════════════════════ */

/* Ocultar .legal-datos en pantalla (su HTML compacto sigue ahí para el PDF) */
.main table.legal-datos{display:none !important;}

/* Card .pol-card inyectada por el JS bootstrap */
.main .pol-card{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  margin:14px 0 !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
.main .pol-card .card-hd{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 18px !important;
  border-bottom:1px solid var(--border) !important;
  background:#fafbfc !important;
}
.main .pol-card .card-stripe{
  width:4px !important;
  height:20px !important;
  background:var(--orange) !important;
  border-radius:2px !important;
  flex-shrink:0 !important;
}
.main .pol-card .card-title{
  font-size:12px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  font-family:var(--font) !important;
}
/* Cuerpo .pol (igual al mockup) */
.main .pol-card .pol{
  padding:16px 18px !important;
  font-size:13px !important;
  color:var(--text-2) !important;
  line-height:1.75 !important;
  font-family:var(--font) !important;
}
.main .pol-card .pol p{
  margin:0 0 14px !important;
  font-size:13px !important;
  color:var(--text-2) !important;
  line-height:1.75 !important;
}
.main .pol-card .pol b,
.main .pol-card .pol strong{
  color:var(--text-1) !important;
  font-weight:700 !important;
}
.main .pol-card .pol-sec{
  margin-bottom:14px !important;
}
.main .pol-card .pol-ttl{
  font-size:11px !important;
  font-weight:800 !important;
  color:var(--orange) !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  margin-bottom:6px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-family:var(--font) !important;
}
.main .pol-card .pol-ttl::before{
  content:'' !important;
  display:block !important;
  width:3px !important;
  height:12px !important;
  background:var(--orange) !important;
  border-radius:2px !important;
  flex-shrink:0 !important;
}
.main .pol-card .pol-tbl{
  width:100% !important;
  border-collapse:collapse !important;
  margin-top:8px !important;
}
.main .pol-card .pol-tbl td{
  padding:8px 12px !important;
  border:1px solid var(--border) !important;
  font-size:12px !important;
  color:var(--text-2) !important;
  background:#ffffff !important;
}
.main .pol-card .pol-tbl td:first-child{
  color:var(--text-4) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  font-size:10px !important;
  letter-spacing:.6px !important;
  font-family:var(--mono) !important;
  width:130px !important;
  background:#fafbfc !important;
}
.main .pol-card .pol-warn{
  background:var(--red-bg) !important;
  border:1px solid var(--red-bd) !important;
  border-radius:8px !important;
  padding:11px 14px !important;
  margin-top:14px !important;
  font-size:12px !important;
  color:var(--red) !important;
}


/* ════════════════════════════════════════════════════════════
   RETEFUENTE — ahora FUERA del cuadro de totales (look mockup)
   ════════════════════════════════════════════════════════════ */
.main .ret-toggle-wrap{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 4px !important;
  margin:0 !important;
  font-family:var(--font) !important;
}
.main .ret-toggle-wrap .ret-toggle{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin:0 !important;
  font-size:12.5px !important;
  cursor:pointer !important;
  line-height:1.5 !important;
}
.main .ret-toggle-wrap input[type="checkbox"]{
  margin:0 !important;
  width:15px !important;
  height:15px !important;
  flex-shrink:0 !important;
  accent-color:var(--orange) !important;
  cursor:pointer !important;
}
.main .ret-toggle-wrap .ret-toggle > span{
  flex:1 !important;
  color:var(--text-2) !important;
}
.main .ret-toggle-wrap .ret-toggle > span > strong{
  color:var(--text-1) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.main .ret-toggle-wrap .ret-help{
  color:var(--text-3) !important;
  font-size:12px !important;
  font-family:var(--mono) !important;
  font-weight:400 !important;
}
.main .ret-toggle-wrap .ret-warn{
  background:var(--yellow-bg) !important;
  border:1px solid var(--yellow-bd) !important;
  border-radius:6px !important;
  color:var(--yellow) !important;
  padding:7px 11px !important;
  font-size:11.5px !important;
  margin-left:auto !important;
  font-weight:600 !important;
}


/* ════════════════════════════════════════════════════════════
   PANEL CATÁLOGO (#p_catalogo) — look mockup
   ════════════════════════════════════════════════════════════ */
.main #p_catalogo,
.main #p_clihist{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
.main #p_catalogo.active,
.main #p_clihist.active{display:block !important;}

.main #p_catalogo > .sbox,
.main #p_clihist > .sbox{
  padding:14px 18px 6px !important;
  margin:0 !important;
  border-bottom:1px solid var(--border) !important;
  background:#fafbfc !important;
  position:relative !important;
}
.main #p_catalogo > .sbox::before,
.main #p_clihist > .sbox::before{
  content:'';
  display:block;
  width:4px;
  height:20px;
  background:var(--orange);
  border-radius:2px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.main #p_catalogo .sbox input,
.main #p_clihist .sbox input{
  width:100% !important;
  padding:9px 12px 9px 36px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  color:var(--text-1) !important;
  background:#ffffff !important;
  outline:none !important;
}
.main #p_catalogo .sbox input:focus,
.main #p_clihist .sbox input:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px rgba(232,98,10,.10) !important;
}
.main #p_catalogo .sbox .ico,
.main #p_clihist .sbox .ico{
  left:14px !important;
  color:var(--text-4) !important;
  font-size:14px !important;
}

/* Filtros (chips) */
.main #p_catalogo .filters,
.main #p_clihist .filters{
  padding:8px 18px 10px !important;
  margin:0 !important;
  display:flex !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  border-bottom:1px solid var(--border) !important;
  background:#fafbfc !important;
}
.main #p_catalogo .fbtn,
.main #p_clihist .fbtn{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  color:var(--text-3) !important;
  border-radius:999px !important;
  padding:5px 13px !important;
  font-family:var(--font) !important;
  font-weight:500 !important;
  font-size:11.5px !important;
  cursor:pointer !important;
  transition:all .13s !important;
}
.main #p_catalogo .fbtn:hover,
.main #p_clihist .fbtn:hover{
  border-color:#cbd5e1 !important;
  color:var(--text-1) !important;
}
.main #p_catalogo .fbtn.active,
.main #p_clihist .fbtn.active{
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:white !important;
}

/* Contador */
.main #p_catalogo .cnt,
.main #p_clihist .cnt{
  padding:8px 18px !important;
  margin:0 !important;
  font-size:11px !important;
  color:var(--text-4) !important;
  font-family:var(--mono) !important;
  letter-spacing:.3px !important;
}

/* Grid de productos */
.main #p_catalogo .pgrid,
.main #p_clihist .pgrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap:12px !important;
  padding:8px 18px 18px !important;
  margin:0 !important;
}

/* Product card .pc */
.main #p_catalogo .pc,
.main #p_clihist .pc{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:12px 14px !important;
  position:relative !important;
  cursor:pointer !important;
  transition:all .15s !important;
  box-shadow:none !important;
}
.main #p_catalogo .pc:hover,
.main #p_clihist .pc:hover{
  border-color:var(--orange) !important;
  box-shadow:0 4px 16px rgba(232,98,10,.10) !important;
  transform:translateY(-1px) !important;
}
.main #p_catalogo .pc .ci,
.main #p_clihist .pc .ci{
  background:#f4f5f7 !important;
  color:var(--text-3) !important;
  border-radius:8px !important;
}
.main #p_catalogo .pc .ref,
.main #p_clihist .pc .ref{
  color:var(--navy) !important;
  font-weight:800 !important;
  font-family:var(--mono) !important;
  font-size:11.5px !important;
  letter-spacing:0 !important;
}
.main #p_catalogo .pc .desc,
.main #p_clihist .pc .desc{
  color:var(--text-3) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}
.main #p_catalogo .pc .price,
.main #p_clihist .pc .price{
  color:var(--orange) !important;
  font-weight:800 !important;
  font-size:15px !important;
  font-family:var(--font) !important;
  letter-spacing:-.3px !important;
}
.main #p_catalogo .pc .cost,
.main #p_clihist .pc .cost{
  color:var(--text-4) !important;
  font-size:10.5px !important;
}
.main #p_catalogo .pc .meta,
.main #p_clihist .pc .meta{
  color:var(--text-4) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  margin-top:4px !important;
  line-height:1.5 !important;
}
.main #p_catalogo .pc .abtn,
.main #p_clihist .pc .abtn{
  background:var(--orange) !important;
  color:white !important;
  width:26px !important;
  height:26px !important;
  border-radius:50% !important;
  border:none !important;
  font-size:15px !important;
  font-weight:700 !important;
  box-shadow:0 2px 8px rgba(232,98,10,.30) !important;
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all .13s !important;
}
.main #p_catalogo .pc .abtn:hover,
.main #p_clihist .pc .abtn:hover{
  transform:scale(1.1) !important;
  background:#c2510a !important;
}

/* Botón "Cargar más" */
.main #p_catalogo .mbtn,
.main #p_clihist .mbtn{
  background:var(--orange) !important;
  color:white !important;
  border:1.5px solid var(--orange) !important;
  border-radius:8px !important;
  padding:10px 28px !important;
  font-family:var(--font) !important;
  font-weight:700 !important;
  font-size:13px !important;
  cursor:pointer !important;
  margin:8px auto 18px !important;
  display:block !important;
  box-shadow:0 2px 8px rgba(232,98,10,.20) !important;
  transition:all .13s !important;
}
.main #p_catalogo .mbtn:hover,
.main #p_clihist .mbtn:hover{
  background:#c2510a !important;
  border-color:#c2510a !important;
  box-shadow:0 4px 12px rgba(232,98,10,.30) !important;
}



/* ════════════════════════════════════════════════════════════
   CARDS DEL CATÁLOGO — replicar pcard del mockup (compactas)
   Aplica .pc (HTML real) con los estilos del .pcard del mockup
   ════════════════════════════════════════════════════════════ */

/* Grid: 5 columnas en pantalla amplia, ajuste responsive */
.main #p_catalogo .pgrid,
.main #p_clihist .pgrid{
  grid-template-columns:repeat(auto-fill, minmax(195px, 1fr)) !important;
  gap:12px !important;
  padding:14px 18px 18px !important;
}

/* Card compacta del mockup */
.main #p_catalogo .pc,
.main #p_clihist .pc{
  padding:13px !important;
  min-height:0 !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  background:#ffffff !important;
  position:relative !important;
  cursor:pointer !important;
  transition:all .15s !important;
  box-shadow:none !important;
  display:block !important;
}
.main #p_catalogo .pc:hover,
.main #p_clihist .pc:hover{
  border-color:var(--orange) !important;
  box-shadow:0 4px 16px rgba(232,98,10,.10) !important;
  transform:translateY(-1px) !important;
}

/* Icono CENTRADO ARRIBA (no float-left) */
.main #p_catalogo .pc .ci,
.main #p_clihist .pc .ci{
  float:none !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border-radius:0 !important;
  display:block !important;
  font-size:22px !important;
  color:inherit !important;
  margin:0 0 6px 0 !important;
  padding:0 !important;
  line-height:1 !important;
}

/* Referencia: 11px mono navy bold */
.main #p_catalogo .pc .ref,
.main #p_clihist .pc .ref{
  font-size:11px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  font-family:var(--mono) !important;
  letter-spacing:0 !important;
  margin:0 0 2px 0 !important;
  display:block !important;
  text-align:left !important;
}

/* Descripción: 11px gris pequeño */
.main #p_catalogo .pc .desc,
.main #p_clihist .pc .desc{
  font-size:11px !important;
  color:var(--text-3) !important;
  line-height:1.4 !important;
  margin:0 0 8px 0 !important;
  font-weight:400 !important;
  display:block !important;
  min-height:30px !important;
}

/* Caja amarilla histórica — COMPACTA en una línea, tipo "Último: $X · ↓ Y%" */
.main #p_catalogo .pc > div[style*="#fff3e0"],
.main #p_clihist .pc > div[style*="#fff3e0"]{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1.5 !important;
  color:var(--text-4) !important;
  display:block !important;
}
.main #p_catalogo .pc > div[style*="#fff3e0"] > div,
.main #p_clihist .pc > div[style*="#fff3e0"] > div{
  display:inline !important;
  justify-content:flex-start !important;
  padding:0 !important;
  margin:0 !important;
  font-size:10px !important;
}
.main #p_catalogo .pc > div[style*="#fff3e0"] > div + div::before,
.main #p_clihist .pc > div[style*="#fff3e0"] > div + div::before{
  content:" · ";
  color:var(--text-4);
}
.main #p_catalogo .pc > div[style*="#fff3e0"] span,
.main #p_clihist .pc > div[style*="#fff3e0"] span{
  color:var(--text-4) !important;
  font-size:10px !important;
  display:inline !important;
  font-weight:400 !important;
}
.main #p_catalogo .pc > div[style*="#fff3e0"] strong,
.main #p_clihist .pc > div[style*="#fff3e0"] strong{
  color:var(--text-3) !important;
  font-weight:700 !important;
  font-family:var(--font) !important;
  font-size:10px !important;
  display:inline !important;
}

/* Precio actual */
.main #p_catalogo .pc .price,
.main #p_clihist .pc .price{
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--orange) !important;
  letter-spacing:-.3px !important;
  margin:6px 0 0 0 !important;
  display:block !important;
}

/* Costo · Margen */
.main #p_catalogo .pc .cost,
.main #p_clihist .pc .cost{
  color:var(--text-4) !important;
  font-size:10px !important;
  font-weight:400 !important;
  margin:2px 0 0 0 !important;
  display:block !important;
}

/* Tallas — pequeñas píldoras grises */
.main #p_catalogo .pc span[style*="#f5f7fa"],
.main #p_clihist .pc span[style*="#f5f7fa"]{
  background:#f1f5f9 !important;
  border:none !important;
  color:var(--text-3) !important;
  font-family:var(--mono) !important;
  font-size:9px !important;
  font-weight:600 !important;
  padding:1px 5px !important;
  border-radius:4px !important;
  margin:2px 3px 0 0 !important;
  display:inline-block !important;
}

/* Stock badges (verde/amarillo/rojo) */
.main #p_catalogo .pc span[style*="#e8f5e9"],
.main #p_clihist .pc span[style*="#e8f5e9"]{
  background:var(--green-bg) !important;
  color:var(--green) !important;
  border:1px solid var(--green-bd) !important;
  font-size:10px !important;
  font-weight:700 !important;
  padding:2px 7px !important;
  border-radius:5px !important;
  margin-top:5px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}
.main #p_catalogo .pc span[style*="#fff3e0"]:not(div),
.main #p_clihist .pc span[style*="#fff3e0"]:not(div){
  background:var(--yellow-bg) !important;
  color:var(--yellow) !important;
  border:1px solid var(--yellow-bd) !important;
  font-size:10px !important;
  font-weight:700 !important;
  padding:2px 7px !important;
  border-radius:5px !important;
  margin-top:5px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}
.main #p_catalogo .pc span[style*="#ffebee"],
.main #p_clihist .pc span[style*="#ffebee"]{
  background:var(--red-bg) !important;
  color:var(--red) !important;
  border:1px solid var(--red-bd) !important;
  font-size:10px !important;
  font-weight:700 !important;
  padding:2px 7px !important;
  border-radius:5px !important;
  margin-top:5px !important;
  display:inline-flex !important;
  align-items:center !important;
}

/* Botón + naranja compacto */
.main #p_catalogo .pc .abtn,
.main #p_clihist .pc .abtn{
  width:26px !important;
  height:26px !important;
  font-size:15px !important;
  right:9px !important;
  bottom:9px !important;
  box-shadow:0 2px 8px rgba(232,98,10,.30) !important;
}


/* ════════════════════════════════════════════════════════════
   MEJORAS FUNCIONALES — etiqueta último cliente + dropdown tallas
   Inyectado por cotizador-shell.js sobre las cards .pc
   ════════════════════════════════════════════════════════════ */

/* Etiqueta azul "CLIENTE: NOMBRE" debajo de la meta info */
.main .pc .pc-last-client{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  border-radius:5px !important;
  padding:3px 7px !important;
  margin:4px 0 6px 0 !important;
  font-size:9.5px !important;
  line-height:1.3 !important;
  font-family:var(--font) !important;
}
.main .pc .pc-last-client .lbl{
  color:#1e40af !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  font-family:var(--mono) !important;
  font-size:9.5px !important;
  flex-shrink:0 !important;
}
.main .pc .pc-last-client .val{
  color:#0d1530 !important;
  font-weight:700 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  flex:1 !important;
  min-width:0 !important;
  font-size:9.5px !important;
}

/* Dropdown de tallas + píldora con cantidad */
.main .pc .pc-talla-wrap{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  margin-top:6px !important;
  margin-bottom:4px !important;
  padding-right:34px !important;
}
.main .pc .pc-talla-sel{
  flex:1 !important;
  padding:5px 8px !important;
  border:1.5px solid var(--border) !important;
  border-radius:6px !important;
  font-family:var(--mono) !important;
  font-size:10px !important;
  font-weight:600 !important;
  color:var(--navy) !important;
  background:white !important;
  outline:none !important;
  cursor:pointer !important;
  min-width:0 !important;
  height:auto !important;
  line-height:normal !important;
}
.main .pc .pc-talla-sel:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 2px rgba(232,98,10,.10) !important;
}
.main .pc .pc-talla-cnt{
  background:#fff7e6 !important;
  color:#92400e !important;
  border:1px solid #fde68a !important;
  font-family:var(--mono) !important;
  font-size:11px !important;
  font-weight:700 !important;
  padding:4px 9px !important;
  border-radius:6px !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
  min-width:38px !important;
  text-align:center !important;
}


/* ════════════════════════════════════════════════════════════
   PANEL HISTORIAL (#p_historial) — look mockup
   ════════════════════════════════════════════════════════════ */
.main #p_historial{
  background:transparent !important;
  border:none !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* Header — "Cotizaciones guardadas en Supabase" + recargar */
.main #p_historial > div:first-child{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:14px 18px !important;
  margin:0 0 12px 0 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  box-shadow:var(--shadow) !important;
  position:relative !important;
}
.main #p_historial > div:first-child::before{
  content:'';
  display:block;
  width:4px;
  height:24px;
  background:var(--orange);
  border-radius:2px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.main #p_historial > div:first-child > div:first-child > div:first-child{
  font-size:10px !important;
  font-weight:700 !important;
  color:var(--text-4) !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  margin-bottom:3px !important;
  font-family:var(--mono) !important;
}
.main #p_historial #hist_resumen{
  font-size:14px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
}
.main #p_historial > div:first-child button{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border:1.5px solid var(--blue-bd) !important;
  border-radius:7px !important;
  padding:7px 14px !important;
  font-weight:600 !important;
  font-size:11.5px !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  transition:all .13s !important;
}
.main #p_historial > div:first-child button:hover{
  background:#dbeafe !important;
}

/* Caja de búsqueda + filtros */
.main #p_historial > div:nth-child(2){
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:12px 16px !important;
  margin:0 0 12px 0 !important;
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  box-shadow:var(--shadow) !important;
}
.main #p_historial #hist_search{
  flex:1 !important;
  min-width:200px !important;
  padding:9px 12px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  color:var(--text-1) !important;
  background:#f9fafb !important;
  outline:none !important;
  transition:all .13s !important;
}
.main #p_historial #hist_search:focus{
  border-color:var(--orange) !important;
  background:#fff8f5 !important;
  box-shadow:0 0 0 3px rgba(232,98,10,.10) !important;
}
.main #p_historial #hist_filter_estado{
  padding:9px 12px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  color:var(--text-1) !important;
  background:#ffffff !important;
  cursor:pointer !important;
  outline:none !important;
  min-width:160px !important;
}

/* Wrap de la tabla */
.main #p_historial #hist_table_wrap{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  overflow:auto !important;
  max-height:65vh !important;
  box-shadow:var(--shadow) !important;
}

/* Tabla */
.main #p_historial #hist_table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:12.5px !important;
  font-family:var(--font) !important;
}

/* Encabezado tabla — navy con mono */
.main #p_historial #hist_table thead tr{
  background:var(--navy) !important;
}
.main #p_historial #hist_table thead th{
  padding:12px 14px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.85) !important;
  letter-spacing:.7px !important;
  text-transform:uppercase !important;
  font-family:var(--mono) !important;
  background:var(--navy) !important;
  border:none !important;
}

/* Filas */
.main #p_historial #hist_table tbody tr{
  border-bottom:1px solid var(--border) !important;
  transition:background .1s ease !important;
}
.main #p_historial #hist_table tbody tr:hover{
  background:#f8f9fc !important;
}
.main #p_historial #hist_table tbody td{
  padding:11px 14px !important;
  color:var(--text-2) !important;
  vertical-align:middle !important;
  border:none !important;
}

/* Fila de mes (separador) — preservar el flex inline del JS */
.main #p_historial #hist_table tbody tr.hist-mes-header td,
.main #p_historial #hist_table tbody tr.hist-mes-header td[colspan]{
  font-size:18px !important;
  color:var(--navy) !important;
  padding-top:10px !important;
  padding-right:14px !important;
  padding-bottom:10px !important;
  padding-left:14px !important;
  background:#f1f5f9 !important;
  border:none !important;
  line-height:1.2 !important;
  vertical-align:middle !important;
}
/* Wrapper interno: sin altura extra */
.main #p_historial #hist_table tbody tr.hist-mes-header td > div{
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
/* Wrapper interno: ahora el td se divide en 2 (colspan 4 + 3) por el JS bootstrap */
.main #p_historial #hist_table tbody tr.hist-mes-header td > div{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}
/* Celda derecha: total alineado al inicio de la columna TOTAL (5ª columna) */
.main #p_historial #hist_table tbody tr.hist-mes-header td[colspan="3"]{
  text-align:right !important;
}
.main #p_historial #hist_table tbody tr.hist-mes-header td[colspan="3"] > div{
  justify-content:flex-start !important;
}
/* Label "📅 Mayo 2026" — naranja navy bold sin uppercase */
.main #p_historial #hist_table tbody tr.hist-mes-header td > div > div > span{
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  letter-spacing:0 !important;
  font-family:var(--font) !important;
  white-space:nowrap !important;
}
/* Botón toggle del mes */
.main #p_historial #hist_table tbody tr.hist-mes-header td button{
  background:transparent !important;
  border:1px solid var(--border) !important;
  color:var(--text-3) !important;
  border-radius:50% !important;
  width:15px !important;
  height:15px !important;
  min-height:15px !important;
  font-size:9px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  margin:0 !important;
  font-family:var(--font) !important;
  flex-shrink:0 !important;
  line-height:1 !important;
}
.main #p_historial #hist_table tbody tr.hist-mes-header td button:hover{
  border-color:var(--orange) !important;
  color:var(--orange) !important;
}
/* Total a la derecha: "8 cotización(es) · Total $X" */
.main #p_historial #hist_table tbody tr.hist-mes-header td > div > div:last-child{
  font-size:22px !important;
  color:var(--text-2) !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  text-align:right !important;
  flex-shrink:0 !important;
  font-family:var(--font) !important;
  line-height:1.2 !important;
}
.main #p_historial #hist_table tbody tr.hist-mes-header td > div > div:last-child strong{
  color:var(--navy) !important;
  font-weight:800 !important;
  font-family:var(--mono) !important;
  font-size:24px !important;
  letter-spacing:-.4px !important;
}

/* Números de cotización en mono */
.main #p_historial #hist_table tbody td:first-child{
  font-family:var(--mono) !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  font-size:12px !important;
}

/* NIT en mono gris */
.main #p_historial #hist_table tbody td:nth-child(3){
  font-family:var(--mono) !important;
  color:var(--text-4) !important;
  font-size:11.5px !important;
}

/* Fecha en gris */
.main #p_historial #hist_table tbody td:nth-child(4){
  color:var(--text-3) !important;
  font-size:12px !important;
}

/* Total en mono navy bold, derecha */
.main #p_historial #hist_table tbody td:nth-child(5){
  font-family:var(--mono) !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  text-align:right !important;
  font-size:12.5px !important;
}

/* Badges de estado dentro de la tabla */
.main #p_historial #hist_table tbody .estado-badge{
  font-family:var(--mono) !important;
  font-weight:700 !important;
  font-size:9.5px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  padding:3px 9px !important;
  border-radius:5px !important;
  border:1px solid transparent !important;
  display:inline-block !important;
}

/* Botones de acciones dentro de filas (Abrir, Duplicar, etc.) */
.main #p_historial #hist_table tbody td:last-child button{
  padding:5px 10px !important;
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:600 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  margin:0 2px !important;
  border:1.5px solid transparent !important;
  transition:all .13s !important;
}

/* Estado vacío / cargando dentro de la tabla */
.main #p_historial #hist_table tbody tr td[colspan]{
  text-align:center !important;
  color:var(--text-4) !important;
  padding:36px 20px !important;
  font-size:13px !important;
}


/* ════════════════════════════════════════════════════════════
   PANEL SEGUIMIENTO (#p_seguimiento) — look mockup
   ════════════════════════════════════════════════════════════ */
.main #p_seguimiento{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

/* Toggle de vista pendientes */
.main #p_seguimiento .seg-vista-toggle{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:12px 16px !important;
  margin-bottom:12px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  box-shadow:var(--shadow) !important;
}
.main #p_seguimiento #seg_btn_pendientes{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border:1.5px solid var(--blue-bd) !important;
  border-radius:7px !important;
  padding:8px 14px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  transition:all .13s !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.main #p_seguimiento #seg_btn_pendientes:hover{
  background:#dbeafe !important;
}
.main #p_seguimiento .seg-vista-help{
  font-size:11.5px !important;
  color:var(--text-4) !important;
  flex:1 !important;
}
.main #p_seguimiento .seg-pend-bdg{
  background:var(--orange) !important;
  color:white !important;
  font-family:var(--mono) !important;
  font-size:10px !important;
  font-weight:800 !important;
  padding:2px 7px !important;
  border-radius:10px !important;
  margin-left:6px !important;
}

/* Header de seguimiento (info de cotización) */
.main #p_seguimiento .seg-header{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:14px 18px !important;
  margin-bottom:12px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  box-shadow:var(--shadow) !important;
  position:relative !important;
}
.main #p_seguimiento .seg-header::before{
  content:'';
  display:block;
  width:4px;
  height:32px;
  background:var(--orange);
  border-radius:2px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.main #p_seguimiento .seg-header > div:first-child > div:first-child{
  font-size:10px !important;
  font-weight:700 !important;
  color:var(--text-4) !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  margin-bottom:3px !important;
  font-family:var(--mono) !important;
}
.main #p_seguimiento .seg-cot-num{
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  font-family:var(--mono) !important;
  letter-spacing:-.2px !important;
}
.main #p_seguimiento .seg-cot-cliente{
  font-size:12px !important;
  color:var(--text-3) !important;
  margin-top:2px !important;
}
.main #p_seguimiento .seg-header button{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border:1.5px solid var(--blue-bd) !important;
  border-radius:7px !important;
  padding:7px 13px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
}
.main #p_seguimiento .seg-header button:hover{
  background:#dbeafe !important;
}

/* Estado vacío */
.main #p_seguimiento #seg_empty{
  background:#ffffff !important;
  border:1.5px dashed var(--border) !important;
  border-radius:var(--r) !important;
  padding:48px 24px !important;
  text-align:center !important;
  margin:0 !important;
  box-shadow:none !important;
}
.main #p_seguimiento #seg_empty .big{
  font-size:42px !important;
  margin-bottom:14px !important;
  opacity:.25 !important;
  line-height:1 !important;
}
.main #p_seguimiento #seg_empty p{
  margin:0 0 4px 0 !important;
  color:var(--text-3) !important;
  font-size:13.5px !important;
  font-family:var(--font) !important;
  line-height:1.5 !important;
}
.main #p_seguimiento #seg_empty p:first-of-type{
  color:var(--text-1) !important;
  font-size:16px !important;
  font-weight:700 !important;
  margin-bottom:8px !important;
}
.main #p_seguimiento #seg_empty strong{
  color:var(--orange) !important;
  font-weight:700 !important;
}

/* Banners de feedback / frío */
.main #p_seguimiento .seg-banner-feedback,
.main #p_seguimiento .seg-banner-frio{
  background:var(--yellow-bg) !important;
  border:1.5px solid var(--yellow-bd) !important;
  border-radius:9px !important;
  padding:12px 16px !important;
  margin-bottom:12px !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  color:#92400e !important;
  font-size:12.5px !important;
}
.main #p_seguimiento .seg-banner-frio{
  background:var(--blue-bg) !important;
  border-color:var(--blue-bd) !important;
  color:#1e40af !important;
}

/* Caja de plantillas IA */
.main #p_seguimiento .seg-plantillas-grid{
  display:flex !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  padding:0 !important;
  margin:8px 0 12px 0 !important;
}
.main #p_seguimiento .seg-plantilla-chip{
  background:rgba(232,98,10,.10) !important;
  color:#c2510a !important;
  border:1px solid rgba(232,98,10,.25) !important;
  border-radius:6px !important;
  padding:5px 11px !important;
  font-size:11px !important;
  font-weight:600 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  transition:all .13s !important;
}
.main #p_seguimiento .seg-plantilla-chip:hover{
  background:rgba(232,98,10,.20) !important;
  color:white !important;
  border-color:var(--orange) !important;
}

/* Botones de tipo de gestión */
.main #p_seguimiento .seg-tipo-btn{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  color:var(--text-3) !important;
  border-radius:7px !important;
  padding:7px 14px !important;
  font-weight:600 !important;
  font-size:12px !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  transition:all .13s !important;
}
.main #p_seguimiento .seg-tipo-btn:hover{
  border-color:var(--orange) !important;
  color:var(--orange) !important;
}
.main #p_seguimiento .seg-tipo-btn.active{
  background:var(--orange) !important;
  color:white !important;
  border-color:var(--orange) !important;
}

/* Field labels y inputs en seguimiento */
.main #p_seguimiento .seg-field{
  margin-bottom:10px !important;
}
.main #p_seguimiento .seg-field label,
.main #p_seguimiento label.fl{
  font-size:11px !important;
  font-weight:600 !important;
  color:var(--text-3) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  margin-bottom:5px !important;
  display:block !important;
}
.main #p_seguimiento #seg_input_nota,
.main #p_seguimiento #seg_input_prox,
.main #p_seguimiento #seg_input_prox_fecha,
.main #p_seguimiento #seg_ia_q{
  width:100% !important;
  padding:9px 12px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  color:var(--text-1) !important;
  background:#f9fafb !important;
  outline:none !important;
}
.main #p_seguimiento #seg_input_nota:focus,
.main #p_seguimiento #seg_input_prox:focus,
.main #p_seguimiento #seg_input_prox_fecha:focus,
.main #p_seguimiento #seg_ia_q:focus{
  border-color:var(--orange) !important;
  background:#fff8f5 !important;
  box-shadow:0 0 0 3px rgba(232,98,10,.10) !important;
}

/* Botón guardar */
.main #p_seguimiento #seg_btn_guardar{
  background:var(--orange) !important;
  color:white !important;
  border:1.5px solid var(--orange) !important;
  border-radius:8px !important;
  padding:10px 22px !important;
  font-weight:700 !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  box-shadow:0 2px 8px rgba(232,98,10,.20) !important;
}
.main #p_seguimiento #seg_btn_guardar:hover{
  background:#c2510a !important;
  border-color:#c2510a !important;
}

/* Wrap de IA */
.main #p_seguimiento .seg-ia-wrap,
.main #p_seguimiento #seg_ia_btn{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border:1.5px solid var(--blue-bd) !important;
  border-radius:7px !important;
  padding:8px 14px !important;
  font-weight:700 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
}

/* Timeline */
.main #p_seguimiento .seg-timeline-list{
  margin-top:12px !important;
}
.main #p_seguimiento .seg-timeline-list > div{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:11px 14px !important;
  margin-bottom:8px !important;
  box-shadow:var(--shadow) !important;
  font-size:12.5px !important;
}

/* FAB de Seguimiento (móvil) */
.main #segFAB{
  background:var(--orange) !important;
  color:white !important;
  border-radius:28px !important;
  box-shadow:0 4px 20px rgba(232,98,10,.40) !important;
  font-weight:700 !important;
}

/* Drawer */
.main #segDrawer{
  background:#ffffff !important;
  box-shadow:-4px 0 24px rgba(0,0,0,.15) !important;
}


/* ════════════════════════════════════════════════════════════
   PANEL REVISIÓN SEMANAL (#p_revision) — look mockup
   ════════════════════════════════════════════════════════════ */
.main #p_revision{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

/* Header de revisión */
.main #p_revision .rev-header{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:14px 18px !important;
  margin-bottom:12px !important;
  box-shadow:var(--shadow) !important;
  position:relative !important;
}
.main #p_revision .rev-header::before{
  content:'';
  display:block;
  width:4px;
  height:42px;
  background:var(--orange);
  border-radius:2px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.main #p_revision .rev-header > div > div:first-child{
  font-size:10px !important;
  font-weight:700 !important;
  color:var(--text-4) !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  font-family:var(--mono) !important;
  margin-bottom:3px !important;
}
.main #p_revision .rev-titulo{
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  font-family:var(--font) !important;
  letter-spacing:-.2px !important;
}

/* Filtros */
.main #p_revision .rev-filtros{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:14px 18px !important;
  margin-bottom:14px !important;
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  box-shadow:var(--shadow) !important;
}
.main #p_revision .rev-filtros > div{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  min-width:140px !important;
}
.main #p_revision .rev-filtros label{
  font-size:10.5px !important;
  font-weight:700 !important;
  color:var(--text-4) !important;
  text-transform:uppercase !important;
  letter-spacing:.6px !important;
  font-family:var(--mono) !important;
}
.main #p_revision .rev-filtros select{
  padding:9px 12px !important;
  border:1.5px solid var(--border) !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-family:var(--font) !important;
  color:var(--text-1) !important;
  background:#ffffff !important;
  outline:none !important;
  cursor:pointer !important;
}
.main #p_revision .rev-filtros select:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px rgba(232,98,10,.10) !important;
}

/* Botones rápidos de la barra de filtros */
.main #p_revision .rev-quick-btn{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  color:var(--text-2) !important;
  border-radius:8px !important;
  padding:9px 14px !important;
  font-size:12px !important;
  font-weight:600 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  transition:all .13s !important;
}
.main #p_revision .rev-quick-btn:hover{
  border-color:var(--orange) !important;
  color:var(--orange) !important;
}
/* Si tiene el style inline azul, sobrescribir con azul ghost */
.main #p_revision .rev-quick-btn[style*="0277bd"]{
  background:var(--blue-bg) !important;
  color:var(--blue) !important;
  border-color:var(--blue-bd) !important;
}
.main #p_revision .rev-quick-btn[style*="0277bd"]:hover{
  background:#dbeafe !important;
}

/* Grid de métricas (4 columnas) */
.main #p_revision .rev-metricas-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:14px !important;
  margin-bottom:14px !important;
}

/* Card de métrica individual */
.main #p_revision .rev-metrica{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
.main #p_revision .rev-metrica-h{
  background:#fafbfc !important;
  border-bottom:1px solid var(--border) !important;
  padding:11px 16px !important;
  font-size:11px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  font-family:var(--font) !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.main #p_revision .rev-metrica-rows{
  padding:0 !important;
}
.main #p_revision .rev-metrica-rows > div{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:9px 16px !important;
  border-bottom:1px solid #f3f4f6 !important;
  font-size:12.5px !important;
}
.main #p_revision .rev-metrica-rows > div:last-child{
  border-bottom:none !important;
}
.main #p_revision .rev-metrica-rows > div > span{
  color:var(--text-3) !important;
  font-weight:500 !important;
}
.main #p_revision .rev-metrica-rows > div > strong{
  color:var(--text-1) !important;
  font-weight:700 !important;
  font-family:var(--mono) !important;
  font-size:13px !important;
  text-align:right !important;
}

/* Bloques inferiores: feedback, historial, IA */
.main #p_revision .rev-feedback,
.main #p_revision .rev-historial,
.main #p_revision .rev-ia-wrap{
  background:#ffffff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
  margin-bottom:14px !important;
}
.main #p_revision .rev-feedback-h,
.main #p_revision .rev-historial-h,
.main #p_revision .rev-ia-h{
  background:#fafbfc !important;
  border-bottom:1px solid var(--border) !important;
  padding:11px 16px !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  font-family:var(--font) !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Wrap específico de IA: tinte azul como en el mockup (.ai-box) */
.main #p_revision .rev-ia-wrap{
  border-color:var(--blue-bd) !important;
}
.main #p_revision .rev-ia-h{
  background:var(--blue-bg) !important;
  border-bottom-color:var(--blue-bd) !important;
  color:var(--blue) !important;
}

/* Resultado IA — preformatted */
.main #p_revision .rev-ia-resultado{
  padding:14px 16px !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--text-2) !important;
  font-family:var(--font) !important;
}

/* Botón IA */
.main #p_revision #rev_btn_ia{
  background:var(--blue) !important;
  color:white !important;
  border:none !important;
  border-radius:7px !important;
  padding:9px 18px !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-family:var(--font) !important;
  cursor:pointer !important;
  margin:8px 16px 14px !important;
  transition:all .13s !important;
  box-shadow:0 2px 8px rgba(37,99,235,.20) !important;
}
.main #p_revision #rev_btn_ia:hover{
  background:#1d4ed8 !important;
}
.main #p_revision .rev-stars{
  display:flex !important;
  gap:5px !important;
  padding:14px 16px !important;
  font-size:24px !important;
  color:#e5e7eb !important;
  cursor:pointer !important;
}
.main #p_revision .rev-stars .on,
.main #p_revision .rev-stars > span.on{
  color:#f59e0b !important;
}
.main #p_revision #rev_nota_feedback{
  width:calc(100% - 32px) !important;
  margin:0 16px 12px !important;
  min-height:80px !important;
  border:1px solid #d1d5db !important;
  border-radius:6px !important;
  padding:10px !important;
  font-size:12.5px !important;
  font-family:var(--font) !important;
  resize:vertical !important;
}
}
/* === FIN @media screen === */