/* Rock Camp — zona de la familia.
   Portada, cada inscripción y el pago. Se carga encima de base.css solo
   en esas páginas (lo decide _marco.php). Los colores son los de la marca:
   el naranja de siempre y el turquesa del logo. */

body.familia {
  --turquesa:       #2cb1af;
  --turquesa-osc:   #1f8987;
  --naranja-suave:  #fdeee5;
  --turquesa-suave: #e3f5f4;
  --verde:          #1f8a4c;
  --verde-suave:    #e6f4ec;
  --rojo-suave:     #fcebea;
  --papel:          #ffffff;
  --fondo-calido:   #f5f3f0;
  --sombra:         0 1px 2px rgba(28, 28, 30, .05), 0 4px 16px rgba(28, 28, 30, .06);
  --sombra-alta:    0 2px 4px rgba(28, 28, 30, .06), 0 12px 32px rgba(28, 28, 30, .12);
  --radio:          18px;

  background: var(--fondo-calido);
}

body.familia .contenido {
  max-width: 68rem;
  margin: 1.5rem auto 3rem;
}
body.familia .pie { max-width: 68rem; }

/* ── Iconos ────────────────────────────────────────────────────────── */

.icono      { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.icono-l    { width: 1.6rem; height: 1.6rem; }
.icono-xl   { width: 3rem;   height: 3rem; }
.icono-girado { transform: rotate(180deg); }

/* ── Piezas sueltas ────────────────────────────────────────────────── */

.fam-gris     { color: var(--gris); }
.fam-verde    { color: var(--verde); }
.fam-naranja  { color: var(--naranja); }
.fam-mal      { color: var(--error); font-style: normal; font-weight: 600; }
.fam-mono     { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.fam-pequena  { font-size: .85rem; }
.fam-oculto   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.fam-migas { margin: 0 0 .9rem; font-size: .9rem; }
.fam-migas a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--gris); text-decoration: none; font-weight: 600;
}
.fam-migas a:hover { color: var(--tinta); }

/* ── Pestañas de los hermanos ──────────────────────────────────────── */

