/**
 * PhotoSision Portal · Estilos del acceso de familias, nivel 1 (SPRINT-181b)
 *
 * Solo lo que agrega este Sprint: menú recortado en la sesión de solo pagar, aviso y casilla antes de enviar
 * el comprobante, constancia de recibido, avisos del recibo y el borde de campos con el token --fb
 * (contraste >= 3:1 contra fondo y superficie en los tres modos). Nada de portal.css se reescribe.
 */

/* --- Sesión de solo pagar: qué se ve y qué no (body.pay-only lo pone el router) --- */
body:not(.pay-only) [data-pay-only] { display: none !important; }
body.pay-only [data-full-only] { display: none !important; }

/* "Ver mis fotos" apagado en el menú */
.pn.nav .nav-off {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--t2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.7;
  cursor: not-allowed;
}

.tabs-d .nav-off {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  opacity: 0.7;
  cursor: not-allowed;
}

.tabs-d .nav-off small {
  font-size: 11px;
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 999px;
  padding: 1px 8px;
}

/* --- Avisos del recibo --- */
.pay-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 20px 14px;
  padding: 12px 14px;
  border: 1px solid var(--ln);
  border-radius: 10px;
  background: var(--sf);
  color: var(--t2);
  font-size: 13.5px;
  line-height: 1.45;
}

.pay-notice[hidden] { display: none; }
.pay-notice svg { flex: none; margin-top: 1px; }
.pay-notice.ok { border-color: var(--ok); color: var(--tx); }
.pay-notice.ok svg { color: var(--ok); }
.pay-notice .btn { margin-left: auto; min-height: 44px; }
.pay-notice .btn[hidden] { display: none; }

/* --- Aviso corto y casilla propia (Legal) --- */
.pay-aviso { margin: 14px 0 0; }

.pay-aviso-txt {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t2);
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 10px;
  padding: 12px 14px;
}

.pay-aviso-txt p { margin: 0 0 8px; overflow-wrap: anywhere; }
.pay-aviso-txt p:last-child { margin-bottom: 0; }
.pay-aviso-txt b { color: var(--tx); font-weight: 600; }
.pay-chk b strong { font-weight: 700; }

.pay-aviso-txt a {
  color: var(--accent-t);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pay-chk { border-top: 0; }
.pay-chk .bx { border-color: var(--fb); }
.pay-chk input:focus-visible + .bx { outline: 2px solid var(--ac); outline-offset: 2px; }

/* Botón "Enviar comprobante" apagado hasta marcar la casilla (sigue enfocable: explica por qué) */
#p-go[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* --- "Ver mis fotos": disponible muy pronto --- */
.pay-fotos-pronto { margin: 20px 20px 0; text-align: center; }
.pay-fotos-pronto .btn,
.rbody button[data-pay-only] { opacity: 0.7; cursor: not-allowed; }
.pay-fotos-pronto p { margin: 8px 0 0; font-size: 13px; color: var(--t2); }

.pay-soon {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* --- Constancia de recibido --- */
#tx-recibo { letter-spacing: 0.06em; font-weight: 700; }

.pay-nota {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t2);
}

.pay-nota[hidden] { display: none; }

/* --- Borde de campos con --fb (solo las pantallas del acceso y el recibo; no cambia el resto del portal) --- */
#view-acceso .fld:not(:focus-within):not(.bad),
#view-activar .fld:not(:focus-within):not(.bad),
#view-pagar .fld:not(:focus-within):not(.bad) {
  border-width: 1.5px;
  border-color: var(--fb);
}

#view-pin .pinr:not(.bad) input:not(:focus) {
  border-width: 1.5px;
  border-color: var(--fb);
}

#view-pagar .upl:not(.has) { border-color: var(--fb); }

/* --- Política de Tratamiento de Datos Personales (#privacidad): reutiliza .pt, .sech y .dat; solo agrega el texto corrido --- */
.pol-b {
  margin: 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t2);
  overflow-wrap: anywhere;
}

.pol-b p { margin: 8px 0 0; }
.pol-b b { color: var(--tx); font-weight: 600; }
.pol-b a { color: var(--accent-t); text-decoration: underline; text-underline-offset: 3px; }
.pol-l { margin: 8px 0 0; padding-left: 22px; }
.pol-l li { margin: 6px 0; }

.pol-tabla { margin: 8px 20px 0; }
.pol-tabla .r { flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.55; }
.pol-tabla .r span { color: var(--tx); font-weight: 600; }
.pol-tabla .r b { font-weight: 400; text-align: left; color: var(--t2); }
.pol-tabla .r b b { color: var(--tx); font-weight: 600; }

#view-privacidad .sech h2 { line-height: 1.25; }

/* --- Enlace a la circular de la jornada en #pagar (SPRINT-185): una línea con el aspecto de un aviso --- */
a.pay-circular { color: var(--tx); text-decoration: none; align-items: center; min-height: 48px; }
a.pay-circular span { flex: 1; font-weight: 500; }
a.pay-circular svg:last-child { margin-left: auto; color: var(--t2); }
a.pay-circular:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* --- Ayuda del código de referencia en #pagar (aviso v2 de Legal) --- */
.pay-ref-ayuda { margin: 4px 20px 8px; font-size: 13px; line-height: 1.5; color: var(--t2); }
.pay-ref-donde { margin: 0 20px 12px; font-size: 13px; color: var(--t2); }
.pay-ref-donde summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent-t); font-weight: 600; }
.pay-ref-donde summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.pay-ref-donde-txt { white-space: pre-line; line-height: 1.55; padding-bottom: 4px; }

/* --- Fase 1 del ID: aviso suave bajo el campo (informativo, no es un error) --- */
.pay-id-aviso { margin: -4px 20px 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--t2); background: var(--sf); border: 1px solid var(--ln); border-left: 3px solid var(--warn); border-radius: 8px; }
.pay-id-aviso:empty { display: none; }
#act-id-refuerzo { margin-top: 8px; }
.acc .pay-id-aviso { margin-left: 0; margin-right: 0; }

/* --- Tarjeta de «quién transfiere» en la pantalla de cuentas (T5, SPRINT-LEGAL-APROBADO S1) ---
   Informa y NO bloquea: va fuera del formulario, debajo de las cuentas. Fiel a la sección 3 de las maquetas aprobadas el 25/10/2026:
   nota con ícono «i», texto de 13.5 px, enlace «Más información» subrayado y botones de 44 px de alto como mínimo. Solo usa los tokens del portal. */
.av-cuentas-wrap[hidden] { display: none; }
.av-cuentas-wrap { margin: 14px 0 0; }

.av-cuentas {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ln);
  border-radius: 14px;
  background: var(--sf);
  color: var(--tx);
}

.av-cuentas-i {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t2);
  color: var(--bg);
  font: 700 14px/1 var(--font-body);
}

.av-cuentas-c { flex: 1; min-width: 0; }
.av-cuentas-t { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.av-cuentas-t + .av-cuentas-t { margin-top: 10px; }
.av-cuentas-t a { color: var(--accent-t); text-decoration: underline; text-underline-offset: 3px; }
.av-cuentas-larga:focus { outline: none; }
.av-cuentas-larga:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 4px; }

.av-cuentas-enlace {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--accent-t);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.av-cuentas-enlace-solo { display: inline-flex; align-items: center; min-height: 44px; }
.av-cuentas-enlace:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }
.av-cuentas-re { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }

.av-cuentas-b { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.btn.g.av-cuentas-btn { flex: 0 1 auto; height: auto; min-height: 44px; padding: 0 18px; }
.av-cuentas-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }