/* ============================================================
   IMG Construmin — Calculadoras técnicas (widgets compartidos)
   Tema claro por defecto; tema oscuro vía html.dark
   ============================================================ */
.imgxcalc{
  --xc-brand:#f97316;--xc-brand-deep:#ea580c;--xc-brand-deeper:#c2410c;
  --xc-brand-soft:#fff7ed;--xc-brand-ring:rgba(249,115,22,.15);
  --xc-card:#ffffff;--xc-line:#e2e8f0;--xc-line-soft:#f1f5f9;
  --xc-ink:#0f172a;--xc-mut:#475569;--xc-dim:#64748b;--xc-faint:#94a3b8;
  --xc-soft:#f8fafc;--xc-hover:#f1f5f9;
  --xc-em-bg:#ecfdf5;--xc-em-tx:#065f46;--xc-em-bd:rgba(5,150,105,.15);--xc-em:#059669;
  --xc-am-bg:#fffbeb;--xc-am-tx:#92400e;--xc-am-bd:rgba(217,119,6,.3);
  --xc-shadow:0 1px 2px rgba(15,23,42,.04);
  color:var(--xc-ink);font-size:14px;line-height:1.45;text-wrap:initial;
}
html.dark .imgxcalc{
  --xc-brand:#fb923c;--xc-brand-deep:#f97316;--xc-brand-deeper:#fdba74;
  --xc-brand-soft:rgba(249,115,22,.14);--xc-brand-ring:rgba(251,146,60,.22);
  --xc-card:#111827;--xc-line:rgba(255,255,255,.1);--xc-line-soft:rgba(255,255,255,.06);
  --xc-ink:#f8fafc;--xc-mut:#cbd5e1;--xc-dim:#94a3b8;--xc-faint:#64748b;
  --xc-soft:rgba(255,255,255,.045);--xc-hover:rgba(255,255,255,.08);
  --xc-em-bg:rgba(16,185,129,.1);--xc-em-tx:#6ee7b7;--xc-em-bd:rgba(16,185,129,.25);--xc-em:#34d399;
  --xc-am-bg:rgba(245,158,11,.12);--xc-am-tx:#fcd34d;--xc-am-bd:rgba(245,158,11,.3);
  --xc-shadow:0 1px 2px rgba(0,0,0,.4);
}
.imgxcalc *{box-sizing:border-box}
.imgxcalc button{font-family:inherit}

/* ---- Layout ---- */
.imgxcalc .xgrid{display:grid;gap:24px;align-items:start}
@media(min-width:1060px){.imgxcalc .xgrid{grid-template-columns:minmax(330px,400px) minmax(0,1fr)}}
.imgxcalc .results{display:grid;gap:22px;min-width:0}
.imgxcalc .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0 0 18px}
.imgxcalc .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.imgxcalc .rowvh{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:12px}
.imgxcalc .two-info{display:grid;gap:16px}
@media(min-width:720px){.imgxcalc .two-info{grid-template-columns:1fr 1fr}}