.fam-pestanas {
  display: flex; gap: .4rem; align-items: center;
  margin: 0 0 1rem; padding: .35rem;
  border-radius: 999px; background: #ebe8e4;
  width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.fam-pestanas::-webkit-scrollbar { display: none; }
.fam-pestana {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem .45rem .45rem; border-radius: 999px;
  color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .95rem;
  white-space: nowrap;
  transition: background .12s ease, box-shadow .12s ease;
}
.fam-pestana:hover { background: rgba(255, 255, 255, .6); }
.fam-pestana:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 1px; }
.fam-pestana-inicial {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #d9d5d0; color: #fff; font-size: .85rem; font-weight: 800;
}
.fam-pestana.es-actual { background: #fff; box-shadow: var(--sombra); }
.fam-pestana.es-actual .fam-pestana-inicial { background: linear-gradient(135deg, var(--naranja), #f6a25e); }
.fam-pestana.es-cancelada { color: var(--gris); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.fam-pestana-inicio { padding: .45rem .7rem; color: var(--gris); }
.fam-pestana-inicio .icono { width: 20px; height: 20px; }
.fam-pestana-mas { padding: .45rem 1rem; color: var(--turquesa-osc); }

/* ── Botones ───────────────────────────────────────────────────────── */

.fam-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  padding: .75rem 1.2rem;
  border: 0; border-radius: 999px;
  background: var(--naranja); color: #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(232, 95, 26, .3);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fam-boton:hover  { background: #d4520f; box-shadow: 0 4px 14px rgba(232, 95, 26, .38); }
.fam-boton:active { transform: scale(.98); }
.fam-boton:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }

.fam-boton-claro { background: #fff; color: var(--tinta); box-shadow: none; }
.fam-boton-claro:hover { background: #fff3ec; box-shadow: none; }
.fam-boton-suave { background: var(--naranja-suave); color: #b2440d; box-shadow: none; }
.fam-boton-suave:hover { background: #fbdcc9; box-shadow: none; }
.fam-boton-texto { background: none; color: var(--gris); box-shadow: none; padding-inline: .6rem; }
.fam-boton-texto:hover { background: none; color: var(--error); box-shadow: none; }
.fam-boton-peligro { background: var(--error); box-shadow: none; }
.fam-boton-peligro:hover { background: #911d17; box-shadow: none; }
.fam-boton-grande { padding: 1rem 1.6rem; font-size: 1.05rem; width: 100%; }

/* ── Etiquetas ─────────────────────────────────────────────────────── */

.fam-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.fam-chip-ok      { background: var(--verde-suave); color: var(--verde); }
.fam-chip-naranja { background: var(--naranja-suave); color: #b2440d; }
.fam-chip-mal     { background: var(--rojo-suave); color: var(--error); }
.fam-chip-aviso   { background: var(--turquesa-suave); color: var(--turquesa-osc); }
.fam-chip-gris    { background: #ececee; color: var(--gris); }
.fam-chip-grande  { font-size: 1rem; padding: .45rem 1rem; }

.fam-etiqueta {
  font-style: normal; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .1rem .45rem; border-radius: 4px;
  background: var(--naranja-suave); color: #b2440d;
  vertical-align: .1em; margin-left: .3rem;
}

/* ── Cabecera grande ───────────────────────────────────────────────── */

.fam-hero {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(232, 95, 26, .55), transparent 42%),
    radial-gradient(circle at 8% 110%, rgba(44, 177, 175, .45), transparent 45%),
    #1c1c1e;
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.fam-hero::after {
  /* Unas líneas de pentagrama, muy tenues. */
  content: ""; position: absolute; inset: auto -10% 18px -10%; height: 46px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 11px);
  transform: rotate(-3deg);
  pointer-events: none;
}
.fam-hero > * { position: relative; z-index: 1; }
.fam-hero-texto { flex: 1 1 22rem; min-width: 0; }
.fam-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.1; margin: .2rem 0 .5rem; letter-spacing: -.01em; }
.fam-hero p  { margin: 0; color: rgba(255, 255, 255, .78); max-width: 34rem; }
.fam-antetitulo {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7fe0de !important;
}
.fam-hero-sub { font-size: 1.1rem; }

.fam-hero-detalle { align-items: center; flex-wrap: nowrap; }
.fam-hero-detalle .fam-hero-texto { flex: 1 1 auto; }
.fam-hero.es-kpop {
  background:
    radial-gradient(circle at 92% 12%, rgba(236, 72, 153, .6), transparent 42%),
    radial-gradient(circle at 8% 110%, rgba(139, 92, 246, .5), transparent 45%),
    #1c1c1e;
}
.fam-hero.es-cancelada { filter: grayscale(.85); }

.fam-hero-chips {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.fam-hero-chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem; font-weight: 600;
}
.fam-chip-instrumento img { background: #fff; border-radius: 50%; padding: 2px; }

/* ── Círculo con iniciales ─────────────────────────────────────────── */

.fam-avatar {
  flex: none;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-weight: 800; font-size: 1.35rem; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--naranja), #f6a25e);
  box-shadow: 0 4px 12px rgba(232, 95, 26, .3);
}
.fam-avatar-grande {
  width: 96px; height: 96px; font-size: 2rem;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .3);
}
.es-kpop .fam-avatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); box-shadow: 0 4px 12px rgba(236, 72, 153, .3); }
.es-cancelada .fam-avatar { background: #b8b8bd; box-shadow: none; }
.fam-avatar-mas { background: var(--turquesa-suave); color: var(--turquesa-osc); box-shadow: none; }

/* ── Cuenta atrás ──────────────────────────────────────────────────── */

.fam-cuenta-atras {
  flex: none; text-align: center; line-height: 1;
  padding: .7rem .9rem; border-radius: 14px;
  background: var(--naranja-suave);
}
.fam-cuenta-atras strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--naranja); }
.fam-cuenta-atras span   { font-size: .75rem; font-weight: 700; color: #b2440d; text-transform: uppercase; letter-spacing: .06em; }

.fam-cuenta-atras-grande {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 1rem 1.3rem; min-width: 8.5rem;
}
.fam-cuenta-atras-grande strong { font-size: 3rem; color: #fff; }
.fam-cuenta-atras-grande span   { color: rgba(255, 255, 255, .75); display: block; margin-top: .35rem; text-transform: none; letter-spacing: 0; font-size: .82rem; }

/* ── Tarjetas de la portada ────────────────────────────────────────── */

.fam-tarjetas { display: grid; gap: 1rem; margin-bottom: 1.5rem; }

.fam-tarjeta {
  position: relative;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.35rem 3.2rem 1.35rem 1.35rem;
  border-radius: var(--radio);
  background: var(--papel);
  color: inherit; text-decoration: none;
  box-shadow: var(--sombra);
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fam-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: #f3c9b1; }
.fam-tarjeta:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.fam-tarjeta.es-cancelada { opacity: .7; }

.fam-tarjeta-cuerpo { flex: 1 1 auto; min-width: 0; }
.fam-tarjeta h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.2; }
.fam-tarjeta h2 small { font-size: .95rem; font-weight: 500; color: var(--gris); margin-left: .25rem; }
.fam-tarjeta p { margin: 0; }

.fam-tarjeta-flecha {
  position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  color: #c4c4c9; transition: color .15s ease, right .15s ease;
}
.fam-tarjeta:hover .fam-tarjeta-flecha { color: var(--naranja); right: 1rem; }

.fam-tarjeta-nueva {
  border: 2px dashed #d5d5da; background: transparent; box-shadow: none;
}
.fam-tarjeta-nueva:hover { border-color: var(--turquesa); box-shadow: none; background: #fff; }
.fam-tarjeta-nueva h2 { font-size: 1.1rem; }

.fam-turnos { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .35rem; }
.fam-turnos li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.fam-turnos img { flex: none; }

.fam-barra {
  height: 8px; border-radius: 999px; background: #ececee; overflow: hidden;
  margin-bottom: .6rem;
}
.fam-barra span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--turquesa), var(--verde));
  min-width: 4px;
}

.fam-linea-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .92rem; }

/* ── La inscripción a medias ───────────────────────────────────────── */

.fam-tarjeta-medias {
  margin-bottom: 1rem;
  padding-right: 1.35rem;
  border: 2px solid #f3c9b1;
  background: linear-gradient(100deg, #fff 55%, #fff6f0);
}
.fam-tarjeta-medias:hover { border-color: var(--naranja); }
.fam-avatar-medias { background: var(--naranja-suave); color: var(--naranja); box-shadow: none; }
.fam-tarjeta-medias h2 { font-size: 1.15rem; }
.fam-tarjeta-accion { flex: none; pointer-events: none; }
.fam-medias-pasos { list-style: none; display: flex; gap: .35rem; margin: .7rem 0 0; padding: 0; }
.fam-medias-pasos li { width: 2.4rem; height: 6px; border-radius: 999px; background: #ececee; }
.fam-medias-pasos li.hecho { background: var(--verde); }
.fam-medias-pasos li.ahora { background: var(--naranja); }
@media (max-width: 40rem) {
  .fam-tarjeta-accion { width: 100%; }
}

/* ── Sin inscripciones ─────────────────────────────────────────────── */

.fam-vacio {
  text-align: center;
  padding: 3rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.fam-vacio h2 { margin: 1rem 0 .5rem; font-size: 1.4rem; }
.fam-vacio p  { color: var(--gris); max-width: 30rem; margin: 0 auto 1.4rem; }
.fam-vacio-dibujo {
  display: inline-grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--naranja-suave); color: var(--naranja);
}
.fam-vacio-corto { color: var(--gris); margin: 0; }

/* ── Bloques ───────────────────────────────────────────────────────── */

.fam-bloque {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.fam-bloque-cabecera { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.fam-bloque-cabecera h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.fam-bloque-cabecera p  { margin: .2rem 0 0; color: var(--gris); font-size: .92rem; }
.fam-bloque-icono {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--naranja-suave); color: var(--naranja);
}
.fam-bloque-icono .icono { width: 22px; height: 22px; }

.fam-bloque-aviso { border-left: 5px solid var(--turquesa); }
.fam-bloque-aviso .fam-bloque-icono { background: var(--turquesa-suave); color: var(--turquesa-osc); }

.fam-subtitulo {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris); margin: 1.2rem 0 .5rem;
}
.fam-subtitulo:first-of-type { margin-top: 0; }

.fam-nota {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .8rem 1rem; margin: 1rem 0 0;
  border-radius: 12px;
  background: var(--turquesa-suave); color: #155e5c;
  font-size: .93rem;
}
.fam-nota .icono { margin-top: .15em; }
.fam-nota-ok { background: var(--verde-suave); color: var(--verde); }

.fam-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
}
@media (max-width: 56rem) {
  .fam-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ── El camino ─────────────────────────────────────────────────────── */

.fam-camino {
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.fam-camino ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem;
  counter-reset: paso;
}
.fam-camino li { position: relative; display: flex; flex-direction: column; gap: .2rem; padding-top: 3.2rem; font-size: .88rem; }
.fam-camino li strong { font-size: .95rem; }
.fam-camino li > span:last-child { color: var(--gris); line-height: 1.4; }
.fam-camino li::before {
  /* La línea que une los pasos. */
  content: ""; position: absolute; top: 20px; left: 44px; right: -.75rem; height: 3px;
  background: #e6e6e9; border-radius: 3px;
}
.fam-camino li:last-child::before { display: none; }
.fam-camino li.paso-hecho::before { background: var(--verde); }

.fam-camino-punto {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #f0f0f2; color: #9a9aa0;
  border: 2px solid #e6e6e9;
}
.fam-camino-punto .icono { width: 20px; height: 20px; }
.paso-hecho .fam-camino-punto { background: var(--verde); border-color: var(--verde); color: #fff; }
.paso-ahora .fam-camino-punto {
  background: var(--naranja); border-color: var(--naranja); color: #fff;
  box-shadow: 0 0 0 6px rgba(232, 95, 26, .18);
  animation: fam-latido 2.2s ease-in-out infinite;
}
.paso-ahora strong { color: var(--naranja); }
.paso-luego { opacity: .8; }

@keyframes fam-latido {
  0%, 100% { box-shadow: 0 0 0 5px rgba(232, 95, 26, .18); }
  50%      { box-shadow: 0 0 0 10px rgba(232, 95, 26, .06); }
}
@media (prefers-reduced-motion: reduce) {
  .paso-ahora .fam-camino-punto { animation: none; }
  .fam-tarjeta, .fam-boton { transition: none; }
}

@media (max-width: 44rem) {
  .fam-camino ol { grid-auto-flow: row; gap: 0; }
  .fam-camino li { padding: 0 0 1.2rem 3.4rem; min-height: 3.4rem; }
  .fam-camino li::before { top: 44px; bottom: 2px; left: 20px; right: auto; width: 3px; height: auto; }
}

/* ── Pagos ─────────────────────────────────────────────────────────── */

.fam-pagos-resumen { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.4rem; }

.fam-anillo {
  --p: 0;
  flex: none; display: grid; place-items: center;
  width: 108px; height: 108px; border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 76%, transparent 77%),
    conic-gradient(var(--verde) calc(var(--p) * 1%), #ececee 0);
}
.fam-anillo span { font-size: 1.7rem; font-weight: 800; }
.fam-anillo small { font-size: .9rem; font-weight: 700; color: var(--gris); }

.fam-cifras { display: grid; gap: .5rem; margin: 0; flex: 1 1 auto; }
.fam-cifras div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px dashed #e6e6e9; padding-bottom: .4rem; }
.fam-cifras div:last-child { border-bottom: 0; }
.fam-cifras dt { color: var(--gris); font-size: .92rem; }
.fam-cifras dd { margin: 0; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.fam-plazos { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.fam-plazos li {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .9rem; border-radius: 12px;
  border: 1px solid #ececee;
}
.fam-plazo-punto {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-weight: 800; font-size: .9rem;
  background: #f0f0f2; color: var(--gris);
}
.fam-plazo-texto { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fam-plazo-texto span { color: var(--gris); font-size: .86rem; }
.fam-plazo-texto em { font-style: normal; }
.fam-plazo-importe { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.plazo-pagado { background: #f8fcf9; border-color: #d4ecdd !important; }
.plazo-pagado .fam-plazo-punto { background: var(--verde); color: #fff; }
.plazo-pagado .fam-plazo-importe { color: var(--verde); }
.fam-plazos .es-siguiente { border-color: #f3c9b1; background: #fffaf7; box-shadow: 0 0 0 3px rgba(232, 95, 26, .08); }
.fam-plazos .es-siguiente .fam-plazo-punto { background: var(--naranja); color: #fff; }
.plazo-parcial .fam-plazo-punto { background: var(--naranja-suave); color: var(--naranja); }
.plazo-vencido { background: #fff8f7; border-color: #f0c2be !important; }
.plazo-vencido .fam-plazo-punto { background: var(--error); color: #fff; }

.fam-pagar { display: grid; gap: .5rem; text-align: center; }
.fam-pagar p { margin: 0; font-size: .85rem; }
.fam-pagar form { margin: 0; }
.fam-pagar button.fam-boton { border: 0; cursor: pointer; }
.fam-pagar button.fam-boton:disabled { cursor: progress; opacity: .85; }

.fam-transferencia, .fam-plegable {
  margin-top: 1rem;
  border-radius: 12px;
  border: 1px solid #ececee;
}
.fam-transferencia summary, .fam-plegable summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1rem; cursor: pointer; font-weight: 700;
  list-style: none;
}
.fam-transferencia summary::-webkit-details-marker,
.fam-plegable summary::-webkit-details-marker { display: none; }
.fam-transferencia summary::after, .fam-plegable summary::after {
  content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--gris); font-weight: 400;
}
.fam-transferencia[open] summary::after, .fam-plegable[open] summary::after { content: "–"; }
.fam-transferencia > *:not(summary), .fam-plegable > *:not(summary) { margin: 0 1rem 1rem; }

.fam-datos-banco { display: grid; gap: .1rem; padding: .3rem .9rem; border-radius: 10px; background: #fafafa; }
.fam-datos-banco div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 1px solid #f0f0f2; }
.fam-datos-banco div:last-child { border-bottom: 0; }
.fam-datos-banco dt { color: var(--gris); font-size: .88rem; }
.fam-datos-banco dd { margin: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; word-break: break-word; }
.fam-transferencia > p { font-size: .85rem; }

.fam-copiar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--linea); background: #fff; color: var(--gris);
  cursor: pointer;
}
.fam-copiar:hover { color: var(--naranja); border-color: var(--naranja); }
.fam-copiar.copiado { color: #fff; background: var(--verde); border-color: var(--verde); }

.fam-cobros { list-style: none; padding: 0; display: grid; gap: .3rem; }
.fam-cobros li { display: grid; grid-template-columns: 6rem 1fr auto; gap: .75rem; font-size: .92rem; padding: .35rem 0; border-bottom: 1px solid #f0f0f2; }
.fam-cobros li:last-child { border-bottom: 0; }
.fam-cobros strong { font-variant-numeric: tabular-nums; }

/* ── Turnos ────────────────────────────────────────────────────────── */

.fam-turno + .fam-turno { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0f0f2; }
.fam-turno-cabeza { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.fam-turno-cabeza img {
  flex: none; padding: 8px; width: 56px; height: 56px; border-radius: 14px;
  background: var(--turquesa-suave);
}
.fam-turno-cabeza h3 { margin: 0; font-size: 1.05rem; }
.fam-turno-cabeza p  { margin: .1rem 0 0; color: var(--gris); font-size: .92rem; }

.fam-turno-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fam-turno-datos li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; }
.fam-turno-datos li > .icono { margin-top: .15em; color: var(--turquesa-osc); }

/* ── El precio ─────────────────────────────────────────────────────── */

.fam-ticket {
  list-style: none; margin: 0; padding: .4rem 1rem;
  border-radius: 12px; background: #fafafa;
  border: 1px solid #f0f0f2;
}
.fam-ticket li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px dashed #e2e2e6; font-size: .93rem;
}
.fam-ticket strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fam-ticket .es-descuento strong { color: var(--verde); }
.fam-ticket .es-incluido { color: var(--gris); }
.fam-ticket .es-incluido strong { color: var(--turquesa-osc); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.fam-ticket-total { border-bottom: 0 !important; font-size: 1.1rem !important; padding-top: .8rem !important; }
.fam-ticket-total span { font-weight: 800; }
.fam-ticket-total strong { font-size: 1.3rem; }

/* ── Antes del campamento ──────────────────────────────────────────── */

.fam-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fam-tareas li { display: flex; gap: .85rem; align-items: flex-start; }
.fam-tareas li > div { display: flex; flex-direction: column; gap: .15rem; font-size: .93rem; }
.fam-tareas li > div > span { color: var(--gris); line-height: 1.45; }
.fam-tarea-icono {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--turquesa-suave); color: var(--turquesa-osc);
}
.tarea-luego .fam-tarea-icono { background: #f0f0f2; color: #9a9aa0; }

/* ── Documentación ─────────────────────────────────────────────────── */

.fam-documentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; }
.fam-documentos a {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  padding: .95rem; border-radius: 14px;
  border: 1px solid #ececee; background: #fff;
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9rem; line-height: 1.3;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.fam-documentos a .icono { color: var(--naranja); }
.fam-documentos a:hover { border-color: var(--naranja); background: #fffaf7; transform: translateY(-1px); }

/* ── Certificados ──────────────────────────────────────────────────── */

.fam-certificados { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.fam-certificados a {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem; border-radius: 14px;
  border: 1px solid #ececee; color: var(--tinta); text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fam-certificados a:hover { border-color: var(--naranja); box-shadow: var(--sombra); }
.fam-certificados img { flex: none; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: rotate(-3deg); }
.fam-certificados span { display: flex; flex-direction: column; gap: .3rem; font-size: .93rem; }
.fam-certificados em { font-style: normal; color: var(--naranja); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ── Datos ─────────────────────────────────────────────────────────── */

.fam-datos { margin: 0; display: grid; gap: .1rem; }
.fam-datos div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #f3f3f5; font-size: .93rem; }
.fam-datos dt { color: var(--gris); }
.fam-datos dd { margin: 0; word-break: break-word; }
.fam-bloque > .fam-pequena { margin: 1.1rem 0 0; display: flex; gap: .45rem; align-items: flex-start; flex-wrap: wrap; }

/* Los datos van a todo el ancho, debajo del camino: el participante y
   los tutores uno al lado de otro. */
.fam-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2rem;
}
/* Va justo debajo del camino, a todo el ancho: compacto, que no empuje
   hacia abajo lo que la familia viene a mirar (los pagos). */
.fam-bloque-datos .fam-bloque-cabecera { margin-bottom: .8rem; }
.fam-bloque-datos .fam-datos div { padding: .3rem 0; }
.fam-persona .fam-subtitulo { margin-top: 0; }
.fam-persona .fam-datos div { grid-template-columns: 6.5rem minmax(0, 1fr); }

/* ── Eliminar ──────────────────────────────────────────────────────── */

.fam-borrar {
  margin: .5rem 0 1.25rem;
  padding: 0 1.5rem;
  border-radius: var(--radio);
  border: 1px solid #f0c2be;
  background: #fffafa;
}
.fam-borrar summary {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  color: var(--error); font-weight: 700;
}
.fam-borrar summary::-webkit-details-marker { display: none; }
.fam-borrar p { margin: 0 0 1rem; color: var(--gris); font-size: .93rem; }
.fam-borrar form { margin-bottom: 1.25rem; }

/* ── Fotos y vídeos ────────────────────────────────────────────────── */

.fam-albumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.fam-album {
  padding: 1.1rem; border-radius: 14px; color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(232, 95, 26, .55), transparent 55%),
    linear-gradient(135deg, var(--turquesa-osc), #1c1c1e);
}
.fam-album-turno { margin: 0 0 .75rem; font-size: 1.05rem; }
.fam-album-turno strong { font-size: 1.5rem; display: block; line-height: 1.1; }
.fam-album-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.fam-album .fam-boton { padding: .5rem .9rem; font-size: .9rem; background: rgba(255, 255, 255, .95); color: var(--tinta); }
.fam-album .fam-boton:hover { background: #fff; }

.fam-autorizado {
  display: grid; gap: .9rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid #f0f0f2;
}
.fam-autorizado h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1rem; }
.fam-autorizado-texto p { margin: 0; color: var(--gris); font-size: .93rem; }
.fam-autorizado-actual {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; border-radius: 10px; background: var(--turquesa-suave);
  font-size: .9rem;
}
.fam-autorizado-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fam-autorizado-form input {
  font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .7rem .9rem; border-radius: 999px;
  border: 1px solid var(--linea); background: #fff; width: 12rem;
}
.fam-autorizado-form input:focus { outline: 3px solid rgba(44, 177, 175, .35); border-color: var(--turquesa); }

.fam-legal summary { cursor: pointer; color: var(--gris); font-size: .88rem; font-weight: 600; }
.fam-legal p, .fam-legal li { font-size: .86rem; color: var(--gris); line-height: 1.5; }

/* ── Años anteriores ───────────────────────────────────────────────── */

.fam-historia { list-style: none; margin: 0; padding: 0; position: relative; }
.fam-historia::before {
  content: ""; position: absolute; left: 2.15rem; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(var(--naranja), var(--turquesa));
  opacity: .35;
}
.fam-historia > li { position: relative; display: flex; gap: 1.2rem; padding: .45rem 0; }
.fam-historia-ano {
  flex: none; position: relative; z-index: 1;
  width: 4.3rem; text-align: center;
  padding: .25rem 0; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 800; font-size: .88rem;
}
.fam-historia ul { list-style: none; margin: 0; padding: .2rem 0 0; display: grid; gap: .25rem; font-size: .93rem; }

.fam-pie-admin { text-align: center; margin-top: 2rem; }

/* ── Aviso de la app ───────────────────────────────────────────────── */

.fam-app {
  position: fixed; left: 0; right: 0; bottom: 20px; z-index: 50;
  display: flex; align-items: center; gap: .8rem;
  width: min(44rem, calc(100% - 32px)); margin: 0 auto;
  padding: .6rem .7rem .6rem .8rem;
  border-radius: 999px;
  border: 2px solid var(--naranja);
  background: linear-gradient(30deg, #2cb1af, #309997);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: fam-subir .4s ease-out;
}
.fam-app[hidden] { display: none; }
.fam-app-icono { flex: none; border-radius: 10px; background: #fff; padding: 2px; }
.fam-app-texto { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.fam-app-texto strong { display: block; font-size: .92rem; }
.fam-app-texto span { font-size: .78rem; opacity: .9; }
.fam-app-botones { display: flex; gap: .4rem; flex: none; }
.fam-app .fam-boton { padding: .55rem .9rem; font-size: .85rem; }
.fam-app-cerrar {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer;
}
.fam-app-cerrar:hover { background: rgba(255, 255, 255, .34); }
@keyframes fam-subir { from { transform: translateY(140%); } to { transform: none; } }

@media (max-width: 34rem) {
  .fam-app { border-radius: 24px; flex-wrap: wrap; padding: .8rem; }
  .fam-app-texto { flex-basis: calc(100% - 100px); }
  .fam-app-botones { order: 3; width: 100%; }
  .fam-app-botones .fam-boton { flex: 1; }
}

/* ── Pantalla de pago ──────────────────────────────────────────────── */

.fam-elegir { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.fam-elegir label {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem; border-radius: 14px;
  border: 2px solid #ececee; background: #fff; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.fam-elegir label:hover { border-color: #f3c9b1; }
.fam-elegir input { position: absolute; opacity: 0; pointer-events: none; }
.fam-elegir .fam-marca {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid #c9c9cf; color: transparent; background: #fff;
}
.fam-elegir input[type="radio"] + .fam-marca { border-radius: 50%; }
.fam-elegir input:checked + .fam-marca { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.fam-elegir input:focus-visible + .fam-marca { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.fam-elegir label:has(input:checked) { border-color: var(--naranja); background: #fffaf7; }
.fam-elegir .fam-plazo-texto { flex: 1 1 auto; }
.fam-elegir .es-pagado { opacity: .6; cursor: default; }

.fam-total-pago {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 14px;
  background: var(--tinta); color: #fff;
}
.fam-total-pago strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }

/* ── Móvil ─────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  body.familia .contenido { margin-top: 1rem; }
  .fam-hero { padding: 1.5rem 1.25rem; border-radius: 20px; }
  .fam-hero-detalle { flex-wrap: wrap; }
  .fam-avatar-grande { width: 72px; height: 72px; font-size: 1.5rem; }
  .fam-cuenta-atras-grande { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: .6rem; }
  .fam-cuenta-atras-grande strong { font-size: 2.2rem; }
  .fam-cuenta-atras-grande span { margin: 0; }
  .fam-tarjeta { flex-wrap: wrap; padding: 1.1rem 2.6rem 1.1rem 1.1rem; gap: .9rem; }
  .fam-tarjeta .fam-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
  .fam-tarjeta-cuerpo { flex-basis: calc(100% - 70px); }
  .fam-tarjeta .fam-cuenta-atras { display: none; }
  .fam-bloque { padding: 1.2rem; }
  .fam-pagos-resumen { gap: 1rem; }
  .fam-anillo { width: 88px; height: 88px; }
  .fam-anillo span { font-size: 1.35rem; }
  .fam-datos div, .fam-datos-banco div { grid-template-columns: 1fr; gap: .1rem; }
  .fam-cobros li { grid-template-columns: 5.5rem 1fr auto; }
}

/* ── Resultado del pago ─────────────────────────────────────────────── */

.fam-resultado {
  max-width: 36rem; margin: 1rem auto 2rem;
  padding: 2.4rem 2rem 2rem;
  border-radius: 24px; background: var(--papel);
  box-shadow: var(--sombra-alta);
  text-align: center;
  border-top: 6px solid var(--turquesa);
}
.fam-resultado h1 { margin: .2rem 0 .8rem; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 900; line-height: 1.1; }
.fam-resultado-ok h1 { font-size: clamp(2.4rem, 8vw, 3.4rem); color: var(--verde); }
.fam-antetitulo-claro {
  margin: 1rem 0 0; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.fam-resultado-texto { color: var(--tinta); font-size: 1.02rem; max-width: 28rem; margin: 0 auto 1rem; }
.fam-resultado-motivo {
  display: inline-block; margin: 0 0 1rem; padding: .55rem 1rem; border-radius: 999px;
  background: var(--rojo-suave); color: var(--error); font-weight: 700; font-size: .92rem;
}
.fam-resultado-botones { display: grid; gap: .6rem; margin-top: 1.4rem; }
.fam-resultado-botones .fam-boton { text-decoration: none; }

.fam-resultado-icono {
  display: inline-grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%;
  color: #fff; background: var(--turquesa);
  box-shadow: 0 0 0 10px var(--turquesa-suave);
}
.fam-resultado-ok   { border-top-color: var(--verde); }
.fam-resultado-ok   .fam-resultado-icono { background: var(--verde); box-shadow: 0 0 0 10px var(--verde-suave); animation: fam-aparece .5s ease-out; }
.fam-resultado-mal  { border-top-color: var(--error); }
.fam-resultado-mal  .fam-resultado-icono { background: var(--error); box-shadow: 0 0 0 10px var(--rojo-suave); }
.fam-girando .icono { animation: fam-gira 2.4s linear infinite; }

@keyframes fam-aparece { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fam-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fam-resultado-ok .fam-resultado-icono, .fam-girando .icono { animation: none; }
}