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

/* Cabecera compacta: solo mientras se está DISEÑANDO (ver
   estudio.js, cabecera() — this.vista === 'taller'). Título y bajada
   en el mismo renglón en vez de uno abajo del otro: en Plantillas o
   Proyectos, donde se navega una grilla, esa línea de más no importa;
   en el Taller le come alto de verdad al lienzo de trabajo de abajo.
   No se toca `.section-head` en sí (ui.css) porque la usan varias
   pestañas más — esto es aparte, más específico, y gana por eso. */
.section-head.estudio-cabecera--compacta {
    align-items: baseline;
}

.section-head.estudio-cabecera--compacta .section-head__texto {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.section-head.estudio-cabecera--compacta .section-head__texto h2 {
    flex: 0 0 auto;
    white-space: nowrap;
}

.section-head.estudio-cabecera--compacta .section-head__texto p {
    margin: 0;
    opacity: 0.65;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 900px) {
    /* Angosto de verdad no entra igual ni recortado — vuelve a
       apilarse, como el resto de .section-head ya hace en celular. */
    .section-head.estudio-cabecera--compacta .section-head__texto {
        flex-wrap: wrap;
    }
    .section-head.estudio-cabecera--compacta .section-head__texto p {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* --- Modo standalone (estudio.solutionscodearg.com) -----------------
   Ver CRM_MODO_ESTUDIO en js/auth.js: mismo build del CRM, pero servido
   también en ese subdominio, aparte, donde tab-estudio es la única
   pestaña posible. La barra de pestañas no tiene sentido si no hay
   otra pestaña a la que ir — abajo.css/lateral.js igual la siguen
   armando (leen las mismas .tab-btn), así que se esconde por CSS y no
   sacando los botones del HTML. */
html.modo-estudio-standalone .main-tabs,
html.modo-estudio-standalone .mas-btn {
    display: none !important;
}