/* ==========================================================
   CRM - TALLER DE DISEÑO
   Pinta js/taller.js, dentro de la pestaña Estudio. Reusa .btn,
   .btn-mini, .btn-icon, .campo, .campo-label de siempre — acá
   solo el layout propio del workspace (panel + vista previa) y
   los mini-componentes de listas editables.
   ========================================================== */

/* --- Workspace: barra + panel + vista previa ------------------- */

.taller-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Alto de respaldo nada más — el número real lo calcula
       ajustarAltoTaller() en js/taller.js midiendo dónde termina
       arriba la cabecera de verdad (cambia según haya "versión
       nueva del CRM" avisando, ancho de pantalla, etc.), no una
       resta fija a ojo que le clavaba un margen inventado. Este
       calc() de acá solo se ve un instante antes de que corra el
       JS, o si por lo que sea no llegó a correr. */
    height: calc(100vh - 150px);
    min-height: 480px;
}

.taller-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.taller-modo-toggle {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: var(--radius-md, 10px);
    background: var(--surf-1, #171719);
    border: 1px solid var(--border-color);
}

.taller-modo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: calc(var(--radius-md, 10px) - 3px);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
}

.taller-modo-btn:hover:not(.es-elegido) { color: var(--text-main); }

.taller-modo-btn.es-elegido {
    color: #17140d;
    background: linear-gradient(135deg, var(--primary), rgba(var(--acento-rgb), 0.75));
}

.taller-dispositivo-toggle {
    display: flex;
    gap: 4px;
}

.taller-dispositivo-toggle .btn-icon {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.taller-dispositivo-toggle .btn-icon.es-activo {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(var(--acento-rgb), 0.1);
}

.taller-historial-toggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md, 10px);
    background: var(--surf-1, #171719);
}

.taller-historial-toggle .btn-icon { width: 28px; height: 28px; }
.taller-historial-toggle .btn-icon:disabled { opacity: 0.35; cursor: default; }

.taller-toolbar__spacer { flex: 1 1 auto; }

.taller-cuerpo {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

.taller-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.taller-panel::-webkit-scrollbar { width: 6px; }
.taller-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.taller-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 2;
    padding-bottom: 4px;
}

.taller-subtab {
    flex: 1 1 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.taller-subtab:hover { color: var(--text-main); border-color: rgba(var(--acento-rgb), 0.4); }

.taller-subtab.es-elegida {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(var(--acento-rgb), 0.1);
}

.taller-panel-seccion { display: flex; flex-direction: column; gap: 4px; }
.taller-panel-seccion > .campo-label { margin-top: 12px; }
.taller-panel-seccion > .campo-label:first-child { margin-top: 0; }
.taller-panel-seccion > .campo,
.taller-panel-seccion > select.campo,
.taller-panel-seccion > textarea.campo { margin-bottom: 2px; }

.taller-preview-wrap {
    display: flex;
    justify-content: center;
    /* stretch (el default de flex, pero lo dejamos explícito): el
       iframe de escritorio ya tiene height:100% listo para recibirlo
       — con flex-start se quedaba con su alto de contenido y todo lo
       que sobraba abajo quedaba como franja gris vacía. No afecta al
       artboard de Lienzo libre ni al mockup de tablet/celular: esos
       ya traen su propio alto fijo en px, así que "estirar" no les
       hace nada distinto (no hay para dónde estirarlos). */
    align-items: stretch;
    padding: 14px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-color);
    background: var(--surf-1, #171719);
    /* Grilla de puntos tipo mesa de diseño: en Lienzo libre, o en
       Tablet/Celular dentro de Bloques, el artboard tiene un ancho
       fijo en px (nunca ocupa el 100% del contenedor) — sin esto, lo
       que sobra alrededor se leía como espacio muerto en vez de como
       el resto de un lienzo de diseño. */
    background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1px);
    background-size: 22px 22px;
    overflow: auto;
}

