/* ============================================================
   🎨 DISEÑO NUEVO «B» (v282) — menú lateral oscuro, tipografía IBM Plex Sans,
   colores neutros y un solo acento (naranja del logo). Todo va bajo html.tema-b:
   sin esa clase el sistema se ve exactamente como antes (diseño clásico).
   No cambia el HTML de las pantallas: solo su presentación.
   ============================================================ */
html.tema-b {
    --bg-main: #f3f4f6;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-input-soft: #f6f7f9;
    --border-color: #e5e7eb;
    --border-color-strong: #d1d5db;
    --text-main: #111827;
    --text-main-muted: #374151;
    --text-muted: #6b7280;
    --accent-blue: #1f2a44;
    --accent-green: #15803d;
    --accent-amber: #c2410c;
    --accent-purple: #4b5563;
    --accent-red: #b91c1c;
    --tb-accent: #f97316;
    --tb-side: #111827;
    --tb-side-w: 228px;
    --radius-lg: 10px;
    --shadow-card: none;
    --shadow-card-lg: 0 1px 3px rgba(17,24,39,.06);
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
@media screen {
html.tema-b body { padding-left: var(--tb-side-w); font-size: 14px; }

/* ---------- Menú lateral ---------- */
html.tema-b nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--tb-side-w); height: auto; box-sizing: border-box;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px;
    background: var(--tb-side); border: none; padding: 18px 12px 14px; z-index: 900; overflow-y: auto; }
