/* ============================================================
   PlanSí Core · onboarding.css — cuestionario a pantalla completa (#onboarding)
   y perfil real (#perfil). Tokens de la landing (informe 06 §2 y §5.1): crema de base,
   berry oscuro #7A0B44 para texto de acento, berry profundo #A9105A para botones,
   berry brillante #E11D74 solo en rellenos y foco, pasteles en ciclo, Fraunces + Inter.
   Si styles.css ya define --berry-osc, --berry-cta, --blanco o --pastel-*, se usan esos.
   Móvil primero (gutter de 16 px), objetivos táctiles de 44-48 px, inputs de 16 px
   (sin zoom en iOS), foco visible y movimiento reducido.
   ============================================================ */

.onb,
.perfil-real {
  --onb-crema: var(--bg-crema, #F7F2E9);
  --onb-hueso: var(--pastel-hueso, #EFE7D8);
  --onb-blanco: var(--blanco, #FFFDF8);
  --onb-tinta: var(--tinta, #222A1E);
  --onb-tinta-2: var(--tinta-suave, #4A5244);
  --onb-berry-osc: var(--berry-osc, #7A0B44);   /* texto de acento: 9,6:1 sobre crema */
  --onb-berry-cta: var(--berry-cta, #A9105A);   /* fondo de botones: blanco encima 7,2:1 */
  --onb-berry: var(--salvia, #E11D74);          /* solo rellenos, barra y foco */
  --onb-rosa: var(--pastel-rosa, #FADCEB);
  --onb-durazno: var(--pastel-durazno, #F6DDC8);
  --onb-mantequilla: var(--pastel-mantequilla, #F4E9C9);
  --onb-oro: var(--mostaza, #F5B301);
  --onb-linea: #DCD2BF;
  --onb-sh-1: 0 2px 10px rgba(34, 42, 30, .07);
  --onb-sh-2: 0 18px 44px -14px rgba(34, 42, 30, .22);
  --onb-r-lg: 24px;
  --onb-r-md: 16px;
  --onb-r-sm: 12px;
  --onb-serif: var(--font-serif, "Fraunces", Georgia, serif);
  --onb-sans: var(--font-sans, "Inter", system-ui, "Segoe UI", sans-serif);
}

/* ---------- contenedor a pantalla completa ---------- */
body.onb-abierto { overflow: hidden; }

.onb {
  position: fixed;
  inset: 0;
  z-index: 3100; /* encima de la barra de pestañas (60) y del acceso (3000) */
  background: linear-gradient(180deg, var(--onb-crema) 0%, var(--onb-hueso) 100%);
  color: var(--onb-tinta);
  font-family: var(--onb-sans);
  line-height: 1.65;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Al enfocar un campo, el navegador lo deja por encima de la barra fija «Atrás/Siguiente» y bajo
     la cabecera, en vez de tapado. */
  scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  scroll-padding-top: 72px;
}
.onb:not([hidden]) { display: block !important; }
/* Si la pantalla de acceso se abre (sesión cerrada, sin acceso), manda ella: el cuestionario no
   queda encima (su z-index es mayor) ni se puede enfocar mientras tanto. */
body.auth-open .onb { visibility: hidden; }
.onb[hidden],
.onb [hidden],
.perfil-real [hidden] { display: none !important; }

.onb__panel {
  width: 100%;
  max-width: 600px;
  min-height: 100%;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
  display: flex;
  flex-direction: column;
}

.onb__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}
.onb__marca {
  margin: 0;
  font-family: var(--onb-serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--onb-berry-osc);
}

/* ---------- avance ---------- */
.onb__avance { margin: 4px 0 18px; }
.onb__pista {
  height: 8px;
  border-radius: 999px;
  background: rgba(122, 11, 68, .10);
  overflow: hidden;
}
.onb__relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--onb-berry-cta), var(--onb-berry));
  transition: width .45s ease;
}
.onb__paso-n {
  margin: 8px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--onb-tinta-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- formulario y pasos ---------- */
.onb__form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.onb__cuerpo {
  flex: 1;
  padding-bottom: 12px;
  animation: onbEntra .35s ease both;
}
@keyframes onbEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.onb-ceja {
  display: inline-block;
  margin: 0 0 12px;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: var(--onb-rosa);
  color: var(--onb-berry-osc);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.onb__titulo {
  margin: 0 0 .4em;
  font-family: var(--onb-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 6.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--onb-tinta);
  text-wrap: balance;
}
/* El título recibe el foco por programa al cambiar de paso (lo anuncia el lector de
   pantalla); no es un control, así que no lleva anillo. El siguiente Tab va al primer campo. */
.onb__titulo:focus,
.onb__titulo:focus-visible { outline: none; }
.onb__lead {
  margin: 0 0 20px;
  font-size: 1.02rem;
  color: var(--onb-tinta-2);
  max-width: 36rem;
}
.onb-subtitulo {
  margin: 26px 0 10px;
  font-family: var(--onb-serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--onb-tinta);
}

.onb-lista {
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.onb-lista li {
  position: relative;
  padding: 14px 16px 14px 44px;
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  border: 1px solid var(--onb-linea);
  box-shadow: var(--onb-sh-1);
}
.onb-lista li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--onb-berry);
}
.onb-lista li:nth-child(2)::before { background: var(--onb-berry-cta); }
.onb-lista li:nth-child(3)::before { background: var(--onb-oro); }

.onb-legal {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--onb-tinta-2);
}

/* ---------- campos ---------- */
.onb-campo {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.onb-campo__leyenda {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--onb-tinta);
}
.onb-campo__ayuda {
  margin: -2px 0 10px;
  font-size: .9rem;
  color: var(--onb-tinta-2);
}
.onb-ops { display: grid; gap: 10px; }

/* Opción (radio o casilla) como tarjeta: el control nativo queda visible y accesible. */
.onb-op {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--onb-linea);
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.onb-op:hover { border-color: var(--onb-berry-cta); box-shadow: var(--onb-sh-1); }
.onb-op input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--onb-berry-cta);
  cursor: pointer;
}
.onb-op:has(input:checked) {
  border-color: var(--onb-berry-cta);
  background: var(--onb-rosa);
}
.onb-op:has(input:focus-visible) {
  outline: 3px solid var(--onb-berry);
  outline-offset: 3px;
}
/* Con :has() el anillo va en la tarjeta; sin :has() se conserva el del control nativo. */
@supports selector(:has(*)) {
  .onb-op input:focus-visible { outline: none; }
}
/* Opción deshabilitada (p. ej. la autorización de salud sin política publicada): se ve apagada y
   no reacciona al pasar el mouse. --onb-tinta-2 sobre blanco mantiene el contraste sobre 4,5:1. */
.onb-op:has(input:disabled),
.onb-op input:disabled { cursor: not-allowed; }
.onb-op:has(input:disabled):hover { box-shadow: none; }
.onb-op:has(input:disabled) .onb-op__titulo { color: var(--onb-tinta-2); font-weight: 500; }
/* La ayuda que sigue a una opción (la pastilla de términos, la nota bajo la casilla de salud) no se
   monta sobre el borde de la tarjeta. */
.onb-op + .onb-campo__ayuda { margin-top: 8px; }
.onb-op__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-op__titulo { font-weight: 600; color: var(--onb-tinta); }
.onb-op__detalle { font-size: .9rem; color: var(--onb-tinta-2); }

/* Variante en chips (restricciones, equipo). */
.onb-chips .onb-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-chips .onb-op {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  align-items: center;
}
.onb-chips .onb-op input { width: 20px; height: 20px; margin: 0; }
.onb-chips .onb-op__detalle { display: none; }

.onb-insignia {
  display: inline-block;
  margin-left: 6px;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--onb-mantequilla);
  color: var(--onb-berry-osc);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

.onb-separador {
  height: 1px;
  margin: 4px 0;
  background: var(--onb-linea);
}

.onb-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--onb-linea);
  border-radius: var(--onb-r-sm);
  background: var(--onb-blanco);
  color: var(--onb-tinta);
  font: inherit;
  font-size: 16px; /* evita el zoom de iOS al enfocar */
  line-height: 1.4;
}
textarea.onb-input { resize: vertical; min-height: 88px; }
.onb-input:focus-visible {
  outline: 3px solid var(--onb-berry);
  outline-offset: 2px;
  border-color: var(--onb-berry-cta);
}
.onb-input[aria-invalid="true"],
.onb-campo[aria-invalid="true"] .onb-op { border-color: var(--onb-berry-osc); }

/* Con 180 px por columna el campo de hora nativo muestra «6:30 a. m.» completo: en celular queda
   una columna y en pantallas anchas dos. */
.onb-horas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.onb-hora .onb-input { padding-left: 12px; padding-right: 8px; }
.onb-hora {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--onb-linea);
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  font-weight: 600;
  font-size: .92rem;
}
.onb-hora:nth-child(4n+1) { background: var(--onb-rosa); }
.onb-hora:nth-child(4n+2) { background: var(--onb-durazno); }
.onb-hora:nth-child(4n+3) { background: var(--onb-mantequilla); }
.onb-hora:nth-child(4n) { background: var(--onb-hueso); }

.onb-consentimiento {
  padding: 16px;
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  border: 1px solid var(--onb-linea);
}
.onb-consentimiento .onb-op { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
.onb-consentimiento .onb-op:has(input:checked) { background: transparent; }

.onb-error {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--onb-berry-osc);
  color: var(--onb-berry-osc);
  font-weight: 600;
  font-size: .92rem;
}

/* ---------- avisos ---------- */
.onb-aviso {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--onb-berry-cta);
  border-radius: 8px;
  background: var(--onb-rosa);
  color: var(--onb-tinta);
}
.onb-aviso p { margin: 0; }
.onb-aviso--info { background: var(--onb-mantequilla); border-left-color: var(--onb-oro); }
.onb-aviso--salud { font-weight: 600; }

.onb-pendiente {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--onb-mantequilla);
  color: #7A5A10;
  font-size: .85rem;
  font-weight: 600;
}

/* ---------- resumen ---------- */
.onb-resumen {
  margin: 0;
  display: grid;
  gap: 8px;
}
.onb-resumen__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  border: 1px solid var(--onb-linea);
}
.onb-resumen__fila dt {
  grid-column: 1;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--onb-berry-cta);
}
.onb-resumen__fila dd { grid-column: 1; margin: 0; color: var(--onb-tinta); }
.onb-resumen__cambiar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.onb-viene {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: viene;
  display: grid;
  gap: 12px;
}
.onb-viene li {
  counter-increment: viene;
  position: relative;
  padding-left: 48px;
  min-height: 36px;
}
.onb-viene li::before {
  content: counter(viene);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--onb-berry);
  color: #fff;
  font-family: var(--onb-serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- acciones ---------- */
.onb__nota {
  min-height: 1.4em;
  margin: 0 0 6px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--onb-berry-osc);
}
.onb__acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 242, 233, .96);
  border-top: 1px solid var(--onb-linea);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.onb__acciones .onb-btn--primario { flex: 1; }
