/* 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(--blanco); color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 10px;
                padding: .5rem .8rem; font-weight: 500; font-size: .88rem; }
.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; }

/* 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; }


/* Logo y fotos propias (Estilo) */
/* Material del negocio en el asistente (material.js) */
.material { margin: 0 0 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem 1rem; }
.material summary { cursor: pointer; font-weight: 700; min-height: 24px; }
.material__fila { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.material__fila input[type="url"] { flex: 1 1 16rem; padding: .65rem .8rem; }
.material__fila input:focus-visible + label { outline: 3px solid var(--tinta); outline-offset: 3px; }
#material-texto { width: 100%; margin-top: .4rem; padding: .65rem .8rem; resize: vertical; }
.material__fotos { border: 0; padding: 0; margin-top: .75rem; }
#material-fotos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-top: .4rem; }
.material__foto { position: relative; display: block; cursor: pointer; }
.material__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.material__foto input { position: absolute; top: .4rem; left: .4rem; width: 22px; height: 22px; }
.material__foto:has(input:not(:checked)) img { opacity: .45; }
.logo-propio { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.logo-propio__actual { min-width: 96px; min-height: 48px; display: grid; place-items: center; padding: .4rem .6rem;
  background: #fff; border: 1px dashed var(--linea); border-radius: 10px; }
.logo-propio__actual img { max-height: 48px; max-width: 160px; width: auto; height: auto; display: block; }
.foto-propia { display: grid; gap: .4rem; justify-items: start; margin: .3rem 0 .6rem; }
.logo-propio label, .foto-propia label { cursor: pointer; }
/* el input de archivo está oculto: su foco se ve en el botón que lo abre */
.logo-propio input:focus-visible + label, .foto-propia input:focus-visible + label { outline: 3px solid var(--coral); outline-offset: 2px; }