/* Calculadora de material eléctrico — estilos escopados bajo #calc-app, homologados a la paleta verde SITI */
#calc-app {
    /* Paleta homologada con Levantamiento en Sitio (verde SITI) */
    --bg:#ffffff; --panel:#f4f6f3; --ink:#181c18; --muted:#5c6659;
    --line:#dbe2d8; --accent:#58AD50; --accent-dark:#356b30; --accent-ink:#181c18;
    --blue:#58AD50; --sky:#bfe3ba; --pale:#cfe6ca; --box:#eef6ec;
    --steel:#8b968a; --steel-dark:#5c6659; --pvc:#3d7a54; --tray:#3d6e7a;
    --danger:#a33a2f; --radius:0px;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --disp:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
  }
#calc-app{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
#calc-app * {box-sizing:border-box}
#calc-app [hidden] {display:none !important}
#calc-app,
#calc-app {margin:0;padding:0}
#calc-app {background:var(--bg);color:var(--ink);
    font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding:16px}
#calc-app .wrap {max-width:1080px;margin:0 auto}
#calc-app header {display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--ink);border-radius:var(--radius);padding:16px 20px;
    margin-bottom:18px;border-bottom:4px solid var(--blue)}
#calc-app .brand {height:66px;width:auto;display:block}
#calc-app .brand-tit {min-width:220px;flex:1}
#calc-app header h1 {font-family:var(--disp);font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;font-size:24px;margin:0;color:#fff}
#calc-app .brand-slogan {display:block;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--sky);margin-top:2px}
#calc-app header p {margin:6px 0 0;color:var(--pale);font-size:13px;flex-basis:100%}
#calc-app .layout {display:grid;gap:18px}

  @media(min-width:940px){#calc-app .layout {grid-template-columns:1fr 1fr;align-items:start}
}#calc-app .card {background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
#calc-app .card h2 {font-family:var(--disp);font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;font-size:17px;margin:0 0 12px;display:flex;align-items:center;gap:8px;
    border-bottom:2px solid var(--blue);padding-bottom:7px}
#calc-app .card h2::before {content:"";width:14px;height:14px;background:var(--pale);
    border-radius:0;display:inline-block}
#calc-app label {display:block;font-size:12px;font-weight:600;color:var(--muted);
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
#calc-app input,
#calc-app select {width:100%;padding:10px;border:1px solid var(--line);border-radius:0;
    font:inherit;background:#FFFFFF;color:var(--ink)}
#calc-app input:focus-visible,
#calc-app select:focus-visible,
#calc-app button:focus-visible,
#calc-app summary:focus-visible,
#calc-app .cl:focus-visible {outline:3px solid var(--blue);outline-offset:1px}
#calc-app .grid2 {display:grid;grid-template-columns:1fr 1fr;gap:10px}
#calc-app .grid3 {display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
#calc-app .field {margin-bottom:10px}
#calc-app .acc-row {display:grid;grid-template-columns:1fr 76px 34px;gap:6px;margin-bottom:6px;align-items:center}
#calc-app button {font:inherit;font-weight:700;cursor:pointer;border-radius:0;
    padding:11px 16px;border:2px solid var(--ink)}
#calc-app .btn-main {width:100%;background:var(--ink);color:#fff;
    border-color:var(--ink);text-transform:uppercase;letter-spacing:.05em;
    font-family:var(--disp);font-size:17px;transition:background .15s,border-color .15s}
#calc-app .btn-main:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
#calc-app .btn-ghost {background:#fff;color:var(--ink);border:1px solid var(--line);
    font-weight:600;padding:8px 12px;font-size:13px}
#calc-app .btn-danger {background:none;border:none;color:var(--danger);font-size:18px;padding:4px 8px;line-height:1}
#calc-app details.params {border:1px dashed var(--pale);border-radius:0;
    padding:10px 12px;margin-bottom:14px;background:var(--box)}
#calc-app details.params summary {cursor:pointer;font-weight:700;font-size:13px;
    text-transform:uppercase;letter-spacing:.05em;color:var(--steel-dark)}
#calc-app .params h5 {margin:12px 0 6px;font-size:11px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--steel-dark);border-bottom:1px solid var(--line);padding-bottom:3px}
#calc-app .hint {font-size:12px;color:var(--muted);margin:8px 0 0}
#calc-app .sistema {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
#calc-app .sistema button {background:#fff;border:2px solid var(--line);color:var(--muted);
    font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:9px 6px}
