/* ====== calculadora.css (namespaced) ====== */

/* Layout */
.calculator.page{max-width:1100px;margin:0 auto;padding:12px 12px 24px}
.calculator .page-title{font-size:22px;margin:12px 0 6px}
.calculator .intro{color:var(--muted);margin:0 0 12px}

/* Disposición móvil-first */
.calculator .calc-wrap{display:grid;gap:12px}
.calculator .kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.calculator .kpi .value{font-size:28px;font-weight:600}
.calculator .kpi .label{font-size:12px;color:var(--muted)}

/* Formulario */
.calculator .form{display:grid;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.calculator .form label{font-size:13px;color:var(--muted);display:block;margin:0 0 4px}
.calculator .form input,
.calculator .form select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:16px}
.calculator .form input[type=radio],
.calculator .form input[type=checkbox]{width:auto;display:inline-block;margin-right:8px;padding:0;border:none;background:transparent}
.calculator .form-hint{font-size:13px;color:var(--muted);margin:4px 0 0}
.calculator .form-error{margin:4px 0 0;font-size:13px;font-weight:600;color:#b91c1c}
.calculator .form-error[hidden]{display:none}

/* Focus accesible + fallback */
.calculator .form input:focus-visible,
.calculator .form select:focus-visible{outline:none;border-color:var(--primary)}
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .calculator .form input:focus-visible,
  .calculator .form select:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%, transparent)}
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .calculator .form input:focus-visible,
  .calculator .form select:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.12)}
}

.calculator .form .actions{display:flex;gap:8px}
.calculator .form .btn{flex:1;border:1px solid var(--border);background:var(--bg);padding:10px 12px;border-radius:10px;cursor:pointer}
.calculator .form .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.calculator .form .btn:disabled{opacity:.6;cursor:not-allowed}

/* Resultados */
.calculator .results[aria-live]{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:12px}
.calculator .results h2{font-size:18px;margin:0 0 8px}
.calculator .summary{margin:0 0 12px;line-height:1.5}
.calculator .summary p{margin:4px 0}
.calculator .summary .note{font-size:12px;color:var(--muted)}
.calculator .table-wrapper{width:100%;overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch}
.calculator .table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;min-width:min(520px,100%)}
.calculator .table th,
.calculator .table td{border-top:1px solid var(--border);padding:10px 8px;text-align:left}
.calculator .table th{font-weight:600;color:var(--muted)}
.calculator .table caption{text-align:left;font-weight:600;margin:0 0 8px;color:var(--muted)}
.calculator .table tr:first-child th,
.calculator .table tr:first-child td{border-top:0}
.calculator .chart{min-height:220px;border:1px solid var(--border);border-radius:12px;background:var(--bg)} /* placeholder */

/* Prosa + FAQ */
.calculator .prose{color:var(--text);line-height:1.55}
.calculator .prose h2{font-size:18px;margin:16px 0 8px}
.calculator .prose p{margin:8px 0;color:var(--muted)}
.calculator .faq details{border-top:1px solid var(--border);padding:10px 0}
.calculator .faq summary{cursor:pointer;font-weight:600}

/* Compartir */
.calculator .share{display:flex;flex-wrap:wrap;gap:8px}
.calculator .share .btn{border:1px solid var(--border);background:var(--bg);padding:8px 10px;border-radius:10px;font-size:14px;cursor:pointer}

/* Anuncio */
.calculator .ad-slot{display:block;min-height:280px;margin:16px 0;border-radius:12px}
.calculator .ad-slot>ins.adsbygoogle{display:block!important;width:100%;min-height:inherit}

/* Calculadoras relacionadas */
.calculator .related{margin:32px 0 0}
.calculator .related h2{font-size:20px;margin:0 0 12px}
.calculator .related .cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,min(320px,100%)));justify-content:center;justify-items:stretch}
.calculator .related .card{height:100%}

/* Desktop */
@media (min-width:768px){
  .calculator.page{padding:16px}
  .calculator .page-title{font-size:26px}
  .calculator .calc-wrap{grid-template-columns:1.1fr 1fr;align-items:start}
  .calculator .kpi .value{font-size:34px}
}

@media (max-width:480px){
  .calculator.page{padding:12px 8px 20px}
  .calculator .form{padding:10px}
  .calculator .form .actions{flex-direction:column}
  .calculator .results[aria-live]{padding:10px}
  .calculator .table{min-width:480px;min-width:min(480px,100%)}
  .calculator .kpi{padding:10px}
}

/* Colapsar hueco cuando un anuncio no se rellena */
.ad-slot.ad-slot--empty{
  min-height:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.ad-slot.ad-slot--empty > ins.adsbygoogle{
  display:none !important;
  min-height:0 !important;
}