.taller-preview {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 100%;
    min-height: 620px;
    transition: width 220ms cubic-bezier(.4,0,.2,1), border-radius 220ms ease, box-shadow 220ms ease;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.taller-preview--desktop { width: 100%; }
.taller-preview--tablet { width: 760px; max-width: 100%; border-radius: 18px; box-shadow: 0 0 0 10px #111, 0 0 0 11px var(--border-color), 0 12px 32px rgba(0, 0, 0, 0.4); }
.taller-preview--mobile { width: 390px; max-width: 100%; border-radius: 26px; box-shadow: 0 0 0 8px #111, 0 0 0 9px var(--border-color), 0 12px 32px rgba(0, 0, 0, 0.4); }

/* --- Zoom de la vista previa ---------------------------------- */

.taller-zoom-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md, 10px);
    background: var(--surf-1, #171719);
    border: 1px solid var(--border-color);
}

.taller-zoom-toggle .btn-icon { width: 28px; height: 28px; }

.taller-zoom-valor {
    min-width: 44px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.taller-zoom-valor:hover { color: var(--primary); }

/* `zoom` (no `transform: scale`) a propósito: transform no
   encoge la caja reservada por el layout, así que al alejar quedaba
   una caja chica flotando en medio de un hueco negro del tamaño de
   antes. `zoom` sí encoge lo reservado — al alejar se ve más página
   en el mismo espacio, sin hueco alrededor. */
.taller-preview-wrap > * { zoom: var(--zoom, 1); }

/* --- Marca -------------------------------------------------- */

.taller-logo-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.taller-logo-preview {
    width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--border-color);
}

.taller-logo-vacio {
    width: 42px; height: 42px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surf-1, #171719); color: var(--text-dim);
    border: 1px dashed var(--border-color);
}

.taller-file-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; padding: 7px 12px; cursor: pointer;
}

.taller-color { padding: 3px !important; height: 34px; cursor: pointer; }

.taller-capas-fondo-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.taller-capa-mini {
    width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--border-color); flex: 0 0 auto;
}
.taller-capa-opacidad { width: 56px; accent-color: var(--primary); }

