/* plantillas/galeria.css
   ===========================================================
   TARJETAS DE PLANTILLAS (panel y editor)
   =========================================================== */

.tarjeta-plantilla {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px;
    border: 1.5px solid #e3e3ea; border-radius: 12px; background: #ffffff;
    text-align: left; cursor: pointer; font: inherit; color: #1c1c21;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-plantilla:hover { border-color: #c4c4d0; transform: translateY(-1px); }
.tarjeta-plantilla.activa,
.tarjeta-plantilla:has(input:checked) { border-color: #5b3df5; box-shadow: 0 0 0 3px #efebff; }
.tarjeta-plantilla:has(input:focus-visible) { outline: 2px solid #5b3df5; outline-offset: 2px; }

/* La foto en vivo: la plantilla dibujada a 1280 px y achicada */
.miniatura-plantilla {
    position: relative; display: block; width: 100%; overflow: hidden;
    border-radius: 8px; background: #f3f3f6; border: 1px solid rgba(0, 0, 0, 0.06);
}
.miniatura-plantilla iframe {
    position: absolute; top: 0; left: 0; border: 0; pointer-events: none;
    transform: scale(var(--escala, 0.2)); transform-origin: 0 0;
}

.plantilla-textos { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.plantilla-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plantilla-nombre { font-size: 14px; }
.plantilla-tipo {
    flex: none; padding: 2px 7px; border-radius: 999px; background: #f3f3f6;
    font-size: 11px; font-weight: 600; color: #4b4b57;
}
.plantilla-ideal { font-size: 12px; line-height: 1.35; color: #6c6c78; }
.plantilla-etiqueta {
    position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px;
    background: #5b3df5; color: #ffffff; font-size: 11px; font-weight: 700;
}

/* Tarjeta "En blanco" o "Desde este navegador" (sin foto en vivo) */
.miniatura-plantilla.miniatura-simple {
    display: grid; place-items: center; aspect-ratio: 1280 / 900;
    font-size: 30px; color: #6c6c78;
    background: repeating-linear-gradient(135deg, #f7f7fa 0 10px, #f1f1f5 10px 20px);
}

/* El botón de radio está, pero no se ve (se elige tocando la tarjeta) */
.solo-lectores-panel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Filtro por tipo de negocio (encima de la lista de plantillas) */
.filtro-rubros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filtro-rubro {
    padding: 6px 12px; border: 1px solid #d9d9e0; border-radius: 999px; background: #ffffff;
    font: 500 13px/1.2 inherit; font-family: inherit; color: #33333a; cursor: pointer;
}
.filtro-rubro:hover { border-color: #9b9ba8; }
.filtro-rubro.activo { background: #1c1c21; border-color: #1c1c21; color: #ffffff; }
.filtro-rubro:focus-visible { outline: 2px solid #6d4bd8; outline-offset: 2px; }
.tarjeta-plantilla[hidden] { display: none; }