/* Phrasal verbs y colocaciones · estilos propios. La base (botones, modos,
   práctica, examen, tabla e impresión) es la de los verbos irregulares:
   la página carga verbos.css antes que este. Aquí va solo lo que cambia:
   el hueco dentro de la frase y la tabla de cinco columnas. */

/* La frase con el hueco */
.pv-frase { margin:12px 0 8px; font-size:1.3rem; line-height:1.9; color:var(--dark); max-width:720px; }
.pv-frase-sm { margin:0; font-size:1.02rem; line-height:1.9; }
.pv-hueco { position:relative; display:inline-block; margin:0 4px; vertical-align:baseline; }
.pv-hueco input { width:7.5em; max-width:60vw; font-family:inherit; font-size:1.05rem; font-weight:700; color:var(--navy); padding:3px 28px 3px 10px; border:1px solid #c9cfda; border-radius:10px; background:var(--bg-body); line-height:1.5; transition:border-color .2s ease, background .2s ease; }
.pv-frase-sm .pv-hueco input { font-size:.98rem; width:7em; padding-right:10px; }
.pv-hueco input:focus { outline:2px solid var(--mint); outline-offset:1px; background:#fff; }
.pv-hueco .vp-marca { bottom:auto; top:50%; transform:translateY(-50%); right:9px; }
.pv-pista { font-size:.92rem; color:var(--dark-soft); }
.pv-pista span { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.pv-sol-frase { margin-top:6px; color:var(--dark); }
.pv-sol-frase b, .vx-r-t span b { color:var(--navy); background:var(--mint-tint); border-radius:4px; padding:0 3px; }

/* Examen: número y frase */
.pv-fila { display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px 14px; align-items:start; padding:12px 0; border-top:1px solid var(--border); }
.pv-fila:first-child { border-top:0; padding-top:0; }
.pv-fila .vx-n { align-self:start; margin-top:4px; }

/* Tabla: expresión, ejemplo, significado, nivel y tipo */
.vb-tabla.pv-tabla tbody td:nth-child(2) { font-weight:400; color:var(--text-main); }
.vb-tabla.pv-tabla tbody td:nth-child(2) b { font-weight:700; color:var(--navy); }
.vb-tabla.pv-tabla tbody td:nth-child(3) { font-weight:400; color:var(--dark-soft); }

@media screen and (max-width:600px) {
  .pv-frase { font-size:1.12rem; }
  /* De filas a fichas: la expresión con su nivel arriba; el ejemplo y el
     significado debajo, a todo lo ancho. */
  .vb-tabla.pv-tabla tr { grid-template-columns:minmax(0,1fr) auto; row-gap:2px; }
  .vb-tabla.pv-tabla thead th:nth-child(n+2) { display:none; }
  .vb-tabla.pv-tabla tbody th { grid-column:1; grid-row:1; }
  .vb-tabla.pv-tabla tbody td:nth-child(2) { grid-column:1 / -1; grid-row:2; margin:0; font-size:.88rem; }
  .vb-tabla.pv-tabla tbody td:nth-child(3) { grid-column:1 / -1; grid-row:3; margin:0; font-size:.84rem; }
  .vb-tabla.pv-tabla tbody td:nth-child(4) { grid-column:2; grid-row:1; justify-self:end; margin:0; }
  .vb-tabla.pv-tabla tbody td:nth-child(5) { display:none; }
}