/* Mika — editor, campos, pestañas, plantillas, avance, asistente y letras. Tramo 2 de 5 del estilo de la interfaz: se cargan EN ORDEN
   (index.html) y la cascada es la de un solo archivo. */
/* EDITOR */
.editor { flex: 1; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; min-height: 0; }
.chat { display: flex; flex-direction: column; background: var(--blanco); border-right: 1px solid var(--linea); min-height: 0; }
.chat__mensajes { list-style: none; flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.msj { max-width: 88%; padding: .7rem .95rem; border-radius: 16px; white-space: pre-wrap; font-size: .95rem; }
.msj--usuario { align-self: flex-end; background: var(--tinta); color: var(--blanco); border-bottom-right-radius: 4px; }
.msj--mika { align-self: flex-start; background: var(--fondo); border-bottom-left-radius: 4px; }
.msj__autor { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--coral-oscuro); margin-bottom: .15rem; }
.msj--sistema { align-self: center; background: none; color: var(--tinta-suave); font-size: .82rem; text-align: center; }
.msj--trabajando { align-self: flex-start; background: var(--fondo); color: var(--tinta-suave); font-style: italic; }
.msj--error { align-self: flex-start; background: var(--aviso-fondo); color: var(--aviso); }
.msj__version { display: block; font-size: .75rem; opacity: .6; margin-top: .25rem; }
.chat__entrada { display: flex; gap: .5rem; padding: .9rem; border-top: 1px solid var(--linea); }
.chat__entrada textarea { padding: .65rem .8rem; resize: none; }
.chat__entrada .boton { align-self: flex-end; padding: .65rem 1rem; }

.previa { display: flex; flex-direction: column; min-height: 0; padding: 1rem; gap: .75rem; }
.previa__aviso { background: var(--aviso-fondo); color: var(--aviso); border-radius: var(--radio); padding: .6rem 1rem;
                 font-weight: 600; font-size: .92rem; }
.previa__marco { flex: 1; position: relative; display: flex; justify-content: center; min-height: 0; }
.previa__marco iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radio); background: var(--blanco);
                        box-shadow: var(--sombra); transition: width .25s ease; }
.previa__marco.movil iframe { width: 390px; }
.previa__cargando { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
                    background: rgba(246, 244, 240, .94); border-radius: var(--radio); text-align: center; font-weight: 600; }
.girador { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--linea); border-top-color: var(--coral);
           animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.previa__pie { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.versiones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.versiones button { border: 1px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: .15rem .65rem; }
.versiones button[aria-current="true"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.estilos--compacto { display: flex; align-items: center; gap: .5rem; margin: 0; }
.estilos--compacto legend { float: left; margin: 0 .25rem 0 0; font-weight: 600; font-size: .88rem; }
.estilos--compacto .estilo { padding: .3rem .7rem; display: flex; align-items: center; gap: .4rem; }
.estilos--compacto .estilo__desc { display: none; }

@media (max-width: 860px) {
  .inicio { grid-template-columns: 1fr; }
  .pistas, .estilos { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; grid-template-rows: 55vh auto; }
  .chat { border-right: 0; border-top: 1px solid var(--linea); order: 2; }
}

/* En la barra oscura, el botón secundario va en claro (si no, el texto desaparece). */
.barra .boton--secundario { color: var(--blanco); border-color: rgba(255,255,255,.35); }
.barra .boton--secundario:hover:not([aria-disabled="true"]) { background: rgba(255,255,255,.12); color: var(--blanco); }
.barra .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* En el celular la vista previa ya es móvil: sobran el selector de dispositivo y «Abrir en pestaña». */
@media (max-width: 860px) {
  .barra { gap: .6rem; padding: .6rem .9rem; }
  .barra .dispositivo, .barra__acciones .boton--secundario { display: none; }
  .barra__centro strong { font-size: .95rem; }
  .barra .boton { padding: .5rem .9rem; font-size: .9rem; }
}

/* Pasos del formulario de creación */
.paso { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; margin: 1.75rem 0 .8rem; }
.paso:first-child { margin-top: 0; }
.paso span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
             background: var(--tinta); color: var(--blanco); font-size: .9rem; }

/* Campos de datos */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo textarea { font: inherit; font-weight: 400; border: 2px solid var(--linea); border-radius: 10px;
               padding: .6rem .75rem; background: var(--blanco); color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 3.6em; }
.campo input:focus, .campo textarea:focus { border-color: var(--coral); outline: none; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--aviso); }
.estilos__titulo { font-weight: 600; font-size: .9rem; margin-right: .25rem; }
#respuestas-crear .estilos--compacto { margin-bottom: 1rem; }
#respuestas-crear .campos { grid-template-columns: repeat(2, 1fr); }
#respuestas-crear .campo:first-child { grid-column: 1 / -1; }
#respuestas-crear .campo:not(:first-child) { grid-column: auto; }
@media (max-width: 860px) { #respuestas-crear .campos { grid-template-columns: 1fr; } }
.campo .error { color: var(--aviso); font-weight: 600; min-height: 0; }
.campo .error:empty { display: none; }

/* Pestañas del editor */
.pestanas { display: flex; border-bottom: 1px solid var(--linea); }
.pestanas button { flex: 1; background: none; border: 0; padding: .85rem; font-weight: 600; color: var(--tinta-suave);
                   border-bottom: 3px solid transparent; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--coral); }
.panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel--datos { overflow-y: auto; padding: 1.25rem; }
.panel--datos form { display: flex; flex-direction: column; gap: 1rem; }
.panel--datos .campos { grid-template-columns: 1fr; }
.panel--datos .boton { align-self: flex-start; }
.previa__aviso button { background: none; border: 0; color: inherit; font-weight: 800; text-decoration: underline; }
@media (max-width: 860px) { .campos { grid-template-columns: 1fr; } }

/* Plantillas (inicio y editor) */
.plantillas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.plantillas--columna { grid-template-columns: 1fr 1fr; }
.plantilla { display: flex; flex-direction: column; gap: .35rem; text-align: left; background: var(--blanco);
             border: 2px solid var(--linea); border-radius: var(--radio); padding: .5rem; color: var(--tinta); }
.plantilla[aria-checked="true"] { border-color: var(--coral); box-shadow: var(--sombra); }
.plantilla:hover:not(:disabled) { border-color: var(--coral); }
.plantilla img, .plantilla__auto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
             border-radius: 8px; background: var(--fondo); }
.plantilla__auto { display: grid; place-items: center; font-size: 2rem; }
.plantilla strong { font-size: .92rem; }
.plantilla small { color: var(--tinta-suave); font-size: .78rem; line-height: 1.3; }

/* Avance durante la creación: esqueleto + pasos; con borrador, tarjeta flotante */
.avance { position: absolute; inset: 0; border-radius: var(--radio); pointer-events: none; }
.avance:not(.avance--con-vista) { background: var(--fondo); }
.avance--con-vista .esqueleto { display: none; }
.esqueleto { padding: 1.5rem; display: grid; gap: 1rem; height: 100%; align-content: start; }
.esqueleto__hero, .esqueleto i { display: block; border-radius: 12px;
             background: linear-gradient(110deg, #e9e6f7 30%, #f6f5fd 50%, #e9e6f7 70%);
             background-size: 250% 100%; animation: brillo-app 1.6s linear infinite; }
.esqueleto__hero { height: 45%; }
.esqueleto__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 120px; }
.esqueleto__fila--2 { grid-template-columns: 1fr 1fr; height: 180px; }
@keyframes brillo-app { to { background-position: -150% 0; } }
.avance__tarjeta { position: absolute; right: 1rem; bottom: 1rem; background: var(--blanco); border-radius: var(--radio);
             box-shadow: 0 12px 40px rgba(29,27,58,.18); padding: 1rem 1.2rem; min-width: 280px; pointer-events: auto; }
.avance:not(.avance--con-vista) .avance__tarjeta { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.avance__pasos { list-style: none; margin-top: .6rem; display: grid; gap: .45rem; font-size: .92rem; }
.avance__pasos li { display: flex; gap: .55rem; align-items: center; color: var(--tinta-suave); }
.avance__pasos li::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--linea); flex: none; }
.avance__pasos li.hecho { color: var(--tinta); }
.avance__pasos li.hecho::before { content: "✓"; background: var(--coral); border-color: var(--coral); color: #fff;
             font-size: .7rem; display: grid; place-items: center; }
.avance__pasos li.activo { color: var(--tinta); font-weight: 700; }
.avance__pasos li.activo::before { border-color: var(--linea); border-top-color: var(--coral); animation: girar 1s linear infinite; }
@media (max-width: 860px) { .plantillas { grid-template-columns: 1fr 1fr; } }

/* Asistente paso a paso (inicio) */
.asistente { background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra); padding: clamp(1.25rem, 3vw, 2rem); }
.asistente__pasos { list-style: none; display: flex; gap: .4rem; margin-bottom: 1.5rem; counter-reset: paso; }
.asistente__pasos li { flex: 1; counter-increment: paso; font-size: .8rem; font-weight: 600; color: var(--tinta-suave);
                       border-top: 4px solid var(--linea); padding-top: .45rem; }
.asistente__pasos li::before { content: counter(paso) ". "; }
.asistente__pasos li.hecho { border-color: var(--tinta); color: var(--tinta); }
.asistente__pasos li[aria-current="step"] { border-color: var(--coral); color: var(--tinta); }
.paso-asistente { border: 0; min-height: 320px; }
.paso-asistente legend.paso { font-size: 1.3rem; font-weight: 800; margin-bottom: 1rem; }
.asistente__botones { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.boton--oscuro { color: var(--tinta); }
.resumen { background: var(--fondo); border-radius: var(--radio); padding: 1rem 1.2rem; margin-top: 1rem; font-size: .92rem;
           display: grid; gap: .3rem; }
.resumen b { display: inline-block; min-width: 7rem; }

/* Letras (asistente y editor): cada par se muestra en su propia tipografía */
.letras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.letras--columna { grid-template-columns: 1fr; }
.letra { text-align: left; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--radio);
         padding: .8rem 1rem; color: var(--tinta); display: grid; gap: .2rem; }
.letra[aria-checked="true"] { border-color: var(--coral); box-shadow: var(--sombra); }
.letra:hover:not(:disabled) { border-color: var(--coral); }
.letra__muestra { font-size: 1.6rem; line-height: 1.15; }
.letra__cuerpo { font-size: .9rem; color: var(--tinta-suave); }
.letra small { font-size: .75rem; color: var(--tinta-suave); }
.letra .insignia { justify-self: start; background: var(--fondo); border-radius: 999px; padding: .05rem .5rem; font-weight: 700; }