/* XP6-MTF · Constructor de memoriales — constructor.css v20261106c1
   El formato constructor de la casa (el de SeixApps y Flyxs) aplicado a
   los memoriales: cinco preguntas, una a la vez; respuestas en texto o
   por voz con la guía en tres modos; la página memorial se va formando
   en vivo en la columna de al lado. Se apoya en crear.css (la página
   memorial marfil, la foto-obra con su Toque Maestro, los campos y
   botones de la casa) y en fase7.css (el sello). Aquí vive solo lo del
   constructor. Móvil primero. */

/* ── La doctrina de los momentos ────────────────────────────── */
.doctrina{border:1.5px solid rgba(217,164,65,.75);border-radius:14px;
  background:linear-gradient(180deg,rgba(217,164,65,.16),rgba(217,164,65,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.3);
  padding:14px 17px;margin:16px 0 0;font-size:15px;color:#f5e3b3}
.doctrina>strong{font-size:16.5px;color:#f2d492;letter-spacing:.2px}
.doctrina p{margin:6px 0 0;line-height:1.55}

/* ── Ver un ejemplo: fuera del flujo ────────────────────────── */
.ejemplo-zona{margin:14px 0 0}

/* ── Las píldoras del avance ────────────────────────────────── */
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.qchip{border:1px solid var(--linea-suave);color:var(--tinta);cursor:pointer;font:inherit;
  border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;
  background:linear-gradient(180deg,rgba(47,127,224,.13),rgba(11,26,48,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 9px rgba(0,0,0,.28);
  transition:transform .2s ease,border-color .25s ease,background .25s ease}
.qchip:hover{transform:translateY(-1px);border-color:rgba(88,150,235,.65)}
.qchip.on{border-color:var(--dorado);color:#f2d492;font-weight:700;
  background:linear-gradient(180deg,rgba(217,164,65,.22),rgba(217,164,65,.09));
  box-shadow:0 0 0 1px var(--dorado) inset,0 4px 12px rgba(0,0,0,.3)}
.qchip.hecho{border-color:rgba(62,214,127,.7);color:#7fe6ab}

/* ── La guía por voz: la caja de la casa ────────────────────── */
.guia-caja{border:1px solid rgba(88,150,235,.55);border-radius:16px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(47,127,224,.15),rgba(11,26,48,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 22px rgba(0,0,0,.3)}
.guia-modos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.voz-modo{border:1.5px solid var(--linea);color:var(--tinta);cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:700;border-radius:999px;padding:7px 13px;
  background:linear-gradient(180deg,#122642,#0d1f3a);
  transition:border-color .25s ease,background .25s ease}
.voz-modo:hover{border-color:rgba(88,150,235,.7)}
.voz-modo.on{border-color:var(--dorado);color:#f2d492;
  background:linear-gradient(180deg,rgba(217,164,65,.2),rgba(217,164,65,.08))}
.guia-txt{margin:0 0 10px;font-size:16px;line-height:1.5;min-height:24px}
.guia-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-voz{border:1.5px solid rgba(88,150,235,.8);color:#fff;cursor:pointer;font:inherit;
  font-size:16px;font-weight:800;border-radius:999px;padding:12px 20px;
  background:linear-gradient(180deg,#2f7fe0,#1d4ed8);
  box-shadow:0 8px 20px rgba(29,78,216,.35),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s ease,box-shadow .25s ease}
.btn-voz:hover{transform:translateY(-1px)}
.btn-voz.escuchando{border-color:var(--rojo);
  background:linear-gradient(180deg,#e0322d,#b91c1c);
  box-shadow:0 0 0 5px rgba(229,50,45,.18),0 8px 20px rgba(185,28,28,.4)}
.guia-oido{font-size:14.5px;color:#f2d492;font-style:italic}
.guia-estado{margin:8px 0 0;font-size:13.5px;color:var(--suave)}

/* ── Lo que falta, en palabras ──────────────────────────────── */
.falta{margin:14px 0 0;font-size:16.5px;font-weight:700;color:#f2d492;min-height:26px}
.falta.completa{color:#7fe6ab}

/* ── Las preguntas (crear.css da la tarjeta .paso) ──────────── */
.pregunta{scroll-margin-top:86px}
.pregunta[hidden]{display:none}
.pregunta h2{margin-top:0}
.pregunta .mini{font-size:15px;margin:18px 0 8px}
.campo-rotulo{display:block;font-size:13.5px;color:var(--suave);margin:16px 0 8px;font-weight:600}
.docs-lista{margin:8px 0 0;padding-left:20px;font-size:14px;color:#f2d492}
.ideas{display:grid;grid-template-columns:1fr;gap:9px}
.idea{text-align:left;font:inherit;font-size:15px;color:var(--tinta);cursor:pointer;
  border:1.5px solid var(--linea);border-radius:12px;padding:12px 14px;line-height:1.45;
  background:linear-gradient(180deg,#122642,#0d1f3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.28);
  transition:border-color .25s ease,transform .2s ease}
.idea:hover{border-color:var(--dorado);transform:translateY(-1px)}

/* ── La navegación del constructor ──────────────────────────── */
.cons-nav{display:flex;gap:10px;margin:16px 0 0}
.cons-nav .btn{flex:1;padding:15px;font-size:16.5px}
.cons-nav #btn-atras[hidden]{display:none}
.cons-nav #btn-seguir[hidden]{display:none}

/* ── La vista previa ────────────────────────────────────────── */
.previa-nota{text-align:center;font-size:13.5px;font-weight:700;letter-spacing:.4px;
  color:var(--suave);margin:0 0 10px;text-transform:uppercase}

/* ── Sellar: la única acción final ──────────────────────────── */
.sellar-zona{margin:22px 0 0;text-align:center}
.btn-sellar{width:100%;padding:19px 20px;font-size:20px;border-radius:16px;border:1px solid transparent;
  cursor:pointer;font-family:inherit;font-weight:800;color:#04240f;
  background:linear-gradient(180deg,#3ed67f,#24a75c);
  box-shadow:0 12px 30px rgba(47,191,113,.35),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s ease,box-shadow .25s ease}
.btn-sellar:hover{transform:translateY(-1px)}
.btn-sellar:active{transform:translateY(0)}
.sellar-nota{font-size:14px;color:var(--suave);margin:10px 0 0}
.sellar-zona .guardado-estado{text-align:center}
.sellar-acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 8px}
.sellar-zona .ayuda{text-align:center}

/* ── El Curador (opcional) ──────────────────────────────────── */
.curador-zona{margin:20px 0 0;text-align:center}
.curador{margin-top:12px;text-align:left;border:1px solid rgba(88,150,235,.55);border-radius:14px;
  padding:14px 16px;background:linear-gradient(180deg,rgba(47,127,224,.14),rgba(11,26,48,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 22px rgba(0,0,0,.3)}
.curador-txt{margin:0 0 10px;font-size:15.5px}
.curador-acciones{display:flex;gap:9px;flex-wrap:wrap}

/* ── El ejemplo: ventana aparte, solo para mirar ────────────── */
.ejemplo-overlay{position:fixed;inset:0;z-index:60;overflow:auto;padding:18px 12px 40px;
  background:rgba(4,10,22,.86)}
.ejemplo-overlay[hidden]{display:none}
.ejemplo-caja{max-width:640px;margin:0 auto}
.ejemplo-cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  color:#f5e3b3;font-size:14.5px;margin-bottom:14px}
.ejemplo-cab p{margin:4px 0 0;line-height:1.5}
.ejemplo-cab .btn{flex:none}

@media (min-width:760px){
  .pregunta .campo input,.pregunta .campo textarea{font-size:16px}
}

/* Impresión: solo la página memorial */
@media print{
  body{background:#fff}
  .cabecera,.intro,h1,.doctrina,.aviso-ensayo,.ejemplo-zona,.col-form,
  .curador-zona,.pie,.ejemplo-overlay,.previa-nota{display:none !important}
  .modulo{padding:0}
  .pagina{box-shadow:none;margin:0 auto;max-width:100%}
}