/* El relleno cuenta dentro del ancho, no encima. Sin esto, `main` sumaba su
   padding a `calc(100% - 2rem)` y el panel desbordaba 9 px en un teléfono: lo
   justo para que apareciera una barra de scroll horizontal en cada pantalla. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  font-family: Manrope, system-ui, sans-serif;
  background: #f7f5fb;
  color: #211c2d;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
main {
  width: min(34rem, calc(100% - 2rem));
  background: white;
  border: 1px solid #e6e0ef;
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: 0 1rem 3rem #3f245412;
}
.eyebrow {
  color: #6c3b86;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
}
.login-form,
label {
  display: grid;
  gap: 0.5rem;
}
.login-form {
  gap: 1rem;
  margin: 2rem 0;
}
input,
textarea,
button {
  min-height: 2.75rem;
  border-radius: 0.65rem;
  border: 1px solid #cfc4da;
  padding: 0 0.8rem;
  font: inherit;
}
textarea {
  padding: 0.8rem;
  resize: vertical;
}
button {
  background: #59306f;
  color: white;
  border-color: #59306f;
  font-weight: 700;
  cursor: pointer;
}
ul {
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
li {
  list-style: none;
  border: 1px solid #e6e0ef;
  border-radius: 0.75rem;
  padding: 1rem;
  display: grid;
  gap: 0.25rem;
}
.editor-page {
  display: block;
  background: #eee8f1;
}
.editor-shell {
  min-height: 100vh;
  /* Ocupa la ventana. Sin esto la rejilla se dimensionaba por su contenido, así
     que el ancho de la vista previa dependía de lo largo que fuera el nombre de
     la quinceañera en lugar del espacio disponible. */
  width: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 28rem) 1fr;
}
.editor-controls {
  background: white;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  align-content: start;
  gap: 1rem;
  box-shadow: 0 0 2rem #30173a18;
  z-index: 1;
}
.editor-controls h1 {
  margin: 0;
}
.editor-controls label {
  font-weight: 700;
}
.save-status {
  min-height: 1.5rem;
  color: #59306f;
}
.editor-preview {
  padding: 2rem;
  max-width: 32rem;
  width: calc(100% - 4rem);
  margin: auto;
}
.preview-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 760px) {
  .editor-shell {
    grid-template-columns: 1fr;
  }
  .editor-preview {
    padding: 1rem;
    width: calc(100% - 2rem);
  }
}
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.6rem 1rem;
  text-align: center;
  background: #211c2d;
  color: white;
  font:
    700 0.8rem Manrope,
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
}
.publication-actions {
  max-width: 72rem;
  margin: 2rem auto;
  padding: clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.publication-actions > .eyebrow,
.publication-actions > h2,
.publication-actions > .save-status {
  grid-column: 1 / -1;
}
.publication-actions h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0;
}
.action-card {
  background: white;
  border: 1px solid #e6e0ef;
  border-radius: 1rem;
  padding: 1.25rem;
  display: grid;
  align-content: start;
  gap: 0.9rem;
}
.action-card h3 {
  margin: 0;
}
.action-card code {
  overflow-wrap: anywhere;
  padding: 0.5rem;
  background: #f7f5fb;
  border-radius: 0.4rem;
}
.action-card .check {
  grid-template-columns: auto 1fr;
  align-items: start;
}
.action-card .check input {
  min-height: auto;
}
.secondary {
  color: #59306f;
  background: white;
}
.challenge {
  display: grid;
  gap: 0.75rem;
}
.challenge p {
  margin: 0;
}
@media (max-width: 850px) {
  .publication-actions {
    grid-template-columns: 1fr;
  }
}

/* —— Fase 4: invitados, RSVP y pase ——————————————————————————————— */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.guests-page,
.rsvp-page,
.pass-page {
  display: block;
  place-items: start;
}
.guests-page {
  background: #f7f5fb;
}
.breadcrumb {
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 0;
}
.breadcrumb a {
  color: #59306f;
  font-weight: 700;
  text-decoration: none;
}
.guests-main {
  width: min(72rem, calc(100% - 2rem));
  margin: 1rem auto 4rem;
  background: white;
  border: 1px solid #e6e0ef;
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: 0 1rem 3rem #3f245412;
}
.guests-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}
.guests-head h1 {
  margin: 0.2rem 0 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}
