/* Panel «Mi boda» (web publicada). Marca de Sí, Vamos (tokens.css), claro y oscuro, móvil primero. Reutiliza las piezas de panel.css (.p-*). */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--color-neutral-bg); color: var(--color-neutral-fg); font: 400 1rem/1.5 var(--font-text); }
a { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.pb-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pb-saltar { position: absolute; left: .5rem; top: -4rem; z-index: 30; padding: .6rem 1rem; background: var(--color-primary); color: var(--color-neutral-bg); border-radius: 8px; }
.pb-saltar:focus { top: .5rem; }

/* cabecera fija */
.pb-cab { position: sticky; top: 0; z-index: 10; background: var(--color-neutral-surface); border-bottom: 1px solid var(--color-neutral-line); }
.pb-cab[hidden] { display: none; }
.pb-cab-interior { display: flex; align-items: flex-start; gap: .75rem; max-width: 50rem; margin: 0 auto; padding: .7rem 1rem .3rem; }
.pb-logo { flex: none; display: block; padding-top: .15rem; }
.pb-logo img { display: block; width: 32px; height: 32px; }
.pb-cab-datos { flex: 1; min-width: 0; }
.pb-cab-fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .75rem; }
.pb-titulo { margin: 0; font: 400 1.25rem/1.25 var(--font-display); color: var(--color-primary); min-width: 0; overflow-wrap: anywhere; }
.pb-mi { color: var(--color-neutral-muted); font-size: 1rem; }
.pb-titulo-boton { font: inherit; color: inherit; background: none; border: 0; padding: .35rem 0; margin: 0; cursor: pointer; text-align: left; min-height: 44px; }
.pb-ver-web { font-weight: 600; font-size: .95rem; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }
.pb-dias { margin: 0 0 .1rem; font-size: .92rem; color: var(--color-neutral-muted); }
.pb-webs { list-style: none; margin: .4rem 0; padding: .4rem; border: 1px solid var(--color-neutral-line); border-radius: 10px; background: var(--color-neutral-bg); display: grid; gap: .25rem; }
.pb-webs[hidden] { display: none; }
.pb-web { width: 100%; min-height: 44px; text-align: left; padding: .5rem .75rem; border-radius: 8px; border: 0; background: transparent; color: var(--color-neutral-fg); font: 500 1rem var(--font-text); cursor: pointer; }
.pb-web[aria-current="true"] { background: var(--color-neutral-surface); font-weight: 600; }
.pb-pestanas-caja { max-width: 50rem; margin: 0 auto; }
.pb-pestanas { position: relative; display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; padding: 0 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.pb-pestanas::-webkit-scrollbar { display: none; }
/* si hay más pestañas fuera de la vista, ese borde se difumina (señal de que se puede deslizar) */
.pb-pestanas.pb-mas-dcha { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.pb-pestanas.pb-mas-izda { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.pb-pestanas.pb-mas-dcha.pb-mas-izda { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.pb-pestanas [role="tab"] { flex: none; min-height: 48px; padding: .5rem .95rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--color-neutral-muted); font: 500 1rem var(--font-text); cursor: pointer; white-space: nowrap; }
.pb-pestanas [role="tab"][aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-accent); font-weight: 600; }

/* contenido */
.pb-principal { max-width: 50rem; margin: 0 auto; padding: 1rem 1rem 5rem; }
.pb-principal[hidden] { display: none; }
.pb-paneles[hidden] { display: none; }
.pb-paneles > section { display: grid; gap: 1rem; outline-offset: 6px; }
.pb-paneles > section[hidden] { display: none; }
.pb-cargando, .pb-problema { max-width: 36rem; margin: 3rem auto; padding: 0 1rem; text-align: center; color: var(--color-neutral-muted); }
.pb-cargando[hidden], .pb-problema[hidden] { display: none; }
.pb-problema h1 { font: 400 1.7rem/1.2 var(--font-display); color: var(--color-primary); }
.pb-problema { color: var(--color-neutral-fg); }
.p-bloque h2 { margin: 0 0 .6rem; font: 400 1.15rem/1.3 var(--font-display); color: var(--color-primary); }
.p-lista { grid-template-columns: 1fr; }
@media (min-width: 560px) { .p-lista { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.p-bloque h3 { margin: 0 0 .25rem; font: 400 1.15rem/1.3 var(--font-display); color: var(--color-primary); }
.pb-intro { margin: 0; }
.pb-ayuda { margin: .35rem 0 0; font-size: .92rem; color: var(--color-neutral-muted); }
.pb-ok { margin: 0; padding: .7rem 1rem; border-radius: 10px; background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); }
.pb-cta { margin: 0; }
.pb-enlace { display: inline; padding: .35rem .1rem; min-height: 32px; border: 0; background: none; color: var(--color-primary); text-decoration: underline; font: 500 .95rem var(--font-text); cursor: pointer; }
.pb-error { margin: .4rem 0 0; color: var(--color-accent); font-weight: 600; }
.pb-error[hidden] { display: none; }
code { font-size: .9em; padding: .05rem .3rem; border-radius: 4px; background: var(--color-neutral-bg); border: 1px solid var(--color-neutral-line); }

/* resumen */
.pb-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pb-num { display: grid; justify-items: center; text-align: center; gap: .1rem; padding: .8rem .35rem; border-radius: 12px; background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); font-size: .9rem; line-height: 1.25; }
.pb-num strong { font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.pb-num-ico { font-size: 1.2rem; }
.pb-aviso-suave { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--color-accent); background: var(--color-neutral-surface); font-size: .95rem; }
.pb-nota-numeros { margin: -.4rem 0 0; font-size: .88rem; }
.pb-limite { margin: 0; }
.pb-ultimas { list-style: none; margin: 0; padding: 0; display: grid; }
.pb-ultimas li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--color-neutral-line); }
.pb-ultimas li:last-child { border-bottom: 0; }
.pb-ultimas time { color: var(--color-neutral-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* botones del panel */
.p-boton--chico { min-height: 44px; padding: .55rem 1rem; font-size: .95rem; margin-top: 0; }
.p-boton--claro { margin-top: 0; }
.p-boton--peligro { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.p-boton--peligro-fuerte { background: var(--color-accent); color: var(--color-neutral-surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-boton--peligro-fuerte { color: var(--color-secondary); } }
:root[data-theme="dark"] .p-boton--peligro-fuerte { color: var(--color-secondary); }
.p-boton[disabled] { opacity: .6; cursor: progress; }
.pb-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* invitados */
.pb-detalle { background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); border-radius: 12px; padding: 0 1rem; }
.pb-detalle > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--color-primary); }
.pb-detalle[open] > summary { border-bottom: 1px solid var(--color-neutral-line); margin-bottom: .75rem; }
.pb-detalle > form { padding-bottom: 1rem; }
.pb-form { display: grid; gap: .8rem; }
.pb-campo { display: grid; gap: .25rem; min-width: 0; }
.pb-campo label { font-weight: 600; font-size: .95rem; }
.pb-campo input, .pb-campo textarea, .pb-campo select { width: 100%; min-height: 44px; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--color-neutral-line); background: var(--color-neutral-bg); color: var(--color-neutral-fg); font: 400 1rem var(--font-text); }
.pb-campo textarea { resize: vertical; }
.pb-barra { display: grid; gap: .6rem; }
.pb-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.pb-filtro { min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--color-neutral-line); background: var(--color-neutral-surface); color: var(--color-neutral-fg); font: 500 .95rem var(--font-text); cursor: pointer; }
.pb-filtro[aria-pressed="true"] { background: var(--color-primary); color: var(--color-neutral-bg); border-color: var(--color-primary); }
.pb-filtro-n { font-variant-numeric: tabular-nums; }
.pb-lista-inv { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pb-inv { padding: .8rem .9rem; border-radius: 12px; background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); min-width: 0; }
.pb-inv-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; }
.pb-inv-nombre { font-size: 1.08rem; overflow-wrap: anywhere; }
.pb-inv-datos { margin: .2rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; font-size: .92rem; color: var(--color-neutral-muted); }
.pb-tel { font-variant-numeric: tabular-nums; }
.pb-tel--falta { font-style: italic; }
.pb-menos { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.pb-enlace--peligro { color: var(--color-accent); }
/* «Empezar la lista de cero»: al final de la lista, lejos de lo que más se toca, con su explicación y un objetivo cómodo para el pulgar */
.pb-vaciar { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-neutral-line); }
.pb-vaciar p { margin: 0 0 .35rem; }
.pb-vaciar .pb-enlace { min-height: 44px; }
.pb-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid var(--color-neutral-line); background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.pb-chip--si { border-color: var(--color-primary); }
.pb-chip--dudosa, .pb-chip--aviso { border-color: var(--color-accent); color: var(--color-accent); }
.pb-vacio { padding: 1rem; border-radius: 12px; border: 1px dashed var(--color-neutral-line); color: var(--color-neutral-muted); }
.pb-duda { margin: .2rem 0 .6rem; padding: .6rem .75rem; border-radius: 10px; background: var(--color-neutral-bg); border-left: 3px solid var(--color-accent); }
.pb-duda p { margin: 0 0 .4rem; font-size: .93rem; }
.pb-duda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pb-duda li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; }

