/* Calculadora del alumno (clase.html) y de la ficha pública (producto.html).
   Un solo estilo compartido: la misma estética adentro y afuera.
   Todo desde variables del sistema (colors_and_type.css + ui.css). */

.calc{
  display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--bg-1); border:1px solid var(--pame-line);
  border-radius:var(--r-lg); padding:var(--sp-5);
}

.calc-head{ display:flex; flex-direction:column; gap:var(--sp-2); }
.calc-tit{ margin:0; font-size:var(--fs-20); font-weight:800; color:var(--fg-1); }
.calc-explic{ margin:0; font-size:var(--fs-14); color:var(--fg-3); line-height:var(--lh-normal); }

/* Grid de inputs: auto-fit para que en desktop entren 2 columnas y en mobile 1. */
.calc-inputs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--sp-4);
}

.calc-fld{ display:flex; flex-direction:column; gap:var(--gap-fld); min-width:0; }
.calc-fld-lbl{ font-size:var(--fs-13); font-weight:600; color:var(--fg-2); }

.calc-in{
  height:var(--ctl-h); width:100%; margin:0; padding:0 var(--sp-3);
  border:var(--ctl-bd); border-radius:var(--ctl-r);
  background:var(--bg-1); color:var(--fg-1);
  font-family:var(--font-sans); font-size:var(--fs-14);
}
.calc-in:focus{ outline:2px solid var(--pame-orange); outline-offset:1px; border-color:transparent; }

/* Número con prefijo/sufijo. El input come todo el ancho, los afijos van
   pegados al borde interior. */
.calc-in-wrap{
  display:grid; grid-template-columns:auto 1fr auto; align-items:stretch;
  border:var(--ctl-bd); border-radius:var(--ctl-r); background:var(--bg-1);
  overflow:hidden; height:var(--ctl-h);
}
.calc-in-wrap:focus-within{ outline:2px solid var(--pame-orange); outline-offset:1px; border-color:transparent; }
.calc-in-wrap .calc-in{
  border:0; border-radius:0; background:transparent;
  min-width:0;
}
.calc-in-wrap .calc-in:focus{ outline:none; }
.calc-afi{
  display:inline-flex; align-items:center; padding:0 var(--sp-3);
  font-size:var(--fs-13); color:var(--fg-3);
  background:var(--bg-2); border-right:1px solid var(--pame-line);
}
.calc-afi.calc-suf{ border-right:0; border-left:1px solid var(--pame-line); }

/* Slider */
.calc-slider-wrap{ display:flex; align-items:center; gap:var(--sp-3); height:var(--ctl-h); }
.calc-slider{ flex:1; margin:0; height:6px; }
.calc-slider-val{
  min-width:60px; text-align:right; font-weight:700; color:var(--fg-1);
  font-size:var(--fs-14); font-variant-numeric:tabular-nums;
}

/* Toggle: un pill con texto Sí/No */
.calc-toggle{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  height:var(--ctl-h); cursor:pointer; user-select:none;
}
.calc-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.calc-toggle-track{
  width:44px; height:24px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--pame-line); position:relative;
  transition:background .12s ease;
}
.calc-toggle-track::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:left .12s ease;
}
.calc-toggle input:checked + .calc-toggle-track{ background:var(--pame-orange); border-color:var(--pame-orange); }
.calc-toggle input:checked + .calc-toggle-track::after{ left:22px; }
.calc-toggle-txt{ font-size:var(--fs-14); color:var(--fg-2); font-weight:600; }

/* Panel de resultados: fondo destacado, tarjetas grandes.
   Mobile: apiladas. Desktop: en fila si hay varias. */
.calc-resultados{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--sp-3);
  background:linear-gradient(180deg, var(--pame-orange-10, var(--bg-2)), var(--bg-2));
  border:1px solid var(--pame-line); border-radius:var(--r-md);
  padding:var(--sp-4);
}
.calc-res{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.calc-res-label{
  font-size:var(--fs-12); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:var(--fg-2);
}
.calc-res-valor{
  font-size:var(--fs-24); font-weight:800; color:var(--fg-1); line-height:1.1;
  font-variant-numeric:tabular-nums; word-break:break-word;
}
.calc-res[data-tipo="texto"] .calc-res-valor{ font-size:var(--fs-18); }
.calc-res-badge{
  display:inline-block; align-self:flex-start;
  padding:2px 10px; border-radius:999px;
  font-size:var(--fs-12); font-weight:700;
}
.calc-res-badge[data-color="verde"]   { background:#dcfce7; color:#166534; }
.calc-res-badge[data-color="amarillo"]{ background:#fef3c7; color:#92400e; }
.calc-res-badge[data-color="rojo"]    { background:#fee2e2; color:#991b1b; }
.calc-res-badge[data-color="gris"]    { background:var(--bg-2); color:var(--fg-3); }

/* Modo compacto (embed en ficha pública): sin borde propio, todo apretado. */
.calc--embed{ border:0; padding:0; background:transparent; }
.calc--embed .calc-resultados{ padding:var(--sp-3); }

/* ── Editor del panel (admin.html): cada fila un bloque, botón ✕ a la derecha.
   Comparte tipografía y variables con el resto del admin. ─────────────────── */
.calc-ed-fila{
  background:var(--bg-2); border:1px solid var(--pame-line);
  border-radius:var(--r-md); padding:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.calc-ed-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)) auto;
  gap:var(--sp-2); align-items:end;
}
.calc-ed-row > div{ display:flex; flex-direction:column; gap:var(--gap-fld); min-width:0; }
.calc-ed-row label{ font-size:var(--fs-12); font-weight:700; color:var(--fg-2); text-transform:uppercase; letter-spacing:.02em; }
.calc-ed-row input,
.calc-ed-row select{
  height:var(--ctl-h); margin:0; padding:0 var(--sp-3);
  border:var(--ctl-bd); border-radius:var(--ctl-r);
  background:var(--bg-1); color:var(--fg-1); font-size:var(--fs-14);
}
.calc-ed-opts{ margin-top:var(--sp-2); display:flex; flex-direction:column; gap:var(--gap-fld); }
.calc-ed-opts textarea{
  width:100%; padding:var(--sp-2) var(--sp-3);
  border:var(--ctl-bd); border-radius:var(--ctl-r);
  background:var(--bg-1); color:var(--fg-1); font-size:var(--fs-13);
  font-family:var(--font-mono, ui-monospace, monospace);
}
.calc-ed-mm{
  margin-top:var(--sp-2);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2);
}
.calc-ed-mm > div{ display:flex; flex-direction:column; gap:var(--gap-fld); }
.calc-ed-mm label{ font-size:var(--fs-12); font-weight:700; color:var(--fg-2); text-transform:uppercase; letter-spacing:.02em; }
.calc-ed-mm input{
  height:var(--ctl-h); margin:0; padding:0 var(--sp-3);
  border:var(--ctl-bd); border-radius:var(--ctl-r);
  background:var(--bg-1); color:var(--fg-1); font-size:var(--fs-14);
}
.calc-ed-x{ align-self:end; }

/* Sección en la ficha pública (producto.html) — encuadra la calculadora como
   un "probala vos" antes del temario. */
.pp-calc-sec{
  margin:var(--sp-5) 0;
  padding:var(--sp-4);
  background:var(--bg-1);
  border:1px solid var(--pame-line);
  border-radius:var(--r-lg);
}
.pp-calc-tit{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-14); font-weight:800; color:var(--pame-orange);
  text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:var(--sp-3);
}
.pp-calc-tit svg{ width:16px; height:16px; }
.pp-calc-sec .calc{ border:0; padding:0; background:transparent; }