.taller-rango-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.taller-rango-fila input[type="range"] { flex: 1 1 0; accent-color: var(--primary); }
.taller-rango-valor { flex: 0 0 auto; font-size: 0.76rem; color: var(--text-muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Al tocar un texto/ícono/celda en la vista previa, el campo que le
   corresponde en el panel se resalta un instante — así se ve
   claramente adónde saltó, sobre todo si el panel tuvo que hacer
   scroll para mostrarlo. */
.taller-campo-resaltado {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
    animation: tallerResaltado 1.4s ease;
}
@keyframes tallerResaltado {
    0%, 40% { box-shadow: 0 0 0 4px rgba(var(--acento-rgb), 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0); }
}

/* --- Bloques / secciones: lista ordenable ------------------- */

.taller-agregar-bloques {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.taller-chip-bloque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surf-1, #171719);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.taller-chip-bloque { transition: border-color 140ms ease, color 140ms ease, transform 100ms ease; }
.taller-chip-bloque:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.taller-chip-bloque:active { transform: translateY(0); }

.taller-lista-bloques {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.taller-bloque-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surf-1, #171719);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.taller-bloque-item:hover { border-color: rgba(var(--acento-rgb), 0.4); }
.taller-bloque-item.es-elegido { border-color: var(--primary); background: rgba(var(--acento-rgb), 0.08); }
.taller-bloque-item > i:not(.taller-bloque-item__handle):first-of-type { color: var(--primary); flex: 0 0 auto; }
.taller-bloque-item span { flex: 1 1 0; min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taller-bloque-item__acciones { display: flex; gap: 2px; flex: 0 0 auto; }
.taller-bloque-item__acciones .btn-icon { width: 26px; height: 26px; padding: 0; font-size: 0.72rem; display: flex; align-items: center; justify-content: center; }
.taller-bloque-item__acciones .btn-icon:disabled { opacity: 0.3; cursor: default; }

.taller-bloque-item__handle {
    flex: 0 0 auto;
    color: var(--text-dim);
    cursor: grab;
    opacity: 0.55;
    transition: opacity 120ms ease, color 120ms ease;
}
.taller-bloque-item:hover .taller-bloque-item__handle { opacity: 0.9; color: var(--text-muted); }
.taller-bloque-item__handle:active { cursor: grabbing; }
.taller-bloque-item.taller-arrastrando { opacity: 0.4; border-style: dashed; }

/* --- Modo App: pestañas ---------------------------------------
   El nombre de la pestaña, adentro de la fila, es en sí un botón
   (marca cuál se ve en la vista previa) — por eso necesita sus
   propias reglas de ícono/texto en vez de heredar las de
   .taller-bloque-item, pensadas para un <span> sin interacción. */
.taller-tab-app__nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.taller-tab-app__nombre i { color: var(--primary); flex: 0 0 auto; }
.taller-tab-app__nombre span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taller-tab-app__nombre.es-activa { color: var(--primary); font-weight: 700; }
.taller-tab-app__nombre.es-activa::after {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
    box-shadow: 0 0 6px rgba(var(--acento-rgb), 0.6);
}

.taller-app-modos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: var(--radius-md, 10px);
    background: var(--surf-1, #171719);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}
.taller-app-modos .taller-modo-btn { flex: 1 1 auto; justify-content: center; }

.taller-fondo-tipos { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-md, 10px); background: var(--surf-1, #171719); border: 1px solid var(--border-color); }
.taller-fondo-tipos .taller-modo-btn { flex: 1 1 auto; justify-content: center; }

/* --- Selector visual de íconos ------------------------------- */

.taller-icono-picker { position: relative; }

.taller-icono-picker__actual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surf-1, #171719);
    color: var(--text-main);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 140ms ease;
}
.taller-icono-picker__actual:hover { border-color: rgba(var(--acento-rgb), 0.5); }
.taller-icono-picker__actual i:first-child { color: var(--primary); }
.taller-icono-picker__flecha { font-size: 0.6rem; color: var(--text-dim); }

.taller-icono-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.taller-icono-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--surf-1, #171719);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 120ms ease, color 120ms ease, transform 100ms ease;
}
.taller-icono-grid__item:hover { color: var(--primary); border-color: rgba(var(--acento-rgb), 0.4); transform: translateY(-1px); }
.taller-icono-grid__item.es-elegido { color: var(--primary); border-color: var(--primary); background: rgba(var(--acento-rgb), 0.1); }

.taller-form-bloque {
    padding: 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px dashed var(--border-color);
    margin-top: 6px;
}

.taller-form-bloque h4 {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.86rem; margin: 0 0 10px;
}
.taller-form-bloque h4 i { color: var(--primary); }

.taller-fila-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --- Listas editables (tarjetas, testimonios, planes, stats) - */

.taller-lista-editable, .taller-galeria-editable { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.taller-lista-fila { display: flex; gap: 6px; align-items: center; }
.taller-lista-fila .campo { flex: 1 1 0; }

.taller-tarjeta-editable {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    position: relative;
}
.taller-tarjeta-editable > .btn-icon { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; font-size: 0.68rem; }

.taller-galeria-editable {
    flex-direction: row;
    flex-wrap: wrap;
}
.taller-galeria-editable__item { position: relative; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; }
.taller-galeria-editable__item img { width: 100%; height: 100%; object-fit: cover; }
.taller-galeria-editable__item .btn-icon {
    position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0;
    font-size: 0.62rem; background: rgba(0,0,0,.6); color: #fff; border-radius: 0 0 0 6px;
}

/* --- Lienzo libre: artboard interactivo (modo lienzo) ---------- */

.taller-lienzo-artboard {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border-color);
    flex: 0 0 auto;
}

.taller-el {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: move;
    user-select: none;
    border: 1px dashed transparent;
}

.taller-el:hover { border-color: rgba(var(--acento-rgb), 0.5); }
.taller-el.es-elegido { border: 1px solid var(--primary); box-shadow: 0 0 0 2px rgba(var(--acento-rgb), 0.25); }

.taller-el--boton {
    border-radius: 8px;
    font-weight: 700;
}

.taller-el__resize {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--primary);
    cursor: nwse-resize;
    display: none;
}

.taller-el.es-elegido .taller-el__resize { display: block; }

/* --- Responsive: el taller pasa a apilado en celular ---------- */

@media (max-width: 900px) {
    .taller-cuerpo { grid-template-columns: 1fr; }
    .taller-panel { max-height: 40vh; }
    .taller-shell { height: auto; }
    .taller-preview { min-height: 360px; }
}

/* --- Pantalla completa: fuera la barra lateral y la superior ----
   "A los costados queda incómodo" — con el menú del CRM siempre
   presente, el lienzo real del Taller quedaba angosto. Esto no toca
   el grid de escritorio.css con reglas nuevas: pisa las mismas
   variables (--nav-w, --head-h) que ya define, así que no hay dos
   sistemas de layout compitiendo, solo una versión con las columnas
   de sobra en 0. Ver el toggle en barraSuperior() (js/taller.js) y
   el cleanup en switchTab() (js/app.js) para que no quede pegado si
   se cambia de pestaña sin salir primero. */
/* Selector compuesto (dos clases en <html>) a propósito: taller.css
   se carga ANTES que escritorio.css (ver el orden de <link> en
   index.html), así que un solo ".taller-fullscreen" perdería el
   empate de especificidad contra ".nav-lateral" y las variables
   volverían a 236px/var(--head-h) de siempre. Dos clases junto con
   !important cierran esa carrera sin importar el orden de carga. */
html.nav-lateral.taller-fullscreen { --nav-w: 0px !important; --head-h: 0px !important; }

/* Mismo motivo que arriba, pero para esconder de verdad: escritorio.css
   tiene "html.nav-lateral body .main-tabs { display:flex !important }"
   con la MISMA especificidad que un ".taller-fullscreen" suelto — y
   como escritorio.css se carga despues, ganaba el empate y la barra
   seguia ahi (angosta pero visible, con sus iconos del pie saliendose
   del carril de 0px). Repetir las dos clases del <html> en el
   selector le suma un peldaño mas de especificidad, que no depende
   de en que orden se carguen los archivos. */
html.nav-lateral.taller-fullscreen body .top-navbar,
html.nav-lateral.taller-fullscreen body .main-tabs { display: none !important; }
html.taller-fullscreen .taller-shell { height: 100vh; }

/* Mismo problema, misma solución, para el modo standalone de
   estudio.solutionscodearg.com (ver CRM_MODO_ESTUDIO en js/auth.js y
   la regla ".modo-estudio-standalone .main-tabs" en estudio.css): esa
   regla sola pierde contra "html.nav-lateral body .main-tabs" de
   escritorio.css apenas hay barra lateral (osea, siempre en desktop),
   que es exactamente donde más hace falta esconderla. Tres clases en
   vez de dos le gana el empate sin depender de en qué orden carguen
   las hojas. */
html.nav-lateral.modo-estudio-standalone body .main-tabs { display: none !important; }

/* --- Diálogo de exportar / capturador de imagen ------------------ */

.taller-modal-velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.taller-modal {
    background: var(--bg-surface, #17191c);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    padding: 24px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.6);
}

.taller-modal h3 {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.taller-export-formato {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.taller-export-opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.taller-export-opcion:hover { border-color: var(--primary); }
.taller-export-opcion.es-elegida { border-color: var(--primary); background: rgba(var(--acento-rgb), 0.08); }
.taller-export-opcion input[type="radio"] { margin-top: 3px; }
.taller-export-opcion strong { display: block; font-size: 0.85rem; }
.taller-export-opcion span { display: block; font-size: 0.74rem; opacity: 0.7; margin-top: 2px; }

.taller-modal__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* --- Capturador de imagen (screenshot + recorte + limpiar) ------- */

.taller-capturador-lienzo {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
}

.taller-capturador-herramientas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.taller-capturador-herramientas .btn-icon.es-activo {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(var(--acento-rgb), 0.1);
}