/* ==========================================================
   CRM - ESTUDIO SOLUTIONS CODE
   Pinta js/estudio.js. Reusa el lenguaje visual de Marketing
   (.marketing-tabs, .marketing-grid, .marketing-plantilla, etc. ya
   existen en marketing.css) — acá solo lo que es nuevo de esta
   pestaña.
   ========================================================== */

/* Grilla de plantillas: tarjetas con bastante texto (nombre, stack,
   resumen, qué incluye), no las miniaturas cuadradas de imagen de
   .marketing-piezas-grid — por eso una grilla propia, más ancha, en
   vez de reusar esa. Con columnas angostas el texto se cortaba a la
   mitad de una palabra y los títulos se partían en varios renglones. */
.estudio-plantillas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.estudio-plantilla {
    display: flex;
    flex-direction: column;
    /* align-items:stretch de la grilla solo empareja el alto DENTRO
       de una misma fila — con auto-fit, la fila de abajo (menos
       tarjetas, o una sola que quedó suelta) no hereda el alto de la
       de arriba. Un mínimo fijo empareja todas las tarjetas entre sí,
       no solo las que comparten fila. Calculado para la que tiene más
       texto (Panel de turnos y reservas), así ninguna otra se recorta. */
    min-height: 300px;
}

.estudio-plantilla .marketing-plantilla__cab {
    flex-wrap: wrap;
}

.estudio-plantilla .marketing-plantilla__cab strong {
    min-width: 0;
}

/* Estas son 4 plantillas fijas, no una galería larga: el resumen
   completo entra sin problema y cortarlo a mitad de frase (línea 5)
   quedaba feo. Se muestra entero. */
.estudio-plantilla__texto {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.estudio-plantilla__incluye {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.estudio-plantilla .marketing-plantilla__acciones {
    margin-top: auto;
    padding-top: 10px;
}

.estudio-estado-pill {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .estudio-plantillas-grid {
        grid-template-columns: 1fr;
    }
}