/* ═══════════════════════════════════════════════════════════
   SEPRIORI · Estilos de las piezas hechas con window.PV · compartidos
   Se carga DESPUÉS de motor.css.

   La usan: probabilidad y matecodigo. El estilo.css de matecodigo
   era un subconjunto exacto del de probabilidad, así que estos
   estilos cubren las piezas de los dos.

   El marco, la cabecera, el lienzo y el pie de cada pieza los pone
   el motor, para que todas las piezas se vean iguales.
   ═══════════════════════════════════════════════════════════ */

/* el motor ya dibuja el marco con .pieza-viva; aquí se anula el
   borde propio de .pv-marco para que no quede doble */
.pv-marco { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.pv-pie strong { color: var(--ink); }

/* ══ controles de las piezas ══ */
.pv-controles{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.pv-btn{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--surface);
  border:1px solid var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;transition:.16s;
}
.pv-btn:hover{background:var(--accent);border-color:var(--accent)}
.pv-btn.fantasma{background:transparent;color:var(--ink-70);border-color:var(--ink-18)}
.pv-btn.fantasma:hover{color:var(--accent);border-color:var(--accent);background:transparent}
.pv-btn.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.pv-btn:disabled{opacity:.4;cursor:default}

.pv-deslizador{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.pv-deslizador label{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-55);
}
.pv-deslizador input[type=range]{flex:1;min-width:180px;accent-color:var(--accent)}
.pv-valor{font-family:var(--mono);font-weight:700;color:var(--accent);min-width:5.5em}

.pv-metricas{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.pv-metrica{
  flex:1 1 130px;border:1px solid var(--ink-18);border-radius:10px;
  padding:12px 14px;background:var(--surface);
}
.pv-metrica span{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);margin-bottom:5px;
}
.pv-metrica b{font-family:var(--display);font-size:1.5em;font-weight:700;line-height:1}
.pv-metrica.acento b{color:var(--accent)}
.pv-metrica.ok b{color:var(--ok)}
.pv-metrica.mal b{color:var(--mal)}

.pv-apuesta{display:flex;flex-wrap:wrap;gap:10px}
.pv-opcion{
  flex:1 1 150px;font-family:var(--texto);font-size:.95em;
  background:var(--surface);border:1.5px solid var(--ink-18);color:var(--ink);
  padding:14px 16px;border-radius:10px;cursor:pointer;text-align:left;transition:.18s;
}
.pv-opcion:hover{border-color:var(--accent)}
.pv-opcion.correcta{border-color:var(--ok);background:rgba(47,158,94,.10)}
.pv-opcion.fallada{border-color:var(--mal);background:rgba(168,72,47,.10)}

.pv-casillas{display:flex;flex-wrap:wrap;gap:9px}
.pv-casilla{
  display:flex;align-items:center;gap:9px;font-size:.92em;
  border:1.5px solid var(--ink-18);border-radius:9px;padding:9px 13px;
  background:var(--surface);cursor:pointer;transition:.16s;user-select:none;
}
.pv-casilla:hover{border-color:var(--accent)}
.pv-casilla.on{border-color:var(--ok);background:rgba(47,158,94,.09)}
.pv-caja{
  width:15px;height:15px;flex:0 0 auto;border:1.5px solid var(--ink-40);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
}
.pv-casilla.on .pv-caja{background:var(--ok);border-color:var(--ok)}

.pv-svg{display:block;width:100%;height:auto;overflow:visible}
.pv-nota{font-size:.86em;color:var(--ink-55);margin:12px 0 0}

/* hoja de cálculo */
.hc-marco{overflow-x:auto;border:1px solid var(--ink-18);border-radius:10px;background:var(--surface)}
table.hc{font-family:var(--mono);font-size:.8em;background:transparent}
table.hc th{background:var(--surface-deep);font-size:9px}
table.hc td{padding:6px 12px;border-bottom:1px solid var(--ink-08)}
table.hc tr.on td{background:rgba(139,69,20,.15);font-weight:700}
table.hc tr.alerta td{color:var(--mal)}
table.hc td.idx{color:var(--ink-40);background:rgba(3,25,30,.05)}

/* ══ auxiliares de las piezas ══ */
.pv-dos{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media (max-width:760px){.pv-dos{grid-template-columns:1fr}}
.pv-col{min-width:0}
.pv-rot{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;color:var(--ink-40);margin-bottom:10px;
}
.pv-fijos{margin-bottom:14px}
.pv-campo{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--ink-08);font-size:.9em;
}
.pv-campo span{color:var(--ink-55)}
.pv-campo b{font-family:var(--mono);font-size:.92em}
.cod-ev{
  margin-left:auto;padding-left:16px;font-family:var(--mono);
  font-size:.76em;font-weight:700;flex:0 0 auto;
}
.pv-salida{
  border:1px solid var(--ink-18);border-radius:10px;padding:18px;
  background:var(--surface);text-align:center;
}
.pv-salida b{display:block;font-family:var(--display);font-size:2.5em;line-height:1;font-weight:700}
.pv-salida span{
  display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
.pv-salida em{display:block;margin-top:10px;font-size:.85em;color:var(--ink-55)}
.pv-barra{
  height:8px;border-radius:99px;background:var(--ink-08);
  margin:14px 0 0;overflow:hidden;
}
.pv-barra i{display:block;height:100%;border-radius:99px;transition:width .25s,background .25s}

/* ══ auxiliares del material 2 ══ */
.pv-grupo{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--ink-08)}
.pv-grupo:last-of-type{border-bottom:0}
.pv-formula{
  font-family:var(--mono);font-size:.82em;color:var(--accent);
  background:rgba(139,69,20,.07);border-radius:8px;padding:11px 15px;margin:16px 0 0;
  text-align:center;
}