/* ==========================================================================
   Befocusy App — hoja de estilos de la webapp de cliente (raíz del dominio).
   Tokens del design system de Befocusy + layout responsive (escritorio: sidebar;
   móvil: cabecera + barra inferior + FAB) + estados de los componentes.
   El cuerpo de la app usa estilos inline con var(--*) (igual que el diseño);
   aquí viven los tokens, el reset, las animaciones, la conmutación de "chrome"
   por viewport y las clases :hover/:active.
   ========================================================================== */

/* Tema (Apariencia: Sistema / Claro / Oscuro, 2026-09-28). `:root` es la paleta
   CLARA (la de siempre). El modo oscuro redefine los mismos tokens en
   `:root[data-theme="dark"]` y, para «Sistema», en la media query de más abajo
   (las DOS copias del bloque DARK deben ser idénticas). `.bf-light-scope` vuelve
   a declarar la paleta clara en un subárbol que debe verse claro siempre (p. ej.
   el editor de un correo que se envía fuera de la app). */
:root, .bf-light-scope {
  color-scheme:light;
  /* Días temáticos de la Agenda (ver .reun-th): luminosidad/croma por rol */
  --th-l-bg:.972; --th-c-bg:.022; --th-l-bd:.89; --th-c-bd:.05; --th-l-fg:.36; --th-c-fg:.09; --th-l-sol:.56; --th-c-sol:.13;
  --reun-k-ev:#2E7DD1; --reun-k-re:var(--teal-600); --reun-k-ta:#B54708;
  /* Teal (marca) */
  --teal-50:#F0FDFA; --teal-100:#CCFBF1; --teal-200:#99F6E4; --teal-300:#5EEAD4;
  --teal-400:#2DD4BF; --teal-500:#14B8A6; --teal-600:#0D9488; --teal-700:#0F766E;
  --teal-800:#115E59; --teal-900:#0B3F3A; --teal-950:#06251F;

  /* Neutros (slate) */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1E293B; --slate-900:#0F172A;
  --ink:#0C1A19; --white:#FFFFFF;

  /* Semánticos */
  --fg1:var(--ink); --fg2:var(--slate-600); --fg3:var(--slate-400); --fg-brand:var(--teal-700);
  /* Texto de un valor vacío («Sin proyecto», «Sin fecha»): el gris de --fg3 en claro,
     rojo muy claro en oscuro (el gris se perdía sobre el fondo oscuro). */
  --fg-empty:#94A3B8;
  --brand:var(--teal-700); --brand-deep:var(--teal-900);
  --bg1:#FFFFFF; --bg2:var(--slate-50); --bg3:var(--slate-100);
  --border:var(--slate-200); --border-strong:var(--slate-300); --border-brand:var(--teal-200);

  /* Estado */
  --success:#059669; --success-bg:#ECFDF5;
  --warning:#D97706; --warning-bg:#FFFBEB;
  --danger:#DC2626;  --danger-bg:#FEF2F2;

  /* Destacados (callout) de Notion — un tinte por color real de Notion, usado
     IDÉNTICO en lectura (app.js:inboxBlock) y edición (_bootstrap.php:
     bfNotaEditableHtml) para que ambas vistas se vean exactamente igual.
     Verde/amarillo/rojo reusan los tokens de estado ya existentes (mismo
     matiz que el resto de la app); gris/azul son nuevos. */
  --callout-default:var(--bg3);
  --callout-gray:var(--slate-100);
  --callout-blue:#E7F3FA;
  --callout-green:var(--success-bg);
  --callout-yellow:var(--warning-bg);
  --callout-red:var(--danger-bg);

  /* Radios */
  --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;

  /* Sombras */
  --shadow-xs:0 1px 2px rgba(12,26,25,0.06);
  --shadow-sm:0 1px 3px rgba(12,26,25,0.08), 0 1px 2px rgba(12,26,25,0.04);
  --shadow-md:0 4px 12px rgba(12,26,25,0.08), 0 2px 4px rgba(12,26,25,0.04);
  --shadow-lg:0 12px 32px rgba(12,26,25,0.10), 0 4px 8px rgba(12,26,25,0.04);
  --shadow-brand:0 10px 28px rgba(15,118,110,0.30);
  --shadow-brand-sm:0 4px 14px rgba(15,118,110,0.25);

  /* Tokens de tema (2026-09-28) — en claro valen lo mismo que el color fijo al que
     sustituyen; en oscuro se redefinen abajo. */
  --success-solid:#059669; --warning-solid:#D97706; --danger-solid:#DC2626;   /* rellenos con texto blanco */
  --warning-border:#FDE68A; --warning-fg:#92400E;                              /* avisos ámbar */
  --warning-fg-alt:#B45309;
  --fg-brand-strong:var(--teal-800);                                           /* texto de marca más intenso */
  --inverse-bg:#0B3F3A; --on-inverse:#FFFFFF;                                  /* toast */
  --glass:rgba(255,255,255,0.85); --glass-strong:rgba(255,255,255,0.9);        /* cabeceras translúcidas */
  --backdrop:rgba(12,26,25,0.45);                                              /* fondo de modales */
  --scroll-thumb:#cfd8de;
  --logo-work:#0D2E35; --logo-os:#1B6C78;
  --dp-accent:#1B6C78; --dp-accent-fg:#1B6C78; --dp-tint:#ECF6F7; --dp-edge:#B0D6DA; --dp-dark:#0D2E35;
  --callout-blue-border:#BFDCEE;
  --tag-blue-bg:#DBEAFE; --tag-blue-fg:#1E40AF; --tag-blue-border:#BFDBFE;
  /* Colores de Notion (etiquetas select/status, texto y resaltado del contenido):
     bg/fg/dot = etiqueta; soft = fondo muy suave de tarjeta; text/hl = color de
     texto y de resaltado de un fragmento. */
  --n-default-bg:#F1F1EF; --n-default-fg:#5C5A54; --n-default-dot:#A3A199; --n-default-soft:#FBFBFB; --n-default-text:#5C5A54; --n-default-hl:#F1F1EF;
  --n-gray-bg:#F1F1EF; --n-gray-fg:#5C5A54; --n-gray-dot:#A3A199; --n-gray-soft:#FBFBFB; --n-gray-text:#5C5A54; --n-gray-hl:#F1F1EF;
  --n-brown-bg:#F5EDE9; --n-brown-fg:#7A5841; --n-brown-dot:#A87C5A; --n-brown-soft:#FCFAF9; --n-brown-text:#7A5841; --n-brown-hl:#F5EDE9;
  --n-orange-bg:#FBEBDD; --n-orange-fg:#B25415; --n-orange-dot:#D9730D; --n-orange-soft:#FEF9F5; --n-orange-text:#B25415; --n-orange-hl:#FBEBDD;
  --n-yellow-bg:#FBF3DB; --n-yellow-fg:#9A6D00; --n-yellow-dot:#DFAB01; --n-yellow-soft:#FEFCF5; --n-yellow-text:#9A6D00; --n-yellow-hl:#FBF3DB;
  --n-green-bg:#DDEDE8; --n-green-fg:#1A7F62; --n-green-dot:#0F9B74; --n-green-soft:#F5FAF9; --n-green-text:#1A7F62; --n-green-hl:#DDEDE8;
  --n-blue-bg:#DDEBF1; --n-blue-fg:#1A5A85; --n-blue-dot:#2E80C2; --n-blue-soft:#F5F9FB; --n-blue-text:#1A5A85; --n-blue-hl:#DDEBF1;
  --n-purple-bg:#EAE3F4; --n-purple-fg:#6A40A4; --n-purple-dot:#9065B0; --n-purple-soft:#F9F7FC; --n-purple-text:#6A40A4; --n-purple-hl:#EAE3F4;
  --n-pink-bg:#F5E0EC; --n-pink-fg:#AD1A72; --n-pink-dot:#C14C8A; --n-pink-soft:#FCF6FA; --n-pink-text:#AD1A72; --n-pink-hl:#F5E0EC;
  --n-red-bg:#FBE4E4; --n-red-fg:#B22B2B; --n-red-dot:#E03E3E; --n-red-soft:#FEF7F7; --n-red-text:#B22B2B; --n-red-hl:#FBE4E4;

  /* Tipografía */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Poppins','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* ---- Modo oscuro (Apariencia) — DARK:BEGIN (copia 1: elegido a mano) ---- */
:root[data-theme="dark"] {
  color-scheme:dark;
  --teal-50:#0F2A27; --teal-100:#123A35; --teal-200:#1A5750;
  --teal-700:#0D8A7D; --teal-800:#0F766E; --teal-900:#A7E8DE; --teal-950:#CCFBF1;
  --slate-50:#0F1919; --slate-100:#1A2626; --slate-200:#283636; --slate-300:#384A4A;
  --slate-400:#7D8E8C; --slate-500:#8FA09E; --slate-600:#A9B8B6; --slate-700:#C5D1CF;
  --slate-800:#DDE5E4; --slate-900:#EEF3F2;
  --ink:#E7EEED; --white:#121C1C;
  --fg-brand:#2DD4BF; --brand-deep:#CFEDE8;
  --fg-empty:#F2B8B5;
  --bg1:#121C1C; --bg2:#0B1414; --bg3:#1A2626;
  --success:#34D399; --success-bg:#0F2B22;
  --warning:#FBBF24; --warning-bg:#2B2210;
  --danger:#F87171;  --danger-bg:#331A1B;
  --callout-blue:#13283A; --callout-blue-border:#1E4661;
  --warning-border:#5C4613; --warning-fg:#FCD34D;
  --inverse-bg:#D9F2EE; --on-inverse:#0C1A19;
  --warning-fg-alt:#FBBF24; --fg-brand-strong:#5EEAD4;
  /* Solo en oscuro (en claro el JS usa el hex de respaldo de var(--dk-*, #hex)). */
  --dk-av1-bg:#123A35; --dk-av1-fg:#5EEAD4; --dk-av2-bg:#3A2A1A; --dk-av2-fg:#FDBA74;
  --dk-av3-bg:#13283A; --dk-av3-fg:#7DD3FC; --dk-av4-bg:#283636; --dk-av4-fg:#C5D1CF;
  --dk-av5-bg:#3A1C2E; --dk-av5-fg:#F9A8D4; --dk-sky-fg:#7DD3FC;
  --dk-wa-bg:#16301F; --dk-wa-fg:#4ADE80; --dk-slack-bg:#2A1F38; --dk-slack-fg:#D8B4FE;
  --dk-success-border:#1F5C45;
  --glass:rgba(18,28,28,0.85); --glass-strong:rgba(18,28,28,0.92);
  --backdrop:rgba(0,0,0,0.6);
  --scroll-thumb:#2E3D3D;
  --logo-work:#E7EEED; --logo-os:#3CC4B0;
  --dp-accent-fg:#5FC2CE; --dp-tint:#133036; --dp-edge:#1F5961; --dp-dark:#E7EEED;
  --tag-blue-bg:#1A2A45; --tag-blue-fg:#93C5FD; --tag-blue-border:#1E3A66;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --n-default-bg:#373C3C; --n-default-fg:#E6E6E4; --n-default-dot:#9B9B9B; --n-default-soft:#1F2727; --n-default-text:#9B9B9B; --n-default-hl:#373C3C;
  --n-gray-bg:#454B4B; --n-gray-fg:#E6E6E4; --n-gray-dot:#9B9B9B; --n-gray-soft:#242C2C; --n-gray-text:#9B9B9B; --n-gray-hl:#454B4B;
  --n-brown-bg:#603B2C; --n-brown-fg:#E6E6E4; --n-brown-dot:#BA856F; --n-brown-soft:#2D2722; --n-brown-text:#BA856F; --n-brown-hl:#603B2C;
  --n-orange-bg:#854C1D; --n-orange-fg:#E6E6E4; --n-orange-dot:#C77D48; --n-orange-soft:#3A2D1C; --n-orange-text:#C77D48; --n-orange-hl:#854C1D;
  --n-yellow-bg:#89632A; --n-yellow-fg:#E6E6E4; --n-yellow-dot:#CA9849; --n-yellow-soft:#3C3521; --n-yellow-text:#CA9849; --n-yellow-hl:#89632A;
  --n-green-bg:#2B593F; --n-green-fg:#E6E6E4; --n-green-dot:#529E72; --n-green-soft:#1B3128; --n-green-text:#529E72; --n-green-hl:#2B593F;
  --n-blue-bg:#28456C; --n-blue-fg:#E6E6E4; --n-blue-dot:#5E87C9; --n-blue-soft:#1A2A38; --n-blue-text:#5E87C9; --n-blue-hl:#28456C;
  --n-purple-bg:#492F64; --n-purple-fg:#E6E6E4; --n-purple-dot:#9D68D3; --n-purple-soft:#252335; --n-purple-text:#9D68D3; --n-purple-hl:#492F64;
  --n-pink-bg:#69314C; --n-pink-fg:#E6E6E4; --n-pink-dot:#D15796; --n-pink-soft:#30232D; --n-pink-text:#D15796; --n-pink-hl:#69314C;
  --n-red-bg:#6E3630; --n-red-fg:#E6E6E4; --n-red-dot:#DF5452; --n-red-soft:#322523; --n-red-text:#DF5452; --n-red-hl:#6E3630;
  /* Días temáticos de la Agenda: luminosidad/croma de cada rol (oklch) + colores de la leyenda */
  --th-l-bg:.27; --th-c-bg:.035; --th-l-bd:.36; --th-c-bd:.06; --th-l-fg:.88; --th-c-fg:.07; --th-l-sol:.62; --th-c-sol:.13;
  --reun-k-ev:#6FA8E8; --reun-k-re:#5EEAD4; --reun-k-ta:#E8A25C;
}
/* DARK:END */
/* «Sistema» (o sin elegir y sin atributo): sigue al dispositivo. Copia 2 del bloque DARK. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
/* DARK:BEGIN */
  color-scheme:dark;
  --teal-50:#0F2A27; --teal-100:#123A35; --teal-200:#1A5750;
  --teal-700:#0D8A7D; --teal-800:#0F766E; --teal-900:#A7E8DE; --teal-950:#CCFBF1;
  --slate-50:#0F1919; --slate-100:#1A2626; --slate-200:#283636; --slate-300:#384A4A;
  --slate-400:#7D8E8C; --slate-500:#8FA09E; --slate-600:#A9B8B6; --slate-700:#C5D1CF;
  --slate-800:#DDE5E4; --slate-900:#EEF3F2;
  --ink:#E7EEED; --white:#121C1C;
  --fg-brand:#2DD4BF; --brand-deep:#CFEDE8;
  --fg-empty:#F2B8B5;
  --bg1:#121C1C; --bg2:#0B1414; --bg3:#1A2626;
  --success:#34D399; --success-bg:#0F2B22;
  --warning:#FBBF24; --warning-bg:#2B2210;
  --danger:#F87171;  --danger-bg:#331A1B;
  --callout-blue:#13283A; --callout-blue-border:#1E4661;
  --warning-border:#5C4613; --warning-fg:#FCD34D;
  --inverse-bg:#D9F2EE; --on-inverse:#0C1A19;
  --warning-fg-alt:#FBBF24; --fg-brand-strong:#5EEAD4;
  /* Solo en oscuro (en claro el JS usa el hex de respaldo de var(--dk-*, #hex)). */
  --dk-av1-bg:#123A35; --dk-av1-fg:#5EEAD4; --dk-av2-bg:#3A2A1A; --dk-av2-fg:#FDBA74;
  --dk-av3-bg:#13283A; --dk-av3-fg:#7DD3FC; --dk-av4-bg:#283636; --dk-av4-fg:#C5D1CF;
  --dk-av5-bg:#3A1C2E; --dk-av5-fg:#F9A8D4; --dk-sky-fg:#7DD3FC;
  --dk-wa-bg:#16301F; --dk-wa-fg:#4ADE80; --dk-slack-bg:#2A1F38; --dk-slack-fg:#D8B4FE;
  --dk-success-border:#1F5C45;
  --glass:rgba(18,28,28,0.85); --glass-strong:rgba(18,28,28,0.92);
  --backdrop:rgba(0,0,0,0.6);
  --scroll-thumb:#2E3D3D;
  --logo-work:#E7EEED; --logo-os:#3CC4B0;
  --dp-accent-fg:#5FC2CE; --dp-tint:#133036; --dp-edge:#1F5961; --dp-dark:#E7EEED;
  --tag-blue-bg:#1A2A45; --tag-blue-fg:#93C5FD; --tag-blue-border:#1E3A66;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --n-default-bg:#373C3C; --n-default-fg:#E6E6E4; --n-default-dot:#9B9B9B; --n-default-soft:#1F2727; --n-default-text:#9B9B9B; --n-default-hl:#373C3C;
  --n-gray-bg:#454B4B; --n-gray-fg:#E6E6E4; --n-gray-dot:#9B9B9B; --n-gray-soft:#242C2C; --n-gray-text:#9B9B9B; --n-gray-hl:#454B4B;
  --n-brown-bg:#603B2C; --n-brown-fg:#E6E6E4; --n-brown-dot:#BA856F; --n-brown-soft:#2D2722; --n-brown-text:#BA856F; --n-brown-hl:#603B2C;
  --n-orange-bg:#854C1D; --n-orange-fg:#E6E6E4; --n-orange-dot:#C77D48; --n-orange-soft:#3A2D1C; --n-orange-text:#C77D48; --n-orange-hl:#854C1D;
  --n-yellow-bg:#89632A; --n-yellow-fg:#E6E6E4; --n-yellow-dot:#CA9849; --n-yellow-soft:#3C3521; --n-yellow-text:#CA9849; --n-yellow-hl:#89632A;
  --n-green-bg:#2B593F; --n-green-fg:#E6E6E4; --n-green-dot:#529E72; --n-green-soft:#1B3128; --n-green-text:#529E72; --n-green-hl:#2B593F;
  --n-blue-bg:#28456C; --n-blue-fg:#E6E6E4; --n-blue-dot:#5E87C9; --n-blue-soft:#1A2A38; --n-blue-text:#5E87C9; --n-blue-hl:#28456C;
  --n-purple-bg:#492F64; --n-purple-fg:#E6E6E4; --n-purple-dot:#9D68D3; --n-purple-soft:#252335; --n-purple-text:#9D68D3; --n-purple-hl:#492F64;
  --n-pink-bg:#69314C; --n-pink-fg:#E6E6E4; --n-pink-dot:#D15796; --n-pink-soft:#30232D; --n-pink-text:#D15796; --n-pink-hl:#69314C;
  --n-red-bg:#6E3630; --n-red-fg:#E6E6E4; --n-red-dot:#DF5452; --n-red-soft:#322523; --n-red-text:#DF5452; --n-red-hl:#6E3630;
  /* Días temáticos de la Agenda: luminosidad/croma de cada rol (oklch) + colores de la leyenda */
  --th-l-bg:.27; --th-c-bg:.035; --th-l-bd:.36; --th-c-bd:.06; --th-l-fg:.88; --th-c-fg:.07; --th-l-sol:.62; --th-c-sol:.13;
  --reun-k-ev:#6FA8E8; --reun-k-re:#5EEAD4; --reun-k-ta:#E8A25C;
/* DARK:END */
  }
}
/* `.bf-light-scope` dentro de un tema oscuro: vuelve a pintar claro su subárbol. */
.bf-light-scope { color:var(--fg1); }

