/* ==========================================================
   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 {
    color-scheme: light;

    --primary: #2a4a93 !important;
    --primary-hover: #3760b8 !important;
    --primary-dim: #1c3266 !important;
    --acento-rgb: 42, 74, 147 !important;
    --accent: #2a4a93 !important;
    --accent-glow: rgba(42, 74, 147, 0.3) !important;
    --border-glow: rgba(42, 74, 147, 0.45) !important;
    --success: #2a4a93 !important;
    --marca-color-oscuro: #1c3266 !important;

    --bg-main: #ffffff !important;
    --bg-surface: #ffffff !important;
    --bg-card: #ffffff !important;
    --surf-0: #ffffff !important;
    --surf-1: #ffffff !important;
    --surf-2: #f5f6f7 !important;
    --surf-3: #e6e9eb !important;

    --border-color: #e6e9eb !important;
    --borde-fuerte: #d7dcdf !important;
    --borde-luz: rgba(30, 41, 59, 0.08) !important;
    --borde-sombra: rgba(30, 41, 59, 0.05) !important;

    --text-main: #1e293b !important;
    --text-secondary: #4b5561 !important;
    --text-dim: #6b7580 !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;
}

/* La trama de puntos del fondo (ui.css, body::before) está calculada
   para el grafito oscuro de siempre: en blanco, un punto blanco
   sobre blanco no se nota. */
html.modo-estudio-standalone body::before {
    background-image: radial-gradient(rgba(30, 41, 59, 0.045) 1px, transparent 1px) !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 {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 1px 0 var(--border-color) !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;
}