.guests-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.guests-actions button {
  padding: 0 1rem;
}
.guests-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0;
}
.guests-summary > div {
  background: #f7f5fb;
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
}
.guests-summary dt {
  font-size: 0.8rem;
  color: #5c5368;
}
.guests-summary dd {
  margin: 0.15rem 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.guests-filters {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.guests-filters [role='group'] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  background: white;
  color: #3c3448;
  border: 1px solid #cfc4da;
  border-radius: 999px;
  padding: 0 0.9rem;
  min-height: 2.75rem;
  font-weight: 600;
}
.chip-on {
  background: #59306f;
  border-color: #59306f;
  color: white;
}
.guests-note {
  background: #eef7f0;
  border-left: 3px solid #2f7d4f;
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
}
.guests-note-error {
  background: #fdf0f0;
  border-left-color: #a32020;
}
.guests-export {
  margin: 0 0 1rem;
}
.guests-empty {
  background: #f7f5fb;
  border-radius: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}
.guests-table {
  width: 100%;
  border-collapse: collapse;
}
.guests-table th,
.guests-table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #ece6f2;
  vertical-align: top;
}
.guests-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5c5368;
}
.guests-table td strong {
  display: block;
}
.guests-phone,
.guests-meta,
.guests-note-text {
  display: block;
  font-size: 0.85rem;
  color: #5c5368;
}
.guests-meta-warn {
  color: #8a5300;
  font-weight: 600;
}
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge-pending {
  background: #fdf3e2;
  color: #7a4c00;
}
.badge-confirmed {
  background: #e7f4ec;
  color: #1f6640;
}
.badge-declined {
  background: #f2eef5;
  color: #4a4453;
}
.guests-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.link {
  background: none;
  border: none;
  color: #59306f;
  font-weight: 700;
  /* 44 px: por debajo de esto el pulgar falla, y en la lista de invitados hay
     una acción destructiva entre las demás. */
  min-height: 2.75rem;
  padding: 0 0.35rem;
  cursor: pointer;
  text-decoration: underline;
}
.link-danger {
  color: #a32020;
}
.hint {
  font-weight: 400;
  color: #5c5368;
  font-size: 0.85rem;
}
@media (max-width: 720px) {
  .guests-table thead {
    display: none;
  }
  .guests-table,
  .guests-table tbody,
  .guests-table tr,
  .guests-table td {
    display: block;
    width: 100%;
  }
  .guests-table tr {
    border: 1px solid #ece6f2;
    border-radius: 0.9rem;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .guests-table td {
    border: none;
    padding: 0.35rem 0.5rem;
  }
}

/* Diálogos */
.dialog {
  width: min(32rem, calc(100% - 2rem));
  border: none;
  border-radius: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 2rem 4rem #2113351f;
}
.dialog-wide {
  width: min(44rem, calc(100% - 2rem));
}
.dialog::backdrop {
  background: #21133566;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dialog-head h2 {
  margin: 0;
  font-size: 1.35rem;
}
.dialog-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.dialog-form fieldset {
  border: 1px solid #e6e0ef;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  display: grid;
  gap: 0.5rem;
}
.dialog-form legend {
  padding: 0 0.35rem;
  font-weight: 700;
}
.dialog-form .choice {
  min-height: 2.25rem;
  align-items: center;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
}
.choice input {
  min-height: auto;
}
.import-errors ul {
  max-height: 14rem;
  overflow: auto;
  gap: 0.35rem;
}
.import-errors li {
  border: none;
  border-left: 3px solid #a32020;
  border-radius: 0.25rem;
  background: #fdf0f0;
  padding: 0.5rem 0.75rem;
}
.link-card {
  border: 1px solid #e6e0ef;
  border-radius: 0.9rem;
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
}
.link-card h3 {
  margin: 0;
  font-size: 1.05rem;
}
.link-url {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  color: #5c5368;
  background: #f7f5fb;
  border-radius: 0.4rem;
  padding: 0.5rem;
}
.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.button,
a.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 0.65rem;
  background: #59306f;
  color: white;
  font-weight: 700;
  text-decoration: none;
}