/* ---- Botones ---- */
.imgxcalc .btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;padding:9px 14px;border-radius:12px;border:1px solid var(--xc-line);background:var(--xc-card);color:var(--xc-mut);cursor:pointer;transition:.15s}
.imgxcalc .btn:hover{border-color:var(--xc-faint);background:var(--xc-soft)}
.imgxcalc .btn-primary{background:var(--xc-brand-deep);border-color:var(--xc-brand-deep);color:#fff}
.imgxcalc .btn-primary:hover{background:#c2410c;border-color:#c2410c;color:#fff}
html.dark .imgxcalc .btn-primary:hover{background:#ea580c;border-color:#ea580c}
.imgxcalc .btn-wa{background:#25d366;border-color:#25d366;color:#fff}
.imgxcalc .btn-wa:hover{background:#1eb457;border-color:#1eb457;color:#fff}

/* ---- Tarjetas ---- */
.imgxcalc .card{background:var(--xc-card);border:1px solid var(--xc-line);border-radius:16px;box-shadow:var(--xc-shadow);min-width:0}
.imgxcalc .card-h{border-bottom:1px solid var(--xc-line-soft);padding:15px 20px}
.imgxcalc .card-h .ct{margin:0;font-size:15px;font-weight:800;color:var(--xc-ink)}
.imgxcalc .card-h p{margin:3px 0 0;font-size:12px;color:var(--xc-dim)}
.imgxcalc .pad{padding:20px;display:grid;gap:16px}

/* ---- Formularios ---- */
.imgxcalc .label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--xc-mut);margin:0 0 6px}
.imgxcalc .input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--xc-line);border-radius:10px;background:var(--xc-card);color:var(--xc-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.imgxcalc .input:focus{border-color:var(--xc-brand);box-shadow:0 0 0 3px var(--xc-brand-ring)}
.imgxcalc .input::placeholder{color:var(--xc-faint)}
.imgxcalc select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}
html.dark .imgxcalc select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
html.dark .imgxcalc select.input option{background:#111827;color:#f8fafc}
.imgxcalc .readout{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--xc-soft)}
.imgxcalc .readout .big{font-size:16px;font-weight:800;color:var(--xc-ink)}
.imgxcalc .readout .sm{font-size:11px;font-weight:700;color:var(--xc-faint)}

/* ---- Segmentos ---- */
.imgxcalc .seg{display:grid;gap:8px}
.imgxcalc .seg.two{grid-template-columns:1fr 1fr}
@media(max-width:420px){.imgxcalc .seg.two{grid-template-columns:1fr}}
.imgxcalc .seg-btn{font:inherit;font-size:13px;font-weight:700;text-align:center;padding:10px;border-radius:12px;border:1px solid var(--xc-line);background:var(--xc-card);color:var(--xc-mut);cursor:pointer;transition:.15s}
.imgxcalc .seg-btn:hover{border-color:var(--xc-faint)}
.imgxcalc .seg-btn.on{border-color:var(--xc-brand);background:var(--xc-brand-soft);color:var(--xc-brand-deeper);box-shadow:0 0 0 1px var(--xc-brand-ring) inset}

/* ---- Opciones ricas (geotanque) ---- */
.imgxcalc .opt{border:1px solid var(--xc-line);border-radius:12px;padding:12px;text-align:left;background:var(--xc-card);cursor:pointer;transition:.15s;display:block;width:100%;font:inherit}
.imgxcalc .opt:hover{border-color:var(--xc-faint)}
.imgxcalc .opt.on{border-color:var(--xc-brand);background:var(--xc-brand-soft);box-shadow:0 0 0 1px var(--xc-brand-ring) inset}
.imgxcalc .opt .ti{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;line-height:1.15;color:var(--xc-mut)}
.imgxcalc .opt.on .ti{color:var(--xc-brand-deeper)}
.imgxcalc .opt .de{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--xc-dim)}

/* ---- Métricas ---- */
.imgxcalc .stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.imgxcalc .stat{border:1px solid var(--xc-line);border-radius:12px;background:var(--xc-card);padding:15px;min-width:0}
.imgxcalc .stat .k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--xc-faint);margin:0}
.imgxcalc .stat .v{margin:6px 0 0;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--xc-ink)}
.imgxcalc .stat .v small{font-size:14px;font-weight:700;color:var(--xc-faint);margin-left:4px}
.imgxcalc .stat .h{margin:4px 0 0;font-size:12px;color:var(--xc-dim)}
.imgxcalc .stat.brand .v{color:var(--xc-brand-deep)}
.imgxcalc .stat.success .v{color:var(--xc-em)}

/* ---- Cajas informativas ---- */
.imgxcalc .info{border-radius:12px;padding:15px 16px;font-size:13px;line-height:1.5;border:1px solid transparent}
.imgxcalc .info .t{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin:0 0 4px}
.imgxcalc .info p{margin:0}
.imgxcalc .info .small{margin-top:8px;font-size:12px;opacity:.8}
.imgxcalc .info .warn{margin-top:6px;font-weight:800}
.imgxcalc .info.slate{background:var(--xc-soft);color:var(--xc-mut);border-color:var(--xc-line)}
.imgxcalc .info.emerald{background:var(--xc-em-bg);color:var(--xc-em-tx);border-color:var(--xc-em-bd)}
.imgxcalc .info.amber{background:var(--xc-am-bg);color:var(--xc-am-tx);border-color:var(--xc-am-bd)}
.imgxcalc .note{font-size:12px;line-height:1.6;color:var(--xc-faint);margin:0}
.imgxcalc .warnbox{border:1px solid var(--xc-am-bd);background:var(--xc-am-bg);border-radius:16px;padding:18px 20px;font-size:14px;font-weight:600;color:var(--xc-am-tx)}