/* proveedores y canciones */
.pb-provs { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pb-prov p { margin: .15rem 0 .6rem; }
.pb-activo { margin: .6rem 0 0 !important; font-size: .93rem; }
.pb-aviso-nuevo { font-size: .88rem; margin: .5rem 0 0 !important; }
.pb-enlace-nuevo { margin-top: .75rem; padding: .75rem; border-radius: 10px; background: var(--color-neutral-bg); border: 1px solid var(--color-neutral-line); }
.pb-url { width: 100%; min-height: 44px; margin: 0 0 .6rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--color-neutral-line); background: var(--color-neutral-surface); color: var(--color-neutral-fg); font: 400 .9rem ui-monospace, Menlo, Consolas, monospace; }
.pb-canciones { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; }
.pb-canciones li { padding: .55rem 0; border-bottom: 1px solid var(--color-neutral-line); display: grid; }
.pb-canciones li:last-child { border-bottom: 0; }

/* diálogo y avisos */
.pb-dlg { width: min(40rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); overflow: auto; padding: 1rem; border: 1px solid var(--color-neutral-line); border-radius: 12px; background: var(--color-neutral-surface); color: var(--color-neutral-fg); font-family: var(--font-text); }
.pb-dlg::backdrop { background: rgb(0 0 0 / .55); }
body:has(.pb-dlg[open]) { overflow: hidden; }
.pb-dlg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.pb-dlg-cab h2 { margin: 0; font: 400 1.2rem/1.3 var(--font-display); color: var(--color-primary); }
.pb-datos { margin: 0 0 1rem; display: grid; gap: .5rem; }
.pb-datos div { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-neutral-line); }
.pb-datos dt { font-size: .85rem; color: var(--color-neutral-muted); }
.pb-datos dd { margin: 0; overflow-wrap: anywhere; }
.pb-grupo { border: 1px solid var(--color-neutral-line); border-radius: 10px; padding: .6rem .8rem; margin: 0; display: grid; gap: .4rem; min-width: 0; }
.pb-grupo legend { padding: 0 .4rem; font-weight: 600; }
.pb-op { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-right: .8rem; }
.pb-op input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
.pb-ops { display: flex; flex-wrap: wrap; }
.pb-aviso { position: fixed; left: 50%; bottom: 1rem; translate: -50% 0; z-index: 40; width: max-content; max-width: calc(100vw - 2rem); padding: .7rem 1.1rem; border-radius: 14px; background: var(--color-primary); color: var(--color-neutral-bg); font: 500 .95rem/1.4 var(--font-text); box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
.pb-aviso a { color: inherit; font-weight: 700; }
.pb-aviso[hidden] { display: none; }

@media (min-width: 700px) {
  .pb-cab-interior { padding-top: 1rem; }
  .pb-titulo { font-size: 1.5rem; }
  .pb-num strong { font-size: 2.6rem; }
  .pb-numeros { gap: .8rem; }
}

/* Pie de «Mi boda»: el desistimiento siempre a mano (Directiva 2023/2673) y los textos legales */
.pb-pie { padding: 1.5rem 1rem 2.5rem; text-align: center; font-size: .92rem; color: var(--color-neutral-muted); }
.pb-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.2rem; }
.pb-pie a { color: var(--color-primary); }
.pb-salir { min-height: 44px; min-width: 44px; padding: 0 .6rem; background: none; border: 0; font: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.pb-pie a:focus-visible, .pb-salir:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

/* Facturas (facturación automática) */
.pb-factura + .pb-factura { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-neutral-line); }
.pb-factura .p-lista { grid-template-columns: 1fr; }
.pb-factura li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }

/* Dominio propio */
#dominio { margin-top: 1rem; }
.pb-dominio { display: flex; align-items: center; gap: .4rem; }
.pb-dominio input { flex: 1 1 auto; min-width: 0; }
.pb-dominio span { font-weight: 600; color: var(--color-primary); }
#dominio .pb-cta { margin-top: .8rem; }
@media (max-width: 560px) { #dominio .p-boton { width: 100%; text-align: center; } }

/* Pestaña «Fotos» (el álbum de los invitados) */
.pf-barra { height: .7rem; margin: .5rem 0; border-radius: 999px; background: var(--color-neutral-bg); border: 1px solid var(--color-neutral-line); overflow: hidden; }
.pf-barra span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.pf-alerta { margin: .6rem 0; }
.pf-enlace { overflow-wrap: anywhere; user-select: all; }
.pf-wifi { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-neutral-line); }
.pf-ayuda-op { display: block; font-size: .88rem; }
.pf-paquetes li { align-items: center; flex-wrap: wrap; }
.pf-paquetes .p-boton { margin: .15rem 0; }
.pf-peticiones, .pf-extras { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.pf-peticion { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem; border-radius: 10px; background: var(--color-neutral-bg); }
.pf-peticion p { margin: 0 0 .4rem; }
.pf-mini { flex: none; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); }
.pf-extras li { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: space-between; padding: .7rem; border-radius: 10px; background: var(--color-neutral-bg); }
.pf-extras li > div { display: grid; gap: .1rem; flex: 1 1 14rem; }
.pf-rejilla { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.pf-celda { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.pf-vista { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--color-neutral-bg); border: 1px solid var(--color-neutral-line); }
.pf-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-celda--oculta .pf-vista img { opacity: .45; }
.pf-sin-vista { display: grid; place-items: center; height: 100%; color: var(--color-neutral-muted); font-size: .9rem; }
.pf-play { position: absolute; right: .4rem; bottom: .4rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .72); color: #fff; font-size: .85rem; }
.pf-etiqueta { position: absolute; left: .4rem; top: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--color-neutral-fg); color: var(--color-neutral-bg); font-size: .78rem; font-weight: 600; }
.pf-quien { margin: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-botones .p-boton { flex: 1 1 5rem; min-height: 44px; padding: .5rem .6rem; margin-top: 0; }
@media (min-width: 560px) { .pf-rejilla { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } }
.pf-ver { text-align: center; }
.pf-ver-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pf-ver-boton { width: 100%; min-height: 64px; font-size: 1rem; line-height: 1.25; text-align: center; display: flex; align-items: center; justify-content: center; padding-inline: .6rem; }
.pf-ver p { margin: .6rem 0 0; }

/* tocar rápido dos veces un botón no amplía la pantalla (el doble toque del iPhone) */
button, summary, label, a, input, select, textarea, [role="tab"], [role="button"] { touch-action: manipulation; }
/* invitar a todos por WhatsApp: un botón arriba de la lista y una hoja con un paso a paso */
.pb-invitar-todos { width: 100%; min-height: 48px; text-align: center; }
.pb-paso { margin: 0 0 .15rem; font-size: 1.15rem; line-height: 1.35; overflow-wrap: anywhere; }
.pb-paso-quedan { margin: 0 0 .8rem; }
.pb-wa-grande { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; text-align: center; font-size: 1.05rem; overflow-wrap: anywhere; }
#inv-paso .pb-cta { margin-bottom: .5rem; }
#inv-paso .pb-acciones { margin: .6rem 0 .9rem; }
.pb-difusion { margin-top: .5rem; }
.pb-pasos { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .4rem; }