/* ==========================================================
   ESTUDIO SOLUTIONS CODE — SKIN DE MARCA PUBLICA
   Se activa con html.modo-estudio-standalone, que solo se pone en
   estudio.solutionscodearg.com (ver CRM_MODO_ESTUDIO en js/auth.js
   y el script en la cabecera de index.html). A esa pagina entra
   gente de afuera del equipo -clientes, prospectos-, asi que tiene
   que verse como solutionscodearg.com, no como el CRM interno.

   NO ES UN REDISEÑO DESDE CERO. El CRM ya trae un tema claro entero
   (claro.css, se prende con data-tema="claro") y casi todo el resto
   -botones, chips, bordes, halos- sale de las mismas variables
   (--primary, --acento-rgb, --bg-*, --text-*). Esta hoja fuerza ese
   tema claro y pisa esas variables con los valores exactos del sitio
   publico (sacados de su hoja compilada, /_astro/index.*.css):
   fondo blanco, texto grafito (#1e293b) y acento azul (#2a4a93),
   nunca el verde de marca del CRM. Todo lo que ya lee esas variables
   cambia solo, sin tocarlo pestaña por pestaña.

   Va DESPUES de claro.css y de ui.css en index.html (que es la capa
   final, la que más !important tiene) para no perder ningún empate
   de especificidad. Todo acá con !important por el mismo motivo:
   apariencia.js pisa --primary con un style= en línea según lo que
   cada usuario eligió en su perfil, y eso también hay que ganarlo. */

html.modo-estudio-standalone {
    /* dark: los select, scrollbars y date pickers nativos tambien
       tienen que venir oscuros, si no aparecen como recuadros
       blancos que esta hoja no puede pintar. */
    color-scheme: dark;

    /* El azul de solutionscodearg.com (#2a4a93) esta calculado para
       leerse sobre blanco: sobre el video oscuro casi desaparece.
       Misma familia, subido de luminosidad para que un boton lleno o
       un borde de foco se vea. */
    --primary: #7aa2f7 !important;
    --primary-hover: #9dbcff !important;
    --primary-dim: #4a6fbf !important;
    --acento-rgb: 122, 162, 247 !important;
    --accent: #7aa2f7 !important;
    --accent-glow: rgba(122, 162, 247, 0.3) !important;
    --border-glow: rgba(122, 162, 247, 0.45) !important;
    --success: #6ff0b4 !important;
    --marca-color-oscuro: #4a6fbf !important;

    /* Superficies: NO blancas. Esta pagina es el Estudio inmersivo
       entero, con el video de fondo a sangre — cualquier panel opaco
       (la barra del Taller, los sub-tabs, la lista de bloques) se
       recortaba como un parche blanco encima del video. Van en negro
       traslucido: dejan pasar el fondo y el texto claro de abajo
       queda legible sin necesidad de blur (backdrop-filter en cada
       panel costaba caro de pintar en scroll). */
    --bg-main: transparent !important;
    --bg-surface: rgba(12, 16, 20, 0.55) !important;
    --bg-card: rgba(12, 16, 20, 0.55) !important;
    --surf-0: transparent !important;
    --surf-1: rgba(255, 255, 255, 0.05) !important;
    --surf-2: rgba(255, 255, 255, 0.08) !important;
    --surf-3: rgba(255, 255, 255, 0.12) !important;

    /* Trazo fino: una linea de luz de 1px, no un borde solido gris. */
    --border-color: rgba(255, 255, 255, 0.14) !important;
    --borde-fuerte: rgba(255, 255, 255, 0.22) !important;
    --borde-luz: rgba(255, 255, 255, 0.10) !important;
    --borde-sombra: rgba(0, 0, 0, 0.25) !important;

    --text-main: #eef2f6 !important;
    --text-secondary: #c2ccd6 !important;
    --text-dim: #93a0ac !important;
    --text-muted: #b3bec9 !important;
}

/* Tipografía: Inter Tight en vez de Inter (mismo par que el sitio
   público — titulares en Inter Tight, JetBrains Mono para etiquetas
   y números, ver más abajo). Cargada en index.html junto al resto de
   Google Fonts, así que no suma un pedido nuevo por separado. */
html.modo-estudio-standalone body,
html.modo-estudio-standalone button,
html.modo-estudio-standalone input,
html.modo-estudio-standalone select,
html.modo-estudio-standalone textarea {
    font-family: 'Inter Tight', 'Inter', -apple-system, sans-serif !important;
}