/* ---- Tablas ---- */
.imgxcalc .mtx-wrap{border:1px solid var(--xc-line);border-radius:12px;overflow-x:auto}
.imgxcalc table.mtx{width:100%;border-collapse:collapse;font-size:12px}
.imgxcalc table.mtx th{background:var(--xc-soft);text-align:left;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--xc-faint);padding:8px 12px}
.imgxcalc table.mtx td{padding:6px 12px;border-top:1px solid var(--xc-line-soft);color:var(--xc-mut)}
.imgxcalc table.mtx td.r,.imgxcalc table.mtx th.r{text-align:right}
.imgxcalc table.mtx tr.on{background:rgba(249,115,22,.1)}
.imgxcalc table.mtx tr.on td{color:var(--xc-ink);font-weight:700}

/* ---- Pares clave-valor / visuales ---- */
.imgxcalc .kv{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;background:var(--xc-soft);padding:12px 16px;font-size:13px}
.imgxcalc .kv .lab{font-weight:600;color:var(--xc-dim)}
.imgxcalc .kv .val{font-weight:800;color:var(--xc-ink)}
.imgxcalc .svgbox{padding:18px}
.imgxcalc .svgbox svg{width:100%;height:auto;display:block;border-radius:12px}
.imgxcalc .svgbox .invalid-msg{padding:48px 0;text-align:center;font-size:14px;color:var(--xc-faint);margin:0}
.imgxcalc .viz{display:grid;gap:22px}
@media(min-width:1180px){.imgxcalc .viz{grid-template-columns:minmax(0,1fr) 300px}}
.imgxcalc .viz .col{display:grid;gap:22px;min-width:0}
.imgxcalc .visual{height:300px;overflow:hidden;border:1px solid var(--xc-line);border-radius:16px;background:#0d1420}
@media(min-width:640px){.imgxcalc .visual{height:380px}}
.imgxcalc .visual svg{width:100%;height:100%;display:block}
.imgxcalc .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.imgxcalc .chip{border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;background:var(--xc-soft);border:1px solid var(--xc-line-soft);color:var(--xc-dim)}
.imgxcalc .chip.brand{background:var(--xc-brand-soft);border-color:transparent;color:var(--xc-brand-deeper)}

/* ---- Pestañas (índice de calculadoras) ---- */
.imgxcalc-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 28px}
.imgxcalc-tabs .xtab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;border:1px solid var(--xtab-bd,#e2e8f0);background:var(--xtab-bg,#fff);color:var(--xtab-tx,#475569);cursor:pointer;transition:.18s}
.imgxcalc-tabs .xtab i{font-size:12px;opacity:.8}
.imgxcalc-tabs .xtab:hover{border-color:#f97316;color:#ea580c}
.imgxcalc-tabs .xtab.on{background:#ea580c;border-color:#ea580c;color:#fff;box-shadow:0 8px 18px -8px rgba(234,88,12,.55)}
html.dark .imgxcalc-tabs .xtab{--xtab-bd:rgba(255,255,255,.12);--xtab-bg:#111827;--xtab-tx:#cbd5e1}
html.dark .imgxcalc-tabs .xtab:hover{border-color:#fb923c;color:#fb923c}
html.dark .imgxcalc-tabs .xtab.on{background:#ea580c;border-color:#ea580c;color:#fff}
.imgxcalc-panel[hidden]{display:none}

/* ---- Toast ---- */
.imgxcalc-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:90vw;text-align:center}
html.dark .imgxcalc-toast{background:#f8fafc;color:#0f172a}
.imgxcalc-toast.show{opacity:1}