/* daezpro.com — 16-calculators.css
   Calculadoras públicas (F4.E): layout de dos paneles, pestañas móviles,
   Slider+NumberField con área táctil ≥44 px y MetricCounter. Consume solo
   tokens de 00-tokens-base.css; cero hex sueltos. */

.calc-hero{
  padding-bottom:clamp(32px, 3vw, 44px);
}
.calc-how-link{
  display:inline-block;
  margin-left:14px;
  font-weight:600;
  color:var(--accent-strong);
  text-decoration:underline;
  text-underline-offset:3px;
}
.calc-how-link:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* ------------------------------------------------- tabs móviles */
.calc-tabs{
  display:none;
  gap:8px;
  margin-bottom:18px;
}
.calc-tab{
  flex:1 1 0;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-body);
  font-family:var(--font-ui);
  font-size:var(--fs-title);
  font-weight:600;
  cursor:pointer;
}
.calc-tab.is-active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--text-strong);
}
.calc-tab:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}

/* ------------------------------------------------- layout */
.calc-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(18px, 2vw, 26px);
  align-items:start;
}
.calc-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  padding:clamp(20px, 2.4vw, 28px);
}
.calc-panel > h2{
  margin-bottom:18px;
}

/* ------------------------------------------------- inputs */
.calc-field{
  margin-bottom:16px;
}
.calc-field__label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.calc-field .slider{
  margin-top:2px;
}
.calc-field .slider input[type="range"]{
  height:44px;
}
.calc-field .slider input[type="range"]::-webkit-slider-thumb{
  width:22px;
  height:22px;
  margin-top:-9px;
}
.calc-field .slider input[type="range"]::-moz-range-thumb{
  width:22px;
  height:22px;
}
.calc-field .slider input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.calc-field .slider input[type="range"]:focus-visible::-moz-range-thumb{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.calc-num{
  width:100%;
  min-height:44px;
}
.calc-select{
  width:100%;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  padding:0 12px;
  font-family:var(--font-mono);
  font-size:var(--fs-title);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.calc-select:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.calc-run{
  min-height:44px;
  margin-top:6px;
  width:100%;
}

/* ------------------------------------------------- resultados */
.calc-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:12px;
}
.calc-metric{
  width:100%;
}
.calc-warning{
  margin-top:14px;
  border:1px solid var(--warning);
  border-radius:var(--r-md);
  background:var(--warning-soft);
  color:var(--warning-text);
  padding:12px 14px;
  font-size:var(--fs-body);
  line-height:1.5;
}
.calc-post{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.calc-save{
  min-height:44px;
}
.calc-invite{
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--text-body);
}
.calc-saved{
  color:var(--success-text);
  font-weight:600;
}

/* ------------------------------------------------- fórmula */
.calc-fx code{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  background:var(--bg-canvas);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:2px 6px;
  overflow-wrap:anywhere;
}
.calc-panel p{
  margin-top:10px;
  line-height:1.6;
  color:var(--text-body);
}

/* ------------------------------------------------- móvil ≤414px */
@media (max-width:414px){
  .calc-tabs{
    display:flex;
  }
  .calc-layout{
    grid-template-columns:1fr;
  }
  .calc-inputs.is-hidden, .calc-results.is-hidden{
    display:none;
  }
  .calc-metrics{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .calc-tab, .calc-run, .calc-save{
    transition:none;
  }
}