/* Mika — asistente de creación con vista previa en vivo (rediseño R3, 2026-11-03). Tramo 5f. Pasos en círculos, formulario a
   la izquierda y la maqueta a la derecha (en móvil, la maqueta pasa arriba y más chica). Los campos de cada paso son los de
   2-editor.css y 3-inicio.css; aquí solo el armazón. Colores de los tokens. */
.crear { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2.5rem) 3rem; display: grid; gap: 1.25rem; align-content: start; }
.crear__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.crear__cabeza .volver { display: inline-flex; align-items: center; min-height: 44px; }
.crear .asistente__pasos { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.25rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-grande); list-style: none; }
.crear .asistente__pasos li { flex: none; display: flex; align-items: center; gap: .55rem; padding: 0; border: 0; counter-increment: none; font-size: .85rem; }
.crear .asistente__pasos li::before { content: none; }
.crear .asistente__pasos li:not(:last-child) { flex: 1; }
.crear .asistente__pasos li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.asistente__num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-suave); }
.crear .asistente__pasos li.hecho .asistente__num { background: var(--suave); border-color: var(--coral); color: var(--coral-oscuro); }
.crear .asistente__pasos li[aria-current="step"] .asistente__num { background: var(--coral); border-color: var(--coral); color: var(--blanco); }
.crear .asistente__pasos li[aria-current="step"] { color: var(--coral-oscuro); font-weight: 700; }

