:root{
  --bg:#f4f6f9; --panel:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --blue:#2563eb; --green:#16a34a; --orange:#f59e0b; --red:#dc2626; --purple:#9333ea;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1{font-size:20px;margin:0}
h2{font-size:16px;margin:26px 0 8px;border-bottom:2px solid var(--line);padding-bottom:6px}
code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:.92em}
.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none !important}

.topbar{background:linear-gradient(90deg,#1e3a8a,#2563eb);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.subtitle{margin:4px 0 0;font-size:13px;color:#dbeafe}
.btn-ppt{background:#fff;color:#1e3a8a;border:none;border-radius:8px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-ppt:hover{background:#eff6ff}
.btn-ppt:disabled{opacity:.6;cursor:wait}
.ppt-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2000;display:flex;align-items:center;justify-content:center}
.ppt-box{background:#fff;border-radius:14px;padding:26px 34px;text-align:center;font-size:14px;color:#1f2937;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.spinner{width:34px;height:34px;border:4px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;margin:0 auto 14px;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tabs{display:flex;gap:2px;background:#e8edf3;padding:0 16px;flex-wrap:wrap;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.tab-btn{background:transparent;border:none;padding:12px 16px;cursor:pointer;font-size:13px;color:var(--muted);border-bottom:3px solid transparent}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:var(--bg)}

main{max-width:1180px;margin:0 auto;padding:20px 24px 60px}
.tab-panel{display:none;animation:fade .2s}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.card-num{font-size:24px;font-weight:700}
.card-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.card-good{border-color:#bbf7d0;background:#f0fdf4}
.card-warn{border-color:#fde68a;background:#fffbeb}
.card-bad{border-color:#fecaca;background:#fef2f2}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#f8fafc;font-weight:600;font-size:12px;color:#374151;white-space:nowrap}
tbody tr:hover{background:#f9fbff}
tfoot td{background:#f8fafc;font-weight:600}
.row-warn{background:#fffbeb}
.row-bad{background:#fef2f2}
.scroll{max-height:520px;overflow:auto;border-radius:8px}

.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;background:#eef2f7;color:#374151;white-space:nowrap}
.chip-blue{background:#dbeafe;color:#1e40af}
.chip-green{background:#dcfce7;color:#166534}
.chip-orange{background:#fef3c7;color:#92400e}
.chip-red{background:#fee2e2;color:#991b1b}
.chip-dark{background:#374151;color:#fff}

.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.controls label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.controls .chk{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.controls input,.controls select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff}
.controls input[type=number]{width:110px}
button{padding:8px 14px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:13px}
button:hover{background:#f3f4f6}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.btn-primary:hover{background:#1d4ed8}

.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;margin:12px 0}
.chart-box canvas{width:100%;height:300px;display:block}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.chart-grid{grid-template-columns:1fr}}

textarea#datos-json{width:100%;height:540px;font:12px/1.5 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:12px;background:#0f172a;color:#e2e8f0}
.ok-msg{color:var(--green);font-weight:600}
.err-msg{color:var(--red);font-weight:600}

.diagram{background:#0f172a;color:#a7f3d0;padding:16px;border-radius:10px;overflow:auto;font:12px/1.35 ui-monospace,Consolas,monospace}
.formulas td{font-size:13px}
.formulas td:first-child{color:var(--muted);width:42%}

/* ---- editor de configuración ---- */
.mini{padding:3px 9px;font-size:12px}
.cfg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.cfg-fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.cfg-fld > span{min-height:30px}
.cfg-fld input{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.cfg-chk input[type=checkbox]{width:18px;height:18px;align-self:flex-start;padding:0;cursor:pointer}
.etbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.etbl{border:0;border-radius:0}
.etbl th{position:sticky;top:0}
.etbl td{padding:5px 8px}
.etbl input,.etbl select{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff}
.etbl input[type=number]{width:96px}
.etbl input[type=text]{min-width:130px}
.etbl-id{font:600 12px ui-monospace,Consolas,monospace;color:#64748b}
.etbl-del{border:none;background:#fee2e2;color:#b91c1c;border-radius:6px;padding:3px 8px;font-weight:700;cursor:pointer}
.etbl-del:hover{background:#fecaca}
.etbl-add{margin:8px;background:#eff6ff;border:1px dashed #93c5fd;color:#1d4ed8;border-radius:8px;cursor:pointer}
.etbl-add:hover{background:#dbeafe}

/* ---- grilla de productos (small multiples) ---- */
.spark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.spark-card{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:8px 10px}
.spark-card.good{border-left-color:var(--green)}
.spark-card.warn{border-left-color:var(--orange)}
.spark-card.bad{border-left-color:var(--red)}
.spark-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.spark-fill{font-weight:700}
.spark-card.good .spark-fill{color:var(--green)}
.spark-card.warn .spark-fill{color:var(--orange)}
.spark-card.bad .spark-fill{color:var(--red)}
.spark-card canvas{width:100%;height:72px;display:block;margin:4px 0}
.spark-sub{font-size:11px;color:var(--muted)}

/* ---- recuadro explicativo ---- */
.callout{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid var(--blue);border-radius:10px;padding:12px 16px;margin:8px 0;font-size:13px;line-height:1.55}
.callout h4{margin:0 0 6px;font-size:14px;color:#1e3a8a}
.callout p{margin:6px 0}
.callout ul{margin:6px 0;padding-left:20px}
.callout li{margin:3px 0}
.callout .formula{background:#dbeafe;border-radius:6px;padding:2px 6px;font-family:ui-monospace,Consolas,monospace}
.callout.warn{background:#fffbeb;border-color:#fde68a;border-left-color:var(--orange)}
.callout.warn h4{color:#92400e}

/* ---- ayuda / tooltips ---- */
.hint-i{display:inline-block;flex:0 0 auto;box-sizing:border-box;width:15px;height:15px;min-width:15px;max-width:15px;
  min-height:15px;max-height:15px;border-radius:50%;background:#94a3b8;color:#fff;text-align:center;
  font:italic 700 10px/15px Georgia,serif;cursor:help;vertical-align:middle;margin-left:3px;padding:0}
.hint-i:hover{background:#2563eb}
.tip{position:absolute;z-index:1000;max-width:300px;background:#0f172a;color:#e7edf5;padding:9px 11px;border-radius:8px;
  font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}
[data-help]{cursor:help}
.card[data-help]{cursor:help}

/* ---- escenarios ---- */
.esc-list{margin:6px 0 0;padding-left:18px;font-size:13px}
.esc-list li{margin-bottom:4px}
.esc-best{background:#f0fdf4}

/* ---- oferta bomba ---- */
.promo-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0}
.promo-card h3{margin:0 0 8px;font-size:15px}
.promo-card h4{margin:16px 0 6px;font-size:13px;color:var(--muted)}
.promo-rec{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 12px;font-size:13px}

/* ---- flujo / animación ---- */
.row{display:inline-flex;align-items:center;gap:8px}
.flow-stage{background:#f8fafc;border:1px solid var(--line);border-radius:12px;margin:10px 0}
.flow-stage canvas{width:100%;height:480px;display:block}
.fl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#374151;margin:4px 2px}
.fl-leg{display:inline-flex;align-items:center;gap:6px}
.fl-leg i{width:12px;height:12px;border-radius:50%;display:inline-block}
.fl-timeline{align-items:center}
.flow-log{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;max-height:220px;overflow:auto}
.flow-log .fl-day{font-weight:700;margin-bottom:4px;color:#1e3a8a}
.fl-ev{display:inline-block;min-width:78px;font-weight:600;font-size:11px;padding:1px 6px;border-radius:6px;margin-right:6px}
.fl-central{background:#dcfce7;color:#166534}
.fl-directa{background:#fef3c7;color:#92400e}
.fl-transferencia{background:#dbeafe;color:#1e40af}
.fl-arrive{background:#ede9fe;color:#5b21b6}
.fl-line{padding:3px 0;border-top:1px dashed #eef2f7}
.fl-line:first-of-type{border-top:0}
.fl-sub{color:var(--muted);font-size:11px}

/* ---- Lupita "¿por qué?" + panel de explicación de cada decisión ---- */
.fl-why,.exp-toggle{display:inline-block;margin-left:6px}
.fl-why>summary,.exp-toggle>summary{cursor:pointer;list-style:none;display:inline-block;
  font-size:11px;font-weight:600;color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:6px;padding:0 6px;user-select:none}
.fl-why>summary::-webkit-details-marker,.exp-toggle>summary::-webkit-details-marker{display:none}
.fl-why[open]>summary,.exp-toggle[open]>summary{background:#dbeafe}
.exp-body{margin:6px 0 4px;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);
  border-radius:10px;font-size:12.5px;color:#334155;max-width:560px;line-height:1.45}
.exp-title{font-weight:700;color:#0f172a;margin-bottom:2px}
.exp-sum{margin:0 0 6px;color:#475569}
.exp-h{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#64748b;margin:6px 0 2px}
.exp-fac{margin:0;padding-left:18px}
.exp-fac li{margin:2px 0}
.exp-alt{border-collapse:collapse;width:100%;margin:3px 0 2px;font-size:12px}
.exp-alt th,.exp-alt td{border:1px solid #e2e8f0;padding:3px 6px;text-align:left;vertical-align:top}
.exp-alt th{background:#f1f5f9;font-size:11px;color:#475569}
.exp-pick{background:#ecfdf5}
.exp-pick .exp-flag{color:#15803d;font-weight:700;white-space:nowrap}
.exp-skip{color:#64748b}
.exp-skip .exp-flag{color:#94a3b8}
.exp-note{font-size:11px;color:#64748b;margin-top:1px}
.exp-rule{margin:6px 0 0;font-size:11.5px;color:#475569;font-style:italic}

.infl-note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:6px 10px;font-size:12.5px;margin:6px 0}

.footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}