/* Cambio de tema sin transiciones (bfThemeApply lo quita dos frames después). */
.bf-theme-switching, .bf-theme-switching * { transition:none !important; }

/* Selector «Apariencia» del menú de usuario (control segmentado de 3 opciones). */
.bf-usermenu-theme { padding:6px 10px 8px; }
.bf-usermenu-theme-label { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--fg1); margin-bottom:7px; }
.bf-usermenu-theme-label i { width:18px; text-align:center; font-size:15px; color:var(--slate-400); }
.bf-seg { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; padding:3px; background:var(--bg3); border-radius:10px; }
.bf-seg-btn { appearance:none; cursor:pointer; border:none; background:transparent; color:var(--fg2); border-radius:8px; padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; font-weight:600; line-height:1.1; }
.bf-seg-btn i { font-size:14px; }
.bf-seg-btn:hover { color:var(--fg1); }
.bf-seg-btn[aria-checked="true"] { background:var(--white); color:var(--fg-brand); box-shadow:var(--shadow-xs); }
.bf-seg-btn:focus-visible { outline:2px solid var(--fg-brand); outline-offset:1px; }

/* Logo del cliente en dos versiones (Configuración → Logotipo): en claro se ve la de
   fondo claro; en oscuro, la de fondo oscuro (reglas de abajo). */
.bf-brand-light { display:inline-flex; align-items:center; }
.bf-brand-dark { display:none; align-items:center; }