.crear__cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.crear .asistente { padding: 2.1rem; border: 1px solid var(--linea); border-radius: 19px; box-shadow: 0 15px 50px #30204b06; background: var(--blanco); backdrop-filter: none; -webkit-backdrop-filter: none; }
.crear .paso-asistente { min-height: 0; }
.crear .paso-asistente legend.paso { display: block; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.04em; line-height: 1.15; margin-bottom: 1rem; }
.crear .paso-asistente legend .paso__ojo { display: block; width: auto; height: auto; margin-bottom: 1.1rem; border-radius: 0; background: none; color: var(--coral-oscuro);
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; line-height: 1.4; }
.crear .campo { margin-bottom: 1rem; }
.campo__rotulo { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.crear textarea, .crear .campo input { background: var(--blanco); }
.crear .campo input { min-height: 48px; }
.crear .asistente__botones { position: static; background: none; backdrop-filter: none; margin-top: 1.25rem; padding-top: 1rem; }
.crear .asistente__botones .boton { min-width: 7.5rem; }

/* Vista previa en vivo */
.vivo { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.vivo__ojo { font-size: .72rem; letter-spacing: .17em; font-weight: 700; text-transform: uppercase; color: var(--tinta-suave); }
.vivo__marco { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden; box-shadow: 0 20px 45px #30204b0d;
  transform: perspective(900px) rotateY(-4deg) rotateZ(1deg); }
.vivo__barra { display: flex; align-items: center; gap: .35rem; padding: .6rem .9rem; border-bottom: 1px solid var(--linea); font-size: .72rem; color: var(--tinta-suave); }
.vivo__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.vivo__barra span { margin: 0 auto; }
/* la maqueta es una página de ejemplo: va en colores propios (como la vista previa del editor) en claro y en oscuro */
.vivo__pagina { background: #fffaf3; color: #3a2a1e; }
.vivo__menu { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; font-size: .72rem; }
.vivo__menu b { font-size: .85rem; }
.vivo__menu span { color: #6b5a4b; }
.vivo__hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.vivo__texto { padding: 1.2rem 1rem; display: grid; gap: .5rem; align-content: center; }
.vivo__texto h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.12; overflow-wrap: anywhere; }
.vivo__texto p { font-size: .72rem; color: #6b5a4b; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vivo__boton { justify-self: start; background: #1f5c46; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .3rem .8rem; }
.vivo__hero img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; }
.vivo__fichas { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.vivo__fichas li { font-size: .78rem; font-weight: 600; background: var(--suave); color: var(--coral-oscuro); border-radius: 999px; padding: .2rem .7rem; }
.vivo__nota { display: flex; align-items: flex-start; gap: .7rem; font-size: .82rem; line-height: 1.7; color: var(--tinta-suave); border: 1px solid var(--linea); background: var(--blanco); border-radius: 11px; padding: 1rem; }
.vivo__nota svg { flex: none; color: var(--coral); }

@media (max-width: 960px) {
  .crear__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .vivo { position: static; }
  .vivo__marco { transform: none; }
  .vivo__hero img { min-height: 110px; }
}
@media (max-width: 600px) {
  .crear .asistente__pasos { padding: .8rem .4rem; gap: .2rem; }
  .crear .asistente__pasos li, .crear .asistente__pasos li:not(:last-child) { flex: 1; flex-direction: column; gap: .35rem; font-size: .68rem; text-align: center; }
  .crear .asistente__pasos li:not(:last-child)::after { display: none; }
  .crear .asistente { padding: 1.4rem; }
}
.crear .material__fila input[type="url"] { min-height: 44px; }
.crear .estilo, .crear .plantilla, .crear .letra { min-height: 44px; }
.crear summary { display: flex; align-items: center; min-height: 44px; }
/* Dictado por voz (js/dictado.js): un solo micrófono fijo, escribe en el campo donde esté la persona. */
.dictado-fijo { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.dictado-fijo[hidden] { display: none; }
@media (max-width: 860px) { .dictado-fijo { bottom: calc(68px + 1rem + env(safe-area-inset-bottom)); } }  /* encima de la barra inferior del móvil */
@media (max-width: 860px) { body:has(#vista-editor:not([hidden])) .dictado-fijo { bottom: calc(68px + 12rem + env(safe-area-inset-bottom)); } }  /* y encima del recuadro del chat, donde está «Enviar» */
.dictado-fijo > * { pointer-events: auto; }
.dictado.dictado--fijo { width: 56px; height: 56px; border-radius: 50%; background: var(--blanco); box-shadow: 0 8px 24px #30204b33; }
.dictado { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; background: transparent; color: var(--ink);
  border: 1px solid var(--linea); border-radius: 12px; cursor: pointer; }
.dictado:hover { background: var(--soft); }
.dictado .icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dictado__alto { display: none; fill: currentColor !important; }
/* Grabando: cambia la FORMA (micrófono → cuadrado de detener) y el borde, no solo el color; el pulso respeta prefers-reduced-motion. */
.dictado--activo { border: 3px solid var(--primary); background: var(--soft); }
.dictado--activo .dictado__mic { display: none; }
.dictado--activo .dictado__alto { display: block; color: var(--aviso); }
@media (prefers-reduced-motion: no-preference) {
  .dictado--activo { animation: dictado-pulso 1.2s ease-in-out infinite; }
}
@keyframes dictado-pulso { 50% { box-shadow: 0 0 0 6px var(--soft); } }
.dictado__aviso { max-width: min(18rem, calc(100vw - 2.5rem)); margin: 0; padding: .5rem .75rem; background: var(--blanco); color: var(--ink); border: 1px solid var(--linea); border-radius: 10px; font-size: .875rem; font-weight: 600; }
.dictado__aviso--error { color: var(--aviso); }

/* «¿Solo informativa o también con tienda en línea?» (unidad B1, 2026-11-10): dos opciones grandes, cada una toda clicable */
.tipo-pagina { border: 0; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.tipo-pagina > legend { margin-bottom: .5rem; }
.tipo-pagina__opcion { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; min-height: 44px;
  padding: 1rem; border: 2px solid var(--linea); border-radius: var(--radio-grande); background: var(--blanco); cursor: pointer; }
.tipo-pagina__opcion input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; grid-row: span 2; accent-color: var(--coral-oscuro); }
.tipo-pagina__opcion:has(input:checked) { border-color: var(--coral-oscuro); }
.tipo-pagina__opcion:has(input:focus-visible) { outline: 3px solid var(--coral-oscuro); outline-offset: 2px; }
.tipo-pagina__titulo { font-weight: 700; color: var(--ink); }