/* Helix · panel v5 · CRM: todo cuelga de html.hx-v5 (plan: docs/plans/panel-v5-fd90).
La pestaña «CRM» es Twenty dentro de un iframe de otro origen: lo de dentro (su barra, sus pestañas de vista, su
kanban) no se puede tocar desde aquí. Lo nuestro sí: el pane, la cabecera (la monta helix-v5-crm.js), el marco del
iframe, el velo de carga, el botón y la capa de la guía, la tarjeta de alta y los textos de carga o error.
Los !important solo pisan estilos que helix-crm.js pone en línea (se indica en cada caso). */
/* ── Marco del iframe: tarjeta redondeada con el filo y la sombra del rediseño, del color del tema mientras carga
(antes, blanco fijo: destello blanco de varios segundos en oscuro) ── */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] .hx-crm-marco {
flex: 1 1 auto; height: auto !important; min-height: 0; box-sizing: border-box; /* en línea: height:100% */
border-radius: 22px; overflow: hidden; isolation: isolate;
background: var(--v5-card) !important; /* en línea: #fff */
box-shadow: 0 0 0 .5px var(--v5-edge), 0 18px 44px -24px rgba(0, 0, 0, .65); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-tab-pane[data-tab="crm"] .hx-crm-marco {
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 16px 38px -22px rgba(80, 30, 15, .32); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-iframe { background: var(--v5-card) !important; } /* en línea: #fff */
/* Velo «Abriendo tu CRM…»: mismo fondo que el marco, anillo de carga coral y la tipografía v5 */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-velo { gap: 4px !important; background: var(--v5-card) !important; } /* en línea: #fff */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-velo::before,
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-loading[data-hx5-crm="cargando"]::before {
content: ""; display: block; box-sizing: border-box; width: 30px; height: 30px; margin: 0 auto 14px; border-radius: 50%;
border: 2.5px solid color-mix(in srgb, var(--v5-t1) 12%, transparent); border-top-color: var(--v5-acc);
animation: hx5-gira .8s linear infinite; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-velo .helix-loading { padding: 0; font-size: 15px; font-weight: 600;
letter-spacing: -.01em; color: var(--v5-t1); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-velo .t-caption { font-size: 13px; color: var(--v5-t2); }
/* Botón flotante de la guía: sin acción arriba (sin JS v5) queda como píldora de cristal; con ella, fuera, que tapaba
la esquina de Twenty */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia-btn {
right: 14px !important; bottom: 14px !important; height: 36px; min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px; /* en línea: 18px */
font: inherit; font-size: 13px; font-weight: 500; color: var(--v5-t1); background: var(--v5-glass);
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 10px 26px -12px rgba(0, 0, 0, .5) !important; } /* en línea: sombra */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia-btn::before,
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia-btn::after { content: none; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] .hx-crm-marco[data-hx5-guia] > #hx-crm-guia-btn { display: none; }
/* ── Guía: hoja de cristal v5 sobre el CRM desenfocado. Si no cabe (móvil), la capa se desplaza y la hoja no se corta ── */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia {
align-items: flex-start !important; overflow-y: auto; overscroll-behavior: contain; /* en línea: center */
background: rgba(8, 8, 12, .44) !important; /* en línea: .55 */
-webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia { background: rgba(40, 20, 15, .22) !important; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia > div {
box-sizing: border-box; margin: auto; padding: 28px 30px 22px !important; border: 0 !important; border-radius: 28px !important; /* en línea */
color: var(--v5-t1) !important; background: var(--v5-sheet) !important;
-webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
box-shadow: var(--v5-sheetsh), 0 0 0 .5px var(--v5-edge) !important;
animation: hx5-entra .4s var(--v5-eo) both; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia h2 { margin: 0 0 6px !important; font-size: 22px !important;
font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: var(--v5-t1); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia > div > p { opacity: 1 !important; font-size: 13.5px !important; /* en línea: .75 / .6 */
line-height: 1.45; color: var(--v5-t2); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia > div > p:last-of-type { font-size: 12.5px !important; color: var(--v5-t3); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia ul { padding-left: 0 !important; gap: 10px !important; list-style: none; /* en línea */
font-size: 14px !important; color: var(--v5-t1); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia li { position: relative; padding-left: 20px; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia li::before { content: ""; position: absolute; left: 3px; top: .58em;
width: 6px; height: 6px; border-radius: 50%; background: var(--v5-acc); }
/* ── Botones de la pestaña (Activar, Entendido): píldoras como en Ajustes ── */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] :is(#hx-crm-activar, #hx-crm-guia-ok) {
height: 38px; min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; box-shadow: none; text-shadow: none;
font: inherit; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--v5-acc); cursor: pointer;
transition: filter .2s var(--v5-eo), box-shadow .2s var(--v5-eo), transform .12s var(--v5-eo); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] :is(#hx-crm-activar, #hx-crm-guia-ok)::before,
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] :is(#hx-crm-activar, #hx-crm-guia-ok)::after { content: none; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] :is(#hx-crm-activar, #hx-crm-guia-ok):hover:not(:disabled) {
filter: brightness(1.08); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] :is(#hx-crm-activar, #hx-crm-guia-ok):active:not(:disabled) { transform: scale(.97); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-activar:disabled { opacity: .5; cursor: default; }
/* ── Sin CRM (alta del superadmin, «Preparando…», aviso al coach): tarjeta v5 con su icono ── */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section {
box-sizing: border-box; width: 100%; margin: 12px auto 24px !important; padding: 24px 26px 22px; border: 0; border-radius: 22px; /* en línea: 24px auto */
background: var(--v5-card); box-shadow: var(--v5-sh1); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section::after { content: none; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section::before {
content: ""; position: static; display: block; width: 44px; height: 44px; margin: 0 0 14px; border-radius: 14px; opacity: 1;
background: color-mix(in srgb, var(--v5-acc) 14%, transparent) center / 24px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5E57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 6v12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3V6M4.5 12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3'/%3E%3C/svg%3E"); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2493F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 6v12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3V6M4.5 12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3'/%3E%3C/svg%3E"); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section > h2 { margin: 0 0 6px !important; font-size: 20px !important; /* en línea */
font-weight: 700 !important; letter-spacing: -.02em; color: var(--v5-t1); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section > p { font-size: 13.5px; line-height: 1.5; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section code { padding: 1px 6px; border-radius: 6px;
background: var(--v5-bin); font-size: .92em; color: var(--v5-t1); }
/* ── Textos sueltos de carga y de error (los marca helix-v5-crm.js): centrados, como estado vacío ── */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-loading { margin: auto; max-width: 440px; padding: 24px;
font-size: 14px; line-height: 1.5; color: var(--v5-t2); }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-loading[data-hx5-crm="aviso"] { padding: 20px 24px; border-radius: 22px;
color: var(--v5-t1); background: var(--v5-card); box-shadow: var(--v5-sh1); }
/* ── Escritorio: el pane deja de desbordarse (su padding:0 perdía contra el padding general de las pestañas y el
marco, a height:100%, se salía 50 px por abajo); título a 28 px de la hoja y marco a 14 px, como Embudo y Agenda ── */
@media (min-width: 1024px) {
html.hx-v5 .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active[data-tab="crm"] {
box-sizing: border-box; display: flex; flex-direction: column; padding: 22px 14px 14px; }
html.hx-v5 .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active[data-tab="crm"]:has(> .hx-crm-marco) { overflow: hidden; }
html.hx-v5 .helix-app .hx5-crm-cab { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 4px 14px 16px; }
html.hx-v5 .helix-app .hx5-crm-cab .hx5-titulo { min-width: 0; padding: 0; }
html.hx-v5 .helix-app .hx5-crm-cab[data-visto] .hx5-titulo { animation: none; }
html.hx-v5 .helix-app .hx5-crm-acc { display: flex; flex: none; align-items: center; gap: 8px; padding-top: 2px; }
html.hx-v5 .helix-app .hx5-crm-acc[hidden] { display: none; }
html.hx-v5 .helix-app .hx5-crm-guia { height: 36px; padding: 0 15px 0 13px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: 13.5px; font-weight: 500; color: var(--v5-t1); cursor: pointer; background: var(--v5-glass);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 8px 22px -12px rgba(0, 0, 0, .35);
transition: transform .12s var(--v5-eo), box-shadow .2s var(--v5-eo); }
html.hx-v5 .helix-app .hx5-crm-guia svg { flex: none; color: var(--v5-acc); }
html.hx-v5 .helix-app .hx5-crm-guia:hover { box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 12px 26px -12px rgba(0, 0, 0, .45); }
html.hx-v5 .helix-app .hx5-crm-guia:active { transform: scale(.97); }
html.hx-v5 .helix-app .hx5-crm-guia:focus-visible { outline: 2px solid var(--v5-acc); outline-offset: 2px; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia > div { max-width: 620px !important; } /* en línea: 600px */
}
/* ── Móvil: el marco llena el hueco entre la cabecera y la barra flotante, sin el fundido de abajo (el CRM no se
desplaza: se desplaza Twenty por dentro); la cabecera del pane no hace falta (el shell ya pone «CRM» y el botón) ── */
@media (max-width: 1023.98px) {
html.hx-v5 .helix-app .hx5-crm-cab { display: none; }
html.hx-v5 .helix-app .helix-tab-pane.is-active[data-tab="crm"] { display: flex; flex-direction: column; }
html.hx-v5 .helix-app .helix-tab-pane.is-active[data-tab="crm"]:has(> .hx-crm-marco) { padding: 4px 16px calc(var(--hx5m-barra) + 12px); overflow: hidden; }
html.hx-v5 .helix-app .helix-workspace:has(.helix-tab-pane.is-active[data-tab="crm"] > .hx-crm-marco)::after { display: none; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] .hx-crm-marco { border-radius: 20px; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia { padding: 12px !important; } /* en línea: 20px */
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia > div { padding: 22px 20px 18px !important; border-radius: 24px !important; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia h2 { font-size: 20px !important; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] #hx-crm-guia ul { font-size: 14.5px !important; }
html.hx-v5 .helix-app .helix-tab-pane[data-tab="crm"] > .helix-settings-section { margin: 4px auto 24px !important; padding: 22px 20px 20px; }
}