/* Electricista Pro AR — tema industrial: grafito + ámbar de seguridad */
:root{
  --bg:#0d1117; --bg-elev:#161d27; --bg-field:#1c2531;
  --text:#eef1f6; --text-muted:#8b93a7;
  --accent:#f5a623; --accent-ink:#241a06;
  --danger:#ef5766; --success:#3ecf8e; --border:#2a3441;
  --font-head:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f4f7; --bg-elev:#ffffff; --bg-field:#eef0f4;
    --text:#151a23; --text-muted:#5b6472; --border:#dde1e8;
    --accent-ink:#241a06;
  }
}
:root[data-theme="light"]{
  --bg:#f3f4f7; --bg-elev:#ffffff; --bg-field:#eef0f4;
  --text:#151a23; --text-muted:#5b6472; --border:#dde1e8;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.5;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2{font-family:var(--font-head); margin:0}

.hero{
  padding:44px 20px 36px; text-align:center;
  background:
    repeating-linear-gradient(90deg, rgba(245,166,35,.08) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(245,166,35,.08) 0 1px, transparent 1px 64px),
    var(--bg-elev);
  border-bottom:1px solid var(--border);
}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.01em}
.hero p{color:var(--text-muted); margin:10px auto 0; max-width:46ch}
.hero #btn-instalar{
  width:auto; margin:16px auto 0; padding:10px 18px; display:block;
}

#offline-banner{
  background:var(--danger); color:#fff; text-align:center; font-size:.85rem;
  padding:9px 16px; font-weight:600;
}

.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px; padding:20px; max-width:1100px; margin:0 auto;
}
.card{
  background:var(--bg-elev); border:1px solid var(--border); border-left:3px solid var(--cat,var(--accent));
  border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:4px;
}
.card--ohm{--cat:#f5a623} .card--consumo{--cat:#4ea1ff}
.card--tri{--cat:#ef5766} .card--cable{--cat:#3ecf8e} .card--pres{--cat:#a78bfa}
.card--caida{--cat:#22d3ee} .card--tierra{--cat:#8bc34a} .card--termica{--cat:#818cf8}
.card--dif{--cat:#f472b6}
.card--wide{grid-column:1 / -1}

.pres-items{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.item-row{
  border:1px solid var(--border); border-radius:10px; background:var(--bg-field);
  padding:10px; display:flex; flex-direction:column; gap:7px;
}
.item-row .item-desc{
  width:100%; padding:9px 10px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); font-size:.88rem; font-family:var(--font-body);
}
.item-row-nums{display:grid; grid-template-columns:64px 1fr auto 26px; gap:6px; align-items:center}
.item-row-nums input{
  width:100%; padding:8px 6px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); font-size:.85rem; font-family:var(--font-body); text-align:right;
}
.item-subtotal{font-size:.85rem; font-weight:600; color:var(--text); text-align:right; white-space:nowrap}
.item-remove{
  width:26px; height:26px; padding:0; margin:0; border-radius:7px; border:1px solid var(--border);
  background:transparent; color:var(--text-muted); font-size:.85rem; line-height:1;
}
.item-remove:hover{border-color:var(--danger); color:var(--danger); filter:none}
.btn-add{
  width:auto; background:transparent; border:1px dashed var(--cat,var(--accent)); color:var(--cat,var(--accent));
  font-size:.85rem; padding:9px 14px; margin:2px 0 14px;
}
.btn-add:hover{filter:none; background:rgba(167,139,250,.08)}
.pres-total-row{
  display:flex; justify-content:space-between; align-items:center; padding:10px 2px;
  border-top:1px solid var(--border); font-family:var(--font-head); font-size:1.15rem; font-weight:600;
}
.pres-total-row strong{color:var(--accent)}

.btn-tema{
  position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; z-index:50;
  width:40px; height:40px; padding:0; margin:0; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); font-size:1.05rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.btn-tema:hover{filter:none; border-color:var(--accent)}

.card--datos{--cat:#fb923c}
.logo-preview{display:flex; align-items:center; gap:10px; margin:6px 0 2px}
.logo-preview img{
  width:48px; height:48px; object-fit:contain; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-field); padding:4px;
}

.card-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.card-head svg{flex:none; width:22px; height:22px; color:var(--cat,var(--accent))}
.card h2{font-size:1.05rem}
.hint{font-size:.82rem; color:var(--text-muted); margin:-2px 0 10px}

.field{margin:8px 0}
.field label{display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:5px}
.field-row{position:relative}
.field input,.field select{
  width:100%; padding:11px 46px 11px 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-field); color:var(--text); font-size:.98rem; font-family:var(--font-body);
}
.field select{padding-right:32px; appearance:auto}
.field input::placeholder{color:var(--text-muted)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.unit{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:.78rem; color:var(--text-muted); pointer-events:none;
}

button{
  width:100%; padding:12px; margin-top:6px; border:none; border-radius:9px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-weight:700; font-family:var(--font-body); font-size:.95rem;
  transition:filter .15s ease, transform .05s ease;
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--text); outline-offset:2px}

.result{margin-top:12px; min-height:1.4em}
.result:empty{margin-top:0}
.readout{
  font-family:var(--font-head); font-size:1.5rem; font-weight:600; color:var(--accent);
}
.readout small{display:block; font-family:var(--font-body); font-size:.78rem; font-weight:400; color:var(--text-muted); margin-top:2px}
.error{color:var(--danger); font-size:.85rem}

footer{text-align:center; padding:26px 16px 34px; color:var(--text-muted); font-size:.82rem}
footer p{margin:4px 0}

.share-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.share-row button{
  width:auto; flex:1 1 auto; margin:0; padding:9px 10px; font-size:.82rem; font-weight:600;
  background:transparent; color:var(--text); border:1px solid var(--border);
}
.share-row button:hover{border-color:var(--cat,var(--accent)); color:var(--cat,var(--accent))}
.share-row button.copiado{border-color:var(--success); color:var(--success)}

#printArea{display:none}
@media print{
  #appRoot{display:none}
  #printArea{
    display:block; padding:32px; font-family:var(--font-body); color:#111; background:#fff;
  }
  #printArea .p-header{display:flex; align-items:center; gap:14px}
  #printArea .p-logo{width:56px; height:56px; object-fit:contain}
  #printArea h1{font-family:var(--font-head); margin-bottom:4px}
  #printArea .p-titulo{font-family:var(--font-head); margin:0 0 4px}
  #printArea .p-datos-electricista{margin:0; color:#555; font-size:.85rem}
  #printArea .p-fecha{color:#555; margin-top:4px}
  #printArea .p-cliente-line{margin:14px 0 6px}
  #printArea table{border-collapse:collapse; width:100%; margin-top:12px}
  #printArea th,#printArea td{text-align:left; padding:8px 6px; border-bottom:1px solid #ddd}
  #printArea thead th{color:#555; font-weight:600; font-size:.85rem}
  #printArea td:nth-child(2),#printArea td:nth-child(3),#printArea td:nth-child(4),
  #printArea tfoot td{text-align:right}
  #printArea tfoot th{border-bottom:none; text-align:right; font-weight:700}
  #printArea tfoot td{font-weight:700; border-bottom:none}
  #printArea .p-disclaimer{margin-top:24px; font-size:.8rem; color:#777}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}