.onb__acciones .onb-btn--fantasma { flex: none; }

.onb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--onb-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.onb-btn--primario { background: var(--onb-berry-cta); border-color: var(--onb-berry-cta); color: #fff; }
.onb-btn--primario:hover { background: var(--onb-berry-osc); border-color: var(--onb-berry-osc); transform: translateY(-2px); box-shadow: var(--onb-sh-2); }
.onb-btn--fantasma { background: transparent; border-color: var(--onb-berry-osc); color: var(--onb-berry-osc); }
.onb-btn--fantasma:hover { background: var(--onb-rosa); }
.onb-btn--texto {
  min-height: 44px;
  padding: .5rem .8rem;
  background: transparent;
  color: var(--onb-berry-osc);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb-btn:focus-visible,
.onb-enlace:focus-visible,
.perfil-real button:focus-visible {
  outline: 3px solid var(--onb-berry);
  outline-offset: 3px;
}

.onb-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--onb-berry-osc);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.onb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- sección #perfil (perfil real) ---------- */
.perfil-real h2:focus,
.perfil-real h2:focus-visible { outline: none; }
.perfil-real__lead { color: var(--onb-tinta-2); margin: 0 0 16px; }
.perfil-real__lista,
.perfil-real__datos {
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.perfil-real__fila {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--onb-linea);
}
.perfil-real__fila dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--onb-berry-cta);
}
.perfil-real__fila dd { margin: 0; color: var(--onb-tinta); overflow-wrap: anywhere; }
.perfil-real__datos {
  padding: 4px 16px;
  border-radius: var(--onb-r-md);
  background: var(--onb-blanco);
  border: 1px solid var(--onb-linea);
}
.perfil-real__datos .perfil-real__fila:last-child { border-bottom: 0; }
.perfil-real__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
}
.perfil-real__confirmar {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--onb-berry-cta);
  border-radius: 8px;
  background: var(--onb-rosa);
}
.perfil-real__confirmar p { margin: 0 0 6px; }
.perfil-real__estado {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-weight: 600;
  color: var(--onb-berry-osc);
}

