/* ============================================================
   SR · capa de canvas de sesión
   Superficie de trabajo: preguntas a la izquierda, lo que
   contestan se escribe adentro de la página.
   Depende de sr.css y sr-deck.css. Cero color, cero radio.
   ============================================================ */

/* ---- barra: acciones a la derecha ---- */
.cv-acts{display:flex;align-items:center;gap:var(--sr-2)}
.sr button.sr-btn,.sr button.sr-btn-2{font-family:var(--sr-font)}

/* ---- índice de la sesión ---- */
.cv-idx{border-top:1px solid var(--sr-ink);margin-top:var(--sr-4);
  border-bottom:1px solid var(--sr-line)}
.cv-idx-f{display:grid;grid-template-columns:40px minmax(0,1fr) 150px;gap:var(--sr-3);
  padding:var(--sr-2) 0;border-bottom:1px solid var(--sr-line);align-items:baseline}
.cv-idx-f:last-child{border-bottom:0}
.cv-idx-h{font-size:var(--sr-label);font-weight:var(--sr-emph);line-height:1.5}
.sr .cv-idx-f p{margin:0;max-width:47ch;color:var(--sr-mid)}
.cv-idx-t{text-align:right;white-space:nowrap}

/* ---- bloque de preguntas ---- */
.cv-preg{border-top:1px solid var(--sr-ink);margin-top:var(--sr-4)}
.cv-p{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sr-3);
  padding:var(--sr-2) 0;border-bottom:1px solid var(--sr-line);align-items:baseline}
.cv-p:last-child{border-bottom:0}
.cv-p-n{font-size:var(--sr-micro);color:var(--sr-mid);font-variant-numeric:tabular-nums}
/* 47ch da 65 caracteres reales; el token 66ch deja pasar 80 */
.sr .cv-p p{margin:0;max-width:47ch}
.sr .cv-p p+p{margin-top:var(--sr-1);color:var(--sr-mid);font-size:var(--sr-label)}

/* ---- recorrido: una etapa por fila ---- */
.cv-eta{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sr-3);
  padding:var(--sr-3) 0;border-bottom:1px solid var(--sr-line);align-items:start}
.cv-eta:last-child{border-bottom:0}
.sr .cv-eta p{margin:0;max-width:47ch}
.cv-eta-h{font-size:var(--sr-label);font-weight:var(--sr-emph);line-height:1.5;
  margin-bottom:var(--sr-1)}

/* ---- campo de captura ---- */
/* la medida manda tambien en lo que se escribe en vivo */
.cv-campo{margin-top:var(--sr-3);max-width:47ch}
.cv-campo-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-2);
  margin-bottom:var(--sr-1)}
.cv-in{border:1px solid var(--sr-line);background:var(--sr-paper);padding:var(--sr-2);
  min-height:160px;font-size:var(--sr-body);line-height:1.62;color:var(--sr-ink);
  white-space:pre-wrap;outline:none}
.cv-in:hover{border-color:var(--sr-mid)}
.cv-in:focus{border-color:var(--sr-ink);background:var(--sr-surface)}
.cv-in:empty::before{content:attr(data-ph);color:var(--sr-mid)}
.cv-in-alto{min-height:264px}

/* ---- sobre tinta: la caja blanca pesa, queda el contorno ---- */
.sr-ink .cv-in{background:transparent;color:var(--sr-paper);border-color:var(--sr-mid)}
.sr-ink .cv-in:hover{border-color:var(--sr-line)}
.sr-ink .cv-in:focus{background:transparent;border-color:var(--sr-paper)}
.sr .sr-ink button.sr-btn{background:var(--sr-paper);color:var(--sr-ink);border-color:var(--sr-paper)}
.sr .sr-ink button.sr-btn:hover{background:var(--sr-ink);color:var(--sr-paper)}

/* ---- guardado ---- */
.cv-save{color:var(--sr-mid)}

@media(max-width:1000px){
  .cv-idx-f{grid-template-columns:40px minmax(0,1fr)}
  .cv-idx-t{grid-column:-2;text-align:left}
}

@media print{
  .cv-acts,.cv-save{display:none}
  .sr-bar{position:static}
  .cv-in{min-height:0;border-color:var(--sr-line);background:transparent}
  .cv-in:empty{display:none}
  .sr-sec{break-inside:avoid}
}