:root{
  --bg:#0b1220;
  --bg-soft:#111a2e;
  --card:#16213a;
  --border:#26314d;
  --text:#eef2ff;
  --text-dim:#9aa5c0;
  --accent:#facc15;
  --accent-dim:#a16207;
  --ok:#34d399;
  --radius:14px;
  --maxw:760px;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

.site-header{
  padding:36px 0 24px;
  text-align:center;
  background:radial-gradient(ellipse at top,var(--bg-soft),var(--bg) 70%);
}
.brand{font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;}
.brand span{color:var(--text);}
.tagline{color:var(--text-dim);margin:6px 0 0;font-size:0.95rem;}

.tool-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-top:8px;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:20px;
}
.tab{
  flex:1 1 auto;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:10px 12px;
  border-radius:10px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.tab:hover{color:var(--text);}
.tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1400;
}

.panel[hidden]{display:none;}

.field-row{margin-bottom:16px;}
.field-row label{display:block;font-size:0.85rem;color:var(--text-dim);margin-bottom:6px;}

select,input[type="number"],input[type="text"]{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  border-radius:10px;
  font-size:1rem;
  font-family:inherit;
}
select:focus,input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
input[readonly]{color:var(--ok);font-weight:700;}

input[type="range"].slider{
  display:block;
  width:100%;
  height:20px;
  margin:2px 0 0;
  padding:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
input[type="range"].slider::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:var(--border);
}
input[type="range"].slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg-soft);
  box-shadow:0 0 0 1px var(--border);
}
input[type="range"].slider::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:var(--border);
}
input[type="range"].slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg-soft);
  box-shadow:0 0 0 1px var(--border);
}
input[type="range"].slider:focus{
  outline:none;
}
input[type="range"].slider:focus::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--accent-dim);
}
input[type="range"].slider:focus::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--accent-dim);
}

.ohm-field input[type="range"].slider{margin-top:8px;}

.convert-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:start;
}
.convert-side{display:flex;flex-direction:column;gap:8px;}
.convert-eq{
  align-self:center;
  color:var(--text-dim);
  font-size:1.4rem;
  padding-top:8px;
}

.btn-secondary{
  margin-top:16px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:10px 16px;
  border-radius:10px;
  font-size:0.85rem;
  cursor:pointer;
}
.btn-secondary:hover{color:var(--text);border-color:var(--accent-dim);}

.hint{color:var(--text-dim);font-size:0.85rem;margin-top:0;}

.ohm-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}
.ohm-grid-4{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:520px){
  .ohm-grid{grid-template-columns:1fr;}
}
.ohm-field label{display:block;font-size:0.8rem;color:var(--text-dim);margin-bottom:6px;}

.result-box{
  margin-top:18px;
  padding:16px;
  border-radius:10px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  min-height:24px;
  font-size:1rem;
}
.result-box strong{color:var(--ok);}
.result-box .err{color:#f87171;}

.info-block{
  margin:36px 0;
  color:var(--text-dim);
  font-size:0.95rem;
}
.info-block h2{color:var(--text);font-size:1.15rem;margin-bottom:8px;}
.info-block h3{color:var(--text);font-size:1rem;margin:20px 0 10px;}
.info-block details{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:8px;
}
.info-block summary{cursor:pointer;font-weight:600;color:var(--text);}
.info-block details p{margin:8px 0 2px;}

.cable-visual{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:70px;
  padding:18px 0 6px;
}
.cable-circle{
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--bg-soft),0 0 24px rgba(250,204,21,.25);
  transition:width .15s ease,height .15s ease;
}

.cable-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:8px;
}
@media (max-width:520px){
  .cable-stats{grid-template-columns:1fr;}
}
.stat-card{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  text-align:center;
}
.stat-card-accent{
  border-color:var(--accent-dim);
  background:linear-gradient(180deg,rgba(250,204,21,.12),transparent);
}
.stat-label{display:block;font-size:0.75rem;color:var(--text-dim);margin-bottom:4px;}
.stat-value{display:block;font-size:1.2rem;font-weight:700;color:var(--text);}
.stat-card-accent .stat-value{color:var(--accent);}

.cable-tabla-titulo{color:var(--text);font-size:0.95rem;margin:24px 0 10px;}

.table-wrap{
  max-height:320px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
}
.cable-tabla{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.cable-tabla th,.cable-tabla td{
  padding:8px 12px;
  text-align:right;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.cable-tabla th:first-child,.cable-tabla td:first-child{text-align:left;}
.cable-tabla thead th{
  position:sticky;
  top:0;
  background:var(--card);
  color:var(--text-dim);
  font-weight:600;
}
.cable-tabla tbody tr:hover{background:var(--bg-soft);}
.cable-fila-activa{background:rgba(250,204,21,.14) !important;}
.cable-fila-activa td:first-child{color:var(--accent);font-weight:700;}

.ad-slot{
  min-height:90px;
  border:1px dashed var(--border);
  border-radius:10px;
  margin:24px 0;
}

.site-footer{
  border-top:1px solid var(--border);
  padding:24px 0 40px;
  text-align:center;
  color:var(--text-dim);
  font-size:0.8rem;
}