/* Mika — paletas, «Tus páginas», inicio sin scroll, plantilla con IA y catálogo. Tramo 3 de 5 del estilo de la interfaz: se cargan EN ORDEN
   (index.html) y la cascada es la de un solo archivo. */
/* Paletas */
.subtitulo { font-size: 1rem; margin: .5rem 0 .25rem; }
.aviso-paleta { background: var(--aviso-fondo); color: var(--aviso); border-radius: 10px; padding: .6rem .8rem; font-weight: 600; font-size: .9rem; }
.paletas { display: grid; gap: .6rem; }
.paleta { display: grid; gap: .45rem; text-align: left; background: var(--blanco); border: 2px solid var(--linea);
          border-radius: var(--radio); padding: .7rem .8rem; color: var(--tinta); }
.paleta[aria-checked="true"] { border-color: var(--coral); }
.paleta:hover:not(:disabled) { border-color: var(--coral); }
.paleta__barra { display: grid; grid-template-columns: 6fr 3fr 1fr; height: 38px; border-radius: 8px; overflow: hidden;
                 border: 1px solid var(--linea); }
.paleta__barra span { display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.paleta__pie { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; gap: .5rem; flex-wrap: wrap; }
.contrastes { display: flex; gap: .35rem; flex-wrap: wrap; }
.contrastes span { background: #e7f6ec; color: #1b6b3a; border-radius: 999px; padding: .05rem .45rem; font-size: .72rem; font-weight: 700; }
.contrastes span.malo { background: var(--aviso-fondo); color: var(--aviso); }
.personalizar { border: 2px dashed var(--linea); border-radius: var(--radio); padding: .7rem .8rem; }
.personalizar summary { cursor: pointer; font-weight: 700; }
.colores { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.colores label { display: grid; gap: .25rem; font-size: .82rem; font-weight: 600; }
.colores input[type="color"] { width: 100%; height: 40px; border: 1px solid var(--linea); border-radius: 8px; background: none; }
.revision { font-size: .85rem; display: grid; gap: .35rem; margin-bottom: .8rem; }
.revision .sugerencia { background: #fff8e6; border-radius: 8px; padding: .4rem .6rem; }
.revision i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; border: 1px solid #0003; }
@media (max-width: 860px) { .letras { grid-template-columns: 1fr; } }
/* Los botones del asistente siempre a la vista (en el paso de plantillas quedaban bajo el pliegue) */
.asistente__botones { position: sticky; bottom: 0; z-index: 5; background: var(--blanco);
                      padding: .9rem 0 .2rem; border-top: 1px solid var(--linea); }

/* «Tus páginas»: tarjetas con vista previa real + paginación */
.mis-paginas__cabeza { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.mis-paginas__cabeza h2 { margin: 0; }
.tarjetas-sitios { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tarjeta-sitio { display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; }
.tarjeta-sitio__previa { aspect-ratio: 4 / 3; background: var(--fondo); overflow: hidden; border-bottom: 1px solid var(--linea); }
.tarjeta-sitio__previa img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
                             transition: transform .3s ease; }
.tarjeta-sitio:hover .tarjeta-sitio__previa img { transform: scale(1.03); }
.tarjeta-sitio__previa--creando { display: grid; place-items: center; font-weight: 700; color: var(--tinta-suave);
             background: linear-gradient(110deg, #e9e6f7 30%, #f6f5fd 50%, #e9e6f7 70%); background-size: 250% 100%;
             animation: brillo-app 1.6s linear infinite; }
.tarjeta-sitio__cuerpo { padding: .75rem .9rem .9rem; display: grid; gap: .2rem; }
.tarjeta-sitio__cuerpo strong { font-size: .98rem; line-height: 1.25; }
.tarjeta-sitio__cuerpo small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-sitio__ver { position: absolute; top: .5rem; right: .5rem; background: rgba(29,27,58,.82); color: var(--blanco);
                      border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 700; text-decoration: none; }
.tarjeta-sitio__ver:hover { background: var(--tinta); }
.paginacion { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.25rem; flex-wrap: wrap; }
.paginacion button { min-width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--linea);
                     background: var(--blanco); color: var(--tinta); font-weight: 600; padding: 0 .8rem; }
.paginacion button[aria-current="page"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.paginacion button:hover:not(:disabled):not([aria-current="page"]) { border-color: var(--coral); }
@media (max-width: 860px) { .tarjetas-sitios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tarjetas-sitios { grid-template-columns: 1fr; } }
/* Mientras la miniatura se captura la primera vez (1,5–3 s), brillo de «cargando» en vez de blanco */
.tarjeta-sitio__previa { background: linear-gradient(110deg, #e9e6f7 30%, #f6f5fd 50%, #e9e6f7 70%);
                         background-size: 250% 100%; animation: brillo-app 1.6s linear infinite; }
.tarjeta-sitio__previa:has(img.cargada) { animation: none; background: var(--fondo); }
.tarjeta-sitio__previa img { opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.tarjeta-sitio__previa img.cargada { opacity: 1; }

/* ===== Inicio sin scroll (escritorio): todo cabe en el alto de la ventana =====
   La página no crece con su contenido: el asistente y la lista se reparten el alto disponible;
   lo que no quepa se desplaza DENTRO de su caja (paso del asistente) o pasa a otra página (lista). */
@media (min-width: 861px) {
  .inicio { flex: 1; min-height: 0; overflow: hidden; padding: clamp(.75rem, 2.5vh, 2rem) 1.5rem;
            grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem); }
  .crear { display: flex; flex-direction: column; min-height: 0; }
  .crear h1 { font-size: clamp(1.5rem, 1.6vw + 1.8vh, 2.8rem); margin-bottom: .35rem; }
  .crear__bajada { font-size: clamp(.9rem, .6vw + .6vh, 1.1rem); margin-bottom: clamp(.5rem, 1.5vh, 1.5rem); }
  .asistente { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(.9rem, 2vh, 2rem); }
  .asistente__pasos { margin-bottom: clamp(.6rem, 1.6vh, 1.5rem); }
  .paso-asistente:not([hidden]) { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
                                  padding-right: .25rem; }
  .paso-asistente legend.paso { font-size: clamp(1.05rem, .5vw + 1vh, 1.3rem); margin-bottom: .6rem; }
  .paso-asistente textarea { flex: 1; min-height: 90px; resize: none; }
  .paso-asistente .pistas { margin: .6rem 0 0; font-size: .85rem; }
  .asistente .plantilla img, .asistente .plantilla__auto { aspect-ratio: 16 / 10; }
  .asistente .campos { gap: .6rem 1rem; }
  .asistente__botones { position: static; margin-top: .75rem; padding-top: .75rem; }
  .mis-paginas { display: flex; flex-direction: column; min-height: 0; }
  #lista-sitios { flex: 1; min-height: 0; overflow: hidden; align-content: start; }
  .tarjeta-sitio__previa { aspect-ratio: 16 / 10; }
  .paginacion { margin-top: .75rem; }
}
@media (min-width: 861px) {
  /* margen para que la sombra de las tarjetas no se recorte, y paginación pegada a las tarjetas */
  #lista-sitios { flex: 0 1 auto; padding: 6px 8px 18px; margin: -6px -8px -18px; }
}
@media (min-width: 861px) {
  /* Compactar para que Datos y Plantilla quepan sin desplazarse por dentro */
  .asistente .campos { grid-template-columns: 1fr 1fr; }
  .asistente .campo--ancho:not(:first-child) { grid-column: auto; }
  .asistente .campo input, .asistente .campo textarea { padding: .5rem .7rem; }
  .asistente .campos + .nota { margin-top: .5rem; font-size: .8rem; }
  .asistente .plantilla { padding: .4rem; gap: .2rem; }
  .asistente .plantilla small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 861px) {
  .asistente .plantilla img, .asistente .plantilla__auto { aspect-ratio: 16 / 9; }
  .asistente .letras { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .asistente .letra { padding: .55rem .7rem; gap: .1rem; }
  .asistente .letra__muestra { font-size: 1.15rem; }
  .asistente .letra__cuerpo, .asistente .letra small:not(.insignia) { display: -webkit-box; -webkit-line-clamp: 2;
           -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; }
  .asistente .letra__cuerpo { -webkit-line-clamp: 1; }
}
@media (min-width: 861px) {
  .asistente .letra small:not(.insignia) { -webkit-line-clamp: 1; }
  .asistente .paso-asistente[data-paso="4"] .nota { margin: 0 0 .4rem; font-size: .8rem; }
}
@media (min-width: 861px) {
  /* Las tarjetas de una fila se igualan en alto: sin esto, el texto recortado se estira y deja
     asomar media línea de más. */
  .asistente .letra { align-content: start; }
  .asistente .letra > * { align-self: start; }
}
@media (min-width: 861px) {
  .asistente .letra__muestra { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* Crear una plantilla con IA (pestaña Plantilla) */
.plantilla-ia { display: grid; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.plantilla-ia textarea { padding: .65rem .8rem; resize: vertical; }
.plantilla-ia .boton { justify-self: start; }

/* Catálogo que evoluciona (popularidad.py): insignias y uso */
.insignia { display: inline-block; margin-left: .45rem; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem;
            font-weight: 700; vertical-align: middle; letter-spacing: .02em; }
.insignia--popular { background: var(--coral); color: var(--blanco); }  /* blanco sobre violeta: 5,0:1 */
.insignia--nueva { background: var(--linea); color: inherit; }
.plantilla__usos { opacity: .7; font-size: .78rem; }