html.tema-b .nav-brand { color: #ffffff; font-size: 17px; letter-spacing: .6px; padding: 0 10px; font-family: var(--font-body); }
html.tema-b .nav-brand span { color: var(--tb-accent); }
html.tema-b .nav-tabs { flex-direction: column; height: auto; gap: 14px; overflow: visible; flex-shrink: 0; }
html.tema-b .nav-sep { display: none; }
html.tema-b .nav-grupo { flex-direction: column; gap: 2px; padding-top: 18px; }
html.tema-b .nav-grupo[data-g="Inicio"] { padding-top: 0; }
html.tema-b .nav-grupo::before { top: 0; left: 10px; right: auto; text-align: left; font-size: 10.5px; letter-spacing: .08em; color: #6b7280; font-weight: 600; }
html.tema-b .nav-grupo[data-g="Inicio"]::before { display: none; }
html.tema-b nav .tab-btn { width: 100%; height: 38px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 10px;
    font-size: 0; color: #cbd5e1; border-radius: 6px; border-bottom: none; background: transparent; }
html.tema-b nav .tab-btn::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
html.tema-b nav .tab-btn .tab-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; }
html.tema-b nav .tab-btn:hover { color: #ffffff; background: rgba(255,255,255,.06); }
html.tema-b nav .tab-btn.active { color: #ffffff; background: #1f2937; box-shadow: inset 3px 0 0 var(--tb-accent); border-bottom: none; }
html.tema-b nav .tab-btn .af-globo { top: 10px; right: 8px; box-shadow: none; }
html.tema-b nav .tab-btn[onclick*="'tab-hoy'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207v9a1%201%200%200%201-1%201h-5v-6H9v6H4a1%201%200%200%201-1-1z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207v9a1%201%200%200%201-1%201h-5v-6H9v6H4a1%201%200%200%201-1-1z%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-estimator'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8.5%207h7M8.5%2011h1M12%2011h1M15%2011h.5M8.5%2015h1M12%2015h1M15%2015h.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8.5%207h7M8.5%2011h1M12%2011h1M15%2011h.5M8.5%2015h1M12%2015h1M15%2015h.5%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-orders'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204h6v3H9z%22/%3E%3Cpath%20d%3D%22M7%205H5v16h14V5h-2%22/%3E%3Cpath%20d%3D%22M8.5%2012h7M8.5%2016h5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204h6v3H9z%22/%3E%3Cpath%20d%3D%22M7%205H5v16h14V5h-2%22/%3E%3Cpath%20d%3D%22M8.5%2012h7M8.5%2016h5%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-clientes'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.5%203.4-5.5%206.5-5.5s5.7%202%206.5%205.5%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.6c1.8.8%203%202.6%203.5%205.4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.5%203.4-5.5%206.5-5.5s5.7%202%206.5%205.5%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.6c1.8.8%203%202.6%203.5%205.4%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-listaprecios'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V4h8l10%2010-8%208z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%228.5%22%20r%3D%221.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V4h8l10%2010-8%208z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%228.5%22%20r%3D%221.5%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-kanban'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2210%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2217%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2213%22%20rx%3D%221%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2210%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2217%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2213%22%20rx%3D%221%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-production'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%206.5a4%204%200%200%200-5%205L4%2017l3%203%205.5-5.5a4%204%200%200%200%205-5l-2.5%202.5-2.5-.5-.5-2.5z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%206.5a4%204%200%200%200-5%205L4%2017l3%203%205.5-5.5a4%204%200%200%200%205-5l-2.5%202.5-2.5-.5-.5-2.5z%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-inventory'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208l9-5%209%205v8l-9%205-9-5z%22/%3E%3Cpath%20d%3D%22M3%208l9%205%209-5M12%2013v8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208l9-5%209%205v8l-9%205-9-5z%22/%3E%3Cpath%20d%3D%22M3%208l9%205%209-5M12%2013v8%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-cajachica'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-conciliacion'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010l9-6%209%206M5%2010v8M10%2010v8M14%2010v8M19%2010v8M3%2021h18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010l9-6%209%206M5%2010v8M10%2010v8M14%2010v8M19%2010v8M3%2021h18%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-proveedores'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%207h11v9H2zM13%2010h4l4%203v3h-8%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2217.5%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217.5%22%20r%3D%221.8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%207h11v9H2zM13%2010h4l4%203v3h-8%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2217.5%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217.5%22%20r%3D%221.8%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-rentabilidad'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[onclick*="'tab-history'"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h10l4%204v12H4z%22/%3E%3Cpath%20d%3D%22M14%204v4h4%22/%3E%3Cpath%20d%3D%22M7.5%2013h6M7.5%2016.5h4%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.2%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M17.5%2016v1.7l1%20.8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h10l4%204v12H4z%22/%3E%3Cpath%20d%3D%22M14%204v4h4%22/%3E%3Cpath%20d%3D%22M7.5%2013h6M7.5%2016.5h4%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.2%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M17.5%2016v1.7l1%20.8%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[data-cv="facturas"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h9l3%203v15l-2-1.2-2%201.2-2-1.2-2%201.2-2-1.2L6%2021z%22/%3E%3Cpath%20d%3D%22M9%209h6M9%2013h6M9%2017h3%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h9l3%203v15l-2-1.2-2%201.2-2-1.2-2%201.2-2-1.2L6%2021z%22/%3E%3Cpath%20d%3D%22M9%209h6M9%2013h6M9%2017h3%22/%3E%3C/svg%3E"); }
html.tema-b nav .tab-btn[data-cv="cierre"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22/%3E%3Cpath%20d%3D%22M9%2017l6-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22/%3E%3Cpath%20d%3D%22M9%2017l6-5%22/%3E%3C/svg%3E"); }
html.tema-b .btn-buscar-nav { order: -1; display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; font-size: 0;
    background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #9ca3af; cursor: pointer; }
html.tema-b .btn-buscar-nav::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M20%2020l-3.5-3.5%22/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M20%2020l-3.5-3.5%22/%3E%3C/svg%3E") no-repeat center / contain; }
html.tema-b .btn-buscar-nav::after { content: 'Buscar…   ⌘K'; font-size: 13px; white-space: pre; font-family: var(--font-body); }
html.tema-b .nav-brand { order: -2; }
html.tema-b .chip-nube { margin-top: auto; justify-content: flex-start; background: transparent; border: none; color: #9ca3af; padding: 6px 10px; font-weight: 500; }
html.tema-b .chip-nube > span:first-child { font-size: 0; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
html.tema-b .chip-nube.amber > span:first-child { background: #f59e0b; }
html.tema-b .chip-nube.red > span:first-child, html.tema-b .chip-nube.err > span:first-child { background: #ef4444; }
html.tema-b .chip-nube .chip-nube-txt { display: inline; }
html.tema-b .btn-refresh { width: 100%; background: transparent; border: 1px solid #374151; color: #e5e7eb; font-weight: 500; font-size: 12.5px; padding: 8px 10px; }
html.tema-b .btn-refresh:hover { background: #1f2937; opacity: 1; }
html.tema-b .tb-tema-link { font-size: 11.5px; color: #6b7280; padding: 0 10px; text-decoration: underline; cursor: pointer; background: none; border: none; text-align: left; font-family: var(--font-body); }
html.tema-b .tb-tema-link:hover { color: #d1d5db; }

/* ---------- Barra inferior: solo lo esencial + «Herramientas» ---------- */
html.tema-b .debug-bar { left: var(--tb-side-w); background: #ffffff; color: #4b5563; border-top: 1px solid var(--border-color); font-size: 12px; padding: 6px 20px; gap: 18px; justify-content: flex-start; align-items: center; }
html.tema-b .debug-bar strong { color: #111827; font-weight: 600; }
html.tema-b .tb-herr { margin-left: auto; position: relative; }
html.tema-b .tb-herr > button { background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 10px; font: inherit; color: #111827; cursor: pointer; }
html.tema-b .tb-herr-menu { display: none; position: absolute; right: 0; bottom: calc(100% + 6px); background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 10px 30px rgba(17,24,39,.15); padding: 6px; min-width: 230px; }
html.tema-b .tb-herr.abierto .tb-herr-menu { display: flex; flex-direction: column; }
html.tema-b .tb-herr-menu span { display: block; }
html.tema-b .tb-herr-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: #111827 !important; text-decoration: none !important; font-size: 13px; }
html.tema-b .tb-herr-menu a:hover { background: #f3f4f6; }

/* ---------- Tipografía y títulos (sin MAYÚSCULAS) ---------- */
html.tema-b .section-title { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text-main); }
html.tema-b .field-group label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #4b5563; }
html.tema-b .sub-block-title { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }
html.tema-b .comp-card-cost h6, html.tema-b .column-header h3 { text-transform: none; letter-spacing: 0; font-size: 13px; }
html.tema-b .scale-table th, html.tema-b .cli-tabla th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: #6b7280; }
html.tema-b th { font-weight: 600; }
html.tema-b .kb-nom { text-transform: none; font-weight: 700; }

/* ---------- Tarjetas, campos y botones ---------- */
html.tema-b .card { box-shadow: none; border-color: var(--border-color); }
html.tema-b input[type="text"], html.tema-b input[type="number"], html.tema-b input[type="date"], html.tema-b input[type="search"], html.tema-b select, html.tema-b textarea { border-radius: 8px; border-color: var(--border-color-strong); font-family: var(--font-body); }
html.tema-b input:focus, html.tema-b select:focus, html.tema-b textarea:focus { outline: none; border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
html.tema-b button { font-family: var(--font-body); }
html.tema-b .field-group input, html.tema-b .field-group select, html.tema-b .field-group textarea { box-sizing: border-box; max-width: 100%; }
html.tema-b .grid-2 > *, html.tema-b .grid-3 > *, html.tema-b .grid-4 > * { min-width: 0; }

/* ---------- Pestañas internas: subrayado en lugar de píldoras ---------- */
html.tema-b .subnav { gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
html.tema-b .subnav-btn { border: none; border-radius: 0; background: transparent; color: #4b5563; font-weight: 500; font-size: 14px; padding: 10px 14px; }
html.tema-b .subnav-btn:hover { color: #111827; }
html.tema-b .subnav-btn.on { background: transparent; color: #111827; font-weight: 600; box-shadow: inset 0 -2px 0 var(--tb-accent); }

/* Cotizador: el panel de escalas/costos no se aplasta con el menú lateral */
html.tema-b #tab-estimator .estimator-layout { grid-template-columns: minmax(0, 1.65fr) minmax(400px, 1fr); }
/* La versión ya se ve en la barra de abajo: la etiqueta flotante sobra */
html.tema-b .tb-version-flotante { display: none; }
/* El aviso de respaldo se centra en el área de trabajo, no sobre el menú */
html.tema-b #barraRespaldo { left: calc(50% + var(--tb-side-w) / 2) !important; }

/* Tabla de Pedidos (v285): encabezados sobrios */
html.tema-b .pd-th { font-size: 12px; font-weight: 600; color: #6b7280; }
.pd-th { padding: 11px 8px; white-space: nowrap; text-align: left; }
#tbodyConsecutivoPedidos tr td { font-weight: 400; }
@media (max-width: 1380px) {   /* pantallas angostas: «Piezas» se oculta para que la tabla de Pedidos quepa sin scroll */
    html.tema-b #tbodyConsecutivoPedidos td:nth-child(6), html.tema-b table:has(#tbodyConsecutivoPedidos) thead th:nth-child(6) { display: none; }
    html.tema-b #tbodyConsecutivoPedidos td:nth-child(3) > div:last-child { max-width: 200px !important; }
}   /* la tabla usa .cost-summary-table, que pone en negritas la última fila (totales) */
.pd-th .pd-ord { font-size: 11px; color: #9ca3af; margin-left: 2px; }

/* v288: botón de la nube nueva (Supabase) */
html.tema-b #sbChip { width: 100%; color: #cbd5e1 !important; border-color: #374151 !important; padding: 7px 10px !important; }
html.tema-b #sbChip:hover { background: #1f2937 !important; }

/* Pantallas angostas: el menú lateral se vuelve una tira de íconos */
@media (max-width: 1100px) {
    html.tema-b { --tb-side-w: 64px; }
    html.tema-b nav .tab-btn .tab-label, html.tema-b .nav-grupo::before, html.tema-b .chip-nube .chip-nube-txt, html.tema-b .btn-buscar-nav::after, html.tema-b .tb-tema-link { display: none; }
    html.tema-b nav { padding: 14px 8px; }
    html.tema-b #sbChip { justify-content: center; } html.tema-b #sbChip > span:last-child { display: none; }
    html.tema-b nav .tab-btn { justify-content: center; padding: 0; }
    html.tema-b .nav-brand { font-size: 0; }
    html.tema-b .nav-brand::after { content: 'AP'; font-size: 15px; }
    html.tema-b .btn-refresh { font-size: 0; height: 32px; }
    html.tema-b .btn-refresh::after { content: '↻'; font-size: 15px; }
    html.tema-b .btn-buscar-nav { justify-content: center; }
}
}
@media print { html.tema-b body { padding-left: 0; } }