/* Editor de invitaciones: pantalla de trabajo, no forma parte del diseño de las tarjetas. */
:root {
  --fondo: #f3efe9;
  --panel: #ffffff;
  --tinta: #2b2925;
  --suave: #716b62;
  --linea: #e3dcd0;
  --acento: #a8834f;
  --acento-oscuro: #86673b;
  --oscuro: #2b2925;
  --aviso: #b3472f;
  --radio: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: "Jost", "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--fondo); font-size: 16px; line-height: 1.45; }
[hidden] { display: none !important; }
/* El selector de archivos va escondido DENTRO de su botón. Si quedara suelto, se ubicaría respecto de la página entera
   y, al volver de elegir un archivo, el navegador correría toda la página para mostrarlo. */
.oculto { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.elige-archivo { position: relative; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 9px 18px; font-weight: 500; font-size: 15px; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.btn.primario { background: var(--oscuro); color: #fff; }
.btn.primario:hover { background: var(--acento-oscuro); }
.btn.secundario { background: #fff; border-color: var(--linea); color: var(--tinta); }
.btn.secundario:hover { border-color: var(--acento); }
.btn.texto { background: none; color: var(--aviso); padding: 6px 8px; }
.btn.chico { padding: 7px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icono { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.icono:hover:not(:disabled) { border-color: var(--acento); }
.icono:disabled { opacity: .35; cursor: default; }
.pildora { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #f4ead9; color: var(--acento-oscuro); }
.pildora.gris { background: #eeeae4; color: var(--suave); }

/* ---------- Pantalla inicial ---------- */
#elegir { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.elegir-caja { width: 100%; max-width: 1040px; min-width: 0; text-align: center; }
.elegir-caja .tipos { max-width: 820px; margin-left: auto; margin-right: auto; }
.sobretitulo { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--acento); }
#elegir h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(36px, 6vw, 52px); line-height: 1.1; margin: 10px 0; }
.bajada { color: var(--suave); font-size: 18px; margin-bottom: 30px; }
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.tipo { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; text-decoration: none; color: inherit; text-align: left; transition: border-color .2s, translate .2s; }
.tipo:hover { border-color: var(--acento); translate: 0 -2px; }
.tipo-color { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.tipo-nombre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 23px; white-space: nowrap; }

/* ---------- Estructura del editor ---------- */
#editor { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.barra { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.marca { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; color: inherit; text-decoration: none; }
.evento { color: var(--suave); padding-left: 12px; border-left: 1px solid var(--linea); }
.plan { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; margin-left: auto; }
.plan button { border: 0; background: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--suave); }
.plan button[aria-pressed="true"] { background: var(--oscuro); color: #fff; }
.guardado { font-size: 13px; color: var(--suave); min-width: 150px; text-align: right; }

.cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 440px) 1fr; }
.panel { background: var(--panel); border-right: 1px solid var(--linea); overflow-y: auto; }
.previa { overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; min-height: 0; }
.telefono { height: min(100%, 800px); aspect-ratio: 390 / 800; max-width: 100%; border-radius: 38px; padding: 10px; background: #1a1a1a; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.telefono { --k: 1; overflow: hidden; }
/* La invitación se dibuja siempre a 390 px de ancho (un celular real) y se escala para entrar en el marco */
.telefono iframe { width: 390px; height: calc(100% / var(--k)); border: 0; border-radius: calc(29px / var(--k)); background: #fff; display: block;
                   transform: scale(var(--k)); transform-origin: 0 0; }
.previa-nota { font-size: 13px; color: var(--suave); }
.alternar { display: none; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--linea); }
.pestanas button { flex: 1; padding: 13px 8px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; color: var(--suave); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.pestana { padding: 16px; display: grid; gap: 10px; }
.intro { color: var(--suave); font-size: 14px; margin-bottom: 4px; }
.pestana h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; margin-top: 6px; }

/* ---------- Bloques de contenido ---------- */
.bloque { border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.bloque summary { list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.bloque summary::-webkit-details-marker { display: none; }
.bloque summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--suave); transition: rotate .2s; }
.bloque[open] summary::after { rotate: 90deg; }
.bloque[open] summary { border-bottom: 1px solid var(--linea); }
.bloque-cuerpo { padding: 14px; display: grid; gap: 14px; }

.campo { display: grid; gap: 5px; }
.campo > label, .etiqueta { font-size: 13px; font-weight: 500; color: var(--suave); }
.campo input[type="text"], .campo input[type="datetime-local"], .campo textarea {
  width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 11px; background: #fdfcfa;
}
.campo textarea { resize: vertical; min-height: 44px; }
.campo input:focus, .campo textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px rgba(168, 131, 79, .18); }
.ayuda { font-size: 12.5px; color: var(--suave); }
.casilla { grid-template-columns: auto 1fr; align-items: start; gap: 9px; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acento-oscuro); }
.casilla span { font-size: 15px; color: var(--tinta); font-weight: 400; }

.lista { gap: 10px; }
.item { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px 12px; display: grid; gap: 10px; background: #faf8f4; }
.item-cabeza { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.item-cabeza span { margin-right: auto; }
.lista > .btn { justify-self: start; }

.foto-fila { display: flex; gap: 12px; align-items: center; }
.mini { width: 72px; height: 90px; border-radius: 6px; object-fit: cover; background: #ece6dc; flex: none; }
.mini.cuadrada { height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--linea); }
.mini.vacia { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--suave); border: 1px dashed #cfc6b8; }
.foto-controles { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foto-controles.enlinea { flex-direction: row; align-items: center; }
.deslizador { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.deslizador input { accent-color: var(--acento-oscuro); width: 100%; }

/* ---------- Pestaña Bloques ---------- */
.fila-bloque { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.fila-bloque label { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-right: auto; font-weight: 500; }
.fila-bloque input { width: 18px; height: 18px; accent-color: var(--acento-oscuro); }
.fila-bloque.apagado { background: #faf8f4; }
.fila-bloque.apagado label { color: var(--suave); font-weight: 400; }

/* ---------- Pestaña Diseño ---------- */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.paleta { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; cursor: pointer; text-align: left; font-size: 13.5px; }
.muestras { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.muestras i { flex: 1; }
.paleta.elegida, .fuente.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(168, 131, 79, .3); }
.campo.color { grid-template-columns: 1fr auto auto; align-items: center; margin: 6px 0; }
.campo.color input { width: 46px; height: 34px; padding: 0; border: 1px solid var(--linea); border-radius: 8px; background: none; cursor: pointer; }
.fuentes { display: grid; gap: 8px; }
.fuente { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; cursor: pointer; text-align: left; }
.fuente-nombre { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.fuente-script { line-height: 1.25; }
.fuente-serif { font-size: 16px; color: var(--suave); }

/* ---------- Avisos ---------- */
dialog { border: 0; border-radius: 14px; padding: 24px; max-width: min(420px, calc(100vw - 32px)); margin: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(30, 28, 24, .5); }
dialog h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 28px; margin-bottom: 8px; }
dialog p { color: var(--suave); }
.aviso-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- Celular: se alterna entre editar y ver ---------- */
@media (max-width: 860px) {
  .cuerpo { grid-template-columns: 1fr; }
  .previa { display: none; padding: 10px 10px 70px; }
  #editor.ver-previa .panel { display: none; }
  #editor.ver-previa .previa { display: flex; }
  .panel { padding-bottom: 70px; border-right: 0; }
  .alternar { display: block; position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 5; border: 0; border-radius: 999px; padding: 12px 22px; background: var(--oscuro); color: #fff; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); cursor: pointer; }
  .evento, #btn-reiniciar { display: none; }
  .barra { padding: 8px 12px; gap: 6px 10px; }
  .marca { font-size: 21px; }
  .plan { margin-left: auto; }
  .plan button { padding: 5px 11px; font-size: 13px; }
  .barra .btn { padding: 7px 14px; font-size: 14px; }
  .cuenta { order: 5; font-size: 13px; }
  .guardado { order: 6; min-width: 0; margin-left: auto; text-align: right; font-size: 12px; }
  #btn-guardar-cuenta { order: 4; }
}

/* ---------- Cuenta ---------- */
.cuenta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.enlace { color: var(--tinta); font-weight: 500; }
.btn.texto.neutro { color: var(--tinta); }
.form-cuenta { display: grid; gap: 12px; margin-top: 16px; }
.form-cuenta label { display: grid; gap: 5px; }
.form-cuenta label span { font-size: 13px; font-weight: 500; color: var(--suave); }
.form-cuenta input { width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: #fdfcfa; }
.form-cuenta input:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px rgba(168, 131, 79, .18); }
.error { color: var(--aviso); font-size: 14px; min-height: 1.2em; }
.aviso-botones.entre { justify-content: space-between; margin-top: 10px; }

/* ---------- Pantalla inicial: elegir modelo ---------- */
.modelos-elegir { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 18px; }
.modelo-elegir { display: grid; gap: 10px; justify-items: center; text-decoration: none; color: inherit; padding: 12px 12px 14px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; transition: border-color .2s, translate .2s; }
.modelo-elegir:hover { border-color: var(--acento); translate: 0 -3px; }
/* Miniatura: la invitación real, dibujada a 390 px y achicada */
.mini-tel { display: block; width: 156px; height: 320px; border-radius: 14px; overflow: hidden; background: #eee; pointer-events: none; }
.mini-tel iframe { width: 390px; height: 800px; border: 0; transform: scale(.4); transform-origin: 0 0; }

/* ---------- Publicar y compartir ---------- */
#dialogo-publicar { width: min(460px, calc(100vw - 32px)); }
#form-canje input { text-transform: uppercase; letter-spacing: .12em; font-weight: 500; text-align: center; font-size: 18px; }
#form-canje input::placeholder { letter-spacing: .12em; font-weight: 400; color: #b9b1a5; }
.compartir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plan button:disabled { cursor: not-allowed; opacity: .55; }
.btn.ancho { width: 100%; padding: 13px 18px; margin-top: 14px; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 13px; margin: 16px 0 4px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.boton-google { display: flex; justify-content: center; min-height: 44px; margin-top: 10px; }
.biblioteca { display: grid; gap: 8px; margin-bottom: 10px; }
.biblioteca select { width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 10px; background: #fdfcfa; }
.biblioteca audio { width: 100%; height: 36px; }

/* ---------- La invitación a pantalla completa ---------- */
.ver-completa { padding: 9px 18px 9px 12px; flex: none; }
.ver-completa svg { width: 22px; height: 22px; fill: var(--acento-oscuro); }
.completa { position: fixed; inset: 0; z-index: 50; background: #111; }
.completa iframe { display: block; width: 100%; height: 100%; border: 0; }
.completa .btn { position: absolute; top: 14px; right: 16px; z-index: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
@media (max-width: 860px) { .completa .btn { top: 10px; right: 10px; padding: 8px 14px; font-size: 14px; } }