/* ---------- pantallas medianas y grandes ---------- */
@media (min-width: 640px) {
  .onb__panel { padding-left: 24px; padding-right: 24px; }
  .onb__acciones { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .onb__cuerpo { padding-top: 8px; }
  .onb-campo[data-campo="objetivo"] .onb-ops,
  .onb-campo[data-campo="actividad"] .onb-ops,
  .onb-campo[data-campo="salud"] .onb-ops { grid-template-columns: 1fr 1fr; }
  .onb-campo[data-campo="salud"] .onb-separador { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .perfil-real__fila { grid-template-columns: 1fr; }
  .onb-resumen__fila { grid-template-columns: 1fr; }
  .onb-resumen__cambiar { grid-column: 1; grid-row: auto; justify-self: start; }
  .perfil-real__acciones .onb-btn { width: 100%; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .onb__cuerpo { animation: none; }
  .onb__relleno,
  .onb-op,
  .onb-btn { transition: none; }
  .onb-btn--primario:hover { transform: none; }
}

/* ============================================================
   BLOQUE 3 · Recuadro del avatar en #perfil + diálogo de fotos (app-avatar.js)
   Reutiliza los tokens y los botones (.onb-btn) del cuestionario. Sin estilos en línea.
   ============================================================ */

/* ---------- recuadro dentro de #perfil (hereda los tokens de .perfil-real) ---------- */
.avatar-recuadro {
  margin: 16px 0;
  padding: 16px;
  background: var(--onb-blanco);
  border: 1px solid var(--onb-linea);
  border-radius: var(--onb-r-md);
  box-shadow: var(--onb-sh-1);
}
.avatar-recuadro__cara {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.avatar-circulo {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--onb-rosa);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-circulo--iniciales span {
  font-family: var(--onb-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--onb-berry-osc);
  line-height: 1;
}
.avatar-recuadro__cuerpo { flex: 1 1 auto; min-width: 0; }
.avatar-recuadro__saludo {
  margin: 0 0 2px;
  font-family: var(--onb-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--onb-tinta);
}
.avatar-recuadro__texto {
  margin: 0 0 10px;
  font-size: .92rem;
  color: var(--onb-tinta-2);
  line-height: 1.55;
}
.avatar-recuadro__nota {
  margin: 0;
  font-size: .86rem;
  color: var(--onb-tinta-2);
}
.avatar-recuadro__btn { min-height: 44px; }

.avatar-variantes__titulo {
  margin: 12px 0 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--onb-tinta-2);
}
.avatar-variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avatar-variante {
  padding: 0;
  border: 2px solid var(--onb-linea);
  border-radius: var(--onb-r-sm);
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.avatar-variante--sel { border-color: var(--onb-berry-cta); }
.avatar-variante__img {
  display: block;
  width: 52px;
  height: 52px;
  background-size: cover;
  background-position: center;
}
.avatar-variante:focus-visible { outline: 3px solid var(--onb-berry); outline-offset: 2px; }

/* ---------- diálogo de fotos (a nivel de body: define sus propios tokens) ---------- */
body.avatar-dlg-abierto { overflow: hidden; }
.avatar-dlg {
  --onb-crema: var(--bg-crema, #F7F2E9);
  --onb-blanco: var(--blanco, #FFFDF8);
  --onb-tinta: var(--tinta, #222A1E);
  --onb-tinta-2: var(--tinta-suave, #4A5244);
  --onb-berry-osc: var(--berry-osc, #7A0B44);
  --onb-berry-cta: var(--berry-cta, #A9105A);
  --onb-berry: var(--salvia, #E11D74);
  --onb-rosa: var(--pastel-rosa, #FADCEB);
  --onb-linea: #DCD2BF;
  --onb-r-md: 16px;
  --onb-r-sm: 12px;
  --onb-sh-2: 0 18px 44px -14px rgba(34, 42, 30, .22);
  --onb-serif: var(--font-serif, "Fraunces", Georgia, serif);
  --onb-sans: var(--font-sans, "Inter", system-ui, "Segoe UI", sans-serif);
  position: fixed;
  inset: 0;
  z-index: 3200; /* encima del perfil y de la barra de pestañas */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(34, 42, 30, .42);
  font-family: var(--onb-sans);
  color: var(--onb-tinta);
  -webkit-overflow-scrolling: touch;
}
.avatar-dlg[hidden] { display: none; }
.avatar-dlg__panel {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--onb-crema);
  border-radius: var(--onb-r-md) var(--onb-r-md) 0 0;
  box-shadow: var(--onb-sh-2);
  padding: 16px;
}
.avatar-dlg__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.avatar-dlg__titulo {
  margin: 0;
  font-family: var(--onb-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.avatar-dlg__lead { margin: 6px 0 12px; font-size: .95rem; color: var(--onb-tinta-2); line-height: 1.55; }
.avatar-dlg__aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--onb-rosa);
  border-radius: var(--onb-r-sm);
  font-size: .88rem;
  line-height: 1.5;
}
.avatar-dlg__aviso p { margin: 0; }
.avatar-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-size: .9rem;
  line-height: 1.5;
}
.avatar-check input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; }
.avatar-dlg__campo { margin: 0 0 12px; }
.avatar-dlg__file { display: inline-block; margin-bottom: 10px; cursor: pointer; }
/* El input de archivo está oculto (sr-only) pero es enfocable por teclado: cuando recibe foco,
   el label-botón que lo dispara muestra el mismo anillo de foco que el resto de botones. */
.avatar-sr:focus-visible + .avatar-dlg__file,
.avatar-sr:focus + .avatar-dlg__file { outline: 3px solid var(--onb-berry); outline-offset: 3px; }
.avatar-dlg__sub { margin: 4px 0 6px; font-size: .86rem; font-weight: 600; color: var(--onb-tinta-2); }
.avatar-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.avatar-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-thumb { position: relative; width: 72px; height: 72px; }
.avatar-thumb__img {
  display: block;
  width: 72px; height: 72px;
  border-radius: var(--onb-r-sm);
  background-color: var(--onb-rosa);
  background-size: cover;
  background-position: center;
}
/* Área táctil de 44x44 (mínimo accesible) con el círculo visible de 26px centrado por ::before. */
.avatar-thumb__x {
  position: absolute;
  top: -12px; right: -12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-thumb__x::before {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--onb-berry-cta);
  z-index: -1;
}
.avatar-dlg__estado { margin: 10px 0; font-size: .9rem; color: var(--onb-berry-osc); min-height: 1.2em; }
.avatar-dlg__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 640px) {
  .avatar-dlg { align-items: center; padding: 24px; }
  .avatar-dlg__panel { border-radius: var(--onb-r-md); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-recuadro__btn:hover { transform: none; }
}