/* Reglas SOLO del modo oscuro (las dos formas: elegido a mano y «Sistema»). */
:root[data-theme="dark"] .bf-brand-light { display:none; }
:root[data-theme="dark"] .bf-brand-dark { display:inline-flex; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bf-brand-light { display:none; } :root:not([data-theme="light"]) .bf-brand-dark { display:inline-flex; } }
/* Avatar de Kairos: versión clara y versión optimizada para fondo oscuro. */
.bf-kairos-light { display:block; }
.bf-kairos-dark { display:none; }
:root[data-theme="dark"] .bf-kairos-light { display:none; }
:root[data-theme="dark"] .bf-kairos-dark { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bf-kairos-light { display:none; } :root:not([data-theme="light"]) .bf-kairos-dark { display:block; } }
:root[data-theme="dark"] .bf-brand-custom { background:#fff; padding:3px 6px; border-radius:6px; box-sizing:content-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bf-brand-custom { background:#fff; padding:3px 6px; border-radius:6px; box-sizing:content-box; } }
/* Texto y resaltado de color del contenido de Notion (el HTML trae el hex claro en línea). */
:root[data-theme="dark"] [data-run-color="gray"]{color:var(--n-gray-text)!important}
:root[data-theme="dark"] [data-run-color="gray_bg"]{background:var(--n-gray-hl)!important}
:root[data-theme="dark"] [data-run-color="brown"]{color:var(--n-brown-text)!important}
:root[data-theme="dark"] [data-run-color="brown_bg"]{background:var(--n-brown-hl)!important}
:root[data-theme="dark"] [data-run-color="orange"]{color:var(--n-orange-text)!important}
:root[data-theme="dark"] [data-run-color="orange_bg"]{background:var(--n-orange-hl)!important}
:root[data-theme="dark"] [data-run-color="yellow"]{color:var(--n-yellow-text)!important}
:root[data-theme="dark"] [data-run-color="yellow_bg"]{background:var(--n-yellow-hl)!important}
:root[data-theme="dark"] [data-run-color="green"]{color:var(--n-green-text)!important}
:root[data-theme="dark"] [data-run-color="green_bg"]{background:var(--n-green-hl)!important}
:root[data-theme="dark"] [data-run-color="blue"]{color:var(--n-blue-text)!important}
:root[data-theme="dark"] [data-run-color="blue_bg"]{background:var(--n-blue-hl)!important}
:root[data-theme="dark"] [data-run-color="purple"]{color:var(--n-purple-text)!important}
:root[data-theme="dark"] [data-run-color="purple_bg"]{background:var(--n-purple-hl)!important}
:root[data-theme="dark"] [data-run-color="pink"]{color:var(--n-pink-text)!important}
:root[data-theme="dark"] [data-run-color="pink_bg"]{background:var(--n-pink-hl)!important}
:root[data-theme="dark"] [data-run-color="red"]{color:var(--n-red-text)!important}
:root[data-theme="dark"] [data-run-color="red_bg"]{background:var(--n-red-hl)!important}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-run-color="gray"]{color:var(--n-gray-text)!important}
  :root:not([data-theme="light"]) [data-run-color="gray_bg"]{background:var(--n-gray-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="brown"]{color:var(--n-brown-text)!important}
  :root:not([data-theme="light"]) [data-run-color="brown_bg"]{background:var(--n-brown-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="orange"]{color:var(--n-orange-text)!important}
  :root:not([data-theme="light"]) [data-run-color="orange_bg"]{background:var(--n-orange-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="yellow"]{color:var(--n-yellow-text)!important}
  :root:not([data-theme="light"]) [data-run-color="yellow_bg"]{background:var(--n-yellow-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="green"]{color:var(--n-green-text)!important}
  :root:not([data-theme="light"]) [data-run-color="green_bg"]{background:var(--n-green-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="blue"]{color:var(--n-blue-text)!important}
  :root:not([data-theme="light"]) [data-run-color="blue_bg"]{background:var(--n-blue-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="purple"]{color:var(--n-purple-text)!important}
  :root:not([data-theme="light"]) [data-run-color="purple_bg"]{background:var(--n-purple-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="pink"]{color:var(--n-pink-text)!important}
  :root:not([data-theme="light"]) [data-run-color="pink_bg"]{background:var(--n-pink-hl)!important}
  :root:not([data-theme="light"]) [data-run-color="red"]{color:var(--n-red-text)!important}
  :root:not([data-theme="light"]) [data-run-color="red_bg"]{background:var(--n-red-hl)!important}
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font-family:var(--font-sans); color:var(--fg1); background:var(--bg2); -webkit-font-smoothing:antialiased; touch-action:manipulation; }
button { font-family:inherit; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:999px; }
::-webkit-scrollbar-track { background:transparent; }

/* ---- Animaciones ---- */
@keyframes bf-pulse { 0% { transform:scale(1); opacity:.30; } 100% { transform:scale(1.9); opacity:0; } }
@keyframes bf-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes bf-pop   { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.08); } 100% { transform:scale(1); opacity:1; } }
@keyframes bf-toast { 0% { transform:translate(-50%,14px); opacity:0; } 100% { transform:translate(-50%,0); opacity:1; } }
@keyframes bf-spin  { to { transform:rotate(360deg); } }
@keyframes wos-pop  { 0% { transform:translateY(6px) scale(.985); opacity:.4; } 100% { transform:none; opacity:1; } }
@keyframes bf-shimmer { 0% { background-position:-300px 0; } 100% { background-position:300px 0; } }

/* Placeholder "skeleton" (barra/círculo con brillo animado) mientras se resuelven
   datos que tardan más de un instante — p. ej. la cabecera de un mensaje del Inbox,
   que espera al nombre del contacto del CRM antes de mostrarse, para no parpadear
   entre un valor provisional y el definitivo. */
.bf-skel {
  display:block;
  border-radius:6px;
  background:linear-gradient(90deg, var(--bg2) 25%, var(--border) 37%, var(--bg2) 63%);
  background-size:400px 100%;
  animation:bf-shimmer 1.4s ease-in-out infinite;
}
.bf-skel-circle { border-radius:999px; flex:none; }

/* ==========================================================================
   Conmutación de "chrome" por viewport. < 900px = móvil.
   Los elementos solo-escritorio / solo-móvil se marcan con data-chrome.
   ========================================================================== */
[data-chrome="mobile"], [data-chrome="mobile-nav"] { display:none; }
[data-chrome="desktop"] { display:flex; }
@media (max-width:899px) {
  [data-chrome="desktop"] { display:none !important; }
  [data-chrome="mobile"], [data-chrome="mobile-nav"] { display:flex; }
  /* Botones de acción de la cabecera del Inbox («Enviar mensaje», «Nuevo WhatsApp»):
     en móvil ocupan demasiado con texto → se colapsan a icono cuadrado 40×40, igual
     que los otros botones de la cabecera (reglas/spam/actualizar). El title mantiene
     la etiqueta accesible. !important porque el padding/gap van en estilo inline. */
  .bf-newbtn { width:40px !important; height:40px !important; padding:0 !important; gap:0 !important; justify-content:center; }
  .bf-newbtn-label { display:none; }
}

/* La barra inferior (móvil) se oculta en la sección grabar y en el detalle: lo
   gestiona el JS con la clase .bf-hide-mobilenav en #bfApp. */
#bfApp.bf-hide-mobilenav [data-chrome="mobile-nav"] { display:none !important; }
/* Botón flotante de Kairos en móvil (#fabRec): sigue visible DENTRO de las fichas
   (Documento, Nota, Proyecto, Wiki, Contacto, Empresa, Reunión, Mensaje) para poder
   hablar con Kairos con el registro abierto como contexto. Solo se oculta dentro del
   propio Kairos (.bf-in-kairos) y mientras se escribe (teclado abierto). Sin barra
   inferior, baja a la esquina. */
[data-chrome="kairos-fab"] { display:none; }
@media (max-width:899px) {
  [data-chrome="kairos-fab"] { display:flex; }
  #bfApp.bf-in-kairos [data-chrome="kairos-fab"], #bfApp.bf-no-kairos-fab [data-chrome="kairos-fab"] { display:none !important; }
  #bfApp.bf-hide-mobilenav [data-chrome="kairos-fab"] { bottom:calc(18px + env(safe-area-inset-bottom)) !important; }
  body:has([contenteditable="true"]:focus, textarea:focus, input:focus, select:focus) [data-chrome="kairos-fab"] { display:none !important; }
}

/* Sombra sutil de la cabecera/sidebar de escritorio, sustituyendo al borde
   gris plano que llevaban antes (petición del usuario, sesión 2026-09-15):
   quitar el borde dejaba la esquina superior izquierda (cabecera+sidebar,
   ambos blancos) perfectamente limpia, que es justo lo que se pidió mantener
   — pero un `box-shadow` normal en la cabecera se habría "colado" sobre esa
   misma esquina, porque la sombra de un elemento se pinta por encima de
   cualquier hermano posterior con menor z-index (aquí, el sidebar) allí donde
   se solapen, sin importar que ambos sean blancos — el problema no es de
   contraste de color, es que la sombra es un efecto de pintado que se ve
   igual encima de cualquier fondo. Verificado en navegador antes de aplicar:
   un `box-shadow` normal en la cabecera SÍ dejaba una línea visible sobre los
   primeros px del sidebar; con la sombra acotada a partir de `left:64px`
   (justo donde termina el sidebar, ver su `width:64px` inline en
   index.php — mismo valor, deben mantenerse en sync) la esquina queda
   perfecta incluso con zoom x5. */
header[data-chrome="desktop"]::after {
  content:'';
  position:absolute;
  left:64px; right:0; bottom:-6px; height:6px;
  background:linear-gradient(rgba(15,23,42,0.06), rgba(15,23,42,0));
  pointer-events:none;
}

/* Barra inferior móvil con >5 iconos: scroll horizontal SIN barra de scroll
   visible (el ancho fijo por botón va inline, ver app/index.php). Sin ningún
   indicio visual, un icono que cae fuera del viewport inicial (p. ej.
   «Clientes» cuando el módulo CRM añade una 2ª sección) parece simplemente
   no existir — bug real reportado 2026-08-05. `.bf-navb-more` (activada por
   JS en app.js según scrollLeft/scrollWidth) difumina el borde derecho SOLO
   mientras queda contenido sin ver, como pista de que hay más iconos. */
nav.bf-navb-scroll { scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; }
nav.bf-navb-scroll::-webkit-scrollbar { display:none; height:0; }
nav.bf-navb-scroll > .bf-nav-bottom { scroll-snap-align:start; }
nav.bf-navb-scroll.bf-navb-more {
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

/* Filas de pestañas con scroll horizontal (p. ej. las 5 de la ficha de un
   proyecto): mismo ocultado de la barra de scroll que .bf-navb-scroll, pero
   genérica (no cualificada por `nav`) — clase APARTE a propósito, para no
   arriesgar ese fix ya verificado de la barra inferior móvil. */
.bf-tabrow-scroll { scrollbar-width:none; -ms-overflow-style:none; }
.bf-tabrow-scroll::-webkit-scrollbar { display:none; height:0; }

/* Tableros Kanban (Tareas, Kanban de un Proyecto, Proyectos, Documentos,
   Empresas, Contactos) — scroll horizontal más usable en anchos "medios" de
   escritorio, donde las columnas se cortan y la barra de scroll nativa queda
   al fondo de la página (debajo de la columna más alta). Ver
   bfEnhanceKanbanScroll() en app.js, que envuelve el `.bf-kanban-track` de
   cada tablero (el mismo div que ya tenía `overflow-x:auto` inline, sin
   tocarlo) en este `.bf-kanban-scroll`, y añade rueda→horizontal + flechas +
   degradado — mismo espíritu que `.bf-navb-more` de arriba, adaptado a
   ambos lados y sin recortar el propio contenido (aquí es una sombra
   superpuesta, no un `mask` sobre el track, que ya tiene su overflow propio). */
.bf-kanban-scroll { position:relative; }
.bf-kanban-fade {
  position:absolute; top:0; bottom:8px; width:40px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .15s ease;
}
.bf-kanban-fade-l { left:0; background:linear-gradient(to right, var(--bg2) 0%, transparent 100%); }
.bf-kanban-fade-r { right:0; background:linear-gradient(to left, var(--bg2) 0%, transparent 100%); }
.bf-kanban-scroll.has-more-l .bf-kanban-fade-l,
.bf-kanban-scroll.has-more-r .bf-kanban-fade-r { opacity:1; }
/* Carril de cada flecha: ABSOLUTO y con la altura ENTERA del tablero (igual
   que el degradado de arriba) — el botón vive DENTRO como `position:sticky`,
   así que se queda anclado cerca de la parte superior del VIEWPORT mientras
   el carril (=el tablero entero) siga a la vista, y se desplaza con el resto
   del contenido en cuanto el tablero se acaba — 100% CSS, sin listener de
   scroll. El carril en sí no ocupa espacio en el flujo (position:absolute),
   así que no añade hueco debajo del tablero. */
.bf-kanban-arrow-rail {
  position:absolute; top:0; bottom:8px; z-index:3; width:30px; pointer-events:none;
}
.bf-kanban-arrow-rail-l { left:-4px; }
.bf-kanban-arrow-rail-r { right:-4px; }
.bf-kanban-arrow {
  position:sticky; top:6px;
  width:30px; height:30px; border-radius:999px; border:1px solid var(--border-brand);
  background:var(--teal-50); box-shadow:var(--shadow-xs); color:var(--fg-brand);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .15s ease, background-color .15s ease;
}
.bf-kanban-arrow:hover { background:var(--teal-100); }
.bf-kanban-scroll.has-more-l .bf-kanban-arrow-l,
.bf-kanban-scroll.has-more-r .bf-kanban-arrow-r { opacity:1; pointer-events:auto; }
/* Táctil (móvil): el usuario ya arrastra directo con el dedo — las flechas
   solo estorbarían encima de las tarjetas. */
@media (max-width:899px) { .bf-kanban-arrow-rail { display:none; } }

/* Sección "Inicio" (dashboard "hoy": agenda + tareas pendientes/completadas)
   — bloques agregadores con cabecera icono+título+botón "ir a la sección
   completa" (data-go, mismo delegado ya usado por el sidebar/barra inferior). */
.bf-inicio-block { margin-bottom:30px; }
.bf-inicio-block:last-child { margin-bottom:0; }
.bf-inicio-blockhead { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.bf-inicio-blockhead-ic {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:10px; background:var(--teal-50); color:var(--fg-brand);
}
.bf-inicio-blockh2 { margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--fg1); flex:1; min-width:0; }
.bf-inicio-gobtn {
  appearance:none; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; border:1px solid var(--border-strong);
  background:var(--white); color:var(--fg2);
}
.bf-inicio-gobtn:hover { color:var(--fg-brand); border-color:var(--border-brand); }
.bf-inicio-list { display:flex; flex-direction:column; gap:8px; }
.bf-inicio-empty { color:var(--fg3); font-size:13.5px; padding:10px 2px; }
/* "Agenda de hoy" + "Correos nuevos" lado a lado: 1 columna en móvil (se
   apilan), 2 en escritorio — mismo breakpoint (900px) que el resto de la
   navegación de la app. Los .bf-inicio-block hijos pierden su propio
   margin-bottom (lo aporta la grid) para no duplicar el espaciado.
   minmax(0,1fr) en vez de 1fr a secas — bug real: el "1fr" a secas usa
   minmax(auto,1fr) implícito, así que la pista de la grid se ensancha por
   encima del propio contenedor si algún descendiente tiene contenido sin
   posibilidad de partir línea (el asunto de un correo, white-space:nowrap
   para poder truncarlo con ellipsis) — el min-width:0 puesto en el flex de
   más adentro NO protege de esto, hace falta el minmax(0,…) en la propia
   pista de grid. Sin él, el bloque entero (cabecera + tarjetas) se salía del
   margen de página en móvil. */
.bf-inicio-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-bottom:30px; }
.bf-inicio-grid:last-child { margin-bottom:0; }
.bf-inicio-grid .bf-inicio-block { margin-bottom:0; }
@media (min-width:900px) {
  .bf-inicio-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.bf-inicio-vermas {
  display:block; width:100%; text-align:center; appearance:none; cursor:pointer;
  background:none; border:none; padding:8px 4px; font-size:13px; font-weight:600;
  color:var(--fg-brand);
}
.bf-inicio-vermas:hover { text-decoration:underline; }

/* ==========================================================================
   Bloqueo de orientación (solo móvil): la app está pensada para vertical. En
   landscape se oculta TODO (login, "sin configurar" o la app) y se muestra un
   aviso para girar el móvil. `pointer:coarse` + `max-height` evitan que dispare
   en escritorio (una ventana normal ya es "landscape") o en tablets grandes.
   Puro CSS: se reevalúa solo al rotar, sin JS. Ver overlay #bfRotateBlock al
   final de app/index.php.
   ========================================================================== */
#bfRotateBlock { display:none; }
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse) {
  body > *:not(#bfRotateBlock) { display:none !important; }
  #bfRotateBlock {
    display:flex !important; position:fixed; inset:0; z-index:9999;
    flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background:var(--bg2); color:var(--fg1); text-align:center; padding:32px;
  }
  #bfRotateBlock svg { color:var(--teal-600); animation:bf-rotate-hint 1.8s ease-in-out infinite; }
  #bfRotateBlock p { margin:0; font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.4; max-width:280px; color:var(--fg1); }
}
@keyframes bf-rotate-hint { 0%,50%,100% { transform:rotate(0deg); } 25% { transform:rotate(-90deg); } }

/* ---- Spinner de carga ---- */
.bf-spinner { display:inline-block; width:18px; height:18px; border-radius:999px; border:3px solid var(--slate-200); border-top-color:var(--teal-600); animation:bf-spin .8s linear infinite; flex:none; }

/* ---- Botón flotante de Kairos (#fabRec/#deskRec): avatar del erizo ---- */
.bf-kairos-fab { transition:transform .15s ease, box-shadow .15s ease; }
.bf-kairos-fab:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,0.26) !important; }
.bf-kairos-fab:focus-visible { outline:3px solid var(--teal-600); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .bf-kairos-fab, .bf-kairos-fab:hover { transition:none; transform:none; } }

/* En la bandeja de Soporte (solo escritorio) el botón flotante de Kairos tapa el composer de respuesta. */
#bfApp.bf-sec-soporte #deskRec { display:none !important; }

/* ---- Layout de página de sección ---- */
/* Sin tope de ancho: cada sección usa todo el ancho disponible del área principal. */
/* padding-bottom:104px (no 40px) en escritorio — el botón flotante de Kairos
   (#deskRec, fixed, right/bottom:24px, 60px de lado, siempre visible en
   escritorio con o sin Kairos configurado) ocupa hasta bottom:84px; sin este
   margen tapaba el botón "Siguientes" del paginador al final de cualquier
   listado largo (Catálogos, CRM, Reuniones…). En móvil ya se reservaban 96px
   por el mismo motivo (ver la regla de abajo, @media max-width:899px) — este
   ajuste solo llevaba el equivalente en escritorio. */
.bf-page { margin:0 auto; padding:28px 32px 104px; }
/* Detalle de un mensaje del Inbox: en pantallas grandes se ensancha (mejor uso del
   espacio y los botones de acción no se cortan); estrecho y legible en pequeñas. */
.bf-inbox-detail { max-width:760px; margin:0 auto; }
@media (min-width:1100px) { .bf-inbox-detail { max-width:1040px; } }
@media (min-width:1400px) { .bf-inbox-detail { max-width:1200px; } }

/* ---- Inbox: rail de filtros (estados + tipos de correo) + lista ----
   Escritorio (≥900px): rail en COLUMNA a la izquierda como tarjeta fija; lista a la
   derecha. Móvil (base): el rail se colapsa tras un botón (hamburguesa) que despliega
   un panel; sin pestañas horizontales con scroll. */
#inboxLayout { display:block; }
#inboxTabs { position:relative; margin-bottom:12px; }
.bf-inbox-mobileonly { display:none; }

/* Botón disparador del panel de filtros (solo móvil) */
.bf-inbox-filterbtn {
  appearance:none; cursor:pointer; align-items:center; gap:10px; width:100%;
  background:var(--white); border:1px solid var(--border-strong); border-radius:12px;
  padding:11px 14px; font-size:14px; font-weight:600; color:var(--fg1); box-shadow:var(--shadow-xs);
}
.bf-inbox-filterbtn .ic { display:flex; flex:none; color:var(--fg2); }
.bf-inbox-filterbtn .dot { flex:none; width:8px; height:8px; border-radius:999px; }
.bf-inbox-filterbtn .lb { flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-inbox-filterbtn .n { flex:none; font-size:12.5px; font-weight:700; color:var(--fg3); }
.bf-inbox-filterbtn .chev { display:flex; flex:none; color:var(--fg3); transition:transform .18s; }
#inboxTabs.is-open .bf-inbox-filterbtn .chev { transform:rotate(180deg); }

/* Panel con estados + tipos (tarjeta) */
.bf-inbox-railpanel { display:none; }
.bf-inbox-states { display:flex; flex-direction:column; gap:3px; }
.bf-inbox-state {
  appearance:none; cursor:pointer; display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:none; border-radius:10px; background:transparent; color:var(--fg1);
  text-align:left; font-size:14px; font-weight:500;
}
.bf-inbox-state:hover { background:var(--slate-50); }
.bf-inbox-state.is-active { background:var(--teal-700); color:#fff; font-weight:700; }
.bf-inbox-state .ic { display:flex; flex:none; color:var(--slate-400); }
.bf-inbox-state.is-active .ic { color:rgba(255,255,255,0.92); }
.bf-inbox-state .lb { flex:1; min-width:0; }
.bf-inbox-state .n { flex:none; font-size:12.5px; font-weight:600; color:var(--fg3); }
.bf-inbox-state.is-active .n {
  background:rgba(255,255,255,0.22); color:#fff; min-width:22px; height:20px; padding:0 7px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}
.bf-inbox-railsep { display:flex; align-items:center; gap:8px; padding:14px 10px 8px; }
.bf-inbox-railsep > span { font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--fg3); white-space:nowrap; }
.bf-inbox-railsep::after { content:''; flex:1; height:1px; background:var(--slate-100); }
.bf-inbox-cats { display:flex; flex-direction:column; gap:1px; }
.bf-inbox-cat {
  appearance:none; cursor:pointer; display:flex; align-items:center; gap:11px; width:100%;
  padding:8px 12px; border:none; border-radius:9px; background:transparent; text-align:left;
}
.bf-inbox-cat:hover { background:var(--slate-50); }
.bf-inbox-cat.is-active { background:var(--teal-50); }
.bf-inbox-cat.is-zero:not(.is-active) { opacity:.5; }
/* «Enviados» no filtra por tipo — el rail queda inerte (sin poder pulsarlo). */
.bf-inbox-cat.is-locked, .bf-inbox-cat:disabled { opacity:.4; cursor:default; pointer-events:none; }
.bf-inbox-cat.is-locked:hover, .bf-inbox-cat:disabled:hover { background:transparent; }
.bf-inbox-catdot { flex:none; width:8px; height:8px; border-radius:999px; }
.bf-inbox-cat.is-active .bf-inbox-catdot { box-shadow:0 0 0 3px var(--teal-100); }
.bf-inbox-catlb { flex:1; min-width:0; font-size:13.5px; font-weight:500; color:var(--fg1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-inbox-cat.is-active .bf-inbox-catlb { font-weight:700; color:var(--fg-brand); }
.bf-inbox-catn { flex:none; font-size:12.5px; font-weight:600; color:var(--fg3); font-variant-numeric:tabular-nums; }
.bf-inbox-cat.is-active .bf-inbox-catn { color:var(--fg-brand); font-weight:700; }

/* ---- Inbox: fila de mensaje (rejilla adaptativa) ----
   Escritorio: asunto + remitente a la izquierda; tipo+fecha y cuenta a la derecha.
   Móvil: asunto COMPLETO (varias líneas) y debajo tipo, remitente y cuenta. */
.bf-inbox-open {
  text-align:left; appearance:none; cursor:pointer; flex:1; min-width:0; background:transparent;
  border:none; border-radius:14px; padding:14px 16px 14px 6px;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"subject meta" "from acct";
  column-gap:14px; row-gap:2px; align-items:center;
}
.bf-inbox-subject { grid-area:subject; font-size:14.5px; font-weight:600; color:var(--fg1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-inbox-from { grid-area:from; font-size:13px; color:var(--fg3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-inbox-meta { grid-area:meta; justify-self:end; display:flex; align-items:center; gap:10px; }
.bf-inbox-time { font-size:12px; color:var(--fg3); white-space:nowrap; }
.bf-inbox-acct { grid-area:acct; justify-self:end; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--fg2); background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:1px 8px; }

@media (min-width:900px) {
  #inboxLayout { display:flex; align-items:flex-start; gap:18px; }
  #inboxTabs {
    flex:0 0 240px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  .bf-inbox-filterbtn { display:none !important; }
  .bf-inbox-railpanel { display:block; }
  #inboxMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  /* El rail se colapsa: botón disparador + panel desplegable (absoluto). */
  .bf-inbox-filterbtn { display:flex; }
  .bf-inbox-railpanel {
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
    background:var(--white); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow-lg); padding:10px; max-height:72vh; overflow-y:auto;
  }
  #inboxTabs.is-open .bf-inbox-railpanel { display:block; }
  .bf-inbox-mobileonly.is-on { display:inline-flex; }
  /* Barra de acciones en lote: en móvil, iconos sin texto (mismo patrón que
     .bf-newbtn de la cabecera) — ahorra espacio en una fila que ya compite con el
     checkbox «seleccionar todos» y el contador. El `title` del botón sigue dando
     la etiqueta accesible/tooltip. */
  .bf-bulk-btn { width:36px !important; height:36px !important; padding:0 !important; gap:0 !important; justify-content:center; }
  .bf-bulk-label { display:none; }
  /* Fila: asunto completo (varias líneas) → tipo → remitente → cuenta, apilados. */
  .bf-inbox-open { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:14px 16px; }
  .bf-inbox-subject { white-space:normal; overflow:visible; }
  .bf-inbox-meta { order:2; justify-self:start; flex-wrap:wrap; }
  .bf-inbox-from { order:3; white-space:normal; overflow:visible; word-break:break-all; }
  .bf-inbox-acct { order:4; justify-self:start; max-width:100%; }
  /* Sin arrastre en móvil; permitir interacción normal con las filas. */
  .bf-inbox-item { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
}
/* ---- Notas (Jardín digital): rail de filtro por Tipo ----
   Réplica DELIBERADAMENTE DUPLICADA (no generalizada) del rail de Inbox de arriba,
   con prefijo propio `bf-notas-*` y IDs propios (#notasLayout/#notasTabs/#notasMain)
   — así una futura mejora de este filtro no puede afectar a Inbox, que está en uso
   diario por todos los clientes. Más simple que el de Inbox: sin estados/canales,
   sin contadores (v1 no hace recuentos en vivo) — solo "Todos los tipos" + una
   pestaña por opción real de Notion. Se oculta entera si el cliente no configuró
   VOZ_NOTAS_PROP_TIPO (el JS deja #notasTabs con display:none). */
#notasLayout { display:block; }
#notasTabs { position:relative; margin-bottom:12px; }

.bf-notas-filterbtn {
  appearance:none; cursor:pointer; align-items:center; gap:10px; width:100%;
  background:var(--white); border:1px solid var(--border-strong); border-radius:12px;
  padding:11px 14px; font-size:14px; font-weight:600; color:var(--fg1); box-shadow:var(--shadow-xs);
}
.bf-notas-filterbtn .ic { display:flex; flex:none; color:var(--fg2); }
.bf-notas-filterbtn .dot { flex:none; width:8px; height:8px; border-radius:999px; }
.bf-notas-filterbtn .lb { flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-notas-filterbtn .chev { display:flex; flex:none; color:var(--fg3); transition:transform .18s; }
#notasTabs.is-open .bf-notas-filterbtn .chev { transform:rotate(180deg); }

.bf-notas-railpanel { display:none; }
.bf-notas-railsep { display:flex; align-items:center; gap:8px; padding:4px 10px 8px; }
.bf-notas-railsep > span { font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--fg3); white-space:nowrap; }
.bf-notas-railsep::after { content:''; flex:1; height:1px; background:var(--slate-100); }
.bf-notas-cats { display:flex; flex-direction:column; gap:1px; }
.bf-notas-cat {
  appearance:none; cursor:pointer; display:flex; align-items:center; gap:11px; width:100%;
  padding:8px 12px; border:none; border-radius:9px; background:transparent; text-align:left;
}
.bf-notas-cat:hover { background:var(--slate-50); }
.bf-notas-cat.is-active { background:var(--teal-50); }
.bf-notas-catdot { flex:none; width:8px; height:8px; border-radius:999px; }
.bf-notas-cat.is-active .bf-notas-catdot { box-shadow:0 0 0 3px var(--teal-100); }
.bf-notas-catlb { flex:1; min-width:0; font-size:13.5px; font-weight:500; color:var(--fg1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-notas-cat.is-active .bf-notas-catlb { font-weight:700; color:var(--fg-brand); }
/* Listado agrupado de Jardín digital (sin Temática elegida en el filtro): una
   sección por Temática, con su grid de hasta 12 tarjetas + "Ver todo" si hay más.
   Ver loadNotasGrouped()/notaGroupBlock() en app.js. */
.bf-nota-group + .bf-nota-group { margin-top:28px; }
.bf-nota-grouptitle {
  margin:0 0 12px; font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--brand-deep); letter-spacing:-0.01em;
}
.bf-nota-groupgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.bf-nota-groupmore {
  appearance:none; cursor:pointer; margin-top:10px; border:1px dashed var(--border-strong);
  background:transparent; color:var(--fg-brand); font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:10px;
}
.bf-nota-groupmore:hover { background:var(--teal-50); border-color:var(--teal-200); }
/* Nota Favorita (VOZ_NOTAS_PROP_FAVORITA) — tarjeta con borde/fondo ámbar +
   insignia de estrella en la esquina (mismo tono que --warning/--warning-bg ya
   usado en la app, sin inventar un color nuevo). !important: notaCard() pone
   background/border INLINE en el <button&gt; (como el resto de tarjetas de la
   app) — sin esto la clase nunca gana esa pelea de especificidad. */
.bf-nota-card--fav { border-color:var(--warning) !important; background:var(--warning-bg) !important; }
/* Resaltado de tarjeta de artículo de Wiki marcado como Habilidad (verde,
   --success) — mismo mecanismo que .bf-nota-card--fav (ámbar, --warning) para
   Favorito, pedido explícito del usuario (sesión 2026-09-16); wikiCard() en
   app.js decide cuál de las dos aplica cuando un artículo es ambas cosas. */
.bf-wiki-card--skill { border-color:var(--success) !important; background:var(--success-bg) !important; }
/* Insignias combinadas de favorito+compartido en la esquina de la tarjeta (notaCardBadges() en
   app.js) — un único contenedor absoluto en vez de posicionar cada insignia por separado, para
   que quepan las dos a la vez sin solaparse. */
.bf-nota-badges { position:absolute; top:13px; right:13px; display:flex; align-items:center; gap:6px; }
.bf-nota-starbadge { display:flex; color:var(--warning); }
.bf-nota-sharebadge { display:flex; color:var(--fg3); }
/* Insignia de "Habilidad" (WIKI_PROP_HABILIDAD, exclusiva de Wiki) — mismo contenedor
   .bf-nota-badges que favorito/compartido, ver notaCardBadges() en app.js. Verde
   (--success), a juego con el resaltado de tarjeta .bf-wiki-card--skill — mismo
   criterio que .bf-nota-starbadge (ámbar) a juego con .bf-nota-card--fav. */
.bf-nota-skillbadge { display:flex; color:var(--success); }

@media (min-width:900px) {
  #notasLayout { display:flex; align-items:flex-start; gap:18px; }
  #notasTabs {
    flex:0 0 220px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  .bf-notas-filterbtn { display:none !important; }
  .bf-notas-railpanel { display:block; }
  #notasMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  .bf-notas-filterbtn { display:flex; }
  .bf-notas-railpanel {
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
    background:var(--white); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow-lg); padding:10px; max-height:60vh; overflow-y:auto;
  }
  #notasTabs.is-open .bf-notas-railpanel { display:block; }
}

/* ---- Documentos: rail de filtro por Tipo ----
   Mismo componente que el de Notas (comparte las clases .bf-notas-* — el
   pintado de cada pestaña es genérico, no acoplado a Notas pese al nombre),
   pero el LAYOUT (columna lateral en escritorio, desplegable en móvil) estaba
   anclado a los ids propios de Notas (#notasLayout/#notasTabs/#notasMain), no
   a las clases — por eso hacía falta esta réplica con los ids de Documentos,
   sin ella el rail se veía como una lista plana siempre visible en vez de
   columna/desplegable colapsable. */
#docLayout { display:block; }
#docTabs { position:relative; margin-bottom:12px; }

/* Pestaña "Configuración" de una ficha (Documento, y ahora también Nota): 2
   columnas VERDADERAS en escritorio — 2 divs .bf-doc-config-col (en
   Documento: izquierda Estado/Propietario/Participantes/Proyecto, derecha
   Moneda/valores económicos; en Nota: izquierda Temáticas/Temática principal,
   derecha Equipo), cada uno apilado con su propio gap, no un grid auto-flow
   por fila (que intercalaría izquierda/derecha en vez de mantenerlas
   agrupadas) — separado del bloque «Contenido» que va debajo. En móvil, 1
   columna: el grid pasa a 1fr y las 2 .bf-doc-config-col se apilan enteras,
   izquierda primero. Nombre de clase heredado de Documento (primera ficha que
   lo usó); es genérico, sin nada específico de esa base — se reutiliza tal
   cual en vez de duplicar la misma regla con otro nombre. */
.bf-doc-config-grid { display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:16px; }
.bf-doc-config-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
@media (min-width:860px) {
  .bf-doc-config-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width:900px) {
  #docLayout { display:flex; align-items:flex-start; gap:18px; }
  #docTabs {
    flex:0 0 220px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  #docMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  #docTabs.is-open .bf-notas-railpanel { display:block; }
}

/* ---- Wiki: rail de pestañas ----
   Misma réplica DELIBERADA que el bloque de Documentos justo arriba (comparte
   las clases .bf-notas-* para el pintado de cada pestaña — genérico, no
   acoplado a Notas pese al nombre — pero el LAYOUT está anclado a ids
   concretos), con los ids propios de Wiki (#wikiLayout/#wikiTabs/#wikiMain).
   El rail NUNCA se oculta, ni siquiera con 0 pestañas configuradas — el
   botón "+ Nuevo tipo" del panel ([data-wiki-new-tab] en app.js) tiene que
   seguir siendo alcanzable para poder crear el primer Tipo desde cero. */
#wikiLayout { display:block; }
#wikiTabs { position:relative; margin-bottom:12px; }

@media (min-width:900px) {
  #wikiLayout { display:flex; align-items:flex-start; gap:18px; }
  #wikiTabs {
    flex:0 0 220px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  #wikiMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  #wikiTabs.is-open .bf-notas-railpanel { display:block; }
}

/* Acordeón de temáticas (grupos) de la pestaña activa — ver
   loadWikiGrouped()/wikiGroupBlock() en app.js. Un <details> nativo por
   temática (colapsable, sin JS de apertura/cierre propio); el grid de
   tarjetas reutiliza .bf-nota-groupgrid/.bf-nota-group/.bf-nota-grouptitle
   (genéricas, ya usadas por el listado agrupado de Jardín digital). */
.bf-wiki-group + .bf-wiki-group { margin-top:14px; }
.bf-wiki-group {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-xs); padding:4px 16px;
}
.bf-wiki-group[open] { padding-bottom:16px; }
.bf-wiki-summary {
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:14px 0; user-select:none;
}
.bf-wiki-summary::-webkit-details-marker { display:none; }
.bf-wiki-summary .chev { display:flex; flex:none; color:var(--fg3); transition:transform .18s; }
.bf-wiki-group[open] .bf-wiki-summary .chev { transform:rotate(90deg); }
.bf-wiki-summary h3 {
  flex:1; min-width:0; margin:0; font-family:var(--font-display); font-size:15.5px;
  font-weight:700; color:var(--brand-deep); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bf-wiki-summary .count { flex:none; font-size:12.5px; font-weight:600; color:var(--fg3); }
/* Botón «+» de cada grupo — abre el modal de crear/importar un artículo
   nuevo ya colocado en esa temática (ver openWikiNewArticleDialog() en app.js). */
.bf-wiki-plus {
  appearance:none; cursor:pointer; flex:none; display:flex; align-items:center;
  justify-content:center; width:26px; height:26px; border:1px dashed var(--border-strong);
  border-radius:8px; background:transparent; color:var(--fg-brand);
}
.bf-wiki-plus:hover { background:var(--teal-50); border-color:var(--teal-200); }
.bf-wiki-groupgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
/* Botón "+ Nuevo tipo" al final del panel del rail — crea una pestaña VACÍA
   en el índice de Wiki (ver [data-wiki-new-tab] en app.js). Mismo lenguaje
   visual que .bf-wiki-plus (borde discontinuo, texto teal). */
.bf-wiki-newtab {
  appearance:none; cursor:pointer; display:block; width:100%; margin-top:8px;
  border:1px dashed var(--border-strong); border-radius:9px; background:transparent;
  color:var(--fg-brand); font-size:13px; font-weight:600; padding:8px 12px; text-align:center;
}
.bf-wiki-newtab:hover { background:var(--teal-50); border-color:var(--teal-200); }

/* ---- CRM: rail de filtro por Estado ----
   Misma réplica DELIBERADA que el bloque de Documentos justo arriba (comparte
   las clases .bf-notas-*, pero el LAYOUT está anclado a ids concretos) — con
   los ids propios de CRM, para que una mejora futura de un rail no afecte a
   los otros dos. */
#crmLayout { display:block; }
#crmTabs { position:relative; margin-bottom:12px; }

@media (min-width:900px) {
  #crmLayout { display:flex; align-items:flex-start; gap:18px; }
  #crmTabs {
    flex:0 0 220px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  #crmMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  #crmTabs.is-open .bf-notas-railpanel { display:block; }
}

/* ---- CLIENTES del CRM: rail de filtro por Estado ----
   Cuarta copia de la misma réplica deliberada (ver el comentario de CRM justo
   arriba). Ids `cli*` = sección «clientes» (empresas); `crm*` = «contactos». */
#cliLayout { display:block; }
#cliTabs { position:relative; margin-bottom:12px; }

@media (min-width:900px) {
  #cliLayout { display:flex; align-items:flex-start; gap:18px; }
  #cliTabs {
    flex:0 0 220px; margin-bottom:0; align-self:flex-start; position:sticky; top:0;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-xs); padding:10px;
  }
  #cliMain { flex:1; min-width:0; }
}

@media (max-width:899px) {
  #cliTabs.is-open .bf-notas-railpanel { display:block; }
}

.bf-pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.bf-h1 { font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--brand-deep); margin:0; }
.bf-sub { margin:4px 0 0; font-size:14px; color:var(--fg2); }
@media (max-width:899px) {
  .bf-page { padding:16px 14px 96px; }
  .bf-h1 { font-size:23px; }
}

/* ---- Estados de componentes (hover/active) ---- */
.bf-navbtn:hover { background:rgba(15,118,110,0.05); }
/* Offcanvas de Publicación: pestañas de solo icono (control segmentado, mismo
   aspecto que .bf-docdet-tab) y filas de botones de acción — flex-wrap: dos
   botones se reparten el ancho en 2 columnas, uno solo ocupa la fila, y en un
   ancho estrecho (móvil) pasan a columna simple. */
.bf-pubdet-tab { appearance:none; cursor:pointer; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; color:var(--fg2); padding:10px 14px; border-radius:8px; }
.bf-pub-actrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* Ítems de menú inhabilitados (p. ej. «Economía», aún sin desarrollar): sin hover. */
.bf-navbtn:disabled:hover { background:transparent; }
/* Inicio: arrastrar una tarea entre «En progreso» / «Pendientes de hoy» / «Completadas hoy».
   .bf-inicio-droptgt = destino de soltar (la clase la usa startItemDrag() como selector y
   le pinta el contorno al pasar por encima); .bf-inicio-drophint = pista que solo se ve
   durante el arrastre cuando ese estado aún no tiene grupo pintado. */
.bf-inicio-droptgt { border-radius:12px; }
/* Tarea recién completada en «Inicio» cuyo guardado aún no ha confirmado el servidor (ver
   bfHomeCompleteOptimistic): atenuada con un pulso suave, sin clics hasta confirmarse. */
.bf-inicio-saving { opacity:.6; pointer-events:none; animation:bfInicioSaving 1s ease-in-out infinite; }
@keyframes bfInicioSaving { 50% { opacity:.4; } }
@media (prefers-reduced-motion: reduce) { .bf-inicio-saving { animation:none; } }
.bf-inicio-drophint { display:none; margin-bottom:12px; padding:14px 12px; text-align:center; font-size:13px; font-weight:600; color:var(--fg-brand); background:var(--teal-50); border:2px dashed var(--border-brand); border-radius:12px; }
/* Divisor vertical de la barra inferior móvil (antes de «Economía»). */
nav[data-chrome="mobile-nav"] > .bf-navb-sep { flex:none; width:1px; margin:8px 4px; background:var(--border); }
.bf-primary { transition:background .15s, transform .12s; }
.bf-primary:hover { background:var(--teal-800); }
.bf-primary:active { transform:scale(.985); }
.bf-secondary { transition:all .15s; }
.bf-secondary:hover { background:var(--bg3); }
.bf-card-hover { transition:box-shadow .15s, border-color .15s; }
.bf-card-hover:hover { border-color:var(--border-brand); box-shadow:var(--shadow-md); }
/* Botón "Adjuntar" con un fichero arrastrado encima (ver bfWireFileDrop en app.js). */
.bf-filedrop-over { outline:2px solid var(--teal-500); outline-offset:1px; background-color:var(--teal-50) !important; }
/* Tooltip propio (sustituye al `title` nativo, que se retrasa en escritorio y no
   existe en táctil). Se posiciona por JS; el texto va por textContent (multilínea). */
.bf-tip { position:fixed; z-index:30000; pointer-events:none; max-width:260px; white-space:pre-line;
  background:var(--slate-900); color:var(--white); font-size:12px; line-height:1.35;
  padding:7px 9px; border-radius:8px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(2px); transition:opacity .12s, transform .12s; }
.bf-tip.show { opacity:1; transform:translateY(0); }
/* En móvil/táctil no hay tooltips (ver bfTipsEnabled() en app.js). */
@media (hover: none), (pointer: coarse), (max-width: 899px) { .bf-tip { display:none !important; } }
/* Desplegable de menciones "@" (buscar Notas/Reuniones desde el editor de una nota o
   la Investigación de una publicación). z-index por ENCIMA del offcanvas (9999) y de
   los diálogos (200/300) — puede abrirse dentro de cualquiera de los dos. */
.bf-mention-pop {
  position:fixed; z-index:10001; max-height:260px; overflow-y:auto;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px;
}
.bf-mention-grouplb { padding:6px 10px 3px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg3); }
.bf-mention-row {
  appearance:none; cursor:pointer; width:100%; display:flex; align-items:center; gap:8px;
  border:none; background:transparent; border-radius:8px; padding:7px 8px; text-align:left;
  font-size:13.5px; color:var(--fg1);
}
.bf-mention-row.is-active, .bf-mention-row:hover { background:var(--teal-50); }
/* Resaltado por teclado (↑/↓) en los buscadores con desplegable — bfMakeCombo
   (.bfc-opt) y los modales bfPickContact/bfPickProject/bfPickQontoClient
   (.bf-pick-row) — mismo color que .bf-mention-row.is-active, por consistencia. */
.bf-pick-row.is-active, .bf-pick-row:hover { background:var(--teal-50); }
.bfc-opt.is-active, .bfc-opt:hover { background:var(--teal-50); }
.bf-mention-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bf-mention-empty { display:flex; align-items:center; padding:9px 10px; font-size:13px; color:var(--fg3); }
/* Insignia "Habilidad" en el buscador de contexto de Kairos-agente (menciones "@"
   y "citar páginas") — mismo estilo de pill que ya usa el buscador global
   (GlobalSearch::searchWiki()/r.badge, ver app.js) para marcar/recomendar los
   artículos de Wiki marcados como Habilidad. */
.bf-mention-skillbadge { flex:none; font-size:10.5px; font-weight:700; color:var(--success); background:var(--success-bg); border-radius:6px; padding:1px 7px; text-transform:uppercase; letter-spacing:.02em; }
/* Editor por bloques de Notas/Documentos (bfNotaEditableHtml en el backend,
   treeFromEditor/wireNotaBlockDrag en app.js) — cada unidad arrastrable (párrafo,
   encabezado, lista, desplegable, destacado, tabla) se envuelve en un .bf-block con
   asa de arrastre. Antes esto era estilo inline duplicado en 4 sitios (2 en
   _bootstrap.php, 2 en app.js); consolidado aquí para que un solo cambio (p.ej.
   centrar el asa) aplique a los 4 de golpe, y para dejar hueco al botón "+" de
   insertar bloque sin volver a triplicar el markup. `align-items:center` (no
   `flex-start`): el asa queda centrada verticalmente aunque el bloque ocupe varias
   líneas (párrafo largo, lista, tabla), no pegada siempre arriba. */
.bf-block { display:flex; align-items:center; gap:6px; margin:2px 0; }
.bf-block-handles { display:flex; align-items:center; gap:0; flex:none; }
.bf-block-drag { cursor:grab; color:var(--fg3); padding:2px 3px; user-select:none; touch-action:none; font-size:14px; line-height:1.8; }
/* Botón "+" de insertar bloque (antes/después) — oculto hasta pasar el ratón por el
   bloque, o al recibir foco por teclado (:focus-visible, para que sea alcanzable sin
   ratón). Ver insertBlockAsSibling()/wireNotaBlockInsert() en app.js. */
.bf-block-plus { cursor:pointer; color:var(--fg3); opacity:0; transition:opacity .12s; padding:2px 3px; font-size:14px; line-height:1.8; }
.bf-block:hover .bf-block-plus, .bf-block-plus:focus-visible { opacity:1; }
/* Botón "borrar bloque" — mismo criterio de aparición que "+" (oculto hasta pasar el
   ratón o recibir foco por teclado), pero en rojo tenue: sutil hasta que se necesita,
   con la intención destructiva clara en cuanto se ve. Ver deleteBfBlock() en app.js.
   SVG en vez de un emoji (🗑): un emoji se pinta con las métricas de la fuente de
   emoji del sistema, que suelen desbordar bastante más grandes de lo que sugiere
   `font-size` — se veía desproporcionado frente a "+"/"⠿" y, al desbordar su propia
   caja, el clic dejaba de caer sobre el elemento real en algunos casos. El SVG fija
   el tamaño en píxeles reales, sin depender de ninguna fuente. `padding` deja el
   área de clic (22×22px con el icono de 13px) más generosa que el icono visible —
   más fácil de acertar sin que se vea grande. */
.bf-block-del { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--fg3); opacity:0; transition:opacity .12s, color .12s; padding:4.5px; }
.bf-block:hover .bf-block-del, .bf-block-del:focus-visible { opacity:1; }
.bf-block-del:hover, .bf-block-del:focus-visible { color:var(--danger); }
.bf-block-content { flex:1; min-width:0; }
/* Columnas de Notion (editor rico Y vista de solo lectura — bfNotaEditableHtml()/
   inboxBlock()). Mobile-first: en móvil se apilan verticalmente (ignorando el
   ratio); desde 900px (mismo breakpoint que el resto de la app) pasan a fila con
   el ancho proporcional a --bf-col-ratio (fijado inline por columna). */
.bf-columns, .bf-columns-view {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bf-columns > [data-bf-kind="column"],
.bf-columns-view > .bf-columns-col {
  min-width:0;
}
@media (min-width:900px) {
  .bf-columns, .bf-columns-view {
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
  }
  .bf-columns > [data-bf-kind="column"],
  .bf-columns-view > .bf-columns-col {
    flex: var(--bf-col-ratio, 1) 1 0;
  }
}
/* Tamaños de encabezado DENTRO de cualquier región editable — sin esto, un h1-h4
   editable hereda el tamaño por defecto del navegador (todos casi iguales, apenas
   distinguibles). `[contenteditable] hN` cubre tanto el editor por bloques (dentro
   de .bf-block-content) como el editor plano (Tareas/CRM/Proyectos, sin ese
   envoltorio) con una única regla.
   Escala revisada 2026-09-02 (bug real reportado: h2/h3/h4 apenas se distinguían —
   16/15/14px, solo 1px de salto — y los encabezados no llevaban NINGÚN espacio
   propio antes de sí mismos, a diferencia de Notion, que separa visualmente cada
   sección). Pasos más grandes entre niveles (h1 con peso 700 para más contraste con
   el resto, h2-h4 en 600 como antes) + `margin-top` propio por nivel (más generoso
   cuanto más alto el nivel, igual que la jerarquía visual de Notion) — el pequeño
   margen inferior mantiene el encabezado pegado a SU PROPIO contenido de debajo, no
   centrado entre ambos vecinos.
   Escala ampliada (sesión 2026-09-02, continuación): 21/17/15/13.5px dejaba el H4
   por DEBAJO del texto normal (15px) — se ve grande el salto hasta H1 pero un
   nivel 4 pasaba desapercibido, más pequeño que un párrafo cualquiera. Mismos
   valores que la rama `kind==='heading'` de inboxBlock() (app.js) — mantener
   ambos EN SYNC a mano, ver el comentario de ese bloque. */
[contenteditable] h1 { font-family:var(--font-display); font-weight:700; font-size:27px; line-height:1.3; margin:28px 0 8px; }
[contenteditable] h2 { font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.3; margin:22px 0 6px; }
[contenteditable] h3 { font-family:var(--font-display); font-weight:600; font-size:18.5px; line-height:1.35; margin:18px 0 5px; }
[contenteditable] h4 { font-family:var(--font-display); font-weight:600; font-size:16.5px; line-height:1.4; margin:14px 0 4px; }
/* Enlaces DENTRO de cualquier región editable — bfRunsToHtml() (app/_bootstrap.php,
   compartida por Tareas/CRM/Proyectos/Publicaciones) genera <a> sin ningún color/
   estilo inline, así que sin esto el navegador aplica su azul+subrayado por
   defecto (bug real reportado en el editor de una publicación Web, con cuerpo
   largo tipo artículo — muy visible ahí, pero afecta a cualquier editor que
   comparta esa función). Mismos colores que ya usa la convención de enlace de
   la app en modo lectura (inboxRun()/bfLockedCardHtml() en app.js/_bootstrap.php):
   teal para un enlace normal, teal oscuro+negrita para una mención a otra
   página de Notion. `#pubOcPost a` cubre además la variante DE SOLO LECTURA del
   mismo cuerpo de post (app.js, el mismo contenedor sin `contenteditable` que se
   muestra cuando la publicación ya no es editable) — mismo HTML, fuera del
   alcance de `[contenteditable]`. */
/* Contenido de un artículo Web en el offcanvas de Publicación (solo lectura, ver
   renderPubPost() en app.js): el contenedor fija line-height:1.6 para el texto
   corrido, pero heredado por los encabezados los separaba demasiado cuando ocupan
   varias líneas — interlineado propio más compacto (pedido explícito del usuario). */
a[data-lightbox-img] img { cursor:zoom-in; }   /* miniaturas que abren el lightbox (listener delegado en app.js) */
.bf-pub-article h1, .bf-pub-article h2, .bf-pub-article h3, .bf-pub-article h4, .bf-pub-article h5, .bf-pub-article h6 { line-height:1.3em; }
[contenteditable] a, #pubOcPost a { color:var(--fg-brand); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
[contenteditable] a[data-notion-mention], #pubOcPost a[data-notion-mention] { color:var(--brand-deep); font-weight:600; }
/* Código en línea: mismos valores que inboxRun() en modo lectura (app.js), para que
   `<code>` se vea igual al editar que al leer. `.bf-code-block code` (bloque de
   código completo) anula esto más abajo — no debe heredar fondo/padding aquí. */
code { background:var(--bg3); border-radius:4px; padding:1px 4px; font-family:var(--font-mono); font-size:.9em; }
/* Bloque de código completo — mismo patrón que el estilo inline PUB_CODE_BOX ya
   usado en el editor de Publicaciones (app.js), convertido a clase real y
   compartida por lectura (inboxBlock) y edición (bfNotaEditorUnitsHtml/
   bfItemsToEditorHtml, ambos en app/_bootstrap.php). El <code> interior anula la
   regla `code {}` de arriba (no debe llevar su propio fondo/padding, el <pre> ya
   lo aporta). */
.bf-code-block {
  width:100%; box-sizing:border-box; margin:4px 0;
  font-family:var(--font-mono); font-size:13px; line-height:1.55;
  color:var(--fg1); background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 13px; white-space:pre-wrap; word-break:break-word;
  position:relative;
}
.bf-code-block code { background:none; padding:0; border-radius:0; font-size:inherit; }
.bf-code-lang-select {
  position:absolute; top:6px; right:8px; font-size:10.5px;
  border:1px solid var(--border-strong); border-radius:5px; padding:1px 4px;
  background:var(--white); color:var(--fg3);
}
/* Popover de "insertar bloque" — mismo patrón de posicionamiento/z-index que
   .bf-mention-pop (ver arriba), pero más angosto (es una lista de opciones, no un
   buscador). */
.bf-blockins-pop {
  position:fixed; z-index:10001; width:186px;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px;
}
.bf-blockins-pos { display:flex; gap:4px; padding:2px 2px 6px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.bf-blockins-posbtn {
  appearance:none; cursor:pointer; flex:1; border:1px solid var(--border-strong); background:var(--white);
  color:var(--fg2); font-size:11.5px; font-weight:600; padding:5px 4px; border-radius:7px;
}
.bf-blockins-posbtn.is-active { background:var(--teal-50); border-color:var(--teal-200); color:var(--fg-brand); }
/* Chevron del encabezado desplegable (bfNotaEditableHtml, editor de Notas/
   Documentos): rota al abrir el <details> nativo — sustituye al marcador que
   `list-style:none` le quita al <summary> sin dejar ningún indicador visual. */
details[open] > summary[data-bf-role="summary"] > span[data-bf-ui] { transform: rotate(90deg); }
/* Popover de emoji del destacado (sustituye al prompt() de texto) — mismo patrón
   fixed/z-index que .bf-mention-pop/.bf-blockins-pop. */
.bf-emoji-pop {
  position:fixed; z-index:10001; width:220px;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px;
}
.bf-emoji-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; margin-bottom:6px; }
.bf-emoji-cell {
  appearance:none; cursor:pointer; border:none; background:transparent; border-radius:7px;
  font-size:18px; line-height:1; padding:6px 0; text-align:center;
}
.bf-emoji-cell:hover { background:var(--bg3); }
.bf-emoji-custom { border-top:1px solid var(--border); padding-top:6px; }
.bf-emoji-custom input {
  width:100%; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:8px;
  padding:6px 8px; font-size:13.5px; outline:none;
}
/* "Quitar emoji" — solo tiene sentido cuando el popover se abrió para el icono de
   portada de una nota (Jardín digital); en el destacado del editor simplemente
   vacía el icono, sin efecto dañino. */
.bf-emoji-clear {
  appearance:none; cursor:pointer; width:100%; margin-top:6px; border:none; background:transparent;
  color:var(--fg3); font-size:12.5px; font-weight:600; padding:6px 4px; border-radius:7px; text-align:center;
}
.bf-emoji-clear:hover { background:var(--bg3); color:var(--fg1); }
#notaDetailIcon:hover { background:var(--bg3) !important; }
/* Popover de color de texto (botón "A" de la barra de formato, Notas/Documentos)
   — 9 swatches de texto + 9 de resaltado + "Quitar color". Mismo patrón fixed/
   z-index que .bf-emoji-pop/.bf-link-pop. Ver ensureColorPop() en app.js. */
.bf-color-pop {
  position:fixed; z-index:10001; width:216px;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px;
}
.bf-color-pop-row { display:flex; align-items:center; gap:3px; margin-bottom:6px; }
.bf-color-pop-label { flex:none; width:56px; font-size:11px; color:var(--fg3); }
.bf-color-pop-swatch {
  appearance:none; cursor:pointer; flex:1; height:24px; border:1px solid var(--border);
  border-radius:6px; font-size:12px; font-weight:700; padding:0;
}
.bf-color-pop-swatch:hover { box-shadow:0 0 0 2px var(--teal-200); }
.bf-color-pop-clear {
  appearance:none; cursor:pointer; width:100%; border:1px solid var(--border); background:transparent;
  border-radius:8px; padding:6px 8px; font-size:12.5px; color:var(--fg2); margin-top:2px;
}
.bf-color-pop-clear:hover { background:var(--bg3); }
.bf-blockins-row {
  appearance:none; cursor:pointer; width:100%; display:flex; align-items:center; gap:8px;
  border:none; background:transparent; border-radius:8px; padding:7px 8px; text-align:left;
  font-size:13.5px; color:var(--fg1);
}
.bf-blockins-row:hover { background:var(--teal-50); }
/* Popover de enlace (crear/editar la URL — quitar es el icono de papelera después del
   enlace, ver bfInlineIconBtnHtml en app.js/_bootstrap.php). Mismo patrón fixed/z-index
   que .bf-mention-pop/.bf-emoji-pop. Ver ensureLinkPop() en app.js. */
.bf-link-pop {
  position:fixed; z-index:10001; width:280px;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px; display:flex; flex-direction:column; gap:8px;
}
.bf-link-pop-input {
  width:100%; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:8px;
  padding:7px 9px; font-size:13.5px; outline:none;
}
.bf-link-pop-input:focus { border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
.bf-link-pop-actions { display:flex; gap:6px; justify-content:flex-end; }
.bf-link-pop-actions button {
  appearance:none; cursor:pointer; border:none; border-radius:8px; font-size:12.5px; font-weight:600; padding:7px 12px;
}
.bf-link-pop-actions [data-act="save"] { background:var(--teal-700); color:#fff; }
/* Iconos de editar/quitar enlace y quitar mención (después del propio enlace, dentro
   de [data-bf-link-unit]) — más oscuros al pasar el ratón/foco para dejar clara la
   intención; el de quitar (papelera), además, en rojo. */
[data-link-edit]:hover, [data-link-edit]:focus-visible,
[data-link-del]:hover, [data-link-del]:focus-visible,
[data-mention-del]:hover, [data-mention-del]:focus-visible { background:var(--bg3); }
[data-link-del]:hover, [data-link-del]:focus-visible,
[data-mention-del]:hover, [data-mention-del]:focus-visible { color:var(--danger); }
/* Círculo de usuario del header + su desplegable (nombre, cliente, cambiar de
   cliente, salir). Duplicado en escritorio/móvil con ids propios (D/M), pero
   estas clases son compartidas — ver wireUserMenu() en app.js. Icono simple de
   usuario (antes iniciales) — ver $IC['user'] en index.php. */
.bf-usermenu-trigger {
  appearance:none; cursor:pointer; border:none; width:34px; height:34px; border-radius:999px;
  background:var(--teal-600); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .15s; flex:none;
}
.bf-usermenu-trigger:hover { background:var(--teal-700); }
.bf-usermenu-trigger-sm { width:30px; height:30px; }
/* Saludo "Hola, {nombre}" — solo escritorio (hay sitio en el header; en móvil el
   círculo se queda solo con el icono). Recorta con ellipsis ante nombres largos
   en ventanas estrechas, en vez de forzar overflow del header. */
.bf-usermenu-greeting {
  font-size:13px; font-weight:600; color:var(--fg2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:160px;
}
.bf-usermenu-panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:240px; max-width:300px;
  background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:14px; display:flex; flex-direction:column;
}
/* [hidden] y la clase (display:flex) empatan en especificidad; sin esto la regla de
   autor .bf-usermenu-panel gana sobre la de user-agent [hidden] y el panel queda
   siempre visible. Con el atributo selector, [hidden] pesa más y sí lo oculta. */
.bf-usermenu-panel[hidden] { display:none; }
.bf-usermenu-name { font-size:14.5px; font-weight:700; color:var(--fg1); }
.bf-usermenu-client { margin-top:2px; font-size:12.5px; color:var(--fg3); }
.bf-usermenu-divider { height:1px; background:var(--border); margin:10px 0; }
.bf-usermenu-hint { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg3); }
/* padding-right (en vez de solo overflow-y:auto): con muchos clientes, la barra
   de scroll quedaba pegada al borde de cada botón — separación pedida
   explícitamente por el usuario, con captura (sesión 2026-09-17). */
.bf-usermenu-switch { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; padding-right:10px; }
.bf-usermenu-switchbtn {
  appearance:none; cursor:pointer; text-align:left; width:100%; border:1px solid var(--border-strong);
  background:var(--white); color:var(--fg1); font-size:13px; font-weight:600; padding:8px 10px;
  border-radius:9px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.bf-usermenu-switchbtn:hover { background:var(--bg3); }
.bf-usermenu-switchbtn:disabled { cursor:default; }
.bf-usermenu-role { color:var(--fg3); font-size:11px; font-weight:500; }
.bf-usermenu-switchmsg { margin:8px 0 0; font-size:12.5px; }
.bf-usermenu-item {
  appearance:none; cursor:pointer; border:none; background:transparent; text-align:left; width:100%;
  color:var(--fg1); font-size:13.5px; font-weight:600; padding:9px 10px; border-radius:9px;
}
.bf-usermenu-item:hover { background:var(--bg3); }
a.bf-usermenu-item, .bf-usermenu-item[data-go] { display:flex; align-items:center; gap:9px; box-sizing:border-box; text-decoration:none; }
/* Offcanvas lateral (detalle de una tarea) */
.bf-oc-backdrop { position:fixed; inset:0; background:var(--backdrop); z-index:9998; opacity:0; transition:opacity .2s ease; }
.bf-oc-backdrop.show { opacity:1; }
.bf-oc { position:fixed; top:0; right:0; height:100%; width:min(440px,94vw); background:var(--white); z-index:9999;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1); }
.bf-oc.show { transform:translateX(0); }
.bf-oc-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:18px 20px; border-bottom:1px solid var(--border); }
.bf-oc-head h3 { margin:0; font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--brand-deep); }
.bf-oc-x { appearance:none; cursor:pointer; border:none; background:transparent; color:var(--fg3); font-size:20px; line-height:1; padding:4px 7px; border-radius:8px; }
.bf-oc-x:hover { background:var(--bg3); color:var(--fg1); }
.bf-oc-body { flex:1; overflow-y:auto; padding:20px; }
.bf-oc-label { display:block; font-size:12px; font-weight:600; color:var(--fg3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.bf-oc-input { width:100%; box-sizing:border-box; font-size:15px; color:var(--fg1); background:var(--white); border:1px solid var(--border-strong); border-radius:10px; padding:10px 12px; outline:none; transition:border-color .15s, box-shadow .15s; }
.bf-oc-input:focus { border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
/* Foco verde WorkOS en TODOS los campos de la app (sustituye el azul por defecto del
   navegador). Muchos inputs fijan el borde con estilo inline (shorthand `border`), que
   gana al selector de clase → `!important` en el color del borde. Casillas/radios fuera. */
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus,
.bfc-trigger:focus-visible,
.bfc-search:focus {
  outline:none !important;
  border-color:var(--teal-500) !important;
  box-shadow:0 0 0 3px var(--teal-100);
}
.bf-oc-meta { margin-top:10px; display:flex; flex-direction:column; }
.bf-oc-field { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--slate-100); font-size:14px; color:var(--fg1); }
.bf-oc-field:first-child { border-top:1px solid var(--slate-100); }
.bf-oc-flabel { flex:none; width:96px; font-size:12.5px; color:var(--fg3); padding-top:1px; }
/* #reunEvTaskWrap (evento de Agenda → "Tarea vinculada") es un contenedor HERMANO
   de .bf-oc-meta, poblado de forma asíncrona tras el render inicial — su único
   .bf-oc-field hijo vuelve a calificar como :first-child y arrastraría su propio
   border-top, duplicando la línea con el border-bottom del último campo de
   .bf-oc-meta justo encima. Se anula aquí en vez de en línea, mismo criterio que
   .bf-oc-task de arriba. */
#reunEvTaskWrap .bf-oc-field:first-child { border-top:none; }
/* Ancho ESTÁNDAR de los offcanvas "grandes" (bf-oc-wide): 620px en vez de los 440px
   por defecto — nació con el de TAREA (bf-oc-task, que además reorganiza sus campos
   en 2 columnas más abajo) y ahora es el ancho de referencia para cualquier offcanvas
   con contenido sustancioso (reunión, evento de agenda, publicación…). `bf-oc-task`
   sigue llevando también esta clase compartida (mismo ancho, sin duplicar el valor).
   Solo desktop; en móvil todos los offcanvas se quedan en min(…,94vw) como siempre. */
@media (min-width:900px) {
  .bf-oc-task, .bf-oc-wide { width:min(620px,94vw); }
  /* Offcanvas de TAREA: además del ancho de arriba, campos en 2 columnas —
     tiene más campos que el resto de offcanvas (estado/tipo/fecha/proyecto/responsable/
     seguimiento) y en una sola columna angosta quedaba muy apretado. La etiqueta pasa a
     ir ENCIMA del campo (en vez de al lado, con ancho fijo) para dejarle más sitio al
     propio control. */
  .bf-oc-task .bf-oc-meta { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:2px; }
  .bf-oc-task .bf-oc-field { flex-direction:column; align-items:stretch; gap:4px; border-bottom:none; padding:9px 0; }
  .bf-oc-task .bf-oc-field:first-child { border-top:none; }
  .bf-oc-task .bf-oc-flabel { width:auto; padding-top:0; }
}
.bf-oc-foot { padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:10px; }
/* Offcanvas de TAREA: 4 botones posibles (Descartar/Borrar/Completar/Guardar, algunos
   condicionales vía display:none) — en móvil se apilan a ancho completo (como antes);
   en escritorio pasan a una rejilla de 2 columnas para ocupar menos alto (los botones
   ocultos simplemente no cuentan en el flujo de la rejilla). */
.bf-oc-foot-task { flex-direction:column; align-items:stretch; gap:10px; }
@media (min-width:900px) {
  .bf-oc-foot-task { display:grid; grid-template-columns:1fr 1fr; }
}
.bf-oc-save { flex:1; appearance:none; cursor:pointer; border:none; background:var(--teal-600); color:#fff; font-size:14px; font-weight:600; border-radius:10px; padding:11px 16px; transition:background .15s; }
.bf-oc-save:hover { background:var(--teal-700); }
.bf-oc-save:disabled { opacity:.55; cursor:default; }

/* ==========================================================================
   Kairos — panel deslizante de escritorio (≥900px), reutilizando TAL CUAL el
   nodo &lt;section data-section="grabar"&gt; (mismos ids, mismo motor de app.js —
   nunca se mueve/duplica). SIN backdrop, a propósito (decisión de producto:
   asistente "copiloto", se sigue viendo/usando la sección de fondo). La
   visibilidad (display) la gestiona JS (openKairosPanel/closeKairosPanel en
   app.js + el guard en showSection()) — aquí solo el posicionamiento/anim.
   En móvil (&lt;900px) esta regla no aplica: la sección sigue en flujo normal,
   pantalla completa, exactamente como siempre. ========================== */
#kairosCloseBtn { display:none; }
@media (min-width:900px) {
  #kairosCloseBtn { display:flex; }
  #bfApp.bf-kairos-panel [data-section="grabar"] {
    position:fixed; top:0; right:0; height:100%; width:min(480px,94vw);
    z-index:9999; box-shadow:var(--shadow-lg); background:var(--white);
    transform:translateX(100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
  }
  #bfApp.bf-kairos-panel.bf-kairos-show [data-section="grabar"] { transform:translateX(0); }
  /* El wrapper de las pantallas (#kairosScreens) pasa de "tarjeta centrada a
     560px" a "llenar el panel, con scroll propio". Selector por ID a propósito
     (antes era `> div:nth-child(2)` — posicional; añadir un hermano ANTES de este
     wrapper lo desplazó a 3er hijo y rompió la regla en silencio, dejando el
     composer/mic fuera del área visible del panel). */
  #bfApp.bf-kairos-panel [data-section="grabar"] #kairosScreens {
    max-width:none !important; margin:0 !important; padding:20px !important;
    min-height:0 !important; flex:1 1 auto; overflow-y:auto;
  }
}

/* ==========================================================================
   Kairos — modo PÁGINA (chat a pantalla completa, solo escritorio ≥900px).
   Mismo nodo que el panel (ver openKairosPage() en app.js): aquí solo cambia
   cómo se pinta. Todo acotado a #bfApp.bf-kairos-page para no tocar el panel
   ni el móvil. El botón «ampliar/reducir» (#kairosExpandBtn) lo enciende JS
   (data-off) y el ancho (≥900px) esta hoja. ========================== */
#kairosExpandBtn { display:none; }
/* Botones redondos del composer de Kairos (adjuntar, citar páginas, cambiar voz↔texto).
   El botón de cambio lleva los DOS iconos y `data-entry` (método ACTUAL) elige cuál se ve:
   en texto se ofrece el micrófono, en voz el editor de texto. Fondo/borde con !important
   porque los botones llevan su estilo base en línea. */
.bf-kairos-entry-btn[data-entry="texto"] .ico-text { display:none; }
.bf-kairos-entry-btn[data-entry="voz"] .ico-mic { display:none; }
.bf-kairos-tipbtn:not(:disabled):hover,
.bf-kairos-entry-btn:not(:disabled):hover { background:var(--teal-50) !important; border-color:var(--border-brand) !important; color:var(--fg-brand) !important; }
.bf-agente-sug { appearance:none; cursor:pointer; border:1px solid var(--border-strong); background:var(--white); color:var(--fg2); font-size:13.5px; font-weight:500; padding:9px 16px; border-radius:999px; transition:background .15s,border-color .15s,color .15s; }
.bf-agente-sug:hover { background:var(--teal-50); border-color:var(--border-brand); color:var(--fg-brand); }
@media (min-width:900px) {
  #kairosExpandBtn { display:flex; }
  #kairosExpandBtn[data-off="1"] { display:none; }
  #kairosExpandBtn:hover, #kairosCloseBtn:hover { background:var(--bg3) !important; color:var(--fg1) !important; }

  /* La sección ocupa el área central (main es position:relative) con scroll propio
     en el hilo y el cuadro de texto fijo abajo. */
  #bfApp.bf-kairos-page [data-section="grabar"] { position:absolute; inset:0; min-height:0 !important; background:var(--white); }
  #bfApp.bf-kairos-page #kairosCloseBtn,
  #bfApp.bf-kairos-page #deskRec { display:none !important; }
  #bfApp.bf-kairos-page [data-section="grabar"] #kairosScreens {
    max-width:780px !important; margin:0 auto !important; padding:8px 24px 28px !important;
    min-height:0 !important; flex:1 1 auto; overflow-x:hidden; overflow-y:auto;   /* auto: la pantalla «Revisar correo» es más alta que el chat */
  }

  /* Cuadro de texto como tarjeta: textarea sin borde, enviar redondo (solo flecha)
     abajo a la derecha y adjuntar/«@» abajo a la izquierda, dentro de la tarjeta. */
  #bfApp.bf-kairos-page #agenteComposerWrap {
    position:relative; background:var(--white); margin-top:8px; gap:8px !important;
    border:1px solid var(--border-strong) !important; border-radius:22px;
    box-shadow:0 4px 20px rgba(15,23,42,.07); padding:14px 16px 58px !important;
  }
  #bfApp.bf-kairos-page #agenteInput { border:none !important; border-radius:0 !important; padding:4px 2px !important; font-size:16px !important; min-height:60px; box-shadow:none; }
  #bfApp.bf-kairos-page #agenteSendBtn {
    position:absolute; right:14px; bottom:12px; width:38px !important; height:38px; padding:0 !important;
    border-radius:999px !important; gap:0 !important;
  }
  #bfApp.bf-kairos-page #agenteSendBtn .bf-btn-label { display:none; }
  #bfApp.bf-kairos-page #agenteComposerWrap > div:last-child {
    position:absolute !important; left:12px; right:14px; bottom:10px; justify-content:flex-start !important; gap:8px !important;
    pointer-events:none;   /* la fila cruza toda la tarjeta: no debe tapar el botón de enviar */
  }
  #bfApp.bf-kairos-page #agenteComposerWrap > div:last-child > * { pointer-events:auto; }
  #bfApp.bf-kairos-page #agenteAttachBtn,
  #bfApp.bf-kairos-page #agenteCiteBtn,
  #bfApp.bf-kairos-page #agenteEntryBtn { width:36px !important; height:36px !important; }
  /* Cambio voz↔texto: abajo a la derecha. En texto queda a la izquierda del botón de
     enviar (38px + hueco); en voz no hay botón de enviar y va pegado al borde. */
  #bfApp.bf-kairos-page #agenteEntryBtn { margin-left:auto; }
  #bfApp.bf-kairos-page #agenteEntryBtn[data-entry="texto"] { margin-right:46px; }
  #bfApp.bf-kairos-page #agenteCitePanel { left:0 !important; transform:none !important; }

  /* Estado vacío: saludo + tarjeta + accesos rápidos centrados en vertical (las
     dos auto-margins reparten el hueco entre la barra de sesiones y el final). */
  #bfApp.bf-kairos-page [data-screen="agente"].bf-agente-empty #agenteThread { display:none !important; }
  #bfApp.bf-kairos-page [data-screen="agente"].bf-agente-empty #agentePageHero { display:flex !important; order:1; margin-top:auto; margin-bottom:26px; }
  #bfApp.bf-kairos-page [data-screen="agente"].bf-agente-empty #agenteComposerWrap { order:2; }
  #bfApp.bf-kairos-page [data-screen="agente"].bf-agente-empty #agentePageSuggestions { display:flex !important; order:3; margin-top:14px; margin-bottom:auto; }

  /* Cabecera del modo página: con la pantalla del chat visible, en la parte izquierda va
     el selector de historial (lo aloja #kairosHeaderSessionsHost, ver setKairosPageClass()
     en app.js) en lugar de la marca «Kairos / Asistente de WorkOS». En cualquier otra
     pantalla (p. ej. revisar un correo) la marca sigue ahí. */
  #bfApp.bf-kairos-page .bf-kairos-head { min-height:72px; box-sizing:border-box; }
  #bfApp.bf-kairos-page [data-section="grabar"][data-kscreen="agente"] .bf-kairos-brand { display:none !important; }   /* !important: la marca lleva display en línea */
  #bfApp.bf-kairos-page [data-section="grabar"][data-kscreen="agente"] #kairosHeaderSessionsHost { display:flex !important; align-items:center; }   /* !important: el host lleva display:none en línea */
  #bfApp.bf-kairos-page #kairosHeaderSessionsHost #agenteSessionsBar {
    flex:1 1 auto !important; width:100%; max-width:460px; padding:0 !important; margin:0 !important; border-bottom:none !important;
  }

}

/* Animación de la pantalla "processing" de Kairos — isotipo WorkOS con anillo
   giratorio + paneles que se "encienden" en secuencia + brillo cruzado, más
   una línea de texto (#procTitle en index.php) que va cambiando debajo — ver
   startProcSteps() en app.js. Geometría/timings calcados 1:1 del diseño
   «WorkOS Loader» (variante markSplashWhite, tamaño 84 + anillo). */
@keyframes bfProcPanel { 0%, 100% { opacity:.38; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes bfProcBreathe { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@keyframes bfProcShimmer { 0% { transform:translate(-70%, -70%) rotate(18deg); } 100% { transform:translate(70%, 70%) rotate(18deg); } }
@keyframes bfProcSpin { to { transform:rotate(360deg); } }
.bf-proc-mark-wrap { position:relative; width:159.6px; height:159.6px; display:inline-flex; align-items:center; justify-content:center; }
.bf-proc-ring { position:absolute; inset:0; animation:bfProcSpin 1.6s linear infinite; }
.bf-proc-mark { width:84px; height:84px; position:relative; display:inline-flex; animation:bfProcBreathe 1.7s ease-in-out infinite; overflow:visible; }
.bf-proc-mark-clip { position:absolute; inset:0; border-radius:19.3px; overflow:hidden; }
.bf-proc-panel { transform-box:fill-box; transform-origin:center; animation:bfProcPanel 1.7s ease-in-out infinite; }
.bf-proc-shimmer {
  position:absolute; top:-50%; left:-50%; width:60%; height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%);
  animation:bfProcShimmer 1.7s ease-in-out infinite; pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  .bf-proc-mark, .bf-proc-mark *, .bf-proc-ring, .bf-proc-shimmer { animation-duration:4.5s !important; }
}

/* Pantalla completa "Cambiando de cuenta…" (conmutador de cliente del menú de
   usuario, ver el listener de [data-switch-id] en app.js). Mismo isotipo
   animado de arriba, calcado del "Comprobando acceso" del Portal de cliente. */
.bf-switch-overlay {
  position:fixed; inset:0; z-index:20000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center;
  background:var(--bg); color:var(--fg2); font-size:14px; font-weight:500;
  opacity:0; transition:opacity .18s ease;
}
.bf-switch-overlay.is-on { opacity:1; }

/* Indicador "pensando" de Kairos-agente (modo texto, ver agenteShowThinking()
   en app.js) — burbuja de asistente con el MISMO isotipo animado de arriba,
   a escala reducida y sin el anillo (demasiado grande para el hilo de chat).
   Los rects (.bf-proc-panel) y el brillo (.bf-proc-shimmer) se reutilizan tal
   cual — su animación no depende del tamaño del contenedor, solo escala. */
.bf-agente-thinking-mark { width:24px; height:24px; position:relative; display:inline-flex; flex:none; animation:bfProcBreathe 1.7s ease-in-out infinite; overflow:visible; }
.bf-agente-thinking-clip { position:absolute; inset:0; border-radius:5.5px; overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
  .bf-agente-thinking-mark, .bf-agente-thinking-mark * { animation-duration:4.5s !important; }
}
/* Frase de espera (#agenteThinkingText, rotada cada 4s por agenteNextWaitMsg())
   — respiración continua de opacidad, NUNCA a 0 (min .5, sigue legible), para
   que se sienta "viva" mientras Kairos trabaja. Independiente del temporizador
   de rotación de texto — sigue corriendo aunque el texto no cambie todavía. */
@keyframes bfAgenteWaitFade { 0%, 100% { opacity:1; } 50% { opacity:.5; } }
.bf-agente-wait-text { animation:bfAgenteWaitFade 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bf-agente-wait-text { animation-duration:4.5s; }
}

/* Tarjeta de resolución (renderJob()/#jobStatus) — mismo `inflight`/`lastResult`
   de siempre, solo restyling. */
.bf-proc-card { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; line-height:1.4; }
.bf-proc-card-ok { background:var(--success-bg); color:var(--success); }
.bf-proc-card-err { background:var(--danger-bg); color:var(--danger); }
.bf-proc-card-pending { background:var(--bg3); color:var(--fg2); }

.bf-mic { transition:transform .15s, background .15s; }
.bf-mic:hover { background:var(--teal-800); }
.bf-mic:active { transform:scale(.95); }
.bf-cat { transition:all .18s cubic-bezier(.4,0,.2,1); }
.bf-cat:hover { border-color:var(--border-brand); background:var(--teal-50); }
.bf-link:hover { text-decoration:underline; text-underline-offset:3px; }
.bf-play:hover { background:var(--teal-800); }
.bf-iconbtn { transition:background .15s, color .15s; }
.bf-iconbtn:hover { background:var(--bg3); }
.bf-topbtn:hover { color:var(--fg-brand); }
/* Botón «completar tarea» (lista/kanban): outline que se rellena en verde al pasar. */
.tarea-complete { transition:background .15s, border-color .15s, color .15s, transform .1s; }
.tarea-complete:hover { background:var(--success-solid); border-color:var(--success); color:#fff; }
.tarea-complete:active { transform:scale(.92); }
.tarea-complete:disabled { cursor:default; }

/* Botones «Editar»/«Eliminar» de un registro de Seguimiento de tiempo (pestaña
   «Tiempos» del offcanvas): se deshabilitan JUNTOS desde el primer clic en
   «Eliminar» (antes incluso de confirmar) — atenuados mientras tanto, para que
   «deshabilitado» se lea como «trabajando», no como roto. */
.tarea-time-edit:disabled, .tarea-time-delete:disabled { opacity:.45; cursor:default; }

/* Constructor de voz IA paso a paso (modal abierto desde el banner de personalización). */
.aiw-chip {
  appearance:none; cursor:pointer; border:1px solid var(--border-strong); background:var(--white);
  color:var(--fg2); font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px;
  transition:background .15s, border-color .15s, color .15s;
}
.aiw-chip:hover { border-color:var(--border-brand); }
.aiw-chip.on { background:var(--teal-700); border-color:var(--teal-700); color:#fff; }
.aiw-dot {
  appearance:none; cursor:pointer; width:36px; height:36px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--white); color:var(--fg3); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.aiw-dot:hover { border-color:var(--border-brand); }
.aiw-dot.on { background:var(--teal-700); border-color:var(--teal-700); color:#fff; }
.aiw-step { animation:wos-pop .22s ease; }
/* Resaltado sutil («efecto Gmail») de un mensaje del Inbox recién insertado por un
   refresco silencioso del latido (ver pollInboxHeartbeat/loadInbox(quiet) en app.js). */
.bf-inbox-item-new { animation:wos-pop .5s ease; }
.aiw-post-x { appearance:none; cursor:pointer; border:none; background:transparent; color:var(--fg3); font-size:15px; line-height:1; padding:4px 6px; border-radius:8px; }
.aiw-post-x:hover { background:var(--bg3); color:var(--fg1); }
.aiw-add { appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--border-strong); background:var(--white); color:var(--fg-brand); font-size:13px; font-weight:600; padding:8px 13px; border-radius:10px; }
.aiw-add:hover { background:var(--teal-50); }

/* Kanban (Tareas y Proyectos) en móvil: el arrastre táctil (startItemDrag, pointer
   events con pulsación mantenida) SÍ funciona aquí — a diferencia de otras vistas
   donde el drag se desactiva en móvil. Sin esto, un toque prolongado antes de que
   empiece a moverse el dedo dispara la selección de texto nativa (o el menú de
   copiar/pegar de iOS) en vez de iniciar el arrastre. Solo estas dos pantallas —
   no afecta a Lista/Calendario/Inbox, que no tienen este problema. */
@media (max-width:899px) {
  #tareasKanban, #proyectosKanban {
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
}

/* Cabecera de detalle de Nota/Wiki/Documento (Editar/IA/Abrir en Notion/
   Compartir/Descargar PDF/Añadir información...): SIEMPRE solo-icono, desde
   el primer render (sin depender del viewport ni de una medición en JS del
   ancho real de la fila — un primer intento medía y colapsaba dinámicamente,
   descartado por el parpadeo: se veía el texto completo un instante antes de
   colapsar). El texto de cada botón se conserva como `title` (tooltip
   traducido, ver los `t()`/`bfT()` de cada botón en index.php) — información
   accesible aunque no esté visible. Bug real que motivó esto (sesión
   2026-09-16): "Editar" caía a una 2ª línea porque `.bf-dethead-actions` vive
   dentro de `.bf-page`, cuyo ancho real (sidebar + padding) puede ser menor
   que el viewport. !important porque padding/gap van inline en cada botón. */
.bf-dethead-actions .bf-btn-label { display:none; }
.bf-dethead-actions #docSharePortal, .bf-dethead-actions #docIaBtn, .bf-dethead-actions #docDownloadPdf,
.bf-dethead-actions #docEdit, .bf-dethead-actions #docOpen,
.bf-dethead-actions #notaAppend, .bf-dethead-actions #notaIaBtn, .bf-dethead-actions #notaEdit, .bf-dethead-actions #notaMove, .bf-dethead-actions #notaOpen,
.bf-dethead-actions #wikiIaBtn, .bf-dethead-actions #wikiEdit, .bf-dethead-actions #wikiOpen,
.bf-dethead-actions #reunDetTitleAi, .bf-dethead-actions #reunDetSendSummaryBtn, .bf-dethead-actions #reunDetOpen {
  padding:9px !important; gap:0 !important;
}

/* ==========================================================================
   "Tareas automatizadas" (plugin a medida): panel de filtro por estado en
   DOS grupos (Obras RK / Proyectos Karst), sin precedente reutilizable en el
   resto de la app (el único filtro existente, .bf-notas-cats, es de pestañas
   de selección ÚNICA — aquí hace falta multi-selección por checkbox en dos
   grupos independientes). En móvil (<900px) se apila ARRIBA de la lista, sin
   ninguna regla extra — el orden natural del HTML (aside antes que .bf-ta-main)
   ya coloca el filtro primero. En escritorio (≥900px) pasa a fila, con el
   filtro en una columna lateral fija a la izquierda. ========================== */
.bf-ta-layout { display:flex; flex-direction:column; gap:16px; }
.bf-ta-filters { display:flex; flex-direction:column; gap:16px; }
.bf-ta-filtergroup { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:14px; }
/* Color propio por grupo (pedido explícito: diferenciar el panel de filtros
   del listado de tareas, que es blanco liso) — teal para Obras RK (color de
   marca, mismo tono que el resto de paneles destacados de la app) y el azul
   de los callouts (--callout-blue, ya usado en notas/documentos) para
   Proyectos Karst, para que además se distingan ENTRE sí de un vistazo. */
#taFilterGroupObra { background:var(--teal-50); border-color:var(--border-brand); }
#taFilterGroupKarst { background:var(--callout-blue); border-color:var(--callout-blue-border); }
.bf-ta-filtertitle { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg3); }
.bf-ta-filterlist { display:flex; flex-direction:column; gap:6px; }
.bf-ta-filterrow { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg2); cursor:pointer; user-select:none; }
.bf-ta-filterrow input[type="checkbox"] { flex:none; width:16px; height:16px; accent-color:var(--teal-600); cursor:pointer; }
.bf-ta-main { min-width:0; }
@media (min-width:900px) {
  .bf-ta-layout { flex-direction:row; align-items:flex-start; }
  /* 220px → 260px: las etiquetas de estado de Proyectos Karst (más largas que
     las de Obras RK) se envolvían pegadas al borde del checkbox. */
  .bf-ta-filters { flex:none; width:260px; position:sticky; top:0; }
  .bf-ta-main { flex:1; }
}

/* Modal "Nuevo evento" (Agenda → openManualEventDialog(), app.js): Fecha+Hora
   iban SIEMPRE en fila (flex, Hora fija a 120px) sin ningún breakpoint — en
   móvil el trigger de bfEnhanceTime() (icono+etiqueta+botón vaciar+chevron,
   ~110px de "esqueleto" fijo) apenas cabía en esos 120px y el reloj/la "✕"
   quedaban cortados/solapados. Mismo criterio mobile-first que el resto de la
   app: apilado por defecto (Hora a ancho completo), fila solo en escritorio. */
.bf-me-datetime { display:flex; flex-direction:column; gap:10px; }
.bf-me-datetime .bf-me-time { width:auto; }
@media (min-width:900px) {
  .bf-me-datetime { flex-direction:row; }
  .bf-me-datetime .bf-me-time { flex:none; width:120px; }
}

/* Fila "Hora inicio / Hora final" del modal "Nuevo evento" (Agenda,
   openManualEventDialog(), sesión 2026-09-17) — 2 columnas iguales en
   escritorio, apiladas en móvil (mismo criterio mobile-first que
   .bf-me-datetime de arriba), pero SIN su ancho fijo de 120px: aquí ambas
   columnas deben repartirse el ancho por igual, no una fecha flexible +
   una hora angosta. */
.bf-me-timerow { display:flex; flex-direction:column; gap:10px; }
.bf-me-timerow > div { min-width:0; }
@media (min-width:900px) {
  .bf-me-timerow { flex-direction:row; }
  .bf-me-timerow > div { flex:1; }
}

/* Pantalla de corrección de eventos de Agenda tras dictado por voz (Kairos,
   sección "Grabar", #calDate/#calTime en app/index.php): mismo problema y
   mismo criterio que .bf-me-datetime de arriba — Fecha+Hora iban en grid 1fr
   1fr sin breakpoint, con el trigger de bfEnhanceDate/bfEnhanceTime apretado
   en móvil. Apilado por defecto, grid de 2 columnas solo en escritorio. */
.bf-cal-datetime { display:flex; flex-direction:column; gap:12px; }
@media (min-width:900px) {
  .bf-cal-datetime { display:grid; grid-template-columns:1fr 1fr; }
}

/* Agenda → Reuniones: fila de buscador + filtro por proyecto. Mismo patrón
   "apilado en móvil, grid en escritorio" que .bf-cal-datetime de arriba. El
   modificador --single (por defecto, se quita en JS solo cuando el filtro de
   proyecto está disponible) evita que la rejilla de 2 columnas deje un hueco
   vacío cuando el <select> no se muestra (Eventos/Calendario, o clientes sin
   REUNIONES_PROP_PROYECTO configurada). */
.bf-reun-search-row, .bf-pub-search-row { display:flex; flex-direction:column; gap:10px; }
@media (min-width:900px) {
  .bf-reun-search-row, .bf-pub-search-row { display:grid; grid-template-columns:2fr 1fr; }
}
.bf-reun-search-row--single, .bf-pub-search-row--single { display:block; }

/* "Pastilla" de HORA a juego con el trigger de bfEnhanceDate() (mismo alto,
   radio, borde e icono en el verde esmeralda oficial del datepicker, #1B6C78 —
   NO el --teal-500 genérico del resto de la app, para que el par fecha+hora
   luzca idéntico) — pero el <input type="time"> de dentro sigue siendo NATIVO,
   sin popover propio: petición explícita del usuario tras probar
   bfEnhanceTime() (scroll de horas/minutos) en el modal de registros de
   tiempo — prefiere teclear la hora directamente.
   Dos rondas de ajuste tras probarlo en producción: (1) el icono del reloj
   propio (teal, decorativo) convivía con el icono nativo del navegador
   (::-webkit-calendar-picker-indicator) — redundante, y ESE segundo icono es
   además el que abría el desplegable azul de horas/minutos que el usuario
   seguía viendo sin cambiar; (2) ese desplegable azul es chrome 100% nativo
   del navegador (como el propio calendario de <input type="date">, o el
   resaltado del segmento activo — verificado con `::selection`, sin efecto
   en ningún motor) — no hay NINGÚN hook CSS para recolorearlo. Se resuelve
   ocultando el icono nativo (con él desaparece también su desplegable, sin
   perder el tecleo manual) y dejando el propio como único, puramente visual. */
.bf-time-shell { display:flex; align-items:center; gap:11px; height:46px; padding:0 13px; border:1px solid var(--border-strong); border-radius:12px; background:var(--white); box-sizing:border-box; cursor:text; transition:border-color .15s, box-shadow .15s; }
.bf-time-shell:focus-within { border-color:var(--dp-accent-fg); box-shadow:0 0 0 3px rgba(27,108,120,0.10); }
.bf-time-shell svg { flex:none; color:var(--dp-accent-fg); }
.bf-time-shell input[type="time"] { flex:1; min-width:0; border:none; outline:none; background:transparent; padding:0; margin:0; font-size:14.5px; font-family:inherit; color:var(--fg1); }
/* Anula el anillo azul GENÉRICO de foco (regla global de más arriba, pensada
   para inputs con borde propio) sobre el input nativo de dentro — el anillo
   visible ya lo pinta el .bf-time-shell entero vía :focus-within. */
.bf-time-shell input[type="time"]:focus { box-shadow:none !important; }
/* Oculta el icono/desplegable NATIVO del navegador (Chrome/Edge/Safari) — deja
   solo el propio (arriba) y, con él, se va también el popup azul de horas/
   minutos que ese icono nativo abría al pincharlo. Firefox no pinta este
   pseudo-elemento (su <input type="time"> ya es distinto de raíz) — regla
   inocua ahí, sin efecto. */
.bf-time-shell input[type="time"]::-webkit-calendar-picker-indicator { display:none; }

/* Fila "hairline" integrada (Opción A del diseño de referencia, sesión 2026-09-22): sin tarjeta de color de
   fondo, solo un hairline de separación arriba y un icono de marca — el bloque ENTERO es la superficie
   clicable que abre el modal de detalle (bfAiUsageOpenModal), sin ningún icono "i" aparte ni título nativo
   del navegador (la explicación vive dentro del propio modal, en su párrafo final). */
.bf-aiusage { display:block; width:100%; appearance:none; border:none; border-top:1px solid var(--border); background:transparent; text-align:left; cursor:pointer; font:inherit; color:inherit; box-sizing:border-box; }
.bf-aiusage:hover, .bf-aiusage:focus-visible { background:var(--bg2); border-radius:10px; outline:none; }
.bf-aiusage--d { margin:6px 10px 0; padding:10px 8px 9px; }
.bf-aiusage--m { margin:4px 6px 0; padding:9px 6px; }
.bf-aiusage-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.bf-aiusage-icon { flex:none; width:22px; height:22px; border-radius:6px; background:var(--teal-50); color:var(--fg-brand); display:flex; align-items:center; justify-content:center; }
.bf-aiusage-icon svg { width:13px; height:13px; }
.bf-aiusage-title { margin:0; font-size:12px; font-weight:600; color:var(--fg2); }
.bf-aiusage-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.bf-aiusage-tokens { margin:0; font-size:13px; font-weight:700; color:var(--fg1); font-family:var(--font-mono); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.bf-aiusage-cost { margin:0; font-size:11.5px; color:var(--fg3); flex:none; }
/* Los 4 elementos de la barra son <span> (contenido "phrasing", válido dentro de un <button>) — SIN
   `display:block` un <span> es inline y `height`/`width` en % NO SE APLICAN (bug real, sesión 2026-09-22:
   la barra calculaba el ancho correcto por JS pero nunca llegaba a verse, colapsada a 0 de alto). */
.bf-aiusage-bar-wrap { display:block; margin-top:8px; }
.bf-aiusage-bar-track { display:block; height:4px; border-radius:var(--radius-pill); background:var(--bg3); overflow:hidden; }
.bf-aiusage-bar-fill { display:block; height:100%; border-radius:var(--radius-pill); background:var(--bf-aiusage-bar-color, var(--teal-500)); width:0; transition:width .3s ease; }
.bf-aiusage-bar-label { display:block; margin:4px 0 0; font-size:10.5px; color:var(--fg3); }

/* Modal de detalle del uso de IA: dos gráficos circulares (tokens / coste) + tabla por módulo. */
.bf-aiu-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px) { .bf-aiu-grid { grid-template-columns:1fr 1fr; } .bf-aiu-grid--3 { grid-template-columns:1fr 1fr 1fr; } }
@media (min-width:640px) { .bf-aiu-grid--3 .bf-aiu-chart svg { max-width:150px; } }
.bf-aiu-chart { display:flex; flex-direction:column; align-items:center; gap:8px; }
.bf-aiu-chart h3 { margin:0; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg3); }
.bf-aiu-chart svg { width:100%; max-width:150px; height:auto; display:block; }
@media (min-width:640px) { .bf-aiu-chart svg { max-width:190px; } }
.bf-aiu-table { width:100%; border-collapse:collapse; font-size:13px; }
.bf-aiu-table th { text-align:right; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--fg3); padding:6px 8px; border-bottom:1px solid var(--border); }
.bf-aiu-table th:first-child, .bf-aiu-table td:first-child { text-align:left; }
.bf-aiu-table td { padding:7px 8px; text-align:right; color:var(--fg1); border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.bf-aiu-table tfoot td { font-weight:700; border-bottom:none; }
.bf-aiu-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:baseline; }
.bf-aiu-models { display:block; margin:2px 0 0 18px; font-size:11px; font-weight:400; color:var(--fg3); white-space:normal; }
.bf-aiu-pct { color:var(--fg3); font-size:11.5px; margin-left:4px; }

/* Botón «Continuar con Google» del login (colores de la guía de marca de Google). */
.bf-google-btn:hover { background:#f8f9fa !important; }
.bf-google-btn:focus-visible { outline:2px solid var(--teal-600); outline-offset:2px; }

/* Etiqueta de proyecto (azul) en las fichas «Sin fecha» del calendario de Tareas
   y en las tarjetas de la agenda móvil — ver calProjTag() en app.js. */
.bf-cal-proj-tag { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--tag-blue-bg); color:var(--tag-blue-fg); border:1px solid var(--tag-blue-border); border-radius:999px; padding:1px 8px; font-size:11px; font-weight:600; line-height:1.5; }

/* Kairos — selector de hilos (2026-09-28). Fila base (antes estilos inline),
   hilos nacidos en el registro abierto (verde de marca) y el hilo activo. */
.agente-session-row { display:flex; align-items:center; gap:6px; padding:8px 6px; border-radius:8px; cursor:pointer; }
.agente-session-row:hover { background:var(--bg3); }
.agente-session-row--here { background:var(--teal-100); box-shadow:inset 3px 0 0 var(--teal-600); }
.agente-session-row--here:hover { background:var(--teal-200); }
.agente-session-title { font-size:13.5px; font-weight:500; color:var(--fg1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agente-session-row--active .agente-session-title { font-weight:700; }
.agente-session-check { color:var(--fg-brand); margin-right:5px; }
.agente-session-here { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; background:var(--bg1); color:var(--fg-brand); font-size:10.5px; font-weight:600; line-height:1.5; }

/* «Conexiones» del sidebar, plegable (cerrado por defecto). */


/* Barra de pestañas de sección (Albaranes · Datos SAGE, CRM, Catálogos): sustituye a los ítems hijos del sidebar. */
.bf-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.bf-tab { appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-strong); background:var(--white); color:var(--fg1); font-size:14px; font-weight:600; padding:8px 14px; border-radius:10px; white-space:nowrap; transition:background .15s, border-color .15s; }
.bf-tab:hover { background:var(--teal-50); border-color:var(--border-brand); }
.bf-tab.is-active { background:var(--teal-700); border-color:var(--teal-700); color:#fff; cursor:default; }
.bf-tabs-sep { width:1px; align-self:stretch; min-height:22px; background:var(--border-strong); margin:0 4px; }
.bf-tabs-lbl { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg3); margin-right:2px; }
@media (max-width: 899px) { .bf-tabs-sep { display:none; } .bf-tabs-lbl { flex-basis:100%; margin:4px 0 -2px; } }

/* ---- Días temáticos de la Agenda ----
   Cada tema da --h (tono) y --s (1 = color, 0 = neutro). Los 4 roles salen de oklch con
   las luminosidades de :root / bloque DARK, así un solo par de valores sirve en claro y oscuro. */
.reun-th { --bg:oklch(var(--th-l-bg) calc(var(--th-c-bg) * var(--s)) var(--h)); --bd:oklch(var(--th-l-bd) calc(var(--th-c-bd) * var(--s)) var(--h)); --fg:oklch(var(--th-l-fg) calc(var(--th-c-fg) * var(--s)) var(--h)); --sol:oklch(var(--th-l-sol) calc(var(--th-c-sol) * var(--s)) var(--h)); }
.reun-seg { display:flex; flex-direction:column; gap:6px; background:var(--bg); border:1px solid var(--bd); border-radius:10px; padding:2px 6px 8px; }
.reun-seg + .reun-seg { border-top-style:dashed; }
.reun-seg-h { display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:0; background:none; padding:6px 2px 2px; color:var(--fg); font:600 12px/1.2 var(--font-sans); }
.reun-seg-h::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--sol); flex:none; }
.reun-seg-h small { display:block; font-weight:500; font-size:11px; opacity:.75; margin-top:1px; }
.reun-seg-none { --bg:var(--bg1); --bd:var(--border); --fg:var(--fg3); --sol:var(--slate-300); }
.reun-seg-items { display:flex; flex-direction:column; gap:6px; }
.reun-tint { background:var(--bg) !important; }
.reun-tint2 { background:linear-gradient(oklch(var(--th-l-bg) calc(var(--th-c-bg) * var(--sa)) var(--ha)) 0 50%, oklch(var(--th-l-bg) calc(var(--th-c-bg) * var(--sb)) var(--hb)) 50% 100%) !important; }
.reun-thtag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--fg); }
.reun-thtag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sol); }
.reun-th-toggle { appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 11px; border:1px solid var(--border); border-radius:8px; background:var(--white); color:var(--fg2); font-size:12.5px; font-weight:600; white-space:nowrap; }
.reun-th-sw { width:26px; height:15px; border-radius:9px; background:var(--slate-300); position:relative; flex:none; transition:.15s; }
.reun-th-sw::after { content:""; position:absolute; left:2px; top:2px; width:11px; height:11px; border-radius:50%; background:#fff; transition:.15s; }
.reun-th-toggle.on .reun-th-sw { background:var(--teal-600); }
.reun-th-toggle.on .reun-th-sw::after { left:13px; }
.reun-legend { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:12px; color:var(--fg3); }
.reun-legend span { display:inline-flex; gap:6px; align-items:center; }
.reun-k-ev { color:var(--reun-k-ev); } .reun-k-re { color:var(--reun-k-re); } .reun-k-ta { color:var(--reun-k-ta); }
/* Drawer de configuración (semana tipo + temas) */
.reun-thcard { border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.reun-thcard.hl { border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
.reun-throw { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reun-thseg { display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--bg3); margin-left:auto; }
.reun-thseg button { appearance:none; cursor:pointer; border:0; background:none; height:26px; padding:0 9px; border-radius:7px; font-size:12px; font-weight:500; color:var(--fg2); }
.reun-thseg button.on { background:var(--white); color:var(--fg-brand); font-weight:600; box-shadow:var(--shadow-xs); }
.reun-thsel { height:32px; padding:0 8px; border:1px solid var(--border-strong); border-radius:8px; background:var(--white); color:var(--fg1); font-size:13px; min-width:0; }
.reun-thchip { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 6px 0 10px; border-radius:99px; background:var(--bg); border:1px solid var(--bd); color:var(--fg); font:600 12.5px var(--font-sans); }
.reun-thchip::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--sol); }
.reun-thchip button { appearance:none; cursor:pointer; border:0; background:none; color:inherit; opacity:.7; padding:2px 4px; font-size:12px; }
.reun-thchip button:hover { opacity:1; }
.reun-thsw { appearance:none; cursor:pointer; width:26px; height:26px; border-radius:50%; border:2px solid transparent; background:var(--sol); padding:0; }
.reun-thsw.on { border-color:var(--fg1); }
.reun-seg-mini { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; background:var(--bg); border:1px solid var(--bd); border-radius:6px; padding:2px 7px; color:var(--fg); font:600 11px/1.3 var(--font-sans); }
.reun-seg-mini small { font-weight:500; font-size:10.5px; opacity:.75; }

/* Ficha de Proyecto: campos a la izquierda y «Empresas» (puede ser larga) en una columna propia
   a la derecha en pantallas anchas; en estrechas, bajo los campos. */
.proy-det-cols { display:flex; flex-direction:column; gap:14px; }
.proy-det-main { min-width:0; }
.proy-det-empresas { min-width:0; }
@media (min-width: 1100px) {
  .proy-det-cols { flex-direction:row; align-items:flex-start; gap:28px; }
  .proy-det-main { flex:1; }
  .proy-det-empresas { flex:none; width:300px; margin-top:14px; }
}

/* ---- Escritorio minimalista: sidebar compacto (solo iconos), Inbox/Configuración en la cabecera ---- */
.bf-sidebar-compact { overflow-y:auto; overflow-x:hidden; scrollbar-width:none; align-items:stretch; }
.bf-sidebar-compact::-webkit-scrollbar { display:none; }
.bf-sidebar-compact .bf-nav-lb,
.bf-sidebar-compact .bf-nav-chevron,
.bf-sidebar-compact a.bf-nav-side > i.fa-arrow-up-right-from-square { display:none !important; }
.bf-sidebar-compact .bf-navbtn { justify-content:center; padding-left:0 !important; padding-right:0 !important; }
.bf-sidebar-compact .bf-nav-groupbody { padding-left:0 !important; }
/* Uso de IA compacto: icono + «IA» y un anillo de progreso sin texto. */
.bf-aiusage--d { margin:6px 0 0; width:100%; padding:8px 0 6px; text-align:center; }
.bf-aiusage--d .bf-aiusage-title, .bf-aiusage--d .bf-aiusage-row, .bf-aiusage--d .bf-aiusage-bar-wrap { display:none !important; }
.bf-aiusage--d .bf-aiusage-head { flex-direction:column; justify-content:center; gap:3px; margin:0; }
.bf-aiusage-short { display:none; font-size:11px; font-weight:700; color:var(--fg2); letter-spacing:.02em; }
.bf-aiusage--d .bf-aiusage-short { display:block; }
.bf-aiusage-ring { width:22px; height:22px; margin:6px auto 0; border-radius:50%;
  background:conic-gradient(var(--bf-aiusage-bar-color, var(--teal-500)) calc(var(--p, 0) * 1%), var(--bg3) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
/* Conexiones: icono + nº, desplegable lateral. */
.bf-conn-btn { appearance:none; border:none; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; padding:6px 0; border-radius:10px; color:var(--slate-400); }
.bf-conn-btn:hover { background:var(--bg3); }
.bf-conn-btn i { font-size:15px; line-height:1; }
.bf-conn-count { font-size:11px; font-weight:700; color:var(--fg2); }
.bf-conn-panel { position:fixed; z-index:400; min-width:200px; max-width:300px; background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:10px; display:flex; flex-direction:column; gap:6px; }
.bf-conn-panel[hidden] { display:none; }
.bf-conn-panel-title { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg3); }
.bf-conn-item { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--fg2); }
/* Inbox en la cabecera: círculos de no leídos (rojo = correo, amarillo = mensajería). */
.bf-inbox-dots { position:absolute; top:50%; right:-8px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none; }
.bf-inbox-dot { min-width:16px; height:16px; padding:0 4px; border-radius:999px; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-sizing:border-box; }
.bf-inbox-dot--red { background:var(--danger-solid); color:#fff; }
.bf-inbox-dot--yellow { background:#facc15; color:#422006; }

/* ---- Chat de soporte (modal del botón «Ayuda» + sección «Soporte» del equipo) ---- */
.bf-sup-ov { position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; background:var(--backdrop); padding:20px; }
.bf-sup-box { background:var(--white); border-radius:18px; box-shadow:var(--shadow-lg); width:100%; max-width:440px; height:min(640px, calc(100vh - 40px)); display:flex; flex-direction:column; overflow:hidden; }
.bf-sup-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); flex:none; }
.bf-sup-head h2 { margin:0; flex:1; min-width:0; font-size:16px; color:var(--fg1); }
.bf-sup-helplink { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--fg-brand); text-decoration:none; white-space:nowrap; }
.bf-sup-helplink:hover { text-decoration:underline; }
.bf-sup-x { appearance:none; cursor:pointer; flex:none; width:32px; height:32px; border:1px solid var(--border-strong); background:var(--white); color:var(--fg2); border-radius:9px; font-size:16px; line-height:1; }
.bf-sup-thread { flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; background:var(--bg2); }
.bf-sup-msg { max-width:86%; font-size:14px; line-height:1.5; padding:9px 13px; border-radius:16px; white-space:pre-wrap; word-break:break-word; }
.bf-sup-msg--user { align-self:flex-end; background:var(--teal-700); color:#fff; border-radius:16px 16px 4px 16px; }
.bf-sup-msg--other { align-self:flex-start; background:var(--white); color:var(--fg1); border:1px solid var(--border); border-radius:16px 16px 16px 4px; }
.bf-sup-msg--system { align-self:center; max-width:92%; background:transparent; color:var(--fg3); font-size:12.5px; text-align:center; padding:2px 6px; }
.bf-sup-who { display:block; margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--fg3); }
.bf-sup-time { display:block; margin-top:3px; font-size:10.5px; opacity:.7; }
.bf-sup-links { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.bf-sup-links a { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--fg-brand); text-decoration:none; }
.bf-sup-links a:hover { text-decoration:underline; }
.bf-sup-foot { flex:none; border-top:1px solid var(--border); padding:10px 12px 12px; background:var(--white); }
.bf-sup-compose { display:flex; gap:8px; align-items:flex-end; }
.bf-sup-compose textarea { flex:1; min-width:0; resize:none; max-height:120px; border:1px solid var(--border-strong); border-radius:12px; padding:9px 12px; font:inherit; font-size:14px; color:var(--fg1); background:var(--white); outline:none; }
.bf-sup-compose textarea:focus { border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(20,184,166,.15); }
.bf-sup-send { appearance:none; cursor:pointer; flex:none; border:none; width:40px; height:40px; border-radius:12px; background:var(--teal-700); color:#fff; font-size:15px; }
.bf-sup-send:disabled { opacity:.5; cursor:default; }
.bf-sup-hint { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font-size:11.5px; color:var(--fg3); }
.bf-sup-link { appearance:none; cursor:pointer; border:none; background:transparent; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--fg-brand); }
.bf-sup-link:hover { text-decoration:underline; }
.bf-sup-human { appearance:none; cursor:pointer; flex:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid var(--border-strong); background:var(--white); color:var(--fg-brand); border-radius:999px; padding:5px 11px; font:inherit; font-size:12px; font-weight:700; }
.bf-sup-human:hover { background:var(--teal-50); border-color:var(--teal-600); }
.bf-sup-human i { font-size:12px; }
.bf-sup-typing { align-self:flex-start; font-size:12.5px; color:var(--fg3); padding:2px 6px; }
.bf-sup-empty { margin:auto; text-align:center; color:var(--fg2); font-size:14px; line-height:1.5; padding:0 12px; }
.bf-sup-empty i { display:block; width:100%; text-align:center; font-size:28px; margin-bottom:10px; color:var(--fg3); }
@media (max-width:899px) {
  .bf-sup-ov { align-items:flex-end; padding:0; }
  .bf-sup-box { max-width:none; height:min(86vh, 640px); border-radius:18px 18px 0 0; }
}
/* Bandeja del equipo (sección «Soporte») */
.bf-sup-inbox { display:grid; grid-template-columns:minmax(280px, 360px) 1fr; gap:16px; align-items:stretch; height:calc(100vh - 190px); min-height:420px; }
.bf-sup-list, .bf-sup-pane { background:var(--white); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.bf-sup-listbody { flex:1; min-height:0; overflow-y:auto; }
.bf-sup-row { appearance:none; width:100%; cursor:pointer; display:flex; gap:10px; align-items:flex-start; text-align:left; border:none; border-bottom:1px solid var(--border); background:transparent; padding:12px 14px; color:var(--fg1); }
.bf-sup-row:hover { background:var(--bg3); }
.bf-sup-row.is-active { background:var(--teal-50); }
.bf-sup-row-main { flex:1; min-width:0; }
.bf-sup-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.bf-sup-row-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-sup-row-time { flex:none; font-size:11.5px; color:var(--fg3); }
.bf-sup-row-cust { font-size:12px; color:var(--fg-brand); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-sup-row-prev { margin-top:2px; font-size:12.5px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-sup-chip { display:inline-block; border-radius:999px; padding:1px 8px; font-size:10.5px; font-weight:700; background:var(--bg3); color:var(--fg2); margin-left:6px; vertical-align:1px; }
.bf-sup-chip--human { background:var(--warning-bg); color:var(--warning-fg); }
.bf-sup-chip--closed { background:var(--bg3); color:var(--fg3); }
.bf-sup-filters { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); }
.bf-sup-filter { appearance:none; cursor:pointer; border:1px solid var(--border-strong); background:var(--white); color:var(--fg2); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; }
.bf-sup-filter.is-active { background:var(--teal-50); color:var(--fg-brand); border-color:var(--teal-600); }
.bf-sup-pane-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); flex:none; }
.bf-sup-pane-head .bf-sup-back { display:none; }
.bf-sup-pane-title { flex:1; min-width:0; }
.bf-sup-pane-title strong { display:block; font-size:15px; color:var(--fg1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-sup-pane-title span { display:block; font-size:12px; color:var(--fg3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-sup-badge-nav { margin-left:auto; }
@media (max-width:899px) {
  .bf-sup-inbox { grid-template-columns:1fr; height:calc(100vh - 150px); }
  .bf-sup-inbox.is-thread .bf-sup-list { display:none; }
  .bf-sup-inbox:not(.is-thread) .bf-sup-pane { display:none; }
  .bf-sup-pane-head .bf-sup-back { display:inline-flex; }
}
/* Menú de usuario (escritorio): «Salir» como botón de icono arriba a la derecha. */
.bf-usermenu-logout { position:absolute; top:10px; right:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; appearance:none; cursor:pointer; border:1px solid var(--border); background:var(--white); color:var(--fg2); border-radius:9px; font-size:14px; }
.bf-usermenu-logout:hover { background:var(--bg3); color:var(--danger); }
#userMenuPanelD .bf-usermenu-name, #userMenuPanelD .bf-usermenu-client, #userMenuPanelM .bf-usermenu-name, #userMenuPanelM .bf-usermenu-client { padding-right:38px; }
/* Uso de IA en el menú móvil: sin la fila de tokens/coste (más compacto); la barra de límite se mantiene. */
.bf-aiusage--m .bf-aiusage-row { display:none !important; }
.bf-aiusage--m .bf-aiusage-head { margin-bottom:0; }
.bf-aiusage--m .bf-aiusage-bar-wrap { margin-top:6px; }

/* Móvil: el interruptor de Días temáticos va en su propia línea, encima del selector Semana/Mes y el navegador. */
@media (max-width:899px) {
  .reun-nav-ctl { flex-wrap:wrap; width:100%; row-gap:8px; }
  .reun-nav-ctl > .reun-th-trow { flex:0 0 100%; display:flex; }
}

/* Jardín digital: ficha de nota con degradado sutil del color de su Estado (--nt lo pone notaCard()). La favorita ya no
   cambia de fondo: solo lleva la estrella. */
.bf-nota-card--grad { background:linear-gradient(180deg, color-mix(in srgb, var(--nt) 62%, var(--white)) 0%, var(--white) 62%) !important; border-color:color-mix(in srgb, var(--nt) 70%, var(--border)) !important; }
/* Informe del jardín (nº de notas por Estado) encima del buscador. */
#notasReport { gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.bf-notas-rep-card { box-sizing:border-box; background:var(--white); border:1px solid var(--border); border-radius:14px; padding:12px 14px; min-width:0; }