.guests-page {
  accent-color: #59306f;
}
/* Una baja es poco frecuente y no debería competir visualmente con las acciones
   de todos los días; el subrayado aparece al apuntarla. */
.link-danger {
  text-decoration: none;
  font-weight: 600;
}
.link-danger:hover,
.link-danger:focus-visible {
  text-decoration: underline;
}

/* Sin esto, un botón apagado se ve idéntico a uno disponible y la persona
   cree que su clic no funcionó. */
button:disabled,
button[disabled] {
  background: #d6cde0;
  border-color: #d6cde0;
  color: #5c5368;
  cursor: not-allowed;
}
button.secondary:disabled {
  background: #f3eff7;
  color: #8d8498;
}

/* —— Álbum: moderación del anfitrión ———————————————————————————————— */

.album-admin .guests-summary {
  margin-bottom: 1rem;
}
.album-links {
  background: #f7f5fb;
  border: 1px solid #e6e0ef;
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.album-links p {
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}
.album-links p:last-child {
  margin-bottom: 0;
}
.album-link-url {
  color: #5c5368;
  font-size: 0.85rem;
}
.album-link {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e6e0ef;
}
.album-link:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.album-link > div:first-child {
  flex: 1 1 16rem;
  overflow-wrap: anywhere;
}
.album-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.35rem;
}
.album-link-actions .link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.album-link-qr svg {
  display: block;
  border-radius: 0.5rem;
}

/* —— Letrero de mesa del álbum —————————————————————————————————————— */

.sign-editor {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1rem 0;
}
.sign-controls label {
  display: block;
  margin-bottom: 0.75rem;
}
.sign-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* Media carta: es el tamaño en que se imprime de verdad un letrero de mesa. */
.sign-sheet {
  width: 100%;
  max-width: 21.6cm;
  aspect-ratio: 8.5 / 5.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #e6e0ef;
  border-radius: 0.5rem;
}
.sign-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 800;
  color: #6b4e2a;
  margin: 0;
}
.sign-sheet h3 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 0;
}
.sign-qr svg {
  display: block;
  width: min(45vw, 8cm);
  height: auto;
}
.sign-message {
  max-width: 28rem;
  margin: 0;
  font-size: 0.95rem;
}
.sign-footer {
  margin: 0;
  font-size: 0.85rem;
  color: #5c5368;
}

/* Al imprimir sale la hoja sola: el resto del panel no tiene nada que hacer en
   una mesa. Sin esto, el anfitrión imprimiría la consola entera. */
@media print {
  body.guests-page > *:not(.guests-main),
  .guests-main > *:not(.album-admin),
  .album-admin > *:not(.sign-editor),
  .sign-editor > .no-print {
    display: none !important;
  }
  .sign-editor {
    display: block;
    margin: 0;
  }
  .sign-sheet {
    border: 0;
    max-width: none;
    break-inside: avoid;
  }
}
/* La barra de acciones sigue al alcance del pulgar mientras se recorre la
   cuadrícula: moderar doscientas fotos no debería obligar a subir cada vez. */
