/**
 * PhotoSision Portal · Estilos del bloque opcional «¿Quién envía este pago? (opcional)» (SPRINT-240A)
 *
 * Traduce las maquetas aprobadas por Norbey el 27/10/2026 (Stitch, proyecto 10547726350395654557: bloque vacío en Noche, «Otra persona» con el campo de nombre,
 * bloque vacío en Día y hoja «Leer más») a los tokens YA aprobados del portal (tokens.css). Cero token nuevo y cero color escrito a mano: Noche, Grafito y Día salen
 * de las variables (--sf, --el, --ln, --fb, --tx, --t2, --ac, --accent-t), así que en Día el acento es el naranja oscuro #B54F00 que ya usa el botón principal.
 *
 * Todo va bajo `.pqe` (el contenedor `#pay-quien-envia`): no toca ninguna otra pantalla. Archivo aparte a propósito: no modifica lectura.css, portal.css ni pago-familias.css.
 * Medidas: opciones de 48 px de alto mínimo, en cuadrícula 2×2; letra pequeña de 13 px (0,8125 rem, escala con la letra grande del sistema). Ninguna altura fija: el texto
 * puede crecer sin cortarse. Con el nombre APAGADO el bloque no lleva rojo, asterisco ni contador (es opcional). SPRINT-258: con el nombre encendido el campo (textarea) lleva contador y, solo
 al intentar enviar sin resolverlo, un error en --err (contraste >= 5,8:1 sobre --sf en Noche, Grafito y Día, calculado el 29/10/2026) y borde --err.
 */

.pqe { margin: 14px 0 0; }
.pqe[hidden] { display: none; }
.pqe-card { background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; padding: 16px; color: var(--tx); font-family: var(--font-body); }
.pqe-card *, .pqe-card *::before, .pqe-card *::after { box-sizing: border-box; }

.pqe-titulo { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--tx); }
.pqe-ayuda { margin: 8px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--t2); }

.pqe-campos { margin: 14px 0 0; min-width: 0; }
.pqe-leyenda { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--tx); }
.pqe-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.pqe-op {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--fb);
  border-radius: 12px;
  background: var(--el);
  color: var(--tx);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.pqe-op:hover { border-color: var(--ac); }
.pqe-op.on {
  border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 14%, var(--sf));
  box-shadow: inset 0 0 0 1px var(--ac);
  font-weight: 600;
}
.pqe-op:focus-visible,
.pqe-in:focus-visible,
.pqe-leer:focus-visible { outline: 3px solid var(--accent-t); outline-offset: 2px; }

.pqe-nombre { margin-top: 14px; min-width: 0; }
.pqe-nombre-et { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--tx); }
.pqe-in {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--fb);
  border-radius: 12px;
  background: var(--el);
  color: var(--tx);
  font: inherit;
  font-size: 1rem;
}
.pqe-nombre-ayuda { margin: 6px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--t2); }

/* Letra pequeña: 13 px, legible (--t2 sobre --sf supera 4,5:1 en Noche, Grafito y Día) y nunca escondida. */
.pqe-letra { margin: 14px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--t2); }

/* «Leer más» en línea con la letra pequeña. Se reutiliza el aspecto de `.lg-enlace` (portal.css), pero en línea y con el aire vertical en el relleno para llegar a 48 px
   de objetivo táctil sin agrandar los renglones del texto. */
.pqe-letra .pqe-leer,
.pqe-aviso .pqe-leer {
  display: inline;
  min-height: 0;
  padding: 15px 4px;
  margin: -15px 0;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* SPRINT-258 · Campo del nombre completo. Un solo textarea que NO desborda a 320 px: ancho 100 % con box-sizing, texto que parte donde haga falta, tipografía de 16 px (evita el zoom
   de iOS) y mínimo de dos líneas. Todo con tokens; sin colores escritos a mano. */
.pqe-area {
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  resize: vertical;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.pqe-in:disabled { opacity: .6; cursor: not-allowed; }
.pqe-area[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }

.pqe-nombre-pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 6px; min-width: 0; }
.pqe-nombre-error { margin: 0; flex: 1 1 auto; min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--err); overflow-wrap: anywhere; }
.pqe-nombre-contador { margin-left: auto; flex: 0 0 auto; font-size: .8125rem; line-height: 1.4; color: var(--t2); font-variant-numeric: tabular-nums; }

/* Aviso de Legal junto al campo (dos frases y «Leer más»): 13 px, --t2 sobre --sf supera 4,5:1 en los tres modos. */
.pqe-aviso { margin: 14px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }