/* ============================================================
   CONFIRMAME — Álbum de fotos por QR
   Todo va dentro de .fx para no pisar los estilos de la invitación.
   Colores: --fx-* (la página de fotos los define desde fotos.json;
   dentro de una invitación toman los --sx-* del tema).
   ============================================================ */
.fx {
  --_texto:   var(--fx-texto,   var(--sx-dark, #2c2c2e));
  --_titulo:  var(--fx-titulo,  var(--sx-dark, #1c1c1e));
  --_apagado: var(--fx-apagado, var(--sx-gray, #77787b));
  --_borde:   var(--fx-borde,   var(--sx-border, rgba(0,0,0,.14)));
  --_suave:   var(--fx-borde-suave, var(--sx-border, rgba(0,0,0,.1)));
  --_boton:   var(--fx-boton,   var(--sx-accent, #A37D3A));
  --_boton-t: var(--fx-boton-texto, #fff);
  --_acento:  var(--fx-acento,  var(--sx-accent, #A37D3A));
  --_campo:   var(--fx-campo,   rgba(127,127,127,.08));
  --_fondo:   var(--fx-fondo,   var(--sx-bg, #fff));
  --_serif:   var(--fx-serif,   var(--font-h, Georgia, serif));
  --_sans:    var(--fx-sans,    var(--font-b, system-ui, sans-serif));
  color: var(--_texto);
  font-family: var(--_sans);
  text-align: center;
}
.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx [hidden] { display: none !important; }
.fx h2 { font: 500 clamp(1.7rem, 5vw, 2.4rem)/1.2 var(--_serif); color: var(--_titulo); margin: .4rem 0 .8rem; }
.fx p { color: var(--_apagado); margin: .6rem 0; line-height: 1.6; }
.fx-eyebrow { font: 500 .72rem var(--_sans); letter-spacing: .3em; text-transform: uppercase; color: var(--_apagado); }
.fx-hint { font-size: .74rem; color: var(--_apagado); }
.fx-notice { border: 1px dashed var(--_suave); border-radius: 12px; padding: .7rem 1rem; margin: 0 auto 1rem; max-width: 34rem; font-size: .8rem; color: var(--_apagado); }
.fx-status { white-space: pre-line; min-height: 1.4em; margin: .8rem auto; font-size: .9rem; }
.fx :focus-visible { outline: 2px solid var(--_acento); outline-offset: 3px; }

/* Botones */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 600 .74rem/1.4 var(--_sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--_boton-t); background: var(--_boton); border: 1px solid var(--_boton);
  border-radius: 999px; padding: .8rem 1.4rem; cursor: pointer; touch-action: manipulation;
  transition: opacity .2s, transform .15s;
}
.fx-btn:hover { opacity: .88; color: var(--_boton-t); }
.fx-btn:disabled { opacity: .45; cursor: wait; }
.fx-btn--ghost { background: transparent; color: var(--_texto); border-color: var(--_borde); }
.fx-btn--ghost:hover { color: var(--_texto); }
.fx-btn--big { min-width: 15rem; padding: 1rem 1.6rem; font-size: .8rem; }
.fx-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: .9rem 0; }

/* Selector de archivos */
.fx-picker {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  min-height: 9.5rem; max-width: 34rem; margin: 1.4rem auto .8rem; padding: 1.4rem;
  border: 1.5px dashed var(--_borde); border-radius: 18px; background: var(--_campo); cursor: pointer;
  font: 600 .8rem var(--_sans); letter-spacing: .12em; text-transform: uppercase; color: var(--_titulo);
  transition: border-color .2s, background .2s;
}
.fx-picker:hover, .fx-picker.is-over { border-color: var(--_acento); }
.fx-picker:focus-within { outline: 2px solid var(--_acento); outline-offset: 3px; }
.fx-picker svg { width: 2.3rem; height: 2.3rem; margin-bottom: .6rem; color: var(--_acento); }
.fx-picker small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--_apagado); }
.fx-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fx-field { display: block; max-width: 34rem; margin: .4rem auto; text-align: left; font-size: .8rem; color: var(--_apagado); }
.fx input[type=text], .fx input[type=password], .fx select {
  width: 100%; margin-top: .35rem; padding: .8rem .9rem; border-radius: 10px;
  border: 1px solid var(--_borde); background: var(--_campo); color: var(--_titulo); font: .95rem var(--_sans);
}
.fx select { width: auto; margin: 0; }
.fx-switch { display: flex; align-items: center; gap: .6rem; justify-content: flex-start; font-size: .9rem; cursor: pointer; margin: .3rem 0; }
.fx-switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--_acento); }

/* Cola */
.fx-queue { list-style: none; max-width: 34rem; margin: .8rem auto; padding: 0; text-align: left; }
.fx-file { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--_suave); }
.fx-file img, .fx-ph { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--_campo); display: flex; align-items: center; justify-content: center; }
.fx-meta { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .88rem; }
.fx-meta small { display: block; color: var(--_apagado); }
.fx-meta small.ok { color: #2f9e5b; }
.fx-meta small.bad { color: #d64545; }
.fx-file .fx-btn { padding: .35rem .7rem; }
.fx progress { width: 100%; max-width: 34rem; height: 8px; accent-color: var(--_acento); }

/* Grilla */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; margin: 1.3rem 0; text-align: left; }
.fx-card { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--_suave); background: var(--_campo); animation: fxIn .4s ease both; }
@keyframes fxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fx-picture { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; color: var(--_texto); cursor: pointer; font: .85rem var(--_sans); }
.fx-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.fx-picture:hover img { transform: scale(1.04); }
.fx-badge { position: absolute; top: .45rem; right: .45rem; padding: .1rem .5rem; border-radius: 6px; font-size: .75rem; background: rgba(0,0,0,.6); color: #fff; pointer-events: none; }
.fx-by { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .6rem .35rem; font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-card label { display: flex; gap: .5rem; align-items: center; padding: .55rem; font-size: .72rem; overflow-wrap: anywhere; cursor: pointer; }
.fx-card label input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; accent-color: var(--_acento); }
.fx-card.is-selected { border-color: var(--_acento); box-shadow: 0 0 0 1px var(--_acento); }

/* Visor */
.fx-viewer { width: min(920px, 96vw); max-width: 96vw; max-height: 96vh; overflow: auto; padding: .9rem; border-radius: 18px; border: 1px solid var(--_borde); background: var(--_fondo); color: var(--_texto); }
.fx-viewer::backdrop { background: rgba(0,0,0,.85); }
.fx-media { min-height: 12rem; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.fx-media img, .fx-media video { display: block; max-width: 100%; max-height: 72vh; margin: auto; border-radius: 10px; }
.fx-viewer .fx-status { font-size: .8rem; color: var(--_apagado); }
.fx-viewer .fx-toolbar { margin-bottom: 0; }

/* QR dentro de la invitación */
.fx-qr { width: 9rem; margin: 1.6rem auto .4rem; padding: .35rem; background: #fff; border-radius: 10px; border: 1px solid var(--_suave); }
.fx-qr svg { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .fx-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .fx-btn--big { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx * { animation: none !important; transition: none !important; } }

/* ============================================================
   Página propia de fotos (layouts/fotos.njk y amigos)
   ============================================================ */
.fx-page {
  margin: 0; min-height: 100vh; color: var(--fx-texto); font-family: var(--fx-sans);
  background:
    radial-gradient(ellipse at 0 35%, var(--fx-fondo-luz) 0, transparent 50%),
    radial-gradient(ellipse at 100% 80%, var(--fx-fondo-luz-2) 0, transparent 50%),
    var(--fx-fondo);
}
.fx-page::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .7;
  background-image:
    radial-gradient(circle at 12% 20%, var(--fx-brillo) 0, transparent 2px),
    radial-gradient(circle at 90% 40%, var(--fx-acento) 0, transparent 2.5px),
    radial-gradient(circle at 17% 78%, var(--fx-acento) 0, transparent 2px),
    radial-gradient(circle at 83% 92%, var(--fx-brillo) 0, transparent 2px),
    radial-gradient(circle at 60% 8%, var(--fx-brillo) 0, transparent 1.5px);
}
.fx-page a { color: var(--fx-titulo); }
.fx-main { position: relative; z-index: 1; max-width: 960px; margin: auto; padding: 2.8rem 1rem 1.5rem; }
.fx-header { text-align: center; margin-bottom: 1.6rem; }
.fx-name { font: 400 clamp(3.8rem, 16vw, 5.4rem)/1.1 var(--fx-script), cursive; color: var(--fx-titulo); margin: 1rem 0 .5rem; text-shadow: 0 0 30px rgba(255,255,255,.12); }
.fx-name span { font: 400 1.9rem var(--fx-serif); margin-left: .3rem; letter-spacing: .08em; }
.fx-date { font: 1rem var(--fx-serif); letter-spacing: .32em; }
.fx-ornament { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.4rem; color: var(--fx-apagado); }
.fx-ornament::before, .fx-ornament::after { content: ''; width: 4.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-borde)); }
.fx-ornament::after { transform: rotate(180deg); }
.fx-tabs { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.fx-tabs a { font: 600 .7rem var(--fx-sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--fx-titulo); border: 1px solid var(--fx-borde-suave); border-radius: 999px; padding: .75rem 1.25rem; }
.fx-tabs a[aria-current=page] { background: var(--fx-boton); border-color: var(--fx-borde); }
.fx-panel { border: 1px solid var(--fx-borde); border-radius: 28px; padding: 2.1rem 1.7rem; background: var(--fx-panel); box-shadow: 0 0 45px rgba(0,0,0,.25), inset 0 0 28px rgba(255,255,255,.03); }
.fx-footer { text-align: center; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-apagado); margin: 1.6rem 0 .6rem; line-height: 2; }
.fx-footer a { color: var(--fx-apagado); }
@media (max-width: 600px) { .fx-main { padding-top: 2rem; } .fx-panel { padding: 1.7rem 1rem; border-radius: 22px; } }