.datos-seccion { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; background: var(--card-bg); backdrop-filter: var(--card-blur); transition: all 0.3s var(--ease-sheet); box-shadow: 0 2px 8px var(--black-sm); }
.datos-seccion:focus-within { border-color: var(--brand); box-shadow: 0 4px 12px var(--brand-soft); }
.datos-seccion-titulo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; font-weight: 800; font-size: 0.88rem;
  cursor: pointer; background: var(--surface-2); transition: background 0.3s; color: var(--text);
}
.datos-seccion-titulo:hover { background: var(--surface-3); }
.datos-seccion-titulo .sec-icon { font-size: 1.2rem; margin-right: 10px; }
.datos-seccion-titulo .sec-chevron { color: var(--muted); font-size: 1.1rem; transition: transform 0.4s var(--ease-sheet); }
.datos-seccion-titulo.abierta .sec-chevron { transform: rotate(180deg); color: var(--brand); }
.datos-seccion-body {
  padding: 0 20px; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s var(--ease-sheet), padding 0.3s ease, opacity 0.3s ease;
}
[id^="grp-res-"] {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.4s var(--ease-sheet), opacity 0.3s ease;
}
.datos-seccion-body.abierta { max-height: 2500px; padding: 20px; opacity: 1; border-top: 1px solid var(--disabled-bg); }

/* ─── DATE PICKER (Mis Datos — ddp-*) ─────────────────────────────────── */
#ddp-modal {
  position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center;
  justify-content: center; background: var(--overlay-light); backdrop-filter: blur(4px);
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
#ddp-modal.active { opacity: 1; pointer-events: all; }
#ddp-modal .ddp-card {
  background: var(--white); border-radius: 28px; width: 100%; max-width: 340px;
  overflow: hidden; transform: scale(0.92) translateY(12px); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
#ddp-modal.active .ddp-card { transform: scale(1) translateY(0); opacity: 1; }
.ddp-header { padding: 24px 24px 8px; }
.ddp-header-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--placeholder-color); margin-bottom: 4px; }
.ddp-selected-date { font-size: 28px; font-weight: 400; color: var(--neutral-dark); line-height: 1.2; }
.ddp-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; }
.ddp-nav-chips { display: flex; gap: 2px; align-items: center; }
.ddp-nav-label { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 99px; background: transparent; border: none; font-size: 15px; font-weight: 700; color: var(--neutral-dark); cursor: pointer; font-family: inherit; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.ddp-nav-label:active { background: var(--brand-08); }
.ddp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 4px 12px 8px; }
.ddp-day-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--placeholder-color); padding: 6px 0; }
.ddp-day { aspect-ratio: 1; border-radius: 50%; border: none; background: transparent; font-size: 14px; color: var(--neutral-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.ddp-day:hover { background: var(--brand-08); }
.ddp-day.ddp-sel { background: var(--brand); color: var(--white); font-weight: 700; }
.ddp-day.ddp-other { color: var(--text-ghost); }
.ddp-day.ddp-today:not(.ddp-sel) { border: 1.5px solid var(--brand); color: var(--brand); }
.ddp-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px 28px; }
.ddp-btn { padding: 13px 24px; border-radius: 9999px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em; }
.ddp-btn-cancel { background: transparent; color: var(--neutral-gray); }
.ddp-btn-ok { background: var(--brand); color: var(--white); }
.ddp-year-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px 20px; max-height: 220px; overflow-y: scroll; }
.ddp-year-btn { padding: 14px 4px; border-radius: 14px; border: none; font-size: 15px; color: var(--neutral-dark); background: transparent; cursor: pointer; text-align: center; font-family: inherit; }
.ddp-year-btn.ddp-year-sel { background: var(--brand); color: var(--white); font-weight: 700; }
.ddp-month-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 8px 16px 16px; }
.ddp-month-btn { padding: 14px 6px; border: none; border-radius: 12px; background: transparent; color: var(--neutral-dark); font-size: 14px; cursor: pointer; text-align: center; transition: background 0.15s; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ddp-month-btn.ddp-month-sel { background: var(--brand); color: var(--white); font-weight: 700; }

@media (prefers-color-scheme: dark) {
  #ddp-modal .ddp-card { background: var(--dk-overlay-97) !important; }
  .ddp-selected-date, .ddp-nav-label, .ddp-day, .ddp-year-btn, .ddp-month-btn { color: var(--text) !important; }
  .ddp-day.ddp-other { color: var(--dk-text-ghost) !important; }
  .ddp-btn-cancel { color: var(--muted) !important; }
  #modal-permisos > div { background: var(--dk-overlay-97) !important; }
  #modal-permisos div[style*="border-top:1px"] { border-color: var(--border) !important; }
  #modal-permisos div[style*="font-weight:600"] { color: var(--text) !important; }
  #modal-permisos div[style*="font-weight:800"] { color: var(--text) !important; }
  #modal-permisos p { color: var(--muted) !important; }
  #modal-pin-config > div { background: var(--dk-overlay-97) !important; }
  #modal-pin-config label { color: var(--text) !important; }
  #mp-pin-input { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
  #modal-eliminar-cuenta input { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
  #modal-eliminar-cuenta .mec-nombre { color: var(--brand) !important; }
  #modal-edad-bloqueo-card { background: var(--dk-overlay-97) !important; }
}

/* ── Ajustes del perfil ──────────────────────────────── */
@media (max-width: 600px) {
  #s-datos-card > .aj-group:first-child { margin-top:10px; }
}
/* "Foto de perfil" (#s-datos y aj-sub-perfil "Mi perfil"): fila más de la
   lista, ver MANIFEST "Cambios recientes" — antes un hero grande aparte con
   el avatar en tamaño lg/md, revertido por decisión de diseño. El avatar
   circular (.avatar-pill, css/global.css) se achica a 46×46 para igualar a
   .aj-icon/.aj-dato-icon (mismo tamaño que el resto de íconos de fila). */
.aj-avatar-row { width:46px; height:46px; }

.aj-group { margin-bottom: 10px; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.aj-row { display:flex; align-items:center; gap:12px; padding:14px; min-height:72px; cursor:pointer; transition:background 0.15s; border-bottom:1px solid var(--border-softest,var(--border-light)); }
.aj-row:last-child { border-bottom:none; }
.aj-row:hover { background:var(--surface-light); }
.aj-row:active { background:var(--brand-20); }
.aj-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.aj-icon .material-symbols-outlined { font-size:1.375rem; }
.aj-icon-orange { background:var(--brand-light); color:var(--brand); }
.aj-icon-blue { background:var(--info-bg); color:var(--info); }
.aj-icon-purple { background:var(--purple-bg); color:var(--purple); }
.aj-icon-amber { background:var(--amber-light); color:var(--amber-dark); }
.aj-icon-green { background:var(--success-bg); color:var(--success); }
.aj-icon-red { background:var(--danger-bg); color:var(--danger); }
.aj-icon-muted { background:var(--surface-light); color:var(--muted); }
.aj-content { flex:1; min-width:0; }
.aj-title { font-size:0.90rem; font-weight:700; color:var(--text); }
.aj-value { font-size:0.76rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aj-chevron { color:var(--border-light); font-size:1rem; }

.aj-app-rows { display:flex; flex-direction:column; gap:0; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.aj-app-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border-softest,var(--border-light)); }
.aj-app-row:last-child { border-bottom:none; }
.aj-app-btn { background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; display:flex; align-items:center; }

.aj-btn-delete { width:100%; padding:13px; background:var(--danger-bg); border:1px solid var(--danger); border-radius:12px; color:var(--danger); font-size:0.88rem; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; }

/* Shared axis X (Material Design 3) — piloto de transición para aj-sub-*, ver
   irAjSub()/cerrarAjSub() (js/perfil.js) y "Cambios recientes". Reemplaza el
   animation:smoothSlideUp anterior (entrada vertical, sin control de timing
   entre 2 elementos) por un transition de transform/opacity horizontal,
   coordinado por JS entre el panel que entra/sale y #s-datos-card (el fondo,
   ver esa regla más abajo) — mismo idiom que ya usan los bottom sheets de la
   app (estado inicial inline, doble rAF, transition CSS, setTimeout de
   limpieza), no animation/keyframes por class-toggle. */
/* `bottom` propio (ver "Cambios recientes" -- antes `inset:0`, hasta el
   borde real de la pantalla) en vez del acceso directo: `.aj-sub` es un
   overlay `position:fixed` montado ENCIMA de `#s-datos` (ver comentario de
   arriba) mientras la nav inferior sigue de fondo, ya visible con 'ajustes'
   resaltado (la pantalla activa real nunca deja de ser 's-datos', ver
   `irAjSub()`/js/perfil.js) -- con `inset:0` completo, el panel se pintaba
   por encima de esa franja entera (`z-index:950` > `.app-bottom-nav:900`)
   y la tapaba del todo, aunque siguiera técnicamente visible en el DOM.
   Mismo cálculo que usan los `.cta-footer-fixed` que sí conviven con la nav
   (`#cta-footer-s-home`/`#cta-footer-s4`, css/estilos.css). */
.aj-sub { display:none; position:fixed; top:0; right:0; left:0; bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); background:var(--bg); z-index:950; flex-direction:column; overflow:hidden; transform:translateX(100%); opacity:0.85; transition:transform 0.32s var(--ease-axis), opacity 0.32s var(--ease-axis); }
.aj-sub.activa { display:flex; }
/* Fondo que "retrocede" mientras un aj-sub-* entra/sale por encima — dedicado
   a propósito (no .card genérico ni .pantalla#s-datos, que ya tiene su propia
   animation:smoothSlideUp vía .pantalla.activa) para no pisar esa lógica ni
   arriesgar que .pantalla se vuelva containing block de algo inesperado
   mientras el transform está activo (ver regla documentada en MANIFEST sobre
   transform/backdrop-filter en .pantalla/.card). Verificado que #s-datos no
   tiene ningún descendiente position:fixed propio (los que existían — bottom
   sheets, cta-footer — ya son hijos directos de <body>, ver esa convención). */
#s-datos-card { transition: transform 0.32s var(--ease-axis), opacity 0.32s var(--ease-axis); }
.aj-sub-inner { overflow-y:auto; flex:1; padding:var(--space-screen); }

.aj-pills-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.aj-pill { display:inline-flex; align-items:center; padding:7px 16px; border-radius:20px; font-size:0.78rem; font-weight:700; cursor:pointer; border:1.5px solid transparent; background:var(--brand-20); color:var(--muted); transition:all 0.15s; user-select:none; }
/* Pill "Otro" con texto propio (Enfermedad/Antecedentes/Dieta, ver saludToggleOtro
   y _saludSelUnica en js/perfil.js): .aj-pill-otro-txt trunca con ellipsis si el
   texto escrito es largo; la X (.aj-pill-otro-x) solo se muestra una vez que el
   pill quedó "lleno" (.aj-pill-otro-lleno), para borrar sin tener que reabrir el
   textarea. */
.aj-pill-otro-txt { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-pill-otro-x { display: none; font-size: 14px !important; margin-left: 6px; line-height: 1; }
.aj-pill-otro-lleno .aj-pill-otro-x { display: inline-flex; }
.aj-pill.activa { background:var(--brand); color:var(--white); border-color:var(--brand); }
.aj-pill.activa-outline { background:var(--brand-light); color:var(--brand); border-color:var(--brand); }
/* Variante de navegación, no de selección — a diferencia de .aj-pill normal
   (seleccionable, toggleable con .activa/.activa-outline), esta es para links
   que navegan a otro lado (ej. "Ver historial de reservas"/"Editar mi perfil"
   del empty-state de home, ver js/home.js) y nunca tienen estado "elegido".
   Hereda forma/tamaño de .aj-pill (usar junto, class="aj-pill aj-pill-link"),
   solo cambia el tratamiento visual a algo más sutil: borde en vez de relleno,
   sin :active/toggle. */
.aj-pill-link { background:transparent; border-color:var(--border-light); color:var(--muted); }
.aj-pill-link:hover { background:var(--brand-20); color:var(--brand); border-color:var(--brand); }
.aj-pill.no-disponible { text-decoration:line-through; color:var(--danger); background:var(--danger-bg); border-color:var(--danger-bdr); cursor:not-allowed; }
.aj-pill.talla-actual { border-color:var(--brand); }
.sheet-talla-pill-ancha { grid-column: 1 / -1; }

/* Wizard de "Ficha de salud" (aj-sub-salud) — mismo motor visual que
   .insc-prog/.insc-prog-dot/.insc-step de inscripcion/inscripcion.css
   (valores idénticos, copiados; no se pudo reusar la clase original porque
   vive en una hoja de estilos que index.html no importa). */
.salud-prog { display:flex; align-items:center; justify-content:center; gap:5px; padding:4px 0 18px; }
.salud-prog-dot { width:7px; height:7px; border-radius:50%; background:var(--border); transition:all 0.3s; }
.salud-prog-dot.done { background:var(--brand); opacity:0.7; }
.salud-prog-dot.active { background:var(--brand); width:20px; border-radius:4px; }
.salud-paso { display:none; }
.salud-paso.activo { display:block; animation:smoothSlideUp 0.35s var(--ease-sheet); }
.salud-paso h2 { font-size:1.15rem; font-weight:800; margin-bottom:8px; line-height:1.3; color:var(--text); }
.salud-paso p { font-size:0.85rem; color:var(--muted); margin-bottom:16px; line-height:1.5; }
.salud-paso textarea, .salud-paso input[type="text"] { width:100%; }

.aj-selector-btn { width:100%; padding:13px 16px; background:var(--surface-2); border:0; border-radius:12px; color:var(--text); font-size:0.88rem; font-family:inherit; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:border-color 0.15s; }
.aj-selector-btn:hover { border-color:var(--brand); }

/* ── Fila de dato (Ajustes del perfil — patrón nuevo) ─── */
.aj-dato-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 72px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
}
.aj-dato-row:last-child { border-bottom: none; }
.aj-dato-row:active { background: var(--brand-20); }
.aj-dato-row.no-tap { cursor: default; }
.aj-dato-row.no-tap:active { background: none; }
.aj-dato-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aj-dato-icon .material-symbols-outlined { font-size: 1.375rem; color: var(--brand); }
.aj-dato-texts { flex: 1; min-width: 0; }
.aj-dato-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-60);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1px;
}
.aj-dato-val {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aj-dato-val.vacio {
  color: var(--text-faint);
  font-style: italic;
  font-weight: 400;
}
.aj-dato-lock .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-faint);
}
.aj-dato-chevron .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-faint);
}
.aj-sec-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-60);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 14px 0 6px;
}
#aj-emerg2-wrap.emerg2-anim {
  animation: smoothSlideUp 0.4s var(--ease-sheet);
}
.aj-btn-agregar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--brand-20);
  border: 1.5px dashed var(--brand-30);
  border-radius: 10px;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
}
.aj-btn-agregar .material-symbols-outlined { font-size: 18px; }

/* .privacy-row (css/ui.css) es su propia card (fondo/borde/radius) — usada
   solo acá (verificado por grep), así que dentro de .aj-group se le quita
   ese look propio para que se lea como una fila más del grupo, no una
   card anidada dentro de otra. Conserva su padding horizontal propio
   (16px), que dentro de .aj-group hace falta ya que .aj-dato-row no
   tiene ninguno (se apoya en el padding de .aj-sub-inner, que .aj-group
   ya no expone a sus filas). */
.aj-group .privacy-row {
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--border);
  transition: background 0.15s;
}
.aj-group .privacy-row:last-child { border-bottom: none; }
.aj-group .privacy-row:hover { box-shadow: none; }

/* Google Places Autocomplete inyecta su propio dropdown (.pac-container) al
   final de <body> con z-index:1000 por defecto — por debajo de #aj-sheet-places
   (9601) y su overlay (9600), lo que hacía que los toques en una sugerencia
   fueran interceptados por el overlay en vez de seleccionar el lugar (bug real,
   encontrado y confirmado con Playwright: clicks en .pac-item resueltos contra
   el overlay). */
.pac-container { z-index: 9700 !important; }

/* Pin fijo del mapa interactivo de Dirección (aj-sub-direccion): el mapa se
   arrastra debajo, el pin queda anclado al centro del contenedor (patrón
   Uber/Cabify) — no es un google.maps.Marker. */
.aj-mapa-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
  pointer-events: none; color: var(--brand);
  filter: drop-shadow(0 3px 4px var(--black-35));
}
.aj-mapa-pin .material-symbols-outlined { font-size: 2.4rem; font-variation-settings: 'FILL' 1; }