.album-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border-bottom: 1px solid #ece6f2;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
}
.album-bar span {
  color: #5c5368;
  font-size: 0.9rem;
  margin-right: auto;
}
.album-bar button:not(.link) {
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid #cfc4da;
  background: white;
  /* El botón base de la hoja es violeta con texto blanco; al pasarlo a fondo
     claro hay que devolverle el color del texto o desaparece. */
  color: #3c3448;
  font-weight: 600;
}
.album-bar button:disabled {
  color: #9a92a6;
  border-color: #e6e0ef;
}
.album-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}
.album-grid li {
  position: relative;
  /* El borde sustituye al de la hoja general para marcar la selección, y el
     relleno se anula: aquí la foto llena la celda. */
  border: 2px solid transparent;
  border-radius: 0.75rem;
  padding: 0;
  overflow: hidden;
  background: #f7f5fb;
}
.album-grid li[data-selected='true'] {
  border-color: #59306f;
}
.album-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.album-grid label {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
  background: #ffffffd9;
  border-radius: 0.4rem;
  padding: 0.15rem 0.3rem;
  line-height: 0;
}
.album-grid input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #59306f;
}
.album-placeholder,
.album-by {
  display: block;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  color: #5c5368;
}
.album-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  text-align: center;
}

/* —— Fase 6: ciclo de vida, interés y solicitudes ——————————————————————— */
.lifecycle-card {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid #e6e0ef;
  border-radius: 1rem;
  background: #fdfcff;
}
.lifecycle-card h2 {
  margin-top: 0;
  font-size: 1.25rem;
}
.lifecycle-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.lifecycle-list {
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.lifecycle-list li {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  border: 1px solid #ece6f2;
  border-radius: 0.65rem;
  padding: 0.65rem 0.9rem;
  background: white;
}
/* Un hito vencido y sin procesar se ve; no se disimula como «programado». */
.lifecycle-list li[data-status='due'] {
  border-left: 3px solid #a86a12;
  background: #fdf7ee;
}
.lifecycle-list li[data-status='done'] {
  color: #5c5368;
}
.lifecycle-when {
  font-weight: 700;
}
.lifecycle-state {
  font-size: 0.85rem;
  color: #5c5368;
  text-align: right;
}
.lifecycle-notices {
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.lifecycle-notices li[data-status='failed'],
.lifecycle-notices li[data-status='uncertain'] {
  border-left: 3px solid #a32020;
}
.interest-card {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid #e6e0ef;
  border-radius: 1rem;
  background: #fdfcff;
}
.interest-card h2 {
  margin: 0;
  font-size: 1.35rem;
}
.interest-choice,
.privacy-kinds {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.interest-choice legend,
.privacy-kinds legend {
  padding: 0 0 0.35rem;
  font-weight: 600;
}
.privacy-kinds .choice {
  align-items: flex-start;
}
.privacy-kinds .choice span {
  display: grid;
  gap: 0.2rem;
}
.interest-check {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}
.interest-check input {
  min-height: auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}
.interest-legal {
  margin: 0;
  font-size: 0.85rem;
  color: #5c5368;
  border-top: 1px solid #ece6f2;
  padding-top: 0.75rem;
}
.interest-withdrawal {
  display: grid;
  gap: 0.35rem;
  word-break: break-all;
}
.privacy-inbox h2 {
  margin-top: 2rem;
  font-size: 1.2rem;
}
.privacy-resolve {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
  padding: 1.25rem;
  border: 1px solid #cfc4da;
  border-radius: 1rem;
  background: #f7f5fb;
}

/* Cambiar de puerta de entrada es la única acción secundaria del login: merece
   un área cómoda, no un enlace de 22 px perdido bajo el botón. */
.login-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  color: #59306f;
  font-weight: 700;
}

/* ── Listas del editor del operador ───────────────────────────────────────
   Sedes y regalos son listas: cada elemento se lee como una tarjeta aparte
   para que no se confundan los campos de una con los de otra. */
.editor-list {
  display: grid;
  gap: 1rem;
}
.editor-item {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e6e0ef;
  border-radius: 0.9rem;
  background: #fbfafd;
}
.editor-item-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.editor-item-head label {
  flex: 1 1 12rem;
}

/* Inventario de archivos del evento: nombre y una acción, legible en móvil. */
.media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.media-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e6e0ef;
  border-radius: 0.7rem;
  background: white;
}
.media-list li > span {
  display: grid;
  min-width: 0;
}
.media-list .guests-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}