/* Trazo fino en todo el chrome del Taller y del Estudio: 1px de luz
   en vez del borde solido del CRM, y relleno traslucido para que el
   video siga pasando. Sin backdrop-filter a proposito — son muchos
   paneles y el blur por panel se nota al hacer scroll. */
html.modo-estudio-standalone .taller-toolbar,
html.modo-estudio-standalone .taller-panel,
html.modo-estudio-standalone .taller-modo-toggle,
html.modo-estudio-standalone .taller-zoom-toggle,
html.modo-estudio-standalone .taller-historial-toggle,
html.modo-estudio-standalone .taller-chip-bloque,
html.modo-estudio-standalone .taller-bloque-item {
    background: rgba(10, 14, 18, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Los sub-tabs (Pestañas / Bloques / Apariencia) y la barra pegajosa
   que los sostiene: el sticky traia el fondo opaco de --bg-surface y
   se recortaba como una franja al hacer scroll del panel. */
/* La barra de sub-pestañas es sticky (se queda arriba mientras el
   panel scrollea), así que necesita fondo propio: con `transparent`
   los campos de abajo se veían pasar por detrás de las pestañas. Casi
   opaco, del mismo tono que el panel. */
html.modo-estudio-standalone .taller-subtabs {
    background: rgba(10, 14, 18, 0.95) !important;
}

html.modo-estudio-standalone .taller-subtab {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #c2ccd6 !important;
}

html.modo-estudio-standalone .taller-subtab.es-elegida {
    background: rgba(122, 162, 247, 0.18) !important;
    border-color: rgba(122, 162, 247, 0.55) !important;
    color: #cfe0ff !important;
}

/* El boton de modo elegido venia con texto casi negro sobre un
   degradado pensado para el verde del CRM. */
html.modo-estudio-standalone .taller-modo-btn.es-elegido {
    background: rgba(122, 162, 247, 0.22) !important;
    color: #dbe7ff !important;
}

/* La vista previa es la unica superficie que SI sigue siendo blanca:
   es el lienzo del diseño del cliente, no chrome de la herramienta. */
html.modo-estudio-standalone .taller-preview {
    background: #fff !important;
}

/* El resplandor verde detrás del logo es un efecto de marca del CRM
   oscuro (ui.css, .watermark-*). Sobre blanco no aporta nada y
   compite con el contenido de la pantalla. */
html.modo-estudio-standalone .watermark-logo-glow-wrapper {
    display: none !important;
}

/* Cabecera fija: mismo patrón que solutionscodearg.com — blanco
   traslúcido con blur, sin la textura de vidrio del CRM oscuro. */
html.modo-estudio-standalone .top-navbar {
    display: none !important;
}

/* Etiquetas cortas en mayúscula + tracking, como "Servicios" /
   "Proceso" en la barra del sitio público — ahí es JetBrains Mono en
   vez de la tipografía de titular. */
html.modo-estudio-standalone .tab-ico-sc,
html.modo-estudio-standalone .marketing-plantilla__canal,
html.modo-estudio-standalone .marketing-tab {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing: 0.06em;
}

html.modo-estudio-standalone .marketing-plantilla__canal {
    text-transform: uppercase;
}

/* Sin barra lateral, sin la columna que le reserva el lugar.
   escritorio.css arma el shell como una grilla de dos columnas
   (--nav-w para el nav, el resto para el contenido) pensada para
   cuando .main-tabs SÍ se ve — acá no se ve (estudio.css la esconde
   con html.nav-lateral.modo-estudio-standalone body .main-tabs), pero
   la grilla seguía reservándole sus 236px de ancho igual, y el
   contenido quedaba corrido a la derecha con una franja vacía al
   lado. Mismo mecanismo que taller-fullscreen (ver taller.css) para
   el mismo problema. */
html.nav-lateral.modo-estudio-standalone {
    --nav-w: 0px !important;
}

/* El tope de 1360px de escritorio.css (.tab-content) está pensado
   para que el texto no se estire de punta a punta cuando al lado
   sigue habiendo una columna de navegación — acá no la hay, y el
   Taller de diseño en particular necesita todo el ancho que se le
   pueda dar. */
html.nav-lateral.modo-estudio-standalone body .tab-content {
    max-width: none !important;
}