#calc-app .sistema button.on {border-color:var(--ink);background:var(--ink);color:#fff;
    box-shadow:inset 0 -3px 0 var(--accent)}
#calc-app .chip {display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;
    border-radius:0;color:#fff;text-transform:uppercase;letter-spacing:.03em}
#calc-app .chip.GD {background:var(--steel)}
#calc-app .chip.GG {background:var(--steel-dark)}
#calc-app .chip.PVC {background:var(--pvc)}
#calc-app .chip.CH {background:var(--tray)}
#calc-app .chip.C40 {background:#6C55B8}
#calc-app .tramo {display:flex;justify-content:space-between;align-items:center;gap:10px;
    border:1px solid var(--line);border-radius:0;padding:10px 12px;margin-bottom:8px;background:#FFFFFF}
#calc-app .tramo .info {min-width:0}
#calc-app .tramo .info strong {display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#calc-app .tramo .info span {font-size:12px;color:var(--muted)}
#calc-app .tramo .num {font-family:var(--mono);font-weight:700;font-size:15px;white-space:nowrap}
#calc-app .empty {color:var(--muted);font-size:13px;text-align:center;
    border:1px dashed var(--line);border-radius:0;padding:18px}
#calc-app .ticket {background:#fff;border:1px solid var(--line);border-top:none;
    border-radius:0 0 var(--radius) var(--radius);padding:18px 18px 22px;position:relative;margin-top:12px}
#calc-app .ticket::before {content:"";position:absolute;top:-7px;left:0;right:0;height:14px;
    background:radial-gradient(circle at 8px 7px,var(--panel) 5px,#fff 5.5px);
    background-size:17px 14px;background-repeat:repeat-x}
#calc-app .ticket-head {display:flex;justify-content:space-between;align-items:center;
    border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px;gap:10px;flex-wrap:wrap}
#calc-app .vale-logo {height:44px;width:auto}
#calc-app .ticket-head h3 {font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:19px;margin:0}
#calc-app .ticket-head .folio {font-family:var(--mono);font-size:12px;color:var(--muted)}
#calc-app .seccion {font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;
    font-size:14px;background:var(--ink);color:#fff;padding:3px 10px;margin:16px 0 10px;display:inline-block}
#calc-app .area-tit {font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;
    font-size:13px;color:var(--steel-dark);border-left:4px solid var(--accent);
    padding-left:8px;margin:12px 0 6px}
#calc-app .grupo {margin-bottom:14px}
#calc-app .grupo-titulo {display:flex;align-items:center;gap:8px;font-weight:700;
    font-size:14px;margin-bottom:6px;flex-wrap:wrap}
#calc-app table.mat {width:100%;border-collapse:collapse;font-size:14px}
#calc-app table.mat td {padding:4px 0;border-bottom:1px dotted var(--line)}
#calc-app table.mat td:last-child {text-align:right;font-family:var(--mono);font-weight:700}
#calc-app .cl {font-family:var(--mono);font-size:11px;background:var(--box);color:var(--ink);
    border:1px solid var(--pale);border-radius:0;padding:1px 5px;margin-left:6px;
    white-space:nowrap;cursor:pointer}
#calc-app .cl.na {background:#F9FAFC;color:#636669;border-color:var(--pale)}
#calc-app .cl.custom {background:#E6F3E9;color:#1D5A31;border-color:#B4D9BE}
#calc-app .cl:hover {outline:2px solid var(--blue)}
#calc-app .copy {background:none;border:none;padding:0 3px;margin-left:2px;cursor:pointer;
    font-size:13px;line-height:1;color:var(--steel-dark);border-radius:0;vertical-align:middle}
#calc-app .copy:hover {color:var(--ink);outline:2px solid var(--blue)}
#calc-app .leyenda {font-size:11px;color:var(--muted);margin-top:8px}
#calc-app .pu {font-family:var(--mono);font-size:12px;background:var(--box);color:var(--ink);
    border:1px solid var(--pale);border-radius:0;padding:1px 6px;cursor:pointer;white-space:nowrap}
#calc-app .pu.vacio {background:#F1F3F5;color:var(--muted);border-color:var(--line)}
#calc-app .pu:hover {outline:2px solid var(--blue)}
#calc-app table.cot {width:100%;border-collapse:collapse;font-size:13px}
#calc-app table.cot th {font-size:11px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);text-align:left;padding:2px;border-bottom:2px solid var(--ink)}
#calc-app table.cot td {padding:4px 2px;border-bottom:1px dotted var(--line)}
#calc-app table.cot td:nth-child(2),
#calc-app table.cot th:nth-child(2),
#calc-app table.cot td:nth-child(4),
#calc-app table.cot th:nth-child(4) {text-align:right;font-family:var(--mono)}
#calc-app table.cot td:nth-child(4) {font-weight:700}
#calc-app tr.cot-tot td {border-top:2px solid var(--ink);border-bottom:none;font-weight:700}
#calc-app .misc {background:var(--box);border:1px solid var(--pale);border-radius:0;padding:12px;margin-top:8px}
#calc-app .totales {display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
#calc-app .kpi {flex:1;min-width:105px;border-radius:0;padding:9px 10px;text-align:center;
    background:var(--ink)}
#calc-app .kpi b {display:block;font-family:var(--mono);font-size:21px;color:var(--sky)}
#calc-app .kpi span {font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--pale)}
#calc-app .acciones {display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
#calc-app .nota {font-size:12px;color:var(--muted);margin-top:10px}

  @media print{#calc-app {background:#fff;padding:0}
#calc-app .no-print {display:none !important}
#calc-app .card {border:none;padding:0}
#calc-app .ticket {border:1px solid #000}
#calc-app .ticket::before {display:none}
#calc-app .cl {cursor:default}
#calc-app .copy {display:none}

  }

/* =========================================================================
   MODO OSCURO — se activa con data-theme="dark" en <html> (toggle global).
   La paleta clara define --ink (casi negro) usándolo tanto para texto como
   para fondos de banners; aquí --ink pasa a ser texto claro y los banners
   que antes lo usaban de fondo se reasignan a superficies/verde oscuros.
   ========================================================================= */
:root[data-theme="dark"] #calc-app{
  --bg:#14170f; --panel:#1c2016; --ink:#eef1e9; --muted:#a3ac9a;
  --line:#333a2b; --accent:#7bc873; --accent-dark:#5fae57; --accent-ink:#10150c;
  --blue:#7bc873; --sky:#a8dea1; --pale:#c7e8c2; --box:#1f2e19;
  --steel:#8b968a; --steel-dark:#a3ac9a; --pvc:#4f9a6a; --tray:#4f8b98;
  --danger:#e2685a;
}
/* Banners y controles que antes usaban --ink (near-black) como fondo */
:root[data-theme="dark"] #calc-app header{background:#242a1b}
:root[data-theme="dark"] #calc-app .seccion{background:#242a1b;color:var(--ink)}
:root[data-theme="dark"] #calc-app .kpi{background:#242a1b}
:root[data-theme="dark"] #calc-app .btn-main{background:var(--accent);color:#10150c;border-color:var(--accent)}
:root[data-theme="dark"] #calc-app .btn-main:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
:root[data-theme="dark"] #calc-app .sistema button.on{background:var(--accent);color:#10150c;border-color:var(--accent)}
/* Fondos blancos fijos → superficies oscuras */
:root[data-theme="dark"] #calc-app input,
:root[data-theme="dark"] #calc-app select{background:#242a1b;color:var(--ink)}
:root[data-theme="dark"] #calc-app .tramo{background:#242a1b}
:root[data-theme="dark"] #calc-app .btn-ghost{background:#242a1b;color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] #calc-app .sistema button{background:#242a1b}
:root[data-theme="dark"] #calc-app .ticket{background:var(--panel)}
:root[data-theme="dark"] #calc-app .ticket::before{
  background:radial-gradient(circle at 8px 7px,var(--bg) 5px,var(--panel) 5.5px);
  background-size:17px 14px;background-repeat:repeat-x}
:root[data-theme="dark"] #calc-app .cl.na{background:#242a1b;color:var(--muted);border-color:var(--line)}
:root[data-theme="dark"] #calc-app .cl.custom{background:var(--box);color:var(--sky);border-color:var(--accent-dark)}
:root[data-theme="dark"] #calc-app .pu.vacio{background:#242a1b;color:var(--muted);border-color:var(--line)}