/* ── KATALYST · Creative Operating System ── */
        /* ESCALA DE BREAKPOINTS (15 sep 2026): 1180 / 1024 / 768 / 480, la
           misma de la Mesa (ver la cabecera de kcore-mesa.css). Ningún corte
           fuera de esos cuatro. El matchMedia de dbch-dashboard.js usa 768. */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        /* ── RESET: isolate dashboard from WordPress theme ── */
        #dbch-root, #dbch-root * {
          box-sizing: border-box;
          -webkit-font-smoothing: antialiased;
        }
        #dbch-root {
          all: initial;
          display: flex;
          width: 100%;
          /* dvh: en el iPad y el iPhone, 100vh es el viewport GRANDE (el de las barras
             escondidas) y el marco se corta arriba y abajo. */
          min-height: 100vh;
          min-height: 100dvh;
          font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          font-size: 14px;
          line-height: 1.5;
          color: #0D1117;
          background: #1A1A1A;
          position: relative;
        }

        /* ── CSS VARIABLES ──────────────────────────────────────────────────
           EL COLOR DE MARCA ES DE LA AGENCIA, NO NUESTRO (4 sep 2026).

           Los valores de aquí abajo son el lima de KATALYST y siguen siendo el
           respaldo: una instalación sin motor, o una agencia que no eligió
           nada, se ve exactamente como se veía. Cuando la agencia sí eligió,
           `KCORE_Branding::css_vars()` reimprime este mismo bloque con sus
           colores y gana por orden de cascada.

           ── ⚠️ POR QUÉ SIGUEN LLAMÁNDOSE `--lime` Y `--accent` ──

           Porque son un CONTRATO ENTRE DOS PLUGINS. `kcore-vitrina.css` y
           `kcore-ficha.css` viven en katalyst-core y escriben
           `var(--lime, #CBF904)` para verse igual en la Mesa y aquí. Son dos
           ZIP con versiones propias que no se despliegan a la vez: renombrar
           esto a `--brand` dejaría, entre un despliegue y el otro, la vitrina
           en lima dentro de un portal azul marino. El nombre miente un poco;
           un portal a dos colores mentiría mucho más.

           ── LOS ROLES, Y QUÉ GARANTIZA CADA UNO ──

           --lime         relleno de marca            (lo eligió la agencia)
           --lime-hover   el mismo, al pasar el ratón
           --on-brand     lo que va ENCIMA de ese relleno · AA garantizado
           --brand-dark   la marca SOBRE EL SIDEBAR oscuro · AA garantizado
           --on-brand-dark  lo que va encima de esa · AA garantizado
           --accent       texto y bordes SOBRE BLANCO · AA garantizado
           --tint         fondo de fila en hover
           --tint-2       fondo de las burbujas del chat
           --tint-border  el borde de esos dos
           --on-tint      texto sobre --tint-2 · AAA (ahí se lee de corrido)
           --chart-soft   las barras no seleccionadas del gráfico
           --promo-1/2/3  las paradas del gradiente de la tarjeta del sidebar
           --brand-rgb    los componentes, para los rgba() de sombras y velos

           Los pisos de contraste no son aspiracionales: `KCORE_Branding` los
           deriva contando, y `tests/harness_branding.php` los comprueba sobre
           2.736 colores de marca. Ver la cabecera de esa clase.

           ⚠️ Una regla NUEVA que ponga texto sobre `--lime` usa `--on-brand`,
           nunca `--ink`. Con el lima las dos cosas coinciden y el defecto no se
           ve al revisarlo; con una marca oscura queda texto negro sobre negro.
        */
        #dbch-root {
          --lime:          #CBF904;
          --lime-hover:    #BEEB00;
          --ink:           #1A1A1A;
          --brand-rgb:     203,249,4;
          --on-brand:      #1A1A1A;
          --brand-dark:    #CBF904;
          --on-brand-dark: #1A1A1A;
          --accent:        #7A9800;
          --tint:          #F6FAE3;
          --tint-2:        #EFF8CE;
          --tint-border:   #E4F0B8;
          --on-tint:       #46530A;
          --chart-soft:    #E6F9A1;
          --promo-1:       #93AC12;
          --promo-2:       #5A6E05;
          --promo-3:       #2C3600;
          --accent-dim:    rgba(var(--brand-rgb),.16);
          --accent-border: rgba(122,152,0,.35);
          --accent-glow:   rgba(var(--brand-rgb),.30);
          --surface:       #FFFFFF;
          --surface-2:     #FFFFFF;
          --surface-3:     #F4F4F2;
          --border:        #ECECE8;
          --text-1:        #0D1117;
          --text-2:        #6B7280;
          --text-3:        #9CA3AF;
          --green:         #3AA377;
          --red:           #EF4444;
          --amber:         #F59E0B;
          --blue:          #3B82F6;
          --purple:        #8B5CF6;
          --r-sm:          8px;
          --r:             12px;
          --r-lg:          16px;
          --sh-sm:         0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
          --sh:            0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
          --sh-lg:         0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
          --ease:          cubic-bezier(.22,.68,0,1.2);
          --sidebar-w:     236px;
        }

        /* ── SIDEBAR ── */
        #dbch-root .dbch-sidebar {
          width: var(--sidebar-w);
          min-height: 100vh;
          min-height: 100dvh;
          height: 100vh;
          height: 100dvh;
          background: #1A1A1A;
          position: fixed;
          top: 0; left: 0;
          z-index: 99999;
          display: flex;
          flex-direction: column;
          transition: transform .3s ease;
        }
        /* Force override WP admin bar offset */
        html body.admin-bar #dbch-root .dbch-sidebar { top: 0 !important; }
        html body.admin-bar #dbch-root { margin-top: 0 !important; }
        html body #wpadminbar { display: none !important; }
        html body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; }

        /* La página entera es oscura y sin scroll propio — sin esto el body de
           WordPress asoma su fondo blanco (marco arriba/derecha) y la barra de
           scroll de la página, que ya no se usa (el scroll vive en .dbch-main).
           Este CSS solo se encola en la página del portal, no afecta al resto
           del sitio. */
        html, body {
          margin: 0 !important;
          padding: 0 !important;
          background: #1A1A1A !important;
          overflow: hidden !important;
          height: 100% !important;
        }
        #dbch-root .dbch-sidebar-inner {
          display: flex;
          flex-direction: column;
          height: 100vh;
          height: 100dvh;
          padding: 20px 14px;
          overflow: hidden;
        }
        /* Logo centrado en el sidebar (mockup) */
        #dbch-root .dbch-logo-wrap { margin-bottom: 20px; padding: 6px 2px 0; display: flex; justify-content: center; }
        #dbch-root .dbch-logo-img { width: 112px; height: auto; display: block; }
        /* La píldora del logo de la agencia. Ver el comentario del PHP: el
           sidebar es oscuro y así un solo archivo sirve para cualquier logo,
           en vez de pedirle a cada agencia una versión para fondo oscuro.
           `object-fit: contain` porque un logotipo de agencia casi nunca es
           cuadrado y estirarlo es peor que no ponerlo. */
        /* El logo de la agencia va SOBRE EL COLOR DEL MENÚ, sin caja blanca
           detrás (David, 7 sep 2026). La píldora blanca era mi propuesta para
           que un logotipo de tinta oscura no desapareciera en el sidebar; se
           veía como un parche pegado arriba del menú, que es peor de mirar que
           el problema que resolvía.

           ⚠️ Esto quedó desincronizado media entrega: se quitó en la MAQUETA de
           la Mesa (`.kc-mq-logo`) y no aquí, así que la vista previa enseñaba un
           portal que no existía — exactamente lo que esa maqueta está para
           impedir. Las dos reglas se tocan JUNTAS o no se toca ninguna.

           El precio sigue anotado: una agencia con el logo en negro sobre
           transparente no se verá, y la salida es un segundo archivo para fondo
           oscuro (`logo_dark_id`), no volver a la caja. */
        #dbch-root .dbch-logo-wrap.dbch-logo-agencia {
          padding: 4px 2px;
          margin: 0 2px 20px;
          /* Centrado en la barra, como el K|COS al que reemplaza. `.dbch-logo-wrap`
             ya centra; no se pisa con `flex-start`. Gemela de `.kc-mq-logo` en
             `kcore-mesa.css`: las dos se tocan JUNTAS o la maqueta miente. */
        }
        #dbch-root .dbch-logo-agencia .dbch-logo-img {
          width: auto; max-width: 100%; max-height: 46px; object-fit: contain;
        }

        /* Búsqueda de tareas — filtro en vivo, 100% frontend */
        #dbch-root .dbch-side-search {
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(255,255,255,.06);
          border: 1px solid rgba(255,255,255,.09);
          border-radius: 20px;
          /* Más baja que antes (David, 7 sep 2026: «se ve muy gorda»). Queda
             en ~32px contra los ~36px de un ítem del nav, así que se lee como
             un control y no como un bloque. Lo que la inflaba era el alto
             intrínseco del input, no este relleno — ver la nota de ahí abajo. */
          padding: 7px 13px;
          margin-bottom: 22px;
          color: rgba(255,255,255,.4);
        }
        #dbch-root .dbch-side-search svg { flex-shrink: 0; }
        #dbch-root .dbch-side-search input {
          flex: 1 !important;
          min-width: 0 !important;
          background: transparent !important;
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          padding: 0 !important;
          font-size: 12.5px !important;
          /* ⚠️ EL ALTO VA EXPLÍCITO, y `line-height` NO alcanza.
             Un `<input>` no saca su alto de la línea sino de la caja de
             contenido de su fuente: con `line-height:1` aplicado (comprobado en
             el banco: `12.5px`) el campo seguía midiendo 19px, o sea 6px de aire
             que se sumaban a los del contenedor y hacían que la barra se viera
             «gorda». Fijar `height` es lo único que lo controla, y de paso lo
             blinda contra el alto propio que le den el navegador o el tema. */
          line-height: 1 !important;
          height: 16px !important;
          min-height: 0 !important;
          font-family: inherit !important;
          color: rgba(255,255,255,.85) !important;
        }
        #dbch-root .dbch-side-search input::placeholder { color: rgba(255,255,255,.35); }
        #dbch-root .dbch-side-search:focus-within { border-color: rgba(var(--brand-rgb),.5); color: var(--lime); }

        /* Nav */
        #dbch-root .dbch-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
        #dbch-root .dbch-nav-item {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          padding: 9px 11px !important;
          border-radius: 6px !important;
          color: rgba(255,255,255,.45) !important;
          text-decoration: none !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          transition: all .18s ease !important;
          border: 1px solid transparent !important;
          cursor: pointer !important;
          font-family: inherit !important;
          line-height: 1 !important;
        }
        #dbch-root .dbch-nav-item:hover { color: rgba(255,255,255,.85); transform: translateX(3px); }
        /* Pill lima activa — texto tinta sobre relleno de marca, con chevron */
        #dbch-root .dbch-nav-item.active {
          color: var(--on-brand-dark) !important;
          background: var(--brand-dark);
          border-color: var(--brand-dark);
          font-weight: 600 !important;
          box-shadow: 0 0 18px rgba(var(--brand-rgb),.28);
        }
        #dbch-root .dbch-nav-item.active::after {
          content: '›';
          margin-left: auto;
          font-size: 15px;
          font-weight: 700;
          color: var(--ink);
        }
        /* El chevron y el badge compiten por el margen derecho — si hay badge,
           este gana y el chevron no se pinta */
        #dbch-root .dbch-nav-item.active:has(.dbch-nav-badge:not(.dbch-hidden))::after { content: none; }
        #dbch-root .dbch-nav-icon {
          width: 16px; height: 16px;
          flex-shrink: 0;
          display: block;
          opacity: .6;
          transition: opacity .15s;
        }
        #dbch-root .dbch-nav-item:hover .dbch-nav-icon,
        #dbch-root .dbch-nav-item.active .dbch-nav-icon { opacity: 1; }

        /* Creative Advisor se destaca del resto del menú, siempre en lima */
        /* Va con --brand-dark y NO con --lime: esto es la marca puesta sobre el
           sidebar oscuro, y una marca oscura desaparecería ahí. Ver el bloque
           de variables. */
        #dbch-root .dbch-nav-item-ai:not(.active) { color: var(--brand-dark) !important; }
        #dbch-root .dbch-nav-item-ai .dbch-nav-icon { opacity: .9; }
        #dbch-root .dbch-nav-item-ai:not(.active):hover { color: var(--brand-dark) !important; }

        /* Badge de mensajes proactivos del Advisor (recap del viernes / idea
           del lunes) sin leer — margin-left:auto lo empuja al borde derecho
           del nav-item sin tener que tocar el flex del texto. */
        #dbch-root .dbch-nav-badge {
          margin-left: auto !important;
          background: var(--brand-dark) !important;
          color: var(--on-brand-dark) !important;
          font-size: 10.5px !important;
          font-weight: 700 !important;
          min-width: 18px !important;
          height: 18px !important;
          border-radius: 9px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 0 5px !important;
          line-height: 1 !important;
        }
        /* Badge "por revisar" — ámbar, distinto del turquesa del Advisor:
           señala que la pelota está en la cancha del cliente */
        #dbch-root .dbch-nav-badge-review {
          background: #F59E0B !important;
          box-shadow: 0 0 10px rgba(245,158,11,.45) !important;
        }

        /* Sidebar bottom — sin línea divisoria (feedback de David: se veía
           una raya justo encima del cohete) */
        /* El «+» del menú inferior solo existe en ≤768px (ver el bloque del
           menú inferior al final de la hoja). */
        #dbch-root .dbch-dock-plus { display: none; }
        #dbch-root .dbch-sidebar-bottom {
          padding-top: 16px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        /* Tarjeta promo "¡Haz que las cosas pasen!" con el cohete — gradiente
           lima-oliva protagonista y cohete grande desbordando (mockup) */
        #dbch-root .dbch-promo-card {
          position: relative;
          background: radial-gradient(130% 130% at 25% 0%, var(--promo-1) 0%, var(--promo-2) 45%, var(--promo-3) 100%);
          border: none;
          border-radius: 20px;
          padding: 16px 16px 16px;
          margin-top: 60px;
        }
        #dbch-root .dbch-promo-rocket {
          width: 128px;
          height: auto;
          display: block;
          margin: -86px auto 0;
          filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
        }
        #dbch-root .dbch-promo-title {
          margin: 0 0 8px !important;
          font-size: 18px !important;
          font-weight: 700 !important;
          line-height: 1.2 !important;
          color: #fff !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-promo-body {
          margin: 0 0 14px !important;
          font-size: 12px !important;
          font-weight: 300 !important;
          line-height: 1.55 !important;
          color: rgba(255,255,255,.85) !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-nueva-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          width: 100%;
          padding: 10px 14px;
          background: var(--lime);
          color: var(--on-brand);
          border: none;
          border-radius: 10px;
          font-size: 12.5px;
          font-weight: 600;
          font-family: inherit;
          cursor: pointer;
          transition: all .18s var(--ease);
          box-shadow: 0 2px 14px rgba(var(--brand-rgb),.35);
        }
        #dbch-root .dbch-nueva-btn:hover { transform: scale(1.02); box-shadow: 0 4px 22px rgba(var(--brand-rgb),.55); background: var(--lime-hover); }

        #dbch-root .dbch-client-card {
          display: flex;
          align-items: center;
          gap: 9px;
          padding: 9px 10px;
          background: rgba(255,255,255,.05);
          border-radius: var(--r-sm);
          border: 1px solid rgba(255,255,255,.07);
        }
        #dbch-root .dbch-client-avatar {
          width: 32px; height: 32px;
          background: linear-gradient(135deg, var(--accent), #8FB000);
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          font-weight: 800;
          color: #fff;
          flex-shrink: 0;
        }
        #dbch-root .dbch-client-photo {
          width: 32px; height: 32px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid var(--accent);
          flex-shrink: 0;
        }
        #dbch-root .dbch-client-info { display: flex; flex-direction: column; }
        #dbch-root .dbch-client-name { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.8); }
        #dbch-root .dbch-client-sub  { font-size: 10px; color: rgba(255,255,255,.3); }
        #dbch-root .dbch-logout-btn {
          background: none; border: none;
          color: rgba(255,255,255,.25);
          font-size: 11px;
          padding: 4px 10px;
          text-align: left;
          cursor: pointer;
          border-radius: var(--r-sm);
          transition: color .15s;
          font-family: inherit;
        }
        #dbch-root .dbch-logout-btn:hover { color: rgba(255,255,255,.5); }

        /* Mobile toggle */
        #dbch-root .dbch-mob-toggle {
          display: none;
          position: fixed;
          top: 16px; left: 16px;
          z-index: 100000;
          background: #1A1A1A;
          border: 1px solid rgba(255,255,255,.1);
          border-radius: 8px;
          width: 40px; height: 40px;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          cursor: pointer;
          padding: 8px;
        }
        #dbch-root .dbch-mob-toggle span { display: block; width: 18px; height: 2px; background: rgba(255,255,255,.7); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
        /* El botón se transforma en X cuando el menú está abierto — misma
           afordancia de cierre que ya usan los modales. */
        #dbch-root .dbch-mob-toggle.dbch-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        #dbch-root .dbch-mob-toggle.dbch-active span:nth-child(2) { opacity: 0; }
        #dbch-root .dbch-mob-toggle.dbch-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* Backdrop del menú mobile — solo tiene efecto visual dentro del
           media query de 768px, donde el sidebar pasa a ser un drawer. */
        #dbch-root .dbch-mob-backdrop { display: none; }

        /* Topbar móvil (mockup responsive v4.26.0) — hamburguesa + logo
           centrado + lupa. Solo existe en ≤768px; en desktop ni se pinta.
           "Cliente desde" del cluster es también un elemento solo-móvil. */
        #dbch-root .dbch-mob-topbar { display: none; }
        #dbch-root .dbch-mob-searchwrap { display: none; }
        #dbch-root .dbch-user-since { display: none; }
        html.dbch-noscroll,
        html.dbch-noscroll body { overflow: hidden !important; }

        /* ── MAIN — gran tarjeta clara redondeada FIJA sobre el fondo oscuro.
           La página no scrollea: el scroll vive DENTRO de esta tarjeta
           (feedback de David — la caja de bordes redondeados queda quieta).
           El root va anclado al viewport con position:fixed — si el tema o
           Elementor meten un wrapper con offset arriba, el root lo ignora y
           los márgenes superior/inferior de la tarjeta quedan idénticos. ── */
        #dbch-root { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; overflow: hidden; }
        #dbch-root .dbch-main {
          margin: 14px 14px 14px calc(var(--sidebar-w) + 6px);
          flex: 1;
          display: flex;
          flex-direction: column;
          min-width: 0;
          height: calc(100vh - 28px); height: calc(100dvh - 28px);
          background: #F4F4F2;
          border-radius: 28px;
          overflow-y: auto;
          overflow-x: hidden;
          scrollbar-width: thin;
          scrollbar-color: #C9C9C0 transparent;
        }
        #dbch-root .dbch-main::-webkit-scrollbar { width: 7px; }
        #dbch-root .dbch-main::-webkit-scrollbar-track { background: transparent; }
        #dbch-root .dbch-main::-webkit-scrollbar-thumb { background: #C9C9C0; border-radius: 8px; }

        /* ── SECTIONS ── */
        #dbch-root .dbch-section {
          min-height: 100vh;
          min-height: 100dvh;
          padding: 34px 38px 42px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          background: transparent;
        }
        #dbch-root .dbch-section + .dbch-section { border-top: 1px solid var(--border); }

        /* ── Cabecera de sección: título a la izquierda, identidad + campana a la
           derecha (4 ago 2026, pedido de David).

           El portal es UNA página que scrollea, así que sin esto la identidad se
           quedaba arriba en el Overview y el resto del recorrido iba sin ella.
           `align-items: flex-start` para que el cluster se alinee con el TÍTULO y
           no con el centro del bloque de dos líneas. */
        #dbch-root .dbch-sec-head {
          display: flex; align-items: flex-start; justify-content: space-between;
          gap: 20px; flex-wrap: wrap;
          /* Igual que .dbch-ov-header: las animaciones dbch-fi de los hermanos
             crean stacking contexts y sin esto el panel de la campana queda
             DETRÁS de las tarjetas de la sección. */
          position: relative; z-index: 30;
        }
        #dbch-root .dbch-sec-head .dbch-slh { flex: 1 1 260px; min-width: 0; }
        /* Section label header */
        #dbch-root .dbch-slh { margin-bottom: 4px; }
        #dbch-root .dbch-sl {
          font-size: 11px !important; font-weight: 700 !important;
          letter-spacing: 1.5px !important;
          color: var(--accent) !important;
          text-transform: uppercase !important;
          display: block !important;
          margin-bottom: 6px !important;
          font-family: inherit !important;
        }
        /* Título de sección con el mismo tamaño/formato del "Bienvenido" del
           Overview (feedback de David) */
        #dbch-root .dbch-st { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.5px !important; color: #0D1117 !important; line-height: 1.1 !important; font-family: inherit !important; margin: 0 !important; padding: 0 !important; }
        #dbch-root .dbch-ss { font-size: 14px !important; font-weight: 300 !important; color: #6B7280 !important; margin: 3px 0 0 !important; padding: 0 !important; font-family: inherit !important; line-height: 1.4 !important; }

        /* ── OVERVIEW HEADER ──
           position:relative + z-index para que la campana y el menú del avatar
           floten SOBRE las tarjetas KPI (las animaciones dbch-fi crean stacking
           contexts hermanos y sin esto el panel quedaba detrás) */
        #dbch-root .dbch-ov-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; z-index: 30; }
        /* "Bienvenido," en Light + nombre en Bold, pegado a su subtítulo (mockup) */
        #dbch-root .dbch-welcome-title { font-size: 30px !important; font-weight: 300 !important; letter-spacing: -.5px !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; }
        #dbch-root .dbch-welcome-light { font-weight: 300 !important; }
        #dbch-root .dbch-welcome-name { font-weight: 700 !important; }
        #dbch-root .dbch-accent { color: var(--accent) !important; }
        #dbch-root .dbch-welcome-sub { font-size: 14px !important; font-weight: 300 !important; color: #6B7280 !important; margin: 3px 0 0 !important; padding: 0 !important; font-family: inherit !important; line-height: 1.4 !important; }

        /* Cluster derecho del header: sync en dos líneas + identidad + campana */
        #dbch-root .dbch-ov-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
        #dbch-root .dbch-sync-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        #dbch-root .dbch-sync-stack { display: flex; flex-direction: column; gap: 1px; }
        #dbch-root .dbch-sync-row { display: flex; align-items: center; gap: 7px; }
        /* Logo de la empresa del solicitante (modelo SaaS de KATALYST). Va antes
           del avatar, contenido y sin deformar. Solo se pinta si el motor nativo
           lo trae; en producción no existe y esta regla no aplica a nada. */
        #dbch-root .dbch-company-logo {
          height: 34px; width: auto; max-width: 130px; object-fit: contain;
          flex-shrink: 0; margin-right: 4px;
        }
        /* Identidad del cliente: sin tarjeta con borde (mockup) — avatar clickeable
           que abre el menú con "Cerrar sesión" */
        #dbch-root .dbch-user-cluster {
          display: flex; align-items: center; gap: 12px;
          position: relative;
          flex-shrink: 0;
        }
        #dbch-root .dbch-user-btn {
          background: none !important;
          border: none !important;
          padding: 0 !important;
          margin: 0 !important;
          cursor: pointer !important;
          border-radius: 50% !important;
          line-height: 0 !important;
        }
        #dbch-root .dbch-user-name { font-size: 14.5px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.2 !important; cursor: pointer !important; }
        #dbch-root .dbch-user-menu {
          position: absolute !important;
          top: 52px !important;
          left: 0 !important;
          z-index: 99992 !important;
          background: #fff !important;
          border: 1px solid var(--border) !important;
          border-radius: 10px !important;
          box-shadow: 0 10px 30px rgba(13,17,23,.14) !important;
          padding: 5px !important;
          min-width: 160px !important;
        }
        #dbch-root .dbch-user-menu-item {
          display: block !important;
          padding: 9px 12px !important;
          border-radius: 7px !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          color: #4A4A4A !important;
          text-decoration: none !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-user-menu-item:hover { background: #F4F4F2 !important; color: #0D1117 !important; }
        #dbch-root .dbch-since-photo {
          width: 40px; height: 40px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid var(--lime);
          flex-shrink: 0;
        }
        #dbch-root .dbch-since-avatar {
          width: 40px; height: 40px;
          border-radius: 50%;
          background: #1A1A1A;
          color: var(--lime);
          display: flex; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 700;
          flex-shrink: 0;
        }
        #dbch-root .dbch-since-block { display: flex; flex-direction: column; gap: 2px; }
        #dbch-root .dbch-since-label { font-size: 10.5px !important; color: #9CA3AF !important; text-transform: uppercase !important; letter-spacing: .5px !important; font-weight: 700 !important; font-family: inherit !important; }
        #dbch-root .dbch-since-value { font-size: 14px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; }
        #dbch-root .dbch-since-div { width: 1px; height: 32px; background: var(--border); }

        #dbch-root .dbch-month-select-wrap {
          display: flex !important;
          align-items: center !important;
          gap: 5px !important;
        }
        #dbch-root .dbch-month-select {
          -webkit-appearance: none !important;
          -moz-appearance: none !important;
          appearance: none !important;
          background: transparent !important;
          background-image: none !important;
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          border-radius: 0 !important;
          padding: 0 !important;
          margin: 0 !important;
          font-size: 12.5px !important;
          font-weight: 600 !important;
          /* ⚠️ `1.2`, NO `inherit`.
             `inherit` resolvía al 1.5 del cuerpo: una caja de línea de 18.75px
             para un texto de 12.5px, o sea ~6px de aire muerto repartido arriba
             y abajo del texto. Sumado al alto propio que Astra le da a un
             `<select>`, el mes quedaba flotando lejos del nombre — el `gap` de
             2px del bloque no tenía nada que ver. Medido el 7 sep 2026 en el
             banco del header.
             `height/min-height` van explícitos porque un `<select>` trae alto
             propio del navegador y del tema, y sin fijarlo el arreglo se ve
             aquí y no en la instalación con Astra. */
          line-height: 1.2 !important;
          height: auto !important;
          min-height: 0 !important;
          color: #6B7280 !important;
          font-family: inherit !important;
          cursor: pointer !important;
        }
        #dbch-root .dbch-month-select::-ms-expand { display: none; }
        #dbch-root .dbch-month-select-chevron { color: #9CA3AF !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-month-select:focus,
        #dbch-root .dbch-month-select:focus ~ .dbch-month-select-chevron { color: var(--accent) !important; }

        /* ── LIVE / HISTORICAL BADGES ── */
        #dbch-root .dbch-live-badge {
          display: inline-flex !important;
          align-items: center !important;
          gap: 4px !important;
          font-size: 9.5px !important;
          font-weight: 700 !important;
          letter-spacing: .3px !important;
          text-transform: uppercase !important;
          color: #6B7280 !important;
          background: rgba(107,114,128,.1) !important;
          border-radius: 20px !important;
          padding: 2px 8px !important;
          font-family: inherit !important;
          margin-left: 8px !important;
          white-space: nowrap;
        }
        #dbch-root .dbch-live-badge::before { content: '●'; font-size: 6px; color: #3AA377; }
        #dbch-root .dbch-live-badge-light {
          display: inline-flex !important;
          align-items: center !important;
          gap: 4px !important;
          font-size: 9.5px !important;
          font-weight: 700 !important;
          letter-spacing: .3px !important;
          text-transform: uppercase !important;
          color: rgba(255,255,255,.9) !important;
          background: rgba(255,255,255,.18) !important;
          border-radius: 20px !important;
          padding: 2px 8px !important;
          font-family: inherit !important;
          margin-left: 6px !important;
          white-space: nowrap;
        }
        #dbch-root .dbch-live-badge-light::before { content: '●'; font-size: 6px; color: #fff; }
        /* Distinto del "Estado actual" a propósito: este SÍ cambia con el selector de mes */
        #dbch-root .dbch-month-badge-light {
          display: inline-flex !important;
          align-items: center !important;
          font-size: 9.5px !important;
          font-weight: 700 !important;
          letter-spacing: .3px !important;
          color: rgba(255,255,255,.9) !important;
          background: rgba(255,255,255,.18) !important;
          border-radius: 20px !important;
          padding: 2px 8px !important;
          font-family: inherit !important;
          margin-left: 6px !important;
          white-space: nowrap;
        }

        /* ── SYNC (inline en el header desde el rediseño KATALYST) ── */
        #dbch-root .dbch-sync-dot {
          width: 9px; height: 9px;
          background: var(--green);
          border-radius: 50%;
          flex-shrink: 0;
          box-shadow: 0 0 7px rgba(58,163,119,.6);
          animation: dbch-pulse 2.5s infinite;
        }
        @keyframes dbch-pulse { 0%,100%{opacity:1;box-shadow:0 0 7px rgba(58,163,119,.6)}50%{opacity:.7;box-shadow:0 0 3px rgba(58,163,119,.3)} }
        #dbch-root .dbch-sync-label { font-size: 12.5px !important; font-weight: 500 !important; color: #0D1117 !important; font-family: inherit !important; }
        /* Fecha de última actualización en itálica, segunda línea (mockup) */
        #dbch-root .dbch-sync-time  { font-size: 11px !important; color: #9CA3AF !important; font-family: inherit !important; font-style: italic !important; padding-left: 16px !important; }
        /* Botón Actualizar — pill lima con texto tinta (mockup KATALYST) */

        /* ── KPI GRID ── */
        #dbch-root .dbch-kpi-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0,1fr));
          gap: 14px;
        }
        /* Tarjetas KPI — número protagonista arriba-izq, ícono arriba-der,
           etiqueta abajo. Colores del mockup KATALYST; la semántica de cada
           tarjeta (estado actual vs histórico por mes) NO cambia. */
        #dbch-root .dbch-kpi {
          border-radius: 20px;
          padding: 22px 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 18px;
          min-height: 150px;
          cursor: default;
          transition: transform .25s var(--ease), box-shadow .25s ease;
          color: #fff;
        }
        #dbch-root .dbch-kpi:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
        #dbch-root .dbch-kpi-dark   { background: linear-gradient(150deg,#565656,#3B3B3B); }
        #dbch-root .dbch-kpi-green  { background: linear-gradient(150deg,#4CC495,#3AA377); }
        #dbch-root .dbch-kpi-purple { background: linear-gradient(150deg,#9A55FF,#7E2FF2); }
        #dbch-root .dbch-kpi-red    { background: linear-gradient(150deg,#FF7A7A,#F55C5C); }
        #dbch-root .dbch-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        /* Ícono sin caja de fondo, trazo blanco flotando arriba-derecha (mockup) */
        #dbch-root .dbch-kpi-icon {
          background: transparent;
          border: none;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          flex-shrink: 0;
          opacity: .95;
        }
        #dbch-root .dbch-kpi-num   { font-size: 46px !important; font-weight: 700 !important; letter-spacing: -2px !important; line-height: 1 !important; color: #fff !important; font-family: inherit !important; }
        #dbch-root .dbch-kpi-label { font-size: 12.5px !important; color: rgba(255,255,255,.92) !important; font-weight: 400 !important; font-family: inherit !important; line-height: 1.4 !important; }

        /* ── OVERVIEW BOTTOM GRID — panel de tabs ancho + columna derecha fija.
           flex:1 + min-height:0 acotan la fila al espacio restante del viewport:
           el Overview completo se ve sin scroll de página, cada panel scrollea
           por dentro ── */
        #dbch-root .dbch-ov-bottom {
          display: grid;
          grid-template-columns: minmax(0,1fr) 360px;
          /* minmax(0,1fr) también en la fila: sin esto la fila crece con el
             contenido y el Overview deja de caber en el viewport */
          grid-template-rows: minmax(0,1fr);
          gap: 16px;
          flex: 1;
          min-height: 0;
          align-items: stretch;
        }
        /* En desktop el Overview ocupa exactamente la pantalla: los paneles
           scrollean por dentro (pedido explícito del rediseño). Con guarda de
           alto mínimo: en pantallas muy bajas volvemos al flujo normal en vez
           de recortar contenido con el overflow */
        @media(min-width:1025px) and (min-height:680px){
          /* Alineado con el alto interno de .dbch-main (100vh - márgenes).
             OJO: min-height:0 es obligatorio — la regla base de .dbch-section
             (min-height:100vh) le gana al height y deja 28px cortados abajo */
          #dbch-root #dbch-ov { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }

          /* Trabajo Activo también cabe completo en el viewport (feedback de
             David): el Sprint toma ~60% del alto restante y la fila cola +
             bloqueadas el resto, cada caja con su scroll interno */
          #dbch-root #dbch-tr { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }
          #dbch-root #dbch-tr .dbch-panel-full { flex: 1.5; min-height: 0; }
          #dbch-root #dbch-tr .dbch-trb { flex: 1; min-height: 0; grid-template-rows: minmax(0,1fr); }
          #dbch-root #dbch-tr .dbch-trb .dbch-panel { min-height: 0; }
          #dbch-root #dbch-tr .dbch-panel-scroll { flex: 1; min-height: 0; height: auto; max-height: none; }

          /* Entregables también cabe completo: la lista scrollea por dentro */
          #dbch-root #dbch-en { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }
          #dbch-root #dbch-en .dbch-en-panel { display: flex; flex-direction: column; min-height: 0; }
          #dbch-root #dbch-en .dbch-panel-scroll { flex: 1; min-height: 0; height: auto; max-height: none; }

          /* Creative Advisor a espacio completo: la columna de contexto y el
             chat estiran al viewport; el alto fijo base del chat se libera */
          #dbch-root #dbch-ai { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }
          #dbch-root #dbch-ai .dbch-chat-panel { height: auto !important; max-height: none !important; min-height: 0 !important; }

          /* Calendario a espacio completo (feedback de David): las filas del
             grid reparten TODO el alto disponible (celdas más cuadradas, sin
             vacío abajo) y el panel del día estira a la misma altura */
          #dbch-root #dbch-cal { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }
          #dbch-root #dbch-cal .dbch-panel-full { flex: 1; min-height: 0; display: flex; flex-direction: column; }
          #dbch-root #dbch-cal .dbch-cal-layout { flex: 1 !important; min-height: 0 !important; grid-template-rows: minmax(0,1fr) !important; align-items: stretch !important; }
          #dbch-root #dbch-cal .dbch-cal-maincol { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
          #dbch-root #dbch-cal #dbch-cal-body { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
          #dbch-root #dbch-cal .dbch-cal-grid { flex: 1 !important; min-height: 0 !important; grid-auto-rows: minmax(0,1fr) !important; }
          #dbch-root #dbch-cal .dbch-cal-day { min-height: 0 !important; overflow: hidden !important; }
          #dbch-root #dbch-cal .dbch-cal-legend { flex-shrink: 0 !important; }
          /* OJO: el display:flex va condicionado a .dbch-day-open — este
             selector tiene DOS ids y le gana a .dbch-hidden por especificidad;
             sin la condición, el panel se pintaba al cargar y al cerrarlo
             (bug reportado dos veces por David, v4.23.2) */
          #dbch-root #dbch-cal .dbch-cal-layout.dbch-day-open .dbch-day-side { display: flex !important; flex-direction: column !important; min-height: 0 !important; height: 100% !important; }
          #dbch-root #dbch-cal .dbch-day-list { flex: 1 !important; min-height: 0 !important; max-height: none !important; }
          /* ⚠️ …SALVO con el formulario inline abierto.
             `flex: 1` es lo que hace que la lista del día llegue hasta abajo, y
             está bien mientras la lista ES el contenido. Al abrir «Crear tarea»
             el formulario se monta debajo, y la lista —vacía en el día sin
             tareas— seguía estirándose y lo empujaba al fondo: quedaba un hueco
             muerto enorme entre el título y el primer campo (David, 7 sep 2026).
             Con el formulario abierto la lista mide lo que mide, y el formulario
             sube a donde se lee. */
          #dbch-root #dbch-cal .dbch-day-side:has(#dbch-day-reqhost:not(.dbch-hidden)) .dbch-day-list {
            flex: 0 1 auto !important;
          }
        }
        /* Encabezados de la tabla de tabs en una sola línea (mockup) */
        #dbch-root .dbch-tbl-ov th { white-space: nowrap !important; }
        #dbch-root .dbch-ov-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
        /* Una sola caja: gráfico arriba + actividad reciente con scroll interno.

           `flex: 1` es lo que la hace llegar HASTA ABAJO aunque haya pocos datos
           (reportado por David, 2 ago 2026: "se ve cortada abajo"). Sin él la
           caja mide lo que mide su contenido, y con un solo elemento en Actividad
           Reciente terminaba a media columna dejando un hueco gris debajo: eso se
           lee como una tarjeta recortada, no como espacio que sobra.

           La columna (.dbch-ov-right) SÍ estiraba; la caja de dentro no. El alto
           que gana se lo queda .dbch-act-scroll, que ya trae su propio flex:1 y
           su scroll, así que la lista larga sigue scrolleando por dentro. */
        #dbch-root .dbch-right-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
        #dbch-root .dbch-right-panel .dbch-chart-wrap { flex: 0 0 auto; height: 185px; min-height: 0; }
        #dbch-root .dbch-act-hdr { margin: 18px 0 10px !important; }
        #dbch-root .dbch-act-scroll { flex: 1 !important; min-height: 110px !important; max-height: none !important; }
        /* El panel de tabs también reparte su alto: la tabla scrollea por dentro */
        #dbch-root .dbch-tabs-panel { display: flex; flex-direction: column; min-height: 0; }
        #dbch-root .dbch-tabpane.active { flex: 1; min-height: 0; }
        #dbch-root .dbch-tabpane.active .dbch-panel-scroll { height: 100%; max-height: none; }

        /* Tabs del panel principal del Overview */
        #dbch-root .dbch-tabs-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
          margin-bottom: 16px;
        }
        #dbch-root .dbch-tabs {
          display: inline-flex;
          gap: 4px;
          background: var(--surface-3);
          border-radius: 22px;
          padding: 4px;
        }
        #dbch-root .dbch-tab {
          position: relative !important;
          border: none !important;
          background: transparent !important;
          color: #8A8A85 !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          font-family: inherit !important;
          padding: 8px 16px !important;
          border-radius: 18px !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
          white-space: nowrap !important;
          line-height: 1 !important;
        }
        #dbch-root .dbch-tab:hover { color: #0D1117 !important; }
        #dbch-root .dbch-tab.active {
          background: #FFFFFF !important;
          color: #0D1117 !important;
          font-weight: 600 !important;
          box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
        }
        /* Punto rojo en "Tareas por revisar" — la pelota está en tu cancha */
        #dbch-root .dbch-tab-dot {
          position: absolute !important;
          top: 5px !important;
          right: 7px !important;
          width: 7px !important;
          height: 7px !important;
          border-radius: 50% !important;
          background: #EF4444 !important;
          display: inline-block !important;
        }
        /* Visibilidad por clases (regla de oro del proyecto) */
        #dbch-root .dbch-tabpane { display: none !important; }
        #dbch-root .dbch-tabpane.active { display: block !important; }

        /* Botón fantasma "Revisar" en filas no revisables (mockup) */
        #dbch-root .dbch-revisar-ghost {
          display: inline-block !important;
          background: var(--surface-3) !important;
          color: #B8B8B2 !important;
          border-radius: 8px !important;
          padding: 6px 14px !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          white-space: nowrap !important;
          line-height: 1.4 !important;
        }
        /* Fila con pieza esperando tu revisión — tinte lima suave */
        #dbch-root .dbch-row-rev td { background: var(--tint) !important; }
        #dbch-root .dbch-row-rev:hover td { background: #F1F7D6 !important; }

        /* ── PANELS ── */
        #dbch-root .dbch-panel {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          padding: 20px 22px;
          box-shadow: var(--sh-sm);
          transition: box-shadow .2s ease;
          display: flex;
          flex-direction: column;
        }
        #dbch-root .dbch-panel:hover { box-shadow: var(--sh); }
        #dbch-root .dbch-panel-full { flex: 1; }

        /* ── CREATIVE ADVISOR (CHAT) ── */
        #dbch-root .dbch-chat-panel {
          position: relative !important;
          height: 620px !important;
          max-height: 70vh !important; max-height: 70dvh !important;
          padding: 0 !important;
          overflow: hidden !important;
          background: linear-gradient(180deg, rgba(var(--brand-rgb),.05), rgba(255,255,255,0) 220px) !important;
        }
        #dbch-root .dbch-chat-newconvo {
          position: absolute !important;
          top: 14px !important;
          right: 16px !important;
          z-index: 2 !important;
          display: flex !important;
          align-items: center !important;
          gap: 6px !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          color: #6B7280 !important;
          background: var(--surface) !important;
          border: 1px solid var(--border) !important;
          border-radius: 20px !important;
          padding: 6px 12px !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
        }
        #dbch-root .dbch-chat-newconvo:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
        #dbch-root .dbch-chat-messages {
          flex: 1 !important;
          overflow-y: auto !important;
          padding: 22px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 14px !important;
        }
        #dbch-root .dbch-chat-empty {
          margin: auto !important;
          max-width: 400px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          gap: 4px !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-chat-empty-icon {
          width: 52px !important;
          height: 52px !important;
          border-radius: 16px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          box-shadow: 0 8px 24px rgba(var(--brand-rgb),.4) !important;
          margin-bottom: 14px !important;
        }
        #dbch-root .dbch-chat-greeting {
          font-size: 19px !important;
          font-weight: 700 !important;
          color: #0D1117 !important;
          font-family: inherit !important;
          margin: 0 0 6px !important;
          letter-spacing: -.2px !important;
        }
        #dbch-root .dbch-chat-greeting-sub {
          font-size: 13.5px !important;
          color: #6B7280 !important;
          line-height: 1.55 !important;
          font-family: inherit !important;
          margin: 0 0 20px !important;
        }
        #dbch-root .dbch-chat-chips {
          display: flex !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          gap: 8px !important;
        }
        #dbch-root .dbch-chat-chip {
          font-size: 12.5px !important;
          font-weight: 500 !important;
          font-family: inherit !important;
          color: #374151 !important;
          background: var(--surface) !important;
          border: 1px solid var(--border) !important;
          border-radius: 20px !important;
          padding: 8px 14px !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
        }
        #dbch-root .dbch-chat-chip:hover {
          border-color: var(--accent) !important;
          color: var(--accent) !important;
          background: var(--accent-dim) !important;
        }
        #dbch-root .dbch-chat-msg {
          max-width: 78% !important;
          padding: 10px 15px !important;
          border-radius: 18px !important;
          font-size: 13.5px !important;
          line-height: 1.55 !important;
          font-family: inherit !important;
          word-break: break-word !important;
        }
        #dbch-root .dbch-chat-msg p { margin: 0 0 8px !important; }
        #dbch-root .dbch-chat-msg p:last-child { margin-bottom: 0 !important; }
        #dbch-root .dbch-chat-msg strong { font-weight: 700 !important; }
        #dbch-root .dbch-chat-msg ul { margin: 4px 0 8px !important; padding-left: 18px !important; }
        #dbch-root .dbch-chat-msg li { margin-bottom: 3px !important; }
        #dbch-root .dbch-chat-msg-user {
          align-self: flex-end !important;
          background: #1A1A1A !important;
          color: #fff !important;
          font-weight: 400 !important;
          border-bottom-right-radius: 5px !important;
        }
        #dbch-root .dbch-chat-msg-assistant {
          align-self: flex-start !important;
          background: var(--surface) !important;
          color: #0D1117 !important;
          border: 1px solid var(--border) !important;
          box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
          border-bottom-left-radius: 5px !important;
        }
        #dbch-root .dbch-chat-msg-error {
          align-self: flex-start !important;
          background: rgba(239,68,68,.08) !important;
          color: #EF4444 !important;
          border: 1px solid rgba(239,68,68,.2) !important;
        }

        /* Tareas pendientes de revisión dentro del recap semanal del Advisor —
           mismo botón "Revisar →" de la tabla de Trabajo Activo. */
        #dbch-root .dbch-chat-review-list {
          margin-top: 10px !important;
          padding-top: 10px !important;
          border-top: 1px solid var(--border) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
        }
        #dbch-root .dbch-chat-review-item {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 10px !important;
        }
        #dbch-root .dbch-chat-review-name {
          font-size: 13px !important;
          font-weight: 500 !important;
          color: #0D1117 !important;
        }
        #dbch-root .dbch-chat-form {
          padding: 16px 18px !important;
          border-top: 1px solid var(--border) !important;
          background: var(--surface) !important;
          flex-shrink: 0 !important;
        }
        #dbch-root .dbch-chat-inputbar {
          display: flex !important;
          align-items: flex-end !important;
          gap: 8px !important;
          background: var(--surface-2) !important;
          border: 1px solid var(--border) !important;
          border-radius: 22px !important;
          padding: 6px 6px 6px 16px !important;
          transition: border-color .15s ease !important;
        }
        #dbch-root .dbch-chat-inputbar:focus-within { border-color: var(--accent) !important; }
        #dbch-root .dbch-chat-input {
          flex: 1 !important;
          resize: none !important;
          border: none !important;
          outline: none !important;
          background: transparent !important;
          padding: 8px 0 !important;
          font-size: 13.5px !important;
          font-family: inherit !important;
          color: #0D1117 !important;
          max-height: 120px !important;
          line-height: 1.5 !important;
        }
        #dbch-root .dbch-chat-send {
          flex-shrink: 0 !important;
          flex-grow: 0 !important;
          box-sizing: border-box !important;
          width: 34px !important;
          height: 34px !important;
          min-width: 34px !important;
          min-height: 34px !important;
          max-width: 34px !important;
          padding: 0 !important;
          margin: 0 !important;
          border-radius: 50% !important;
          border: none !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer !important;
          transition: opacity .15s ease, transform .15s ease !important;
        }
        #dbch-root .dbch-chat-send svg {
          display: block !important;
          width: 16px !important;
          height: 16px !important;
          stroke: currentColor !important;
          fill: none !important;
        }
        #dbch-root .dbch-chat-send:hover { opacity: .88 !important; transform: scale(1.04) !important; }
        #dbch-root .dbch-chat-send:disabled { opacity: .4 !important; cursor: default !important; transform: none !important; }
        #dbch-root .dbch-chat-typing { display: flex !important; gap: 4px !important; padding: 4px 0 !important; }
        #dbch-root .dbch-chat-typing span {
          width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF;
          animation: dbch-typing 1.1s infinite ease-in-out;
        }
        #dbch-root .dbch-chat-typing span:nth-child(2) { animation-delay: .15s; }
        #dbch-root .dbch-chat-typing span:nth-child(3) { animation-delay: .3s; }
        @keyframes dbch-typing { 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }
        #dbch-root .dbch-panel-hdr {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          margin-bottom: 16px;
          gap: 12px;
          flex-wrap: wrap;
          flex-shrink: 0;
        }
        /* Títulos de panel un 25% más grandes y pegados a su subtítulo
           (feedback de David) */
        #dbch-root .dbch-panel-title { font-size: 17px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; }
        #dbch-root .dbch-panel-sub   { font-size: 11.5px !important; color: #9CA3AF !important; margin: 1px 0 0 !important; padding: 0 !important; font-family: inherit !important; line-height: 1.4 !important; }
        #dbch-root .dbch-ver-todo    { font-size: 12px !important; color: var(--accent) !important; text-decoration: none !important; font-weight: 600 !important; white-space: nowrap !important; }
        #dbch-root .dbch-ver-todo:hover { opacity: .7 !important; }

        /* Chart */
        #dbch-root .dbch-chart-wrap { flex: 1; min-height: 150px; position: relative; }

        /* ── TABLES — !important to override Astra/Elementor ── */
        #dbch-root .dbch-tbl { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; border: none !important; }
        #dbch-root .dbch-tbl thead { border: none !important; }
        #dbch-root .dbch-tbl tbody { border: none !important; }
        #dbch-root .dbch-tbl tfoot { border: none !important; }
        #dbch-root .dbch-tbl th {
          font-size: 10.5px !important;
          font-weight: 700 !important;
          text-transform: uppercase !important;
          letter-spacing: .8px !important;
          color: #9CA3AF !important;
          padding: 0 8px 12px 0 !important;
          text-align: left !important;
          border: none !important;
          border-bottom: 1px solid #F3F4F6 !important;
          background: transparent !important;
          line-height: 1 !important;
        }
        #dbch-root .dbch-tbl td {
          padding: 13px 8px 13px 0 !important;
          border: none !important;
          vertical-align: middle !important;
          background: transparent !important;
        }
        #dbch-root .dbch-tbl tr:last-child td { border: none !important; }
        /* Hover en tinte lima (mockup), no gris */
        #dbch-root .dbch-tbl tr:hover td { background: var(--tint) !important; }
        #dbch-root .dbch-tbl-full th,
        #dbch-root .dbch-tbl-full td { padding-left: 4px !important; }

        #dbch-root .dbch-tn {
          display: block !important;
          font-size: 13.5px !important;
          font-weight: 600 !important;
          color: #0D1117 !important;
          margin-bottom: 3px !important;
          line-height: 1.3 !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-tt {
          display: block !important;
          font-size: 11px !important;
          color: #9CA3AF !important;
          font-weight: 400 !important;
          line-height: 1 !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-dc {
          font-size: 12px !important;
          color: #6B7280 !important;
          white-space: nowrap !important;
          font-family: inherit !important;
        }

        /* ── BADGES — match ClickUp colors exactly ── */
        #dbch-root .dbch-b {
          display: inline-flex !important;
          align-items: center !important;
          padding: 4px 10px !important;
          border-radius: 20px !important;
          font-size: 11px !important;
          font-weight: 600 !important;
          white-space: nowrap !important;
          line-height: 1.4 !important;
          font-family: inherit !important;
        }
        /* EN EJECUCIÓN → blue/purple like ClickUp */
        #dbch-root .dbch-b-run { background: rgba(82,67,170,.12) !important; color: #5243AA !important; }
        /* REVISIÓN DEL CLIENTE → ámbar (la pelota es del cliente — mismo código
           de color del badge del sidebar y el pipeline, y del mockup KATALYST) */
        #dbch-root .dbch-b-rev { background: rgba(245,158,11,.15) !important; color: #B45309 !important; }
        /* REVISIÓN INTERNA → verde suave (equipo trabajando — mockup KATALYST) */
        #dbch-root .dbch-b-ri  { background: rgba(68,183,136,.14) !important; color: #2E8B63 !important; }
        /* AJUSTES → orange like ClickUp */
        #dbch-root .dbch-b-adj { background: rgba(255,139,0,.12) !important; color: #E07B00 !important; }
        /* BLOQUEADO → red like ClickUp */
        #dbch-root .dbch-b-blk { background: rgba(239,68,68,.12) !important; color: #EF4444 !important; }
        /* PENDIENTE → gray */
        #dbch-root .dbch-b-q   { background: rgba(107,114,128,.1) !important; color: #6B7280 !important; }
        /* APROBADO → green like ClickUp */
        #dbch-root .dbch-b-ok  { background: rgba(58,163,119,.12) !important; color: #059669 !important; }

        /* ── INTERNAL SCROLL FOR ALL LIST PANELS ──
           Scrollbar delgada gris neutra (mockup) — nada de lima aquí */
        #dbch-root .dbch-scroll-body {
          overflow-y: auto;
          flex: 1;
          scrollbar-width: thin;
          scrollbar-color: #D9D9D2 transparent;
        }
        #dbch-root .dbch-scroll-body::-webkit-scrollbar { width: 6px; }
        #dbch-root .dbch-scroll-body::-webkit-scrollbar-track { background: transparent; }
        #dbch-root .dbch-scroll-body::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root .dbch-scroll-body::-webkit-scrollbar-thumb:hover { background: #C6C6BD; }

        /* Panel max-heights for scroll */
        #dbch-root .dbch-panel-scroll { max-height: 380px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D9D9D2 transparent; }
        #dbch-root .dbch-panel-scroll::-webkit-scrollbar { width: 6px; }
        #dbch-root .dbch-panel-scroll::-webkit-scrollbar-track { background: transparent; }
        #dbch-root .dbch-panel-scroll::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root .dbch-panel-scroll::-webkit-scrollbar-thumb:hover { background: #C6C6BD; }

        /* ── PRÓXIMAS ENTREGAS ── */
        #dbch-root .dbch-elist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1; }
        #dbch-root .dbch-eitem { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-radius: var(--r-sm); transition: background .12s; margin: 0; }
        #dbch-root .dbch-eitem:hover { background: var(--tint); }
        #dbch-root .dbch-edate { display: flex; flex-direction: column; align-items: center; width: 34px; flex-shrink: 0; }
        #dbch-root .dbch-eday  { font-size: 18px !important; font-weight: 800 !important; color: var(--accent) !important; letter-spacing: -1px !important; line-height: 1 !important; font-family: inherit !important; }
        #dbch-root .dbch-emon  { font-size: 9px !important; color: #9CA3AF !important; font-weight: 700 !important; letter-spacing: .5px !important; text-transform: uppercase !important; font-family: inherit !important; }
        #dbch-root .dbch-einfo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
        #dbch-root .dbch-ename { font-size: 13px !important; font-weight: 600 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.3 !important; }
        #dbch-root .dbch-etype { font-size: 11px !important; color: #9CA3AF !important; font-family: inherit !important; }

        /* ── ACTIVITY ── */
        #dbch-root .dbch-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
        #dbch-root .dbch-aitem { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-radius: var(--r-sm); transition: background .12s; margin: 0; }
        #dbch-root .dbch-aitem:hover { background: var(--tint); }
        #dbch-root .dbch-adot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
        #dbch-root .dbch-adot-g { background: #3AA377; box-shadow: 0 0 5px rgba(58,163,119,.5); }
        #dbch-root .dbch-adot-t { background: var(--accent); box-shadow: 0 0 5px rgba(var(--brand-rgb),.5); }
        #dbch-root .dbch-adot-b { background: #3B82F6; box-shadow: 0 0 5px rgba(59,130,246,.5); }
        #dbch-root .dbch-adot-a { background: #F59E0B; box-shadow: 0 0 5px rgba(245,158,11,.5); }
        #dbch-root .dbch-abody { display: flex; flex-direction: column; gap: 1px; flex: 1; }
        #dbch-root .dbch-atxt  { font-size: 12.5px !important; font-weight: 500 !important; color: #0D1117 !important; line-height: 1.4 !important; font-family: inherit !important; }
        #dbch-root .dbch-atime { font-size: 10.5px !important; color: #9CA3AF !important; font-family: inherit !important; }

        /* ── TRABAJO BOTTOM ── */
        #dbch-root .dbch-trb { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; flex: 1; }

        /* ── VER ENTREGABLE ── */
        #dbch-root .dbch-vb {
          background: #F7F8FA !important;
          border: 1px solid #E5E7EB !important;
          border-radius: 6px !important;
          padding: 6px 14px !important;
          font-size: 11.5px !important;
          font-weight: 500 !important;
          font-family: inherit !important;
          color: #0D1117 !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
          text-decoration: none !important;
          display: inline-block !important;
          white-space: nowrap !important;
          line-height: 1.4 !important;
        }
        #dbch-root .dbch-vb:hover {
          background: var(--accent) !important;
          color: #fff !important;
          border-color: var(--accent) !important;
        }

        /* ── LOADING / ERROR ── */
        #dbch-root .dbch-loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: fixed;
          top: 0; left: 0;
          width: 100vw; height: 100vh; height: 100dvh;
          background: #F4F4F2;
          z-index: 99998;
          gap: 16px;
          color: var(--text-2);
          font-family: inherit;
        }
        #dbch-root .dbch-spinner {
          width: 36px; height: 36px;
          border: 3px solid var(--border);
          border-top-color: var(--accent);
          border-radius: 50%;
          animation: dbch-spin .8s linear infinite;
        }
        @keyframes dbch-spin { to { transform: rotate(360deg); } }
        #dbch-root .dbch-empty { color: var(--text-3); font-size: 12px; padding: 16px 0; text-align: center; }

        /* ── FADE IN ── */
        #dbch-root .dbch-fi { animation: dbch-fi .45s ease both; }
        #dbch-root .dbch-fi-1 { animation: dbch-fi .45s .06s ease both; }
        #dbch-root .dbch-fi-2 { animation: dbch-fi .45s .12s ease both; }
        #dbch-root .dbch-fi-3 { animation: dbch-fi .45s .18s ease both; }
        @keyframes dbch-fi { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }

        /* ── REVISAR BUTTON — lima de marca con texto tinta ── */
        #dbch-root .dbch-revisar-btn {
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          border: none !important;
          border-radius: 8px !important;
          padding: 6px 14px !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
          white-space: nowrap !important;
          box-shadow: 0 1px 8px rgba(var(--brand-rgb),.4) !important;
        }
        #dbch-root .dbch-revisar-btn:hover {
          background: var(--lime-hover) !important;
          transform: scale(1.03) !important;
        }

        /* ── MODAL OVERLAY ── */
        #dbch-root .dbch-modal-overlay {
          position: fixed !important;
          top: 0 !important; left: 0 !important;
          width: 100vw !important; height: 100vh !important; height: 100dvh !important;
          background: rgba(13,17,23,.72) !important;
          z-index: 999999 !important;
          display: none !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 20px !important;
        }
        /* Sin backdrop-filter a propósito: el blur obligaba al navegador a
           recalcular el fondo completo en cada frame de scroll del modal —
           el aislamiento con contain/will-change no alcanzó a resolverlo en
           el modal largo de "Nueva solicitud", así que se quita del todo y
           se compensa el contraste oscureciendo un poco más el overlay. */
        #dbch-root .dbch-modal-overlay.dbch-open {
          display: flex !important;
          animation: dbch-fade-in .2s ease !important;
        }
        @keyframes dbch-fade-in { from{opacity:0} to{opacity:1} }

        #dbch-root .dbch-modal {
          background: #fff !important;
          border-radius: 16px !important;
          padding: 28px !important;
          width: 100% !important;
          max-width: 440px !important;
          max-height: 90vh !important; max-height: 90dvh !important;
          overflow-y: auto !important;
          position: relative !important;
          box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
          animation: dbch-modal-in .25s cubic-bezier(.22,.68,0,1.2) !important;
          /* Aísla el repintado del scroll interno al propio modal en vez de
             que se recalcule junto con el overlay/blur de fondo. */
          contain: layout paint !important;
          transform: translateZ(0) !important;
        }
        @keyframes dbch-modal-in { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

        #dbch-root .dbch-modal-close {
          position: absolute !important;
          top: 16px !important; right: 16px !important;
          background: #F7F8FA !important;
          border: none !important;
          /* Candados de tamaño (min/max + padding 0) — sin ellos Astra mete su
             padding/min-width a los <button> y el círculo se estira a óvalo.
             Mismo blindaje que ya necesitó .dbch-chat-send. */
          width: 28px !important; height: 28px !important;
          min-width: 28px !important; max-width: 28px !important;
          min-height: 28px !important; max-height: 28px !important;
          padding: 0 !important;
          margin: 0 !important;
          line-height: 1 !important;
          box-sizing: border-box !important;
          flex-shrink: 0 !important;
          border-radius: 50% !important;
          cursor: pointer !important;
          font-size: 13px !important;
          color: #6B7280 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        #dbch-root .dbch-modal-close:hover { background: #EFF1F5 !important; color: #0D1117 !important; }

        #dbch-root .dbch-modal-header { margin-bottom: 18px !important; padding-right: 30px !important; }
        #dbch-root .dbch-modal-title { font-size: 18px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.3 !important; }
        #dbch-root .dbch-modal-sub { font-size: 12.5px !important; color: #9CA3AF !important; margin-top: 4px !important; font-family: inherit !important; }

        #dbch-root .dbch-modal-preview { margin-bottom: 22px !important; }
        #dbch-root .dbch-modal-link-btn {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          width: 100% !important;
          padding: 14px !important;
          background: #F7F8FA !important;
          border: 1.5px dashed #E5E7EB !important;
          border-radius: 10px !important;
          color: #0D1117 !important;
          text-decoration: none !important;
          font-size: 13.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          transition: all .15s ease !important;
        }
        #dbch-root .dbch-modal-link-btn:hover { border-color: var(--accent) !important; background: rgba(var(--brand-rgb),.06) !important; color: var(--accent) !important; }

        #dbch-root .dbch-modal-question { font-size: 13.5px !important; font-weight: 600 !important; color: #0D1117 !important; margin-bottom: 14px !important; font-family: inherit !important; }

        #dbch-root .dbch-modal-actions { display: flex !important; gap: 10px !important; }
        #dbch-root .dbch-btn-approve, #dbch-root .dbch-btn-adjust, #dbch-root .dbch-btn-cancel {
          flex: 1 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 7px !important;
          padding: 11px !important;
          border-radius: 9px !important;
          font-size: 13px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          border: none !important;
          transition: all .15s ease !important;
        }
        /* Acción primaria de modales en lima KATALYST con texto tinta
           (feedback de David sobre el popup del resumen por correo) */
        #dbch-root .dbch-btn-approve { background: var(--lime) !important; color: var(--on-brand) !important; box-shadow: 0 1px 10px rgba(var(--brand-rgb),.4) !important; }
        #dbch-root .dbch-btn-approve:hover { background: var(--lime-hover) !important; transform: translateY(-1px) !important; }
        #dbch-root .dbch-btn-approve svg { stroke: var(--ink) !important; }
        #dbch-root .dbch-btn-adjust { background: #F59E0B !important; color: #fff !important; }
        #dbch-root .dbch-btn-adjust:hover { background: #d97706 !important; transform: translateY(-1px) !important; }
        #dbch-root .dbch-btn-cancel { background: #F7F8FA !important; color: #6B7280 !important; flex: 0 0 auto !important; padding: 11px 16px !important; }
        #dbch-root .dbch-btn-cancel:hover { background: #EFF1F5 !important; }
        /* Acción destructiva de modales (bloquear/eliminar), v4.29.0. Bloquear
           = ámbar (mismo código "la pelota es del cliente"); eliminar = rojo. */
        #dbch-root .dbch-btn-danger { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 11px !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer !important; border: none !important; transition: all .15s ease !important; background: #F59E0B !important; color: #fff !important; }
        #dbch-root .dbch-btn-danger:hover { background: #d97706 !important; transform: translateY(-1px) !important; }
        #dbch-root .dbch-btn-danger.dbch-btn-danger-red { background: #EF4444 !important; }
        #dbch-root .dbch-btn-danger.dbch-btn-danger-red:hover { background: #DC2626 !important; }
        /* Nombre de la pieza dentro del modal de acción */
        #dbch-root .dbch-action-piece { margin: 0 0 12px !important; padding: 10px 12px !important; background: #F7F8FA !important; border-radius: 9px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #0D1117 !important; font-family: inherit !important; }

        /* Botón Bloquear en las tarjetas de pieza activa (Trabajo Activo) —
           texto ámbar suave, discreto; se enciende en hover */
        #dbch-root .dbch-block-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 6px 11px !important; border-radius: 8px !important; border: 1px solid #F3D08A !important; background: #FFFBF2 !important; color: #B45309 !important; font-size: 12px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer !important; transition: all .15s ease !important; white-space: nowrap !important; }
        #dbch-root .dbch-block-btn:hover { background: #FEF3E2 !important; border-color: #F59E0B !important; }
        #dbch-root .dbch-block-btn svg { width: 13px !important; height: 13px !important; stroke: currentColor !important; flex-shrink: 0 !important; }
        /* Botón Eliminar en filas de cola — ícono papelera, gris que vira a rojo */
        /* OJO: padding:0 explícito — Astra pone padding en todos los button y
           sin esto el contenido queda de 4px (32 - 14×2) y el ícono se aplasta
           invisible (mismo fix que ya necesitaron ask-btn/campana/thread-send) */
        #dbch-root .dbch-del-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; box-sizing: border-box !important; padding: 0 !important; line-height: 1 !important; border-radius: 8px !important; border: none !important; background: transparent !important; color: #9CA3AF !important; cursor: pointer !important; transition: all .15s ease !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-del-btn:hover { background: #FEECEC !important; color: #EF4444 !important; }
        #dbch-root .dbch-del-btn svg { display: block !important; width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; }

        /* ── Modal "Detalle de la tarea" (v4.32.0) ──
           Filas de cola/bloqueadas/Overview clicables → esta ficha con los
           datos y las acciones según el estado. Las tarjetas del Sprint no
           lo usan: su pipeline inline ya es el detalle. */
        /* La fila clicable. El cursor solo se ve con el ratón encima: al abrir
           Entregables a la tarjeta (8 sep 2026) hacía falta que la fila DIJERA
           que se abre, y en una tabla de piezas terminadas —donde antes lo
           único vivo era el enlace del entregable— nadie lo intentaría por su
           cuenta. Un tinte al pasar por encima es la señal, y es de marca:
           `--tint` la reimprime cada agencia con su color. */
        #dbch-root .dbch-clickrow { cursor: pointer !important; }
        /* La tarjeta del Sprint también se abre desde el 8 sep 2026. Su tinte
           al pasar por encima es más tenue que el de una fila: la tarjeta ya
           tiene fondo propio y el de «Tu revisión» no se puede pisar. */
        #dbch-root .dbch-piece.dbch-clickrow:hover { border-color: var(--tint-border) !important; }

        /* EL CHIP DE «SIN LEER». Lo que quedó de la burbuja 💬 cuando se retiró
           la ventana de conversación aparte (8 sep 2026): el aviso sí hacía
           falta, el botón no. Va pegado al nombre de la pieza, en rojo, y solo
           existe cuando hay respuestas del equipo sin leer.

           Rojo fijo y no de marca, a propósito: es una alerta, y una alerta que
           cambia de color con cada agencia deja de leerse como alerta. Mismo
           criterio que el badge del sidebar. */
        #dbch-root .dbch-unread-chip {
          display: inline-flex !important; align-items: center !important; gap: 3px !important;
          margin-left: 7px !important; padding: 1px 6px 1px 5px !important;
          border-radius: 8px !important; background: #EF4444 !important; color: #fff !important;
          font-size: 10px !important; font-weight: 700 !important; font-family: inherit !important;
          line-height: 1.5 !important; vertical-align: middle !important;
        }
        #dbch-root .dbch-unread-chip svg {
          display: block !important; width: 10px !important; height: 10px !important;
          stroke: currentColor !important; fill: none !important;
        }

        /* LA FICHA DE LA SOLICITUD, DENTRO DE LA TARJETA (8 sep 2026).
           `.dbch-pd` traía `max-height: 40vh` y scroll propio porque vivía en un
           modal de alto limitado donde un bloque suelto se recortaba por abajo.
           Aquí la columna de contenido YA scrollea: un scroll dentro de otro
           obliga al cliente a acertar con el puntero para leer sus propios
           pasos. Se sueltan los dos. */
        #dbch-root #dbch-detail-pd {
          max-height: none !important; overflow: visible !important;
          margin: 0 0 18px !important;
        }
        #dbch-root tr.dbch-clickrow:hover > td { background: var(--tint) !important; }
        #dbch-root .dbch-day-item.dbch-clickrow:hover { background: var(--tint) !important; }
        #dbch-root .dbch-detail-modal { max-width: 420px !important; }
        #dbch-root .dbch-detail-type { margin: 2px 0 0 !important; font-size: 12.5px !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-detail-meta { margin: 14px 0 6px !important; padding: 12px 14px !important; background: #F7F8FA !important; border-radius: 10px !important; }
        #dbch-root .dbch-detail-dates { display: flex !important; gap: 26px !important; margin-top: 10px !important; }
        #dbch-root .dbch-detail-dates > div { display: flex !important; flex-direction: column !important; gap: 1px !important; }
        #dbch-root .dbch-detail-lbl { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-detail-dates span:not(.dbch-detail-lbl) { font-size: 13px !important; color: #0D1117 !important; font-family: inherit !important; }
        #dbch-root .dbch-detail-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 14px !important; }
        /* En el detalle, la papelera habla: mismo lenguaje del botón Bloquear pero en rojo suave */
        #dbch-root .dbch-detail-actions .dbch-del-btn { width: auto !important; height: auto !important; gap: 5px !important; padding: 6px 11px !important; border: 1px solid #F5C6C2 !important; background: #FFF7F6 !important; color: #C0443A !important; font-size: 12px !important; font-weight: 600 !important; font-family: inherit !important; white-space: nowrap !important; }
        #dbch-root .dbch-detail-actions .dbch-del-btn:hover { background: #FEECEC !important; border-color: #EF4444 !important; color: #DC2626 !important; }
        #dbch-root .dbch-detail-actions .dbch-del-btn svg { width: 13px !important; height: 13px !important; }
        /* Pista bajo el campo de fecha de Nueva solicitud */
        #dbch-root .dbch-req-hint { margin: 6px 0 0 !important; font-size: 11.5px !important; color: #9CA3AF !important; font-family: inherit !important; line-height: 1.4 !important; }

        #dbch-root .dbch-modal-textarea {
          width: 100% !important;
          min-height: 100px !important;
          padding: 12px !important;
          border: 1.5px solid #E5E7EB !important;
          border-radius: 10px !important;
          font-size: 13.5px !important;
          font-family: inherit !important;
          color: #0D1117 !important;
          resize: vertical !important;
          margin-bottom: 14px !important;
          outline: none !important;
        }
        #dbch-root .dbch-modal-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12) !important; }

        /* Hidden utility - beats any display:flex !important */
        #dbch-root .dbch-hidden { display: none !important; }

        #dbch-root .dbch-modal-loading {
          flex-direction: column !important;
          align-items: center !important;
          gap: 12px !important;
          padding: 20px 0 !important;
          color: #6B7280 !important;
          font-size: 13px !important;
          font-family: inherit !important;
        }
        #dbch-root .dbch-modal-loading.dbch-visible { display: flex !important; }

        #dbch-root .dbch-modal-success {
          flex-direction: column !important;
          align-items: center !important;
          gap: 12px !important;
          padding: 20px 0 !important;
          text-align: center !important;
        }
        #dbch-root .dbch-modal-success.dbch-visible { display: flex !important; }
        #dbch-root .dbch-modal-success p { font-size: 14.5px !important; font-weight: 600 !important; color: #0D1117 !important; font-family: inherit !important; }

        /* ── MICRO-CELEBRACIÓN AL APROBAR ──
           Estructura compartida con "ajustes enviados" (mismo #dbch-modal-success),
           pero la animación de rebote/dibujo/chispas solo corre si el JS agrega
           la clase .dbch-celebrate — para "ajustes enviados" el check se queda
           quieto, porque no es un momento de celebración. */
        #dbch-root .dbch-celebrate-stage { position: relative !important; width: 64px !important; height: 64px !important; margin: 0 auto !important; }
        #dbch-root .dbch-check-circle {
          width: 64px !important; height: 64px !important;
          border-radius: 50% !important;
          background: rgba(58,163,119,.12) !important;
          display: flex !important; align-items: center !important; justify-content: center !important;
        }
        #dbch-root .dbch-spark-svg { position: absolute !important; top: -38px !important; left: -38px !important; pointer-events: none !important; }
        /* Sin !important a propósito en opacity — una animación nunca puede
           mover una propiedad que esté fijada con !important en otra regla,
           así que este valor base se deja "normal" para que el keyframe
           realmente pueda animarlo. Selector ya suficientemente específico
           (#dbch-root .dbch-spark) para no chocar con el tema. */
        #dbch-root .dbch-spark { opacity: 0; }
        #dbch-root .dbch-spark:nth-child(odd)  { fill: var(--accent) !important; }
        #dbch-root .dbch-spark:nth-child(even) { fill: #3AA377 !important; }
        /* stroke-dashoffset sin !important — mismo motivo que .dbch-spark
           arriba, el keyframe dbch-draw necesita poder moverlo. */
        #dbch-root .dbch-check-path { stroke-dasharray: 30 !important; stroke-dashoffset: 0; }

        #dbch-root .dbch-modal-success.dbch-celebrate .dbch-check-circle { animation: dbch-pop .5s cubic-bezier(.22,.68,0,1.4) both !important; }
        #dbch-root .dbch-modal-success.dbch-celebrate .dbch-check-path { stroke-dashoffset: 30; animation: dbch-draw .4s .25s ease forwards !important; }
        #dbch-root .dbch-modal-success.dbch-celebrate .dbch-spark { animation: dbch-spark-fly .6s .3s ease-out forwards !important; transform-origin: 70px 70px !important; }
        @keyframes dbch-pop { 0%{transform:scale(.3);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1);opacity:1} }
        @keyframes dbch-draw { to{stroke-dashoffset:0} }
        @keyframes dbch-spark-fly { 0%{opacity:0;transform:scale(.4) translate(0,0)} 40%{opacity:1} 100%{opacity:0;transform:scale(1) translate(var(--dx,0),var(--dy,0))} }
        #dbch-root .dbch-spark:nth-child(1){ --dx: 0px;   --dy: -14px; }
        #dbch-root .dbch-spark:nth-child(2){ --dx: 14px;  --dy: -8px;  }
        #dbch-root .dbch-spark:nth-child(3){ --dx: 14px;  --dy: 10px;  }
        #dbch-root .dbch-spark:nth-child(4){ --dx: 0px;   --dy: 14px;  }
        #dbch-root .dbch-spark:nth-child(5){ --dx: -14px; --dy: 10px;  }
        #dbch-root .dbch-spark:nth-child(6){ --dx: -14px; --dy: -8px;  }


        /* ── MODAL "NUEVA SOLICITUD" ── */
        #dbch-root .dbch-modal-lg { max-width: 560px !important; }

        #dbch-root .dbch-req-section-hdr {
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          margin: 20px 0 12px !important;
          color: var(--accent) !important;
        }
        #dbch-root .dbch-req-section-hdr:first-of-type { margin-top: 4px !important; }
        #dbch-root .dbch-req-section-hdr span {
          font-size: 12px !important;
          font-weight: 700 !important;
          color: #0D1117 !important;
          text-transform: uppercase !important;
          letter-spacing: .4px !important;
        }

        #dbch-root .dbch-req-field { margin-bottom: 14px !important; }
        #dbch-root .dbch-req-label {
          display: block !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          color: #6B7280 !important;
          text-transform: uppercase !important;
          letter-spacing: .4px !important;
          margin-bottom: 6px !important;
        }
        #dbch-root .dbch-req-optional { text-transform: none !important; font-weight: 400 !important; }

        #dbch-root .dbch-req-input,
        #dbch-root .dbch-req-textarea,
        #dbch-root .dbch-req-select {
          width: 100% !important;
          padding: 11px 12px !important;
          border: 1px solid #E5E7EB !important;
          border-radius: 10px !important;
          background: #F7F8FA !important;
          font-size: 13.5px !important;
          font-family: inherit !important;
          color: #0D1117 !important;
          box-sizing: border-box !important;
          outline: none !important;
        }
        #dbch-root .dbch-req-textarea { resize: vertical !important; min-height: 60px !important; }
        #dbch-root .dbch-req-input:focus,
        #dbch-root .dbch-req-textarea:focus,
        #dbch-root .dbch-req-select:focus {
          border-color: var(--accent) !important;
          box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12) !important;
        }
        /* El input de fecha en iOS ignora el width mientras conserve su
           appearance nativa — salía más ancho que los demás campos del form
           (feedback de David en su celular). Sin appearance, obedece. */
        #dbch-root input[type="date"].dbch-req-input {
          -webkit-appearance: none !important;
          appearance: none !important;
          display: block !important;
          width: 100% !important;
          max-width: 100% !important;
          min-height: 42px !important;
        }

        #dbch-root .dbch-req-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
        #dbch-root .dbch-req-chip {
          padding: 6px 12px !important;
          border-radius: 20px !important;
          border: 1px solid #E5E7EB !important;
          background: #fff !important;
          color: #6B7280 !important;
          font-size: 12.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          transition: all .15s ease !important;
        }
        #dbch-root .dbch-req-chip.active {
          border-color: var(--accent) !important;
          background: var(--accent-dim) !important;
          color: #4A5D00 !important;
        }

        #dbch-root .dbch-req-dropzone {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 4px !important;
          border: 1.5px dashed #E5E7EB !important;
          border-radius: 10px !important;
          padding: 20px !important;
          text-align: center !important;
          cursor: pointer !important;
          color: var(--accent) !important;
          transition: border-color .15s ease !important;
        }
        #dbch-root .dbch-req-dropzone:hover,
        #dbch-root .dbch-req-dropzone.dbch-req-dragover { border-color: var(--accent) !important; }
        #dbch-root .dbch-req-drop-text { font-size: 13px !important; color: #0D1117 !important; font-weight: 500 !important; }
        #dbch-root .dbch-req-drop-hint { font-size: 11.5px !important; color: #9CA3AF !important; }

        #dbch-root .dbch-req-file-list { margin-top: 8px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
        #dbch-root .dbch-req-file-item {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 8px !important;
          padding: 8px 10px !important;
          background: #F7F8FA !important;
          border-radius: 8px !important;
          font-size: 12.5px !important;
          color: #374151 !important;
        }
        #dbch-root .dbch-req-file-remove {
          background: none !important;
          border: none !important;
          color: #9CA3AF !important;
          cursor: pointer !important;
          font-size: 15px !important;
          line-height: 1 !important;
          padding: 0 2px !important;
        }
        #dbch-root .dbch-req-file-remove:hover { color: #EF4444 !important; }

        #dbch-root .dbch-req-error {
          background: rgba(239,68,68,.08) !important;
          border: 1px solid rgba(239,68,68,.2) !important;
          color: #B91C1C !important;
          border-radius: 8px !important;
          padding: 10px 12px !important;
          font-size: 12.5px !important;
          margin: 8px 0 14px !important;
        }

        #dbch-root .dbch-submit-btn-full {
          width: 100% !important;
          padding: 13px !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          border: none !important;
          border-radius: 10px !important;
          font-size: 14px !important;
          font-weight: 700 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          letter-spacing: .2px !important;
          margin-top: 6px !important;
        }
        #dbch-root .dbch-submit-btn-full:disabled { opacity: .6 !important; cursor: not-allowed !important; }

        #dbch-root .dbch-req-success {
          display: none !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 6px !important;
          padding: 20px 0 4px !important;
          text-align: center !important;
        }
        #dbch-root .dbch-req-success.dbch-visible { display: flex !important; }
        #dbch-root .dbch-req-success-title { font-size: 18px !important; font-weight: 800 !important; color: #0D1117 !important; margin: 8px 0 0 !important; }
        #dbch-root .dbch-req-success-body { font-size: 13.5px !important; color: #6B7280 !important; line-height: 1.6 !important; margin: 0 !important; max-width: 380px !important; }
        #dbch-root .dbch-req-success .dbch-modal-actions { margin-top: 16px !important; width: 100% !important; }

        /* ── RESPONSIVE ── */

        /* ── Paso de calificación al aprobar (estrellas obligatorias) ──
           Los colores van con !important (guerra con Astra), pero el
           transform del hover no lo necesita — así la transición funciona
           sin pelear con la regla de animaciones vs !important. */
        #dbch-root .dbch-rate-stars { text-align: center !important; margin: 2px 0 12px !important; }
        #dbch-root .dbch-star { background: none !important; border: none !important; cursor: pointer !important; font-size: 32px !important; line-height: 1 !important; color: #E5E7EB !important; padding: 2px 5px !important; transition: transform .15s ease, color .15s ease; }
        #dbch-root .dbch-star:hover { transform: scale(1.15); }
        #dbch-root .dbch-star.dbch-star-on { color: #F59E0B !important; }

        /* ── Pipeline visual de etapas — rediseño KATALYST fase 3 ──
           La etapa actual es una PILL con la etiqueta dentro (lima = equipo,
           ámbar = "Tu revisión"); hechas = check oliva, futuras = círculo gris.
           Mismo markup en la tarjeta de pieza y en el modal de revisión. */
        #dbch-root .dbch-pf { display: flex !important; align-items: flex-start !important; margin: 14px 0 4px !important; }
        #dbch-root .dbch-pf-step { display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 64px !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-pf-cur { display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 100px !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-pf-pill {
          display: inline-flex !important;
          align-items: center !important;
          gap: 5px !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          border-radius: 20px !important;
          padding: 5px 13px !important;
          font-size: 11px !important;
          font-weight: 700 !important;
          white-space: nowrap !important;
          font-family: inherit !important;
          box-shadow: 0 0 14px rgba(var(--brand-rgb),.35) !important;
        }
        #dbch-root .dbch-pf-pill-a { background: #F7C948 !important; box-shadow: 0 0 14px rgba(247,201,72,.4) !important; }
        /* Conectores: alineados al centro de los puntos (22px) / pill (26px) */
        #dbch-root .dbch-pfl { flex: 1 !important; height: 2px !important; margin-top: 11px !important; min-width: 14px !important; }
        #dbch-root .dbch-pfl-done { background: var(--accent) !important; }
        #dbch-root .dbch-pfl-todo { background: #E5E5DE !important; }
        #dbch-root .dbch-pfl-dash-t { height: 0 !important; border-top: 2px dashed var(--lime) !important; background: transparent !important; }
        #dbch-root .dbch-pfl-dash-a { height: 0 !important; border-top: 2px dashed #F59E0B !important; background: transparent !important; }
        #dbch-root .dbch-pfn { width: 22px !important; height: 22px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; flex-shrink: 0 !important; font-family: inherit !important; font-size: 10.5px !important; }
        #dbch-root .dbch-pfn-done { background: var(--accent) !important; color: #fff !important; }
        #dbch-root .dbch-pfn-todo { background: #F4F4F2 !important; border: 1.5px solid #E5E5DE !important; color: #C4CBD4 !important; }
        #dbch-root .dbch-pf-lbl { margin: 5px 0 0 !important; font-size: 10px !important; line-height: 1.25 !important; font-family: inherit !important; text-align: center !important; }
        #dbch-root .dbch-pflb-done { color: #6B7280 !important; }
        #dbch-root .dbch-pflb-todo { color: #C4CBD4 !important; }
        #dbch-root .dbch-pf-date { margin: 2px 0 0 !important; font-size: 9.5px !important; color: #C4CBD4 !important; font-family: inherit !important; text-align: center !important; }

        /* ── Tarjetas-fila del Sprint (fase 3) ── */
        #dbch-root .dbch-piece {
          border: 1px solid #F0F0EA !important;
          border-radius: 14px !important;
          padding: 16px 18px !important;
          margin-top: 14px !important;
          transition: background .15s ease, border-color .15s ease !important;
        }
        #dbch-root .dbch-piece:first-child { margin-top: 4px !important; }
        #dbch-root .dbch-piece:hover { background: var(--tint) !important; border-color: var(--tint-border) !important; }
        #dbch-root .dbch-piece-rev { background: var(--tint) !important; border-color: var(--tint-border) !important; }
        #dbch-root .dbch-piece-rev:hover { background: #F1F7D6 !important; }
        #dbch-root .dbch-piece-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; }
        #dbch-root .dbch-piece-name { margin: 0 !important; font-size: 14.5px !important; font-weight: 600 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.3 !important; }
        #dbch-root .dbch-piece-type { margin: 1px 0 0 !important; font-size: 11px !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-piece-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }

        /* ── El reloj de la revisión (4 ago 2026) ──
           Bajo el pipeline, que es donde el cliente ya está mirando cuando se
           pregunta en qué va. Neutro los dos primeros días (informa), ámbar
           desde el 3, rojo desde el 7, y GRIS una vez revisada: ahí la línea es
           un registro y no un reclamo.

           Nombre comprobado contra el archivo antes de escribirlo: no existía
           ningún `.dbch-rev*` salvo `.dbch-piece-rev` y `.dbch-revisar-btn`,
           que son otra cosa. */
        #dbch-root .dbch-revclock {
          display: flex !important; align-items: center !important; gap: 6px !important;
          margin-top: 10px !important; padding: 6px 10px !important;
          border-radius: 8px !important; font-size: 11.5px !important;
          font-weight: 500 !important; font-family: inherit !important;
          color: #6B7280 !important; background: #F4F4F2 !important;
        }
        #dbch-root .dbch-revclock svg { display: block !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; }
        #dbch-root .dbch-revclock.dbch-rc-espera { color: #7A6A2E !important; background: #FAF7E4 !important; }
        #dbch-root .dbch-revclock.dbch-rc-medio  { color: #8A5A00 !important; background: #FDF0D5 !important; }
        #dbch-root .dbch-revclock.dbch-rc-alto   { color: #C0392B !important; background: #FDE5E3 !important; }

        /* ── Solicitudes en cola: punteado = expectativa (mismo lenguaje del
           calendario), con fecha deseada y tag "Por confirmar" ── */
        #dbch-root .dbch-qrow {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 10px !important;
          border: 1.5px dashed #D5D5CC !important;
          border-radius: 12px !important;
          padding: 12px 14px !important;
          margin-top: 10px !important;
          transition: background .15s ease, border-color .15s ease !important;
        }
        #dbch-root .dbch-qrow:hover { background: var(--tint) !important; border-color: var(--tint-border) !important; }
        #dbch-root .dbch-qinfo { min-width: 0 !important; flex: 1 !important; }
        #dbch-root .dbch-qright { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-qdate { font-size: 11px !important; color: #9CA3AF !important; font-style: italic !important; white-space: nowrap !important; font-family: inherit !important; }
        #dbch-root .dbch-qtag { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: #8A8A85 !important; background: #F4F4F2 !important; border-radius: 14px !important; padding: 3px 9px !important; white-space: nowrap !important; font-family: inherit !important; }

        /* ── ENTREGABLES (fase 4): carpetas por mes + buscador + calificación ── */
        #dbch-root .dbch-en-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
        /* Pestañas tipo carpeta: la activa es blanca y se funde con el panel */
        #dbch-root .dbch-folder-tabs { display: flex; gap: 5px; padding: 0 0 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 2; }
        #dbch-root .dbch-folder-tabs::-webkit-scrollbar { display: none; }
        #dbch-root .dbch-en-tab {
          border: none !important;
          background: #E9E9E3 !important;
          color: #8A8A85 !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          font-family: inherit !important;
          padding: 10px 20px 12px !important;
          border-radius: 14px 14px 0 0 !important;
          cursor: pointer !important;
          white-space: nowrap !important;
          line-height: 1 !important;
          transition: background .15s ease, color .15s ease !important;
          margin-bottom: -2px !important;
        }
        #dbch-root .dbch-en-tab:hover { color: #0D1117 !important; background: #F0F0EA !important; }
        #dbch-root .dbch-en-tab.active {
          background: #FFFFFF !important;
          color: #0D1117 !important;
          font-weight: 700 !important;
        }
        #dbch-root .dbch-en-panel { position: relative; z-index: 1; }
        #dbch-root .dbch-en-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; flex-shrink: 0; }
        #dbch-root .dbch-en-searchbox {
          display: flex; align-items: center; gap: 8px;
          background: var(--surface-3);
          border: 1px solid var(--border);
          border-radius: 20px;
          padding: 8px 14px;
          color: #9CA3AF;
          width: 260px;
          max-width: 100%;
        }
        #dbch-root .dbch-en-searchbox svg { flex-shrink: 0; }
        #dbch-root .dbch-en-searchbox input {
          flex: 1 !important;
          min-width: 0 !important;
          background: transparent !important;
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          padding: 0 !important;
          font-size: 12.5px !important;
          font-family: inherit !important;
          color: #0D1117 !important;
        }
        #dbch-root .dbch-en-searchbox input::placeholder { color: #B5B5B0; }
        #dbch-root .dbch-en-searchbox:focus-within { border-color: var(--accent-border); }
        /* Columnas de ancho FIJO en la tabla de Entregables — sin esto el ancho
           lo decide el nombre más largo de cada mes y las columnas "bailan" al
           cambiar de carpeta (feedback de David). El nombre absorbe el resto y
           se envuelve si hace falta. */
        #dbch-root #dbch-en .dbch-tbl { table-layout: fixed !important; }
        #dbch-root #dbch-en .dbch-tbl th:nth-child(2), #dbch-root #dbch-en .dbch-tbl td:nth-child(2) { width: 140px !important; }
        #dbch-root #dbch-en .dbch-tbl th:nth-child(3), #dbch-root #dbch-en .dbch-tbl td:nth-child(3) { width: 150px !important; }
        #dbch-root #dbch-en .dbch-tbl th:nth-child(4), #dbch-root #dbch-en .dbch-tbl td:nth-child(4) { width: 150px !important; }
        #dbch-root #dbch-en .dbch-tbl th:nth-child(5), #dbch-root #dbch-en .dbch-tbl td:nth-child(5) { width: 160px !important; }
        #dbch-root #dbch-en .dbch-tbl .dbch-tn { white-space: normal !important; }
        /* Estrellas de calificación (solo lectura) */
        #dbch-root .dbch-stars { font-size: 15px !important; letter-spacing: 1.5px !important; white-space: nowrap !important; }
        #dbch-root .dbch-star-fill { color: #F5B301 !important; }
        #dbch-root .dbch-star-off { color: #E3E3DC !important; }
        /* Botón "Ver entregable" en el verde vivo corporativo del logo (lima,
           con texto tinta — ajuste de David sobre la primera versión verde) */
        #dbch-root .dbch-vb-green {
          display: inline-block !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          border: none !important;
          border-radius: 8px !important;
          padding: 7px 15px !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          text-decoration: none !important;
          white-space: nowrap !important;
          line-height: 1.4 !important;
          box-shadow: 0 1px 8px rgba(var(--brand-rgb),.4) !important;
          transition: background .15s ease, transform .15s ease !important;
        }
        #dbch-root .dbch-vb-green:hover { background: var(--lime-hover) !important; transform: scale(1.03) !important; color: var(--on-brand) !important; }
        #dbch-root .dbch-vb-off { background: #E9E9E3 !important; color: #A5A5A0 !important; cursor: default !important; }
        #dbch-root .dbch-vb-off:hover { background: #E9E9E3 !important; transform: none !important; color: #A5A5A0 !important; }

        /* ── CREATIVE ADVISOR (fase 6): columna de contexto + chat ── */
        #dbch-root .dbch-ai-layout {
          display: grid;
          grid-template-columns: 300px minmax(0,1fr);
          gap: 16px;
          flex: 1;
          min-height: 0;
          align-items: stretch;
        }
        #dbch-root .dbch-ai-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
        /* Tarjeta del Advisor — mismo gradiente lima-oliva de la promo */
        #dbch-root .dbch-ai-hero {
          background: radial-gradient(130% 130% at 25% 0%, var(--promo-1) 0%, var(--promo-2) 45%, var(--promo-3) 100%);
          border-radius: 16px;
          padding: 22px 16px 18px;
          text-align: center;
          flex-shrink: 0;
        }
        #dbch-root .dbch-ai-photo {
          width: 76px; height: 76px;
          border-radius: 50%;
          object-fit: cover;
          display: block;
          margin: 0 auto 10px;
          border: 3px solid var(--lime);
          box-shadow: 0 6px 18px rgba(0,0,0,.35);
        }
        #dbch-root .dbch-ai-name { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; font-family: inherit !important; }
        #dbch-root .dbch-ai-carddesc { margin: 5px 0 0 !important; font-size: 11.5px !important; font-weight: 300 !important; color: rgba(255,255,255,.85) !important; line-height: 1.5 !important; font-family: inherit !important; }
        #dbch-root .dbch-ai-newconvo {
          margin-top: 13px !important;
          width: 100% !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 7px !important;
          background: rgba(255,255,255,.14) !important;
          border: 1px solid rgba(255,255,255,.3) !important;
          color: #fff !important;
          border-radius: 10px !important;
          padding: 8px 12px !important;
          font-size: 11.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          transition: background .15s ease !important;
        }
        #dbch-root .dbch-ai-newconvo:hover { background: rgba(255,255,255,.24) !important; }
        /* ⋯ del header del Advisor — solo existe visualmente en móvil, donde
           abre el popover con las preguntas pre-establecidas (estilo WhatsApp) */
        #dbch-root .dbch-ai-more {
          display: none;
          background: rgba(255,255,255,.14);
          border: 1px solid rgba(255,255,255,.3);
          color: #fff;
          border-radius: 50%;
          width: 34px;
          height: 34px;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          padding: 0;
        }
        /* Chips contextuales */
        #dbch-root .dbch-ai-suggest { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D9D9D2 transparent; }
        #dbch-root .dbch-ai-suggest::-webkit-scrollbar { width: 6px; }
        #dbch-root .dbch-ai-suggest::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root .dbch-ai-seclabel { margin: 0 0 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-ai-chips { display: flex !important; flex-direction: column !important; gap: 8px !important; }
        #dbch-root .dbch-ai-chip {
          display: flex !important;
          align-items: center !important;
          gap: 9px !important;
          background: #FBFBF9 !important;
          border: 1px solid #EDEDE7 !important;
          border-radius: 12px !important;
          padding: 10px 12px !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          color: #3A3A35 !important;
          cursor: pointer !important;
          font-family: inherit !important;
          text-align: left !important;
          width: 100% !important;
          transition: background .15s ease, border-color .15s ease !important;
          line-height: 1.35 !important;
          /* Astra pone white-space en botones — sin esto el texto no envuelve
             y se desborda por debajo del contador rojo */
          white-space: normal !important;
        }
        #dbch-root .dbch-ai-chip:hover { background: var(--tint) !important; border-color: var(--tint-border) !important; }
        #dbch-root .dbch-ai-chip-ico { width: 26px !important; height: 26px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 12px !important; }
        #dbch-root .dbch-aic-amber  { background: #FDF3DC !important; color: #B45309 !important; }
        #dbch-root .dbch-aic-green  { background: #EAF5EE !important; color: #2E8B63 !important; }
        #dbch-root .dbch-aic-lime   { background: #F1F7D6 !important; }
        #dbch-root .dbch-aic-violet { background: #F0EDFB !important; }
        #dbch-root .dbch-ai-chip-txt { flex: 1 !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: break-word !important; }
        #dbch-root .dbch-ai-chip-live { border-color: #F2D48A !important; background: #FFFBEF !important; }
        #dbch-root .dbch-ai-chip-live:hover { background: #FDF6E0 !important; }
        #dbch-root .dbch-ai-note { margin: 0 !important; font-size: 10.5px !important; font-weight: 300 !important; color: #A5A5A0 !important; line-height: 1.5 !important; text-align: center !important; padding: 0 8px !important; font-family: inherit !important; flex-shrink: 0 !important; }
        /* Burbujas con avatar */
        #dbch-root .dbch-chat-row { display: flex !important; align-items: flex-end !important; gap: 8px !important; max-width: 78% !important; }
        #dbch-root .dbch-row-a { align-self: flex-start !important; }
        #dbch-root .dbch-row-u { align-self: flex-end !important; flex-direction: row-reverse !important; }
        #dbch-root .dbch-chat-row .dbch-chat-msg { max-width: 100% !important; }
        #dbch-root .dbch-chat-ava { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50% !important; object-fit: cover !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
        #dbch-root .dbch-chat-ava-init { background: #1A1A1A !important; color: var(--lime) !important; font-size: 9.5px !important; font-weight: 700 !important; font-family: inherit !important; }
        /* Foto del Advisor en el estado vacío del chat */
        #dbch-root .dbch-chat-empty-photo { width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover !important; border: 3px solid var(--lime) !important; box-shadow: 0 8px 24px rgba(var(--brand-rgb),.35) !important; margin-bottom: 14px !important; }

        /* ── Bloqueadas: fila coral suave, "requiere acción" ── */
        #dbch-root .dbch-brow {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          background: #FDF1F0 !important;
          border: 1px solid #F8DBD8 !important;
          border-radius: 12px !important;
          padding: 12px 14px !important;
          margin-top: 10px !important;
        }
        #dbch-root .dbch-brow .dbch-piece-name { color: #7A2E27 !important; }
        #dbch-root .dbch-brow .dbch-piece-type { color: #C0655C !important; }
        #dbch-root .dbch-bico { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #F3C4BF !important; color: #E0574B !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-bico svg { display: block !important; }

        /* El mismo pipeline dentro del modal de revisión (440px): pasos más
           compactos y scroll horizontal de emergencia si hay 6 etapas (Ajustes) */
        /* `margin-bottom: 0`: el aire de abajo lo pone el `padding` de
           `.dbch-detail-pipeline`, que es quien lo maqueta como franja de ancho
           completo. Un margen aquí separaría la línea divisoria del contenido y
           dejaría la franja flotando. Va por ID, así que gana a la clase. */
        #dbch-root #dbch-detail-pipeline { overflow-x: auto !important; margin-bottom: 0 !important; scrollbar-width: thin; scrollbar-color: #D9D9D2 transparent; }
        #dbch-root #dbch-detail-pipeline::-webkit-scrollbar { height: 5px; }
        #dbch-root #dbch-detail-pipeline::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root #dbch-detail-pipeline .dbch-pf-step { min-width: 46px !important; }
        #dbch-root #dbch-detail-pipeline .dbch-pf-cur { min-width: 82px !important; }
        #dbch-root #dbch-detail-pipeline .dbch-pf-pill { padding: 4px 10px !important; font-size: 10px !important; }
        #dbch-root #dbch-detail-pipeline .dbch-pf-lbl { font-size: 9px !important; }

        /* Chip de vencimiento en el header del modal */
        #dbch-root .dbch-duechip { float: right !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 8px !important; padding: 4px 10px !important; margin-left: 10px !important; font-family: inherit !important; }
        #dbch-root .dbch-duechip-ok { color: #3AA377 !important; border: 1.5px solid #3AA377 !important; }
        #dbch-root .dbch-duechip-today { color: #F59E0B !important; border: 1.5px solid #F59E0B !important; }
        #dbch-root .dbch-duechip-late { color: #EF4444 !important; border: 1.5px solid #EF4444 !important; }

        /* ── Calendario de entregas ── */
        #dbch-root .dbch-cal-head { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; }
        #dbch-root .dbch-cal-arrow { width: 28px !important; height: 28px !important; border: 1px solid #E5E7EB !important; background: #fff !important; border-radius: 8px !important; color: var(--accent) !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; line-height: 1 !important; padding: 0 !important; font-family: inherit !important; }
        #dbch-root .dbch-cal-arrow:hover { border-color: var(--accent) !important; }
        #dbch-root .dbch-cal-arrow:disabled { color: #C4CBD4 !important; border-color: #E5E7EB !important; cursor: default !important; }
        #dbch-root .dbch-cal-month { font-weight: 700 !important; font-size: 14px !important; color: #0D1117 !important; min-width: 120px !important; text-align: center !important; }
        #dbch-root .dbch-cal-wd { display: grid !important; grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 4px !important; font-size: 11px !important; color: #9CA3AF !important; text-align: center !important; margin-bottom: 4px !important; }
        #dbch-root .dbch-cal-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 4px !important; }
        #dbch-root .dbch-cal-day { min-height: 76px !important; border-radius: 8px !important; background: #F7F8FA !important; padding: 5px 6px !important; position: relative !important; min-width: 0 !important; }
        #dbch-root .dbch-cal-off { background: #FBFCFD !important; }
        #dbch-root .dbch-cal-has { cursor: pointer !important; }
        #dbch-root .dbch-cal-has:hover { background: #EFF1F5 !important; }
        #dbch-root .dbch-cal-today { background: #fff !important; border: 1.5px solid var(--accent) !important; }
        #dbch-root .dbch-cal-num { font-size: 11px !important; color: #9CA3AF !important; }
        #dbch-root .dbch-cal-today .dbch-cal-num { color: var(--accent) !important; font-weight: 700 !important; }
        #dbch-root .dbch-cal-plus { position: absolute !important; top: 3px !important; right: 5px !important; background: none !important; border: none !important; color: #C4CBD4 !important; font-size: 13px !important; cursor: pointer !important; padding: 0 2px !important; line-height: 1 !important; font-family: inherit !important; }
        #dbch-root .dbch-cal-plus:hover { color: var(--accent) !important; }
        #dbch-root .dbch-cal-chip { display: block !important; margin-top: 3px !important; border-radius: 5px !important; padding: 2px 5px !important; font-size: 11px !important; line-height: 1.3 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
        #dbch-root .dbch-cc-done { background: #EAF7F1 !important; color: #0F6E56 !important; }
        #dbch-root .dbch-cc-work { background: #EEEDFE !important; color: #3C3489 !important; }
        #dbch-root .dbch-cc-rev { background: #FEF5E7 !important; color: #854F0B !important; cursor: pointer !important; }
        #dbch-root .dbch-cc-wish { background: #fff !important; border: 1px dashed #C4CBD4 !important; color: #9CA3AF !important; }
        #dbch-root .dbch-cal-more { display: block !important; margin-top: 2px !important; font-size: 11px !important; color: var(--accent) !important; font-weight: 600 !important; padding: 0 5px !important; }
        #dbch-root .dbch-cal-legend { display: flex !important; gap: 16px !important; margin-top: 14px !important; flex-wrap: wrap !important; font-size: 11px !important; color: #6B7280 !important; }
        #dbch-root .dbch-cal-lg { display: inline-block !important; width: 9px !important; height: 9px !important; border-radius: 3px !important; margin-right: 5px !important; vertical-align: -1px !important; }
        #dbch-root .dbch-cal-lg-done { background: #0F6E56 !important; }
        #dbch-root .dbch-cal-lg-work { background: #7F77DD !important; }
        #dbch-root .dbch-cal-lg-rev { background: #F59E0B !important; }
        #dbch-root .dbch-cal-lg-wish { background: #fff !important; border: 1px dashed #C4CBD4 !important; }
        /* La agenda vertical de móvil (clases dbch-cal-ag… y dbch-cai…) se
           eliminó en v4.26.0 junto con calAgenda() — el grid mensual compacto
           + panel del día es la única presentación del calendario. */
        #dbch-root .dbch-cal-agrow .dbch-cal-plus { position: static !important; flex-shrink: 0 !important; font-size: 15px !important; }
        #dbch-root .dbch-cal-agfoot { text-align: center !important; margin-top: 12px !important; }
        #dbch-root .dbch-cal-plusbtn { position: static !important; border: 1px solid #E5E7EB !important; background: #fff !important; border-radius: 8px !important; padding: 7px 14px !important; font-size: 12px !important; color: var(--accent) !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; }
        #dbch-root .dbch-cal-plusbtn:hover { border-color: var(--accent) !important; }
        #dbch-root .dbch-cal-empty { text-align: center !important; color: #9CA3AF !important; font-size: 13px !important; padding: 16px 0 4px !important; font-family: inherit !important; }
        /* ── Panel del día — inline a la derecha del grid (fase 5) ── */
        #dbch-root .dbch-cal-layout { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; align-items: start !important; }
        #dbch-root .dbch-cal-layout.dbch-day-open { grid-template-columns: minmax(0,1fr) 320px !important; }
        #dbch-root .dbch-cal-maincol { min-width: 0 !important; }
        #dbch-root .dbch-day-side {
          position: relative !important;
          background: #FAFAF7 !important;
          border: 1px solid #EFEFE9 !important;
          border-radius: 16px !important;
          padding: 18px 16px 16px !important;
          min-width: 0 !important;
        }
        #dbch-root .dbch-day-title { margin: 0 26px 0 0 !important; font-size: 17px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.2 !important; }
        #dbch-root .dbch-day-sub { margin: 1px 0 12px !important; font-size: 11.5px !important; color: #9CA3AF !important; font-family: inherit !important; min-height: 14px !important; }
        #dbch-root .dbch-day-list { display: flex !important; flex-direction: column !important; gap: 8px !important; max-height: 420px !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: #D9D9D2 transparent; }
        #dbch-root .dbch-day-list::-webkit-scrollbar { width: 6px; }
        #dbch-root .dbch-day-list::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root .dbch-day-empty { margin: 14px 0 !important; font-size: 12.5px !important; color: #9CA3AF !important; text-align: center !important; font-family: inherit !important; }
        #dbch-root .dbch-day-item { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; background: #fff !important; border: 1px solid #F0F0EA !important; border-radius: 12px !important; padding: 10px 12px !important; margin: 0 !important; }
        #dbch-root .dbch-day-item-info { min-width: 0 !important; flex: 1 !important; }
        #dbch-root .dbch-day-item-name { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #0D1117 !important; font-family: inherit !important; line-height: 1.3 !important; }
        #dbch-root .dbch-day-item-sub { margin: 4px 0 0 !important; font-size: 11px !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-day-item-actions { display: flex !important; align-items: center !important; gap: 7px !important; flex-shrink: 0 !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
        #dbch-root .dbch-day-foot { text-align: center !important; border-top: 1px solid #EFEFE9 !important; padding-top: 12px !important; margin-top: 12px !important; }
        /* Botón "Crear tarea" del panel — lima corporativo */
        #dbch-root .dbch-day-create {
          width: 100% !important;
          background: var(--lime) !important;
          color: var(--on-brand) !important;
          border: none !important;
          border-radius: 10px !important;
          padding: 10px 14px !important;
          font-size: 12.5px !important;
          font-weight: 600 !important;
          font-family: inherit !important;
          cursor: pointer !important;
          box-shadow: 0 1px 10px rgba(var(--brand-rgb),.35) !important;
          transition: background .15s ease, transform .15s ease !important;
        }
        #dbch-root .dbch-day-create:hover { background: var(--lime-hover) !important; transform: scale(1.01) !important; }
        /* Día seleccionado en el grid */
        #dbch-root .dbch-cal-clickable { cursor: pointer !important; }
        #dbch-root .dbch-cal-sel { background: var(--tint) !important; border: 1.5px solid var(--lime) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.2) !important; }
        /* Guarda a prueba de estados raros: sin .dbch-day-open el panel del
           día JAMÁS se pinta (evita el layout "desorganizado" reportado) */
        /* Con doble id para ganarle a CUALQUIER regla de dos ids del panel */
        #dbch-root #dbch-cal .dbch-cal-layout:not(.dbch-day-open) .dbch-day-side { display: none !important; }
        /* Formulario de Nueva solicitud inline dentro del panel del día */
        #dbch-root #dbch-day-reqhost { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: #D9D9D2 transparent; }
        #dbch-root #dbch-day-reqhost::-webkit-scrollbar { width: 6px; }
        #dbch-root #dbch-day-reqhost::-webkit-scrollbar-thumb { background: #D9D9D2; border-radius: 8px; }
        #dbch-root .dbch-day-reqhead { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; }
        #dbch-root .dbch-day-reqhead span { font-size: 13px !important; font-weight: 700 !important; color: #0D1117 !important; font-family: inherit !important; }
        #dbch-root .dbch-day-reqhead .dbch-modal-close { position: static !important; }
        #dbch-root #dbch-day-reqhost .dbch-modal-header { display: none !important; } /* el host ya tiene su encabezado */
        #dbch-root #dbch-day-reqhost .dbch-req-section-hdr { margin: 14px 0 10px !important; }

        /* Toast KATALYST (reemplaza los alert() nativos) */
        #dbch-root #dbch-toast {
          position: fixed !important;
          left: 50% !important;
          bottom: 34px !important;
          transform: translateX(-50%) translateY(16px) !important;
          background: #1A1A1A !important;
          color: #fff !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          font-family: inherit !important;
          border-radius: 12px !important;
          padding: 12px 20px !important;
          box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
          z-index: 9999999 !important;
          max-width: min(92vw, 480px) !important;
          text-align: center !important;
          pointer-events: none !important;
          opacity: 0;
          transition: opacity .25s ease, transform .25s ease !important;
        }
        #dbch-root #dbch-toast.dbch-toast-show { opacity: 1; transform: translateX(-50%) translateY(0) !important; }
        /* Tablet: celdas más compactas, mismo grid; el panel del día baja
           debajo del calendario en vez de comprimirlo */
        @media (max-width: 1024px) {
          #dbch-root .dbch-cal-day { min-height: 62px !important; padding: 3px 4px !important; }
          #dbch-root .dbch-cal-chip { font-size: 10.5px !important; padding: 1px 4px !important; }
          #dbch-root .dbch-cal-layout.dbch-day-open { grid-template-columns: minmax(0,1fr) !important; }
        }

        /* ── Skeleton de carga ──
           OJO: la animación mueve opacity, así que NINGUNA regla de estos
           elementos declara opacity con !important (regla de animaciones
           vs !important del proyecto). */
        @keyframes dbch-sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
        #dbch-root .dbch-sk { max-width: 1160px; margin: 44px 40px 0 calc(var(--sidebar-w) + 40px); }
        #dbch-root .dbch-sk-line, #dbch-root .dbch-sk-card, #dbch-root .dbch-sk-panel { background: #EBEEF2 !important; animation: dbch-sk-pulse 1.5s ease-in-out infinite; }
        #dbch-root .dbch-sk-line { border-radius: 8px !important; }
        #dbch-root .dbch-sk-title { height: 26px !important; width: 38% !important; margin-bottom: 12px !important; }
        #dbch-root .dbch-sk-sub { height: 12px !important; width: 22% !important; margin-bottom: 28px !important; }
        #dbch-root .dbch-sk-kpis { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; margin-bottom: 18px !important; }
        #dbch-root .dbch-sk-card { height: 110px !important; border-radius: 16px !important; }
        #dbch-root .dbch-sk-card:nth-child(2) { animation-delay: .12s; }
        #dbch-root .dbch-sk-card:nth-child(3) { animation-delay: .24s; }
        #dbch-root .dbch-sk-card:nth-child(4) { animation-delay: .36s; }
        #dbch-root .dbch-sk-cols { display: grid !important; grid-template-columns: minmax(0,2fr) minmax(0,1fr) !important; gap: 16px !important; margin-bottom: 18px !important; }
        #dbch-root .dbch-sk-panel { height: 230px !important; border-radius: 16px !important; }
        #dbch-root .dbch-sk-cols .dbch-sk-panel:nth-child(2) { animation-delay: .18s; }
        #dbch-root .dbch-sk-low { height: 150px !important; animation-delay: .3s; }
        @media (max-width: 1024px) {
          #dbch-root .dbch-sk { margin: 24px 16px 0 !important; }
          #dbch-root .dbch-sk-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
          #dbch-root .dbch-sk-cols { grid-template-columns: minmax(0,1fr) !important; }
        }

        /* ── Hilo de preguntas por pieza ── */
        #dbch-root .dbch-act-cell { white-space: nowrap !important; }
        /* La burbuja «Preguntar sobre esta pieza» (`.dbch-ask-btn`), su badge
           rojo y el ancho del modal del hilo vivían aquí. Se fueron el 8 sep
           2026 con la ventana de conversación aparte. Lo que queda del aviso de
           «sin leer» es `.dbch-unread-chip`, más abajo. */
        #dbch-root .dbch-thread-kicker { margin: 0 0 2px !important; font-size: 11px !important; color: #9CA3AF !important; text-transform: uppercase !important; letter-spacing: .5px !important; font-weight: 700 !important; font-family: inherit !important; }
        #dbch-root .dbch-thread-msgs { background: #FBFCFD !important; border: 1px solid #F1F5F9 !important; border-radius: 12px !important; padding: 14px !important; margin: 14px 0 12px !important; max-height: 320px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
        /* Las burbujas con cola (`.dbch-th-msg`, `.dbch-th-bubble` y sus
           variantes de cliente y equipo) se fueron con la ventana aparte: las
           pintaba `threadBubble()`. La conversación de la tarjeta usa tarjetas
           a ancho completo (`.dbch-cmt-*`), calcadas de la Mesa. */

        /* Los chulitos de lectura, en la línea de meta del mensaje del cliente
           (23 ago 2026). Mismo azul que la Mesa (#2A96D4): ~3.1:1 sobre blanco,
           que es lo que pide WCAG para un icono cuyo COLOR es el dato. El
           #34B7F1 de WhatsApp se queda en 2.1:1.
           `!important` como todo este bloque: Astra estila los descendientes de
           <p> por su cuenta y sin esto el SVG sale con su tamaño de caja. */
        #dbch-root .dbch-th-rd { display: inline-flex !important; align-items: center !important;
            width: 15px !important; height: 11px !important; margin-left: 5px !important;
            vertical-align: -1px !important; color: #9CA3AF !important; }
        #dbch-root .dbch-th-rd svg { width: 100% !important; height: 100% !important; display: block !important; }
        #dbch-root .dbch-th-rd-on { color: #2A96D4 !important; }
        #dbch-root .dbch-th-author { margin: 0 0 3px !important; font-size: 11px !important; color: #6B7280 !important; font-weight: 600 !important; font-family: inherit !important; }
        #dbch-root .dbch-th-empty { margin: 8px 4px !important; font-size: 13px !important; color: #9CA3AF !important; text-align: center !important; font-family: inherit !important; line-height: 1.5 !important; }
        /* `wrap` para que la barra de formato se lleve su propio renglón: es un
           hijo más de esta fila y se manda arriba sola (ver `.kc-fmt-bar` en
           `kcore-texto.css`). Sin `wrap` se metería a codazos entre el campo y
           el botón de enviar. */
        #dbch-root .dbch-thread-inputbar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: flex-end !important; }
        /* ⚠️ CADA REGLA DEL COMPOSITOR NOMBRA LAS DOS FORMAS DEL CAMPO
           (9 sep 2026). Con el motor puesto es un `div` editable —el que enseña
           la negrita en vez de los asteriscos— y sin motor sigue siendo el
           `<textarea>` de siempre. Una regla que solo diga `textarea` deja el
           campo SIN borde, SIN relleno y sin `flex`, o sea invisible dentro de
           la fila: pasó al construirlo, y no da ningún error. */
        #dbch-root .dbch-thread-inputbar textarea,
        #dbch-root .dbch-thread-inputbar .kc-fmt-ed { flex: 1 !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 9px 12px !important; font-size: 13px !important; font-family: inherit !important; resize: none !important; color: #0D1117 !important; background: #fff !important; min-height: 38px !important; }
        /* EL COMPOSITOR CRECE CON EL COMENTARIO (pedido de David, 8 sep 2026:
           *"debe irse ampliando a medida que el comentario es más largo para
           que se pueda ir viendo completo"*). La altura la pone `autoCrecer()`
           en el JS; aquí solo va el TOPE, que es donde el campo deja de crecer
           y empieza a scrollear. 200px son unas ocho líneas: bastante para ver
           un ajuste entero de un vistazo, y poco para que el campo se coma la
           conversación que está justo encima. */
        #dbch-root .dbch-thread-inputbar textarea,
        #dbch-root .dbch-thread-inputbar .kc-fmt-ed { max-height: 200px !important; overflow-y: auto !important; }
        #dbch-root .dbch-thread-inputbar textarea:focus,
        #dbch-root .dbch-thread-inputbar .kc-fmt-ed:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12) !important; }
        /* El botón circular de marca del compositor. Eran dos —el del hilo
           aparte y el de la tarjeta— con el mismo diseño; desde que el hilo
           aparte se retiró (8 sep 2026) queda el de la tarjeta. */
        #dbch-root #dbch-detail-thread-send { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; margin: 0 !important; line-height: 1 !important; background: var(--lime) !important; border: none !important; border-radius: 50% !important; color: var(--on-brand) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 0 !important; }
        /* Regla explícita del SVG — sin ella Astra colapsa el ícono (mismo fix
           que ya necesitó el botón de enviar del chat del Advisor) */
        #dbch-root #dbch-detail-thread-send svg { display: block !important; width: 16px !important; height: 16px !important; stroke: #1A1A1A !important; fill: none !important; }
        #dbch-root #dbch-detail-thread-send:disabled { opacity: .5; cursor: default !important; }

        /* ── LA CONVERSACIÓN EN TARJETA, para «Detalle de la tarea» (24 ago
           2026) ──
           Mismo diseño que la ficha de la Mesa (`.kc-cmt` en kcore-mesa.css):
           tarjetas a ancho completo, no burbujas con cola. Con el equipo Y el
           cliente escribiendo, las burbujas alternadas se leían en zigzag —
           la tarjeta pone a todos en la misma cuadrícula y deja que la foto,
           el nombre y el chip digan quién habla, tal como lo resolvió la
           Mesa el 11 ago 2026. Solo lo PROPIO se corre a la derecha con
           tinte lima; el TEXTO de dentro sigue alineado a la izquierda.

           ⚠️ Son valores CALCADOS a mano, no compartidos por CSS: la hoja de
           la Mesa (`kcore-mesa.css`) no la carga el portal, solo
           `kcore-ficha.css`/`kcore-vitrina.css` vía `katalyst_portal_assets`.
           Mismo criterio que la «CAJA DE RESPALDO» de la franja de
           propiedades, unas líneas más arriba. */
        #dbch-root .dbch-cmt { border: 1px solid #F1F5F9 !important; border-radius: var(--r) !important;
          background: #fff !important; padding: 12px 14px !important; display: flex !important;
          flex-direction: column !important; gap: 8px !important; }
        /* Mensajes seguidos de la misma persona se acercan: un turno de habla,
           no dos. */
        #dbch-root .dbch-cmt.dbch-cmt-cont { margin-top: -6px !important; }
        /* `margin-left:auto` y un tope de ancho, no `align-self`: la columna
           es un flex column y `align-self` cambiaría el ancho de las demás
           tarjetas al recalcularse. */
        #dbch-root .dbch-cmt.dbch-cmt-mio { margin-left: auto !important; max-width: 92% !important;
          background: var(--tint) !important; border-color: var(--tint-border) !important; }
        #dbch-root .dbch-cmt.dbch-cmt-mio .dbch-cmt-h { flex-direction: row-reverse !important; }
        #dbch-root .dbch-cmt.dbch-cmt-mio .dbch-cmt-d { margin-left: 0 !important; margin-right: auto !important; }
        #dbch-root .dbch-cmt.dbch-cmt-mio .dbch-cmt-b { text-align: left !important; }
        /* Si el nombre, el chip y la hora no caben, la hora baja a su propio
           renglón en vez de estrujar el NOMBRE, que es el dato que dice quién
           habla. */
        #dbch-root .dbch-cmt-h { display: flex !important; align-items: center !important; gap: 8px !important;
          min-width: 0 !important; flex-wrap: wrap !important; }
        #dbch-root .dbch-cmt-av { width: 26px !important; height: 26px !important; min-width: 26px !important;
          border-radius: 50% !important; display: inline-flex !important; align-items: center !important;
          justify-content: center !important; overflow: hidden !important; flex: none !important; }
        #dbch-root .dbch-cmt-av img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
        #dbch-root .dbch-cmt-av-init { background: var(--ink) !important; color: var(--lime) !important;
          font-size: 9.5px !important; font-weight: 700 !important; font-family: inherit !important; }
        #dbch-root .dbch-cmt-n { font-size: 12.5px !important; font-weight: 700 !important; color: #0D1117 !important;
          min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important;
          white-space: nowrap !important; font-family: inherit !important; }
        /* El chip dice de qué LADO está quien escribió, no su cargo — la
           única pregunta que importa en esta columna es «¿esto lo dijo el
           cliente o nosotros?». Solo lo lleva lo propio. */
        #dbch-root .dbch-cmt-chip { flex: none !important; font-size: 10px !important; font-weight: 600 !important;
          padding: 2px 7px !important; border-radius: 20px !important; background: #F1F7D6 !important;
          color: var(--on-tint) !important; white-space: nowrap !important; font-family: inherit !important; }
        #dbch-root .dbch-cmt-d { margin-left: auto !important; flex: none !important; font-size: 11px !important;
          color: #9CA3AF !important; white-space: nowrap !important; font-family: inherit !important; }
        #dbch-root .dbch-cmt-d.dbch-cmt-pend { color: #B8860B !important; }

        /* ══ BORRAR UN MENSAJE PROPIO (4.66.0) ══
           ⚠️ Va AQUÍ, con el resto de la tarjeta de comentario, y NO al final
           del archivo: la regla de oro de esta hoja es que todo estilo base
           viva ANTES de los bloques @media, o el desktop pisa el responsive.
           Está escrito en CLAUDE.md y ya costó un «se ve muy mal en el celular».

           La papelera aparece al pasar por encima de la tarjeta, como el lápiz
           de la Mesa. En TÁCTIL no hay hover, así que se queda visible a media
           opacidad: un control que solo existe con ratón es un control que no
           existe en el celular, que es justo donde el cliente escribe mal. */
        #dbch-root .dbch-cmt-del { all: unset !important; box-sizing: border-box !important;
          cursor: pointer !important; flex: none !important; width: 22px !important; height: 22px !important;
          display: inline-flex !important; align-items: center !important; justify-content: center !important;
          border-radius: 6px !important; color: #9CA3AF !important; opacity: 0 !important;
          transition: opacity .14s, color .14s, background .14s !important; }
        #dbch-root .dbch-cmt-del svg { width: 13px !important; height: 13px !important; display: block !important; }
        #dbch-root .dbch-cmt:hover .dbch-cmt-del,
        #dbch-root .dbch-cmt-del:focus-visible { opacity: 1 !important; }
        #dbch-root .dbch-cmt-del:hover { color: #C0392B !important; background: rgba(192,57,43,.10) !important; }
        @media (hover: none) { #dbch-root .dbch-cmt-del { opacity: .55 !important; } }

        /* La lápida. Cursiva y gris bajo: dice «aquí hubo algo» sin competir
           con los mensajes que sí dicen cosas.
           ⚠️ La tarjeta propia CONSERVA su tinte. La primera versión se lo
           quitaba («un mensaje borrado no se sigue señalando como tuyo») y al
           verlo en la Mesa quedó claro que era peor: la tarjeta sigue diciendo
           «Tú» en la cabecera, así que despintarla deja una fila que se
           contradice consigo misma. Y las dos superficies tienen que verse
           igual — es la misma conversación desde dos lados. */
        #dbch-root .dbch-cmt-del-txt { font-style: italic !important; color: #9CA3AF !important; }
        /* ⚠️ `pre-wrap` SOLO cuando el cuerpo NO viene formateado (9 sep 2026).
           Desde que `KcoreTexto.formatea()` pinta párrafos y títulos, los saltos
           de línea ya son `<br>` y `<p>`: con pre-wrap además, cada mensaje
           saldría con el doble de aire. Se mantiene para el caso sin motor —dos
           plugins, dos despliegues— donde el cuerpo sigue siendo texto suelto y
           sin él se vería todo en un renglón. `:not(:has(...))` lo distingue sin
           que el JS tenga que poner una clase. */
        #dbch-root .dbch-cmt-b { font-size: 13px !important; line-height: 1.6 !important; color: #0D1117 !important;
          word-break: break-word !important; font-family: inherit !important; }
        #dbch-root .dbch-cmt-b:not(:has(.kc-fmt-p)):not(:has(.kc-fmt-h)) { white-space: pre-wrap !important; }
        #dbch-root .dbch-cmt-b a { color: inherit !important; text-decoration: underline !important; }

        /* ── Adjuntos en la conversación de la pieza (16 sep 2026) ──
           ⚠️ Toda regla con `display` va con `:not(.dbch-hidden)`: con los dos
           `!important` y la misma especificidad, gana la que va DESPUÉS en la
           hoja, y `.dbch-hidden` se repite al final (línea ~3548). Sin el `:not`
           el clip se vería en modo ClickUp, donde no puede enviar nada. */
        #dbch-root .dbch-th-clip:not(.dbch-hidden) { display: inline-flex !important; align-items: center !important; justify-content: center !important;
          width: 38px !important; height: 38px !important; flex: none !important; border-radius: 10px !important; cursor: pointer !important;
          color: #6B7280 !important; background: #F4F4F2 !important; transition: background .15s, color .15s !important; }
        #dbch-root .dbch-th-clip:hover { background: #ECECE8 !important; color: #0D1117 !important; }
        #dbch-root .dbch-th-clip:focus-within { outline: 2px solid #7A9800 !important; outline-offset: 2px !important; }
        #dbch-root .dbch-th-clip.dbch-th-busy { opacity: .45 !important; pointer-events: none !important; }
        #dbch-root .dbch-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

        /* Lo elegido y sin enviar, encima de la barra (como `kc-cfiles` en la Mesa). */
        #dbch-root .dbch-th-files:not(.dbch-hidden) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 8px !important; }
        #dbch-root .dbch-thf { display: inline-flex !important; align-items: center !important; gap: 8px !important; max-width: 100% !important;
          padding: 5px 6px 5px 5px !important; background: #F4F4F2 !important; border-radius: 9px !important; font-size: 12px !important; }
        #dbch-root .dbch-thf-t { width: 26px !important; height: 26px !important; border-radius: 6px !important; object-fit: cover !important; flex: none !important; }
        #dbch-root .dbch-thf-n { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 160px !important; color: #0D1117 !important; }
        #dbch-root .dbch-thf-d { border: 0 !important; background: transparent !important; color: #6B7280 !important; font-size: 16px !important;
          line-height: 1 !important; padding: 0 4px !important; cursor: pointer !important; min-width: 24px !important; min-height: 24px !important; }

        /* Dentro de la burbuja. */
        #dbch-root .dbch-cmt-files { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; }
        #dbch-root .dbch-cf-img { display: block !important; max-width: min(260px, 100%) !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid #ECECE8 !important; }
        #dbch-root .dbch-cf-img img { display: block !important; width: 100% !important; height: auto !important; max-height: 220px !important; object-fit: cover !important; }
        #dbch-root .dbch-cf-doc { display: inline-flex !important; align-items: center !important; gap: 8px !important; max-width: 100% !important;
          padding: 7px 10px 7px 7px !important; border: 1px solid #ECECE8 !important; border-radius: 10px !important; background: #fff !important;
          color: #0D1117 !important; text-decoration: none !important; font-size: 12.5px !important; }
        #dbch-root .dbch-cf-doc:hover { border-color: #D4D4CF !important; }
        #dbch-root .dbch-cf-x { width: 30px !important; height: 30px !important; border-radius: 7px !important; background: #F4F4F2 !important; flex: none !important;
          display: grid !important; place-items: center !important; font-size: 8.5px !important; font-weight: 800 !important; color: #6B7280 !important; }
        #dbch-root .dbch-thf .dbch-cf-x { width: 26px !important; height: 26px !important; background: #fff !important; }
        #dbch-root .dbch-cf-n { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
        #dbch-root .dbch-cf-s { color: #6B7280 !important; font-size: 11px !important; flex: none !important; }
        #dbch-root .dbch-cf-aud { display: flex !important; flex-direction: column !important; gap: 4px !important; width: min(300px, 100%) !important; font-size: 12px !important; }
        #dbch-root .dbch-cf-aud audio { width: 100% !important; height: 36px !important; }

        /* ── Campana de notificaciones — integrada al header (mockup), ya no flota ── */
        #dbch-root .dbch-bell { position: relative !important; z-index: 5 !important; width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #E5E7EB !important; color: #6B7280 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(13,17,23,.06) !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-bell:hover { color: #0D1117 !important; border-color: #B8B8B0 !important; }
        /* Sin anillo azul de focus del navegador/tema (visto en Local con Astra) */
        #dbch-root .dbch-bell:focus,
        #dbch-root .dbch-user-btn:focus { outline: none !important; box-shadow: 0 2px 10px rgba(13,17,23,.06) !important; }
        #dbch-root .dbch-bell svg { display: block !important; width: 18px !important; height: 18px !important; stroke: currentColor !important; fill: none !important; }
        #dbch-root .dbch-bell-badge { position: absolute !important; top: -4px !important; right: -4px !important; background: #EF4444 !important; color: #fff !important; font-size: 10.5px !important; font-weight: 700 !important; min-width: 18px !important; height: 18px !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 5px !important; line-height: 1 !important; }
        /* El panel se ancla al cluster del header (position:relative del cluster) */
        #dbch-root .dbch-bell-panel { position: absolute !important; top: 54px !important; right: 0 !important; z-index: 99991 !important; width: 340px !important; max-width: calc(100vw - 32px) !important; max-height: 70vh !important; max-height: 70dvh !important; overflow-y: auto !important; background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(13,17,23,.14) !important; }
        #dbch-root .dbch-bell-title { margin: 0 !important; padding: 13px 16px !important; font-size: 12px !important; font-weight: 700 !important; color: #9CA3AF !important; text-transform: uppercase !important; letter-spacing: .5px !important; border-bottom: 1px solid #F1F5F9 !important; font-family: inherit !important; }
        #dbch-root .dbch-ntf-item { display: flex !important; gap: 10px !important; padding: 12px 16px !important; border-bottom: 1px solid #F1F5F9 !important; cursor: pointer !important; align-items: flex-start !important; }
        #dbch-root .dbch-ntf-item:last-child { border-bottom: none !important; }
        #dbch-root .dbch-ntf-item:hover { background: #F7F8FA !important; }
        #dbch-root .dbch-ntf-warm { background: #FFFDF7 !important; }
        #dbch-root .dbch-ntf-warm:hover { background: #FDF6E7 !important; }
        #dbch-root .dbch-ntf-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-top: 5px !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-ntf-dot-rev { background: #F59E0B !important; }
        #dbch-root .dbch-ntf-dot-th { background: var(--accent) !important; }
        #dbch-root .dbch-ntf-dot-ai { background: #7F77DD !important; }
        /* Prompt de activar notificaciones push: tinte lima suave, mismo
           lenguaje del hover de filas — invita sin gritar */
        #dbch-root .dbch-ntf-dot-push { background: var(--accent) !important; }
        #dbch-root .dbch-ntf-push { background: var(--tint) !important; }
        #dbch-root .dbch-ntf-push:hover { background: var(--tint-2) !important; }
        #dbch-root .dbch-ntf-body { flex: 1 !important; min-width: 0 !important; }
        #dbch-root .dbch-ntf-txt { margin: 0 !important; font-size: 13px !important; color: #0D1117 !important; line-height: 1.45 !important; font-family: inherit !important; }
        #dbch-root .dbch-ntf-strong { font-weight: 700 !important; }
        #dbch-root .dbch-ntf-sub { margin: 2px 0 0 !important; font-size: 11px !important; color: #9CA3AF !important; font-family: inherit !important; }
        #dbch-root .dbch-ntf-warm .dbch-ntf-sub { color: #B45309 !important; }
        #dbch-root .dbch-ntf-arr { color: #C4CBD4 !important; margin-top: 2px !important; }
        #dbch-root .dbch-ntf-empty { padding: 24px 16px !important; text-align: center !important; }
        #dbch-root .dbch-ntf-empty p { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; font-family: inherit !important; }
        #dbch-root .dbch-ntf-check { font-size: 20px !important; margin-bottom: 6px !important; color: #3AA377 !important; }
        @media (max-width: 1024px) {
          #dbch-root .dbch-bell-panel { top: 50px !important; }
        }

        /* ═══════════════ MENSAJES DIRECTOS CON EL EQUIPO (23 ago 2026) ═══════
           El chat de la sección #dbch-dm. Medidas copiadas del hilo por pieza
           (.dbch-th-*), que es el estándar de chat de la plataforma; lo único
           distinto es que aquí TODO mensaje lleva foto y nombre, también los
           propios, porque de los dos lados puede escribir más de una persona.

           Va ANTES de la capa de movimiento, de los bloques responsive y de la
           última .dbch-hidden — regla del archivo: a igual especificidad gana la
           última regla, y .dbch-dm-bar se oculta con display:flex. */
        #dbch-root .dbch-dm-panel { display: flex !important; flex-direction: column !important; gap: 12px !important; min-height: 0 !important; }
        #dbch-root .dbch-dm-scroll { flex: 1 !important; min-height: 240px !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 4px 2px !important; }

        #dbch-root .dbch-dm-row { display: flex !important; align-items: flex-start !important; gap: 9px !important; max-width: 82% !important; }
        #dbch-root .dbch-dm-other { align-self: flex-start !important; }
        /* Lo propio va a la derecha con la foto del lado de afuera: row-reverse
           en vez de duplicar el marcado con el avatar en otro orden. */
        #dbch-root .dbch-dm-mine { align-self: flex-end !important; flex-direction: row-reverse !important; }

        #dbch-root .dbch-dm-ava { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; flex-shrink: 0 !important; margin: 0 !important; }
        #dbch-root .dbch-dm-ava-init { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--ink) !important; color: var(--lime) !important; font-size: 11px !important; font-weight: 600 !important; font-family: inherit !important; letter-spacing: .01em !important; }

        #dbch-root .dbch-dm-body { min-width: 0 !important; }
        #dbch-root .dbch-dm-mine .dbch-dm-body { text-align: right !important; }
        #dbch-root .dbch-dm-who { margin: 0 0 3px !important; font-size: 11px !important; color: #6B7280 !important; font-weight: 600 !important; font-family: inherit !important; line-height: 1.3 !important; }
        #dbch-root .dbch-dm-chip { margin-left: 6px !important; padding: 1px 6px !important; border-radius: 6px !important; background: #F1F3F5 !important; color: #6B7280 !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: .04em !important; }
        #dbch-root .dbch-dm-time { margin-left: 6px !important; font-size: 10.5px !important; color: #9CA3AF !important; font-weight: 400 !important; }

        #dbch-root .dbch-dm-bubble { display: inline-block !important; text-align: left !important; padding: 9px 13px !important; font-size: 13px !important; line-height: 1.5 !important; font-family: inherit !important; white-space: pre-wrap !important; word-break: break-word !important; background: #F1F3F5 !important; color: #0D1117 !important; border-radius: 12px 12px 12px 3px !important; }
        #dbch-root .dbch-dm-mine .dbch-dm-bubble { background: var(--tint-2) !important; color: var(--on-tint) !important; border-radius: 12px 12px 3px 12px !important; }
        #dbch-root .dbch-dm-bubble a { color: inherit !important; text-decoration: underline !important; }

        #dbch-root .dbch-dm-bar { display: flex !important; gap: 8px !important; align-items: flex-end !important; }
        #dbch-root .dbch-dm-bar textarea { flex: 1 !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 9px 12px !important; font-size: 13px !important; font-family: inherit !important; resize: none !important; color: #0D1117 !important; background: #fff !important; min-height: 38px !important; max-height: 120px !important; line-height: 1.5 !important; }
        #dbch-root .dbch-dm-bar textarea:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12) !important; }
        /* Botón icon-only: `padding: 0 !important` explícito y `flex-shrink` +
           `display:block` en el SVG. Astra le mete `padding: 8.4px 14px` a TODO
           <button> y sin esto el icono se aplasta hasta desaparecer — el bug de
           la papelera (v4.32.2), que es regla del proyecto desde entonces. */
        #dbch-root .dbch-dm-send { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; background: var(--lime) !important; border: none !important; border-radius: 50% !important; color: var(--on-brand) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-dm-send svg { display: block !important; width: 16px !important; height: 16px !important; stroke: #1A1A1A !important; fill: none !important; flex-shrink: 0 !important; }
        #dbch-root .dbch-dm-send:disabled { opacity: .5 !important; cursor: default !important; }

        /* ═══════════════ CAPA DE MOVIMIENTO (v4.30.0) ═══════════════
           Animaciones estilo Apple: entradas suaves, respuesta al tacto,
           transiciones con curva natural. REGLAS DE ORO de este bloque:
           1) Solo se animan transform y opacity (GPU, sin reflow → 60fps).
           2) Las props animadas van SIN !important (el !important bloquea los
              @keyframes en esa misma propiedad — regla conocida del proyecto).
           3) Las entradas que se re-renderizan (piezas, cola, calendario) solo
              animan la PRIMERA vez o ante acción del usuario, nunca en cada
              auto-refresco silencioso — el gating vive en el JS (clase .dbch-min).
           Vive ANTES de los bloques responsive y de la última .dbch-hidden. */

        /* — respeta "reducir movimiento" del sistema — */
        @media (prefers-reduced-motion: reduce) {
          #dbch-root .dbch-min > *, #dbch-root .dbch-chat-row,
          #dbch-root .dbch-pf-draw .dbch-pfl, #dbch-root .dbch-pf-draw .dbch-pfn,
          #dbch-root .dbch-cal-anim .dbch-cal-day,
          #dbch-root .dbch-bell-panel:not(.dbch-hidden),
          #dbch-root .dbch-user-menu:not(.dbch-hidden),
          #dbch-root .dbch-day-side:not(.dbch-hidden) .dbch-day-inner,
          #dbch-root .dbch-tabpane.active { animation: none !important; }
        }

        /* ── Entrada escalonada de listas (piezas, cola, entregables) ──
           JS agrega .dbch-min al contenedor solo en la primera carga. */
        #dbch-root .dbch-min > * { animation: dbch-fi .5s cubic-bezier(.16,1,.3,1) both; }
        #dbch-root .dbch-min > *:nth-child(1) { animation-delay: .02s; }
        #dbch-root .dbch-min > *:nth-child(2) { animation-delay: .07s; }
        #dbch-root .dbch-min > *:nth-child(3) { animation-delay: .12s; }
        #dbch-root .dbch-min > *:nth-child(4) { animation-delay: .17s; }
        #dbch-root .dbch-min > *:nth-child(5) { animation-delay: .22s; }
        #dbch-root .dbch-min > *:nth-child(6) { animation-delay: .27s; }
        #dbch-root .dbch-min > *:nth-child(n+7) { animation-delay: .3s; }

        /* ── Hover: las tarjetas responden (elevación + sombra) ──
           Se re-declara la transición CON !important porque la base de estas
           tarjetas ya trae `transition: background,border !important` que si no
           dejaría el lift sin suavizar (snap). Se conservan background/border. */
        #dbch-root .dbch-piece, #dbch-root .dbch-qrow, #dbch-root .dbch-brow {
          transition: background .18s ease, border-color .18s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1) !important;
        }
        #dbch-root .dbch-piece:hover, #dbch-root .dbch-qrow:hover, #dbch-root .dbch-brow:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 30px -20px rgba(13,17,23,.45);
        }
        /* filas de tablas (Overview / Entregables) — realce suave al pasar */
        #dbch-root .dbch-tbl tbody tr { transition: background .18s ease; }

        /* ── Tacto: botones con física (se hunden al presionar) ── */
        #dbch-root .dbch-revisar-btn, #dbch-root .dbch-vb-green,
        #dbch-root .dbch-rbtn, #dbch-root .dbch-nueva-btn, #dbch-root #dbch-open-request,
        #dbch-root .dbch-thread-send, #dbch-root .dbch-star {
          transition: transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease, background .18s ease;
        }
        #dbch-root .dbch-revisar-btn:active, #dbch-root .dbch-vb-green:active,
        #dbch-root .dbch-rbtn:active, #dbch-root .dbch-nueva-btn:active, #dbch-root #dbch-open-request:active,
        #dbch-root .dbch-block-btn:active, #dbch-root .dbch-del-btn:active {
          transform: scale(.93);
        }

        /* ── Campana y menú del avatar: brotan desde su esquina ── */
        #dbch-root .dbch-bell-panel:not(.dbch-hidden) { animation: dbch-pop-tr .34s cubic-bezier(.34,1.4,.5,1) both; transform-origin: top right; }
        #dbch-root .dbch-user-menu:not(.dbch-hidden) { animation: dbch-pop-tr .3s cubic-bezier(.34,1.4,.5,1) both; transform-origin: top right; }
        @keyframes dbch-pop-tr { from { opacity: 0; transform: scale(.86) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

        /* ── Pestañas: el contenido cruza suave al cambiar ── */
        #dbch-root .dbch-tabpane.active { animation: dbch-fi .34s cubic-bezier(.16,1,.3,1) both; }

        /* ── Chat: las burbujas entran; el "escribiendo" ya existía ── */
        #dbch-root .dbch-chat-row { animation: dbch-cbub .42s cubic-bezier(.34,1.4,.5,1) both; }
        @keyframes dbch-cbub { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: none; } }

        /* ── Pipeline: el recorrido se dibuja (solo primera vista, clase JS) ──
           Conectores crecen desde la izquierda, nodos aparecen en secuencia. */
        #dbch-root .dbch-pf-draw .dbch-pfl { transform-origin: left center; animation: dbch-growx .5s cubic-bezier(.16,1,.3,1) both; }
        #dbch-root .dbch-pf-draw .dbch-pfn { animation: dbch-pnode .44s cubic-bezier(.34,1.4,.5,1) both; }
        #dbch-root .dbch-pf-draw .dbch-pf-pill { animation: dbch-pnode .5s cubic-bezier(.34,1.4,.5,1) both; }
        #dbch-root .dbch-pf-draw .dbch-pf-step:nth-child(1) .dbch-pfn { animation-delay: .04s; }
        #dbch-root .dbch-pf-draw .dbch-pfl:nth-child(2) { animation-delay: .08s; }
        #dbch-root .dbch-pf-draw .dbch-pfl:nth-child(4) { animation-delay: .18s; }
        #dbch-root .dbch-pf-draw .dbch-pfl:nth-child(6) { animation-delay: .28s; }
        #dbch-root .dbch-pf-draw .dbch-pfl:nth-child(8) { animation-delay: .38s; }
        @keyframes dbch-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @keyframes dbch-pnode { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

        /* ── Calendario: el grid entra en cascada (clase JS al navegar/1ra vez) ── */
        #dbch-root .dbch-cal-anim .dbch-cal-day { animation: dbch-cellin .42s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--ci, 0) * 9ms); }
        @keyframes dbch-cellin { from { opacity: 0; transform: translateY(7px) scale(.95); } to { opacity: 1; transform: none; } }

        /* ── Panel del día: se desliza desde la derecha al abrir ──
           El panel se muestra quitando .dbch-hidden (display:none→flex), así
           que la animación se re-dispara en cada apertura. El transform no
           afecta el layout de la columna, solo el pintado. */
        #dbch-root .dbch-day-side:not(.dbch-hidden) { animation: dbch-slidein .4s cubic-bezier(.16,1,.3,1) both; }
        @keyframes dbch-slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

        /* ── .dbch-hidden SIEMPRE gana ──
           Re-declarada al FINAL del archivo a propósito: varias reglas nuevas
           (.dbch-day-list, .dbch-day-side, etc.) usan display:flex !important
           y, a igual especificidad, gana la última en el archivo. Sin esta
           re-declaración, ocultar esos elementos con .dbch-hidden no funcionaba
           (causa raíz del panel del día "desorganizado", v4.23.1). Cualquier

        /* ═══════════════ RESPONSIVE (v4.26.0) ═══════════════
           Estos bloques viven AL FINAL DEL ARCHIVO a propósito: a igual
           especificidad gana la última regla, y las fases del rediseño
           KATALYST fueron agregando estilos base al final que pisaban el
           responsive cuando estaba a mitad del archivo (causa raíz del
           'se ve muy mal en el celular'). Cualquier estilo base nuevo va
           ANTES de esta línea; el orden interno es de ancho a angosto
           para que el breakpoint más específico gane. */

        /* ── LA VITRINA EN EL DETALLE DE LA TAREA (fase 4) ──
           El bloque de la entrega, dentro del modal que se abre al hacer clic
           en la pieza. Lo pinta el visor del motor (`kcore-vitrina.css/js`), así
           que aquí NO se estiliza nada de DENTRO: esto es solo el hueco donde
           vive. Cualquier retoque al aspecto de la vitrina va en el archivo del
           motor, o dejaría de verse distinta a como se ve en la Mesa, que es
           exactamente lo que se quiso evitar al compartirla.

           Sin fondo ni borde propios: la vitrina trae los suyos, y dos marcos
           concéntricos se leen como un error de maquetación. */
        #dbch-root .dbch-detail-vit { margin: 16px 0 4px !important; }

        /* La regla de ancho de la ventana de aprobación (`dbch-detail-con-vit`)
           vivía aquí y se fue con ella el 8 sep 2026: existía porque ESE modal
           medía 440px y una vitrina no cabe. La tarjeta unificada ya mide 1100
           y reparte su propio scroll por columna, así que no necesita crecer
           cuando llega la vitrina. */

        /* ══ «DETALLE DE LA TAREA», EN DOS COLUMNAS (24 ago 2026) ═════════════

           Pedido de David, textual: *"la info al lado izquierdo y el chat al
           lado derecho"* — como la ficha de la Mesa (`.kc-dr-body` de
           `kcore-mesa.css`: `grid-template-columns: minmax(0,1fr)
           minmax(340px,30%)`, con cada columna scrolleando por su cuenta y
           el compositor fijo abajo de la conversación).

           No se copian los 777px/360px de la Mesa: esos son lo que QUEDA tras
           su sidebar en un dashboard completo, y aquí el modal es TODO lo que
           hay — copiar ese número sería copiar una consecuencia de otra
           pantalla, no una medida (mismo razonamiento que ya dejaba escrito
           la nota vieja de por qué el modal mide 860 y no 777). Con dos
           columnas de verdad el modal pasa de 860 a 1100, y la conversación
           se fija en 320px, un poco más angosta que el rango de la Mesa
           porque aquí no compite con un sidebar.

           ⚠️ El modal deja de crecer con el CONTENIDO (como hacía con
           `max-height:90vh` de `.dbch-modal`) y pasa a una ALTURA FIJA por
           viewport: con dos columnas que tienen que verse parejas, una que
           se estira a su contenido y la otra se queda corta es exactamente
           lo que NO se quiere. Es la misma razón por la que la Mesa fija el
           alto de su ventana en vez de dejarla crecer. */
        /* ⚠️ EL ALTO Y EL ANCHO DE LA CONVERSACIÓN (20 sep 2026).
           «El área de chat se ve súper espichada; debería verse como en la
           tarjeta de la Mesa, un slide completo de arriba abajo» — David, sobre
           el video del cliente.

           Medido en el portal real a 1280×800, con lo que había antes
           (82dvh / 760px de tope y columna de 320px):

               modal .......... 656    (82dvh de 800)
                ├ cabecera .... 137
                └ cuerpo ...... 447
                   ├ encabezado  45
                   ├ MENSAJES   253    <- 32% de la pantalla
                   └ compositor 149

           Los 149 del compositor eran de más: a 320px el placeholder
           «Escribe tu pregunta al equipo…» no cabe en una línea y el campo
           nacía de 79px en vez de 59. O sea que la columna angosta costaba
           alto DOS veces — el suyo y el del compositor.

           Con 88dvh y 400px de columna los mensajes pasan de 253 a ~337 y el
           compositor baja a 129. El tope sube de 760 a 900 para que en un
           monitor alto la tarjeta se parezca al cajón de la Mesa, que es de
           viewport completo; sigue habiendo tope porque sin él, en un 1440p, la
           columna izquierda queda medio vacía. */
        #dbch-root .dbch-modal.dbch-detail-modal {
          max-width: 1100px !important;
          width: 100% !important;
          padding: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          height: 88vh !important; height: 88dvh !important;
          max-height: 900px !important;
          min-height: 420px !important;
          overflow: hidden !important;
        }
        #dbch-root .dbch-detail-modal .dbch-modal-header {
          flex: none !important;
          padding: 26px 32px 16px !important;
          margin-bottom: 0 !important;
        }
        #dbch-root .dbch-detail-body {
          flex: 1 !important; min-height: 0 !important;
          display: grid !important;
          /* 400 y no 320: ver el bloque de `.dbch-detail-modal` de arriba — a
             320 el placeholder del compositor parte en dos líneas y el campo
             vacío nace 20px más alto, que salen de los mensajes. */
          grid-template-columns: minmax(0,1fr) 400px !important;
          overflow: hidden !important;
        }
        /* ⚠️ `flex column` (9 sep 2026) y no por gusto: es lo que deja empujar
           la franja de decisión al SUELO de la columna con `margin-top: auto`.

           Sin esto, una pieza SIN vitrina —la mitad de la altura— dejaba la
           franja flotando a media tarjeta con una banda blanca debajo hasta el
           borde. `sticky` no lo arreglaba: un elemento pegajoso solo se despega
           cuando el contenido desborda, y ahí no desbordaba nada. Lo reportó
           David con una pieza de demo sin vitrina. */
        #dbch-root .dbch-detail-main {
          min-width: 0 !important;
          overflow-y: auto !important; overflow-x: hidden !important;
          padding: 4px 32px 28px !important;
          display: flex !important; flex-direction: column !important;
        }
        /* La columna de conversación, calcada de `.kc-dr-conv`: fondo tenue
           propio, borde a la izquierda que la separa del contenido, y ella
           misma en flex column para que el compositor se quede fijo abajo. */
        #dbch-root .dbch-detail-conv {
          min-width: 0 !important;
          display: flex !important; flex-direction: column !important; min-height: 0 !important;
          border-left: 1px solid var(--border) !important;
          background: #FBFCFD !important;
        }
        #dbch-root .dbch-detail-conv-h {
          flex: none !important;
          padding: 16px 18px !important;
          border-bottom: 1px solid var(--border) !important;
          background: #fff !important;
        }
        #dbch-root .dbch-detail-conv-h h3 {
          margin: 0 !important; font-size: 11px !important; text-transform: uppercase !important;
          letter-spacing: .09em !important; color: var(--text-3) !important; font-weight: 700 !important;
          font-family: inherit !important;
        }
        /* La lista de mensajes ahora ocupa el resto de la columna y scrollea
           sola: deja de ser la caja con borde/fondo/tope de 320px que sigue
           usaba el hilo aparte, ya retirado. Selector
           por ID para ganarle a `.dbch-thread-msgs` sin pisar esa clase. */
        #dbch-root #dbch-detail-msgs {
          flex: 1 !important; min-height: 0 !important;
          overflow-y: auto !important; overflow-x: hidden !important;
          background: transparent !important; border: 0 !important; border-radius: 0 !important;
          margin: 0 !important; max-height: none !important;
          padding: 16px 18px !important;
          display: flex !important; flex-direction: column !important; gap: 12px !important;
        }
        /* El compositor se queda FIJO abajo de la columna, con su propia
           franja — igual que `.kc-conv-b` de la Mesa. */
        #dbch-root .dbch-detail-conv .dbch-thread-inputbar {
          flex: none !important;
          padding: 12px 16px 16px !important;
          border-top: 1px solid var(--border) !important;
          background: #fff !important;
        }

        /* ══ LO QUE LLEGÓ DE LA VENTANA DE APROBACIÓN (8 sep 2026) ═══════════

           Tres piezas: el pipeline de etapas, la franja de decisión y el velo
           de procesando/celebración. */

        /* EL PIPELINE, franja de ancho completo entre la cabecera y las dos
           columnas. `flex: none` porque el modal es un flex column y esto no
           debe estirarse ni encogerse: es una tira de altura fija. */
        #dbch-root .dbch-detail-pipeline {
          flex: none !important;
          padding: 0 32px 14px !important;
          border-bottom: 1px solid var(--border) !important;
          margin-bottom: 0 !important;
        }

        /* LA FRANJA DE DECISIÓN. Pegada al pie de la columna de contenido, que
           es la que scrollea: mientras el cliente pasa láminas de la vitrina,
           la llamada a decidir sigue ahí.

           `margin` negativo lateral + `padding` propio para que la franja llegue
           a los bordes de la columna en vez de quedar flotando con el aire de
           `.dbch-detail-main` a los lados: una barra de acción tiene que
           leerse como el suelo de la columna, no como una tarjeta más. */
        #dbch-root .dbch-detail-decide {
          position: sticky !important;
          /* `-28px`, no `0`, y es EXACTAMENTE el `padding-bottom` de
             `.dbch-detail-main`. Un elemento pegajoso se ancla al rectángulo
             INTERIOR de la columna que scrollea, o sea por dentro de su
             relleno: con `bottom: 0` la franja quedaba flotando 28px por
             encima del suelo, con una banda blanca debajo que la delataba como
             una tarjeta suelta en vez del suelo de la columna. Medido en el
             banco, no deducido. */
          bottom: -28px !important;
          z-index: 3 !important;
          /* `margin-top: auto`: con hueco de sobra la franja se va al suelo de
             la columna; cuando el contenido desborda, `auto` vale 0 y manda el
             `sticky`. Los 18px de aire que antes ponía este margen los pone
             ahora `.dbch-detail-actions` por abajo, porque un `auto` no puede
             ser también una medida. */
          margin: auto -32px -28px !important;
          padding: 16px 32px 18px !important;
          /* ⚠️ EL COLOR ES DE LA AGENCIA, NO NUESTRO (pedido de David, 8 sep
             2026: que la franja fuera del verde de KATALYST y no de un ámbar
             suelto). Y por eso NO va escrito un lima: van los tokens de marca,
             que `KCORE_Branding` reimprime con los colores de cada agencia. Con
             un `#F6FAE3` a mano, la agencia que eligió turquesa —la de la
             captura de David— tendría botones turquesa sobre un fondo verde
             prestado de otra marca.

             `--tint` es el fondo tenue de marca, `--tint-border` su borde y
             `--on-tint` el texto que encima se lee de corrido: los tres salen
             derivados con contraste AAA garantizado, no elegidos a ojo. */
          background: var(--tint) !important;
          border-top: 1px solid var(--tint-border) !important;
          box-shadow: 0 -8px 20px rgba(var(--brand-rgb),.10) !important;
        }
        #dbch-root .dbch-decide-t {
          margin: 0 0 3px !important;
          font-size: 13.5px !important; font-weight: 700 !important;
          color: var(--on-tint) !important; font-family: inherit !important;
        }
        #dbch-root .dbch-decide-s {
          margin: 0 0 12px !important;
          font-size: 12px !important; color: var(--text-3) !important;
          font-family: inherit !important; line-height: 1.45 !important;
        }
        #dbch-root .dbch-detail-decide .dbch-modal-actions { margin: 0 !important; }
        #dbch-root .dbch-detail-decide .dbch-modal-textarea { margin: 10px 0 12px !important; }
        #dbch-root .dbch-detail-decide .dbch-rate-stars { margin: 4px 0 0 !important; }

        /* MODO AJUSTE. La columna de la conversación se tiñe del mismo ámbar
           que la franja: es la única señal de que lo que se escriba ahí no es
           una pregunta. Sin esto, el compositor se ve idéntico en los dos
           modos y el cliente no tiene cómo saber cuál está activo. */
        #dbch-root .dbch-detail-conv.dbch-conv-adjust .dbch-thread-inputbar {
          background: var(--tint) !important;
          border-top: 2px solid var(--accent) !important;
        }
        #dbch-root .dbch-detail-conv.dbch-conv-adjust .dbch-thread-inputbar textarea,
        #dbch-root .dbch-detail-conv.dbch-conv-adjust .dbch-thread-inputbar .kc-fmt-ed {
          border-color: var(--accent) !important;
        }

        /* EL VELO. Cubre la tarjeta entera mientras se aprueba o se manda el
           ajuste, y para la celebración. La pieza sigue detrás: es lo que se
           acaba de aprobar y esconderla convierte el momento en un spinner
           sobre nada. */
        /* ⚠️ `:not(.dbch-hidden)` EN EL SELECTOR, y costó una vuelta con David
           mirando su portal (8 sep 2026). Un `display: flex !important` a secas
           aquí le GANA a `.dbch-hidden { display: none !important }`: las dos
           reglas tienen la misma especificidad (un id y una clase) y esta está
           500 líneas más abajo, así que gana la última. Resultado: el velo
           blanco al 92% se quedaba pintado SIEMPRE, encima de la tarjeta, y
           toda la ficha se veía desteñida — la vitrina, la conversación y la
           franja de decisión.

           La regla del archivo dice «visibilidad solo con clases», y esto es
           por qué: cualquier regla nueva que declare `display` sobre un
           elemento que se apaga con `dbch-hidden` tiene que excluirlo, o lo
           deja encendido. */
        #dbch-root .dbch-detail-veil:not(.dbch-hidden) {
          display: flex !important; align-items: center !important; justify-content: center !important;
        }
        /* ⚠️ `absolute` SE VA CON EL SCROLL, y por eso `detailVeil()` sube la
           tarjeta a cero antes de encenderlo. Medido en el banco: en móvil la
           que scrollea es la tarjeta entera, así que un velo anclado a su caja
           tapaba solo la parte de arriba —media ficha desteñida y media
           nítida, con el spinner fuera de pantalla—. En escritorio no se veía
           el defecto, porque ahí la tarjeta tiene alto fijo y no scrollea.

           `fixed` NO lo arregla: `.dbch-modal` lleva `contain: layout paint` y
           `transform: translateZ(0)`, así que se ancla a la tarjeta igual, y
           además al origen de su scroll. Probado, no deducido. Subir el scroll
           es una línea y no depende de qué elemento sea el contenedor. */
        #dbch-root .dbch-detail-veil {
          position: absolute !important; inset: 0 !important;
          z-index: 10 !important;
          background: rgba(255,255,255,.92) !important;
          border-radius: 16px !important;
        }
        #dbch-root .dbch-detail-veil .dbch-modal-loading,
        #dbch-root .dbch-detail-veil .dbch-modal-success { margin: 0 !important; }

        /* Por debajo de 1024px las dos columnas no caben cómodas — mismo
           umbral que ya usa el skeleton de carga. Vuelve al modo de siempre:
           una columna, la conversación DEBAJO con borde arriba en vez de al
           lado (calcado del propio colapso de la Mesa a ≤1180px), y el modal
           entero scrollea de nuevo en vez de repartir el scroll por columna. */
        @media (max-width: 1024px) {
          #dbch-root .dbch-modal.dbch-detail-modal {
            max-width: 100% !important; height: auto !important; max-height: 90vh !important; max-height: 90dvh !important;
            min-height: 0 !important; padding: 28px !important; display: block !important;
            overflow-y: auto !important; overflow-x: hidden !important;
          }
          #dbch-root .dbch-detail-modal .dbch-modal-header { padding: 0 !important; margin-bottom: 18px !important; }
          #dbch-root .dbch-detail-body { display: block !important; overflow: visible !important; }
          #dbch-root .dbch-detail-main { overflow: visible !important; padding: 0 !important; }
          #dbch-root .dbch-detail-conv {
            border-left: 0 !important; border-top: 1px solid var(--border) !important;
            margin-top: 6px !important;
          }
          #dbch-root .dbch-detail-pipeline { padding: 0 0 14px !important; }
          /* La franja deja de estar pegada: aquí el que scrollea es el modal
             entero y la conversación va DEBAJO del contenido, así que una
             franja fija al pie taparía el compositor justo cuando el cliente
             está escribiendo el ajuste. */
          #dbch-root .dbch-detail-decide {
            position: static !important;
            margin: 16px 0 0 !important; padding: 14px 16px 16px !important;
            border: 1px solid var(--tint-border) !important; border-radius: 14px !important;
            box-shadow: none !important;
          }
          #dbch-root .dbch-detail-conv-h { background: transparent !important; padding: 14px 0 10px !important; }
          /* ⚠️ AQUÍ ESTABA LA CONVERSACIÓN «ESPICHADA» QUE REPORTÓ DAVID
             (20 sep 2026), y es la que ve el cliente: por debajo de 1024px el
             modal se apila, la conversación baja al final y estos 280px fijos
             la dejaban en una cajita al pie de un modal que además hay que
             scrollear entero para llegar. En el video del cliente —un portátil
             pequeño, o con el zoom de Windows al 125/150%, que es lo que mete a
             una pantalla de 1366 por debajo de este umbral— se ve justo eso.

             Con `60dvh` la conversación ocupa un tramo de verdad (386px medidos
             en 980×760, contra 280) sin comerse la pantalla entera, y el
             `min-height` la defiende en un viewport corto. Sigue siendo un tope
             y no `flex:1` porque en este modo el que scrollea es el modal
             entero, no la columna. */
          #dbch-root #dbch-detail-msgs { flex: none !important;
            max-height: 60dvh !important; min-height: 340px !important;
            background: #FBFCFD !important; border: 1px solid #F1F5F9 !important;
            border-radius: 12px !important; margin: 0 0 12px !important; }
          #dbch-root .dbch-detail-conv .dbch-thread-inputbar {
            padding: 0 !important; border-top: 0 !important; background: transparent !important; }
        }

        /* La franja. Casi todo lo pinta `kcore-ficha.css`, que sirve el MOTOR y
           comparten las dos superficies; aquí solo va lo que es de este modal.

           ⚠️ Y un RESPALDO: sin motor esa hoja no se encola y la franja saldría
           como texto suelto. Estas tres reglas la dejan legible igual — no
           idéntica a la Mesa, que sin motor tampoco tendría sentido, pero sí
           como una ficha y no como una lista. */
        /* LOS DOS CHIPS DE LA ESQUINA (9 sep 2026): el estado de la pieza y,
           si aplica, la alarma de vencimiento. El grupo flota a la derecha
           —dentro, los dos son hijos flex y el `float` propio del chip de
           vencimiento se ignora—, y se aparta del botón de cerrar, que está
           posicionado encima de esa misma esquina. */
        #dbch-root .dbch-detail-chips {
          float: right !important;
          display: inline-flex !important; align-items: center !important;
          gap: 8px !important; margin: 0 26px 6px 12px !important;
        }
        #dbch-root .dbch-detail-chips .dbch-duechip { float: none !important; margin-left: 0 !important; }
        #dbch-root .dbch-detail-chips .dbch-b { margin: 0 !important; }

        /* LA FRANJA, EN UNA SOLA LÍNEA. `kcore-ficha.css` le da tres columnas
           en el portal —está pensada para cinco celdas en la ficha ancha de la
           Mesa—; aquí son CUATRO y caben, porque el estado se fue a la esquina.
           Debajo de 760px vuelven a ser dos: cuatro fechas de 70px no se leen. */
        #dbch-root .dbch-detail-props { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
        @media (max-width: 900px) {
          #dbch-root .dbch-detail-props { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
        }

        /* El aire sobre la franja de decisión, ahora que su propio margen es
           `auto`. Ver la nota de `.dbch-detail-decide`. */
        #dbch-root .dbch-detail-actions { margin-bottom: 18px !important; }

        #dbch-root .dbch-detail-props { margin: 0 0 18px !important;
          border: 1px solid #ECECE8 !important; border-radius: 16px !important;
          padding: 16px 18px !important; background: #fff !important; }
        #dbch-root .dbch-detail-props .dbch-badge,
        #dbch-root .dbch-detail-props .dbch-status { margin: 0 !important; }
        #dbch-root .dbch-detail-desc { margin: 0 0 18px !important; }

        /* ── LA CAJA DE RESPALDO, completa (24 ago 2026) ──
           El comentario de `class-shortcode.php` sobre la franja de
           propiedades PROMETE que "el bloque lleva además su propia caja de
           respaldo en dbch-dashboard.css" para cuando `kcore-ficha.css` no se
           encola (motor ausente, o una versión del motor anterior a la 1.39.0,
           que es cuando esa hoja empezó a existir). La promesa solo estaba
           medio cumplida: el borde exterior de `.dbch-detail-props` de arriba
           sí tenía respaldo, pero las celdas de ADENTRO (`.kc-pc`, la fecha,
           el nombre, el avatar circular) y el título "Descripción" NO — así
           es exactamente como se vio roto en un cliente real: la caja estaba,
           el contenido de adentro salía en HTML crudo del navegador.

           Van con la MISMA especificidad que `kcore-ficha.css` (un id + una
           clase, sin `!important`) y SIN el `:is(#kcore-root, #dbch-root)` de
           aquella hoja — es la copia de un solo lado a propósito, porque esto
           es la red de seguridad del PORTAL, no el diseño compartido. Como
           `dbch-dashboard.css` se encola ANTES que `kcore-ficha.css`
           (`enqueue_assets()` llama a `wp_enqueue_style('dbch-dashboard',…)`
           antes de disparar `do_action('katalyst_portal_assets',…)`), cuando
           el motor SÍ trae su hoja esta pierde el empate de cascada por orden
           de aparición y la compartida gana, sin que haga falta tocar nada
           aquí cada vez que aquella cambie. Los valores están calcados de
           `kcore-ficha.css` línea por línea — cualquier cambio de diseño ahí
           debe replicarse aquí, es el precio de la red de seguridad. */
        #dbch-root .kc-props { display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; align-items: start; }
        #dbch-root .kc-pc { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
        #dbch-root .kc-pc-l { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
        #dbch-root .kc-pc-t { min-width: 0; display: flex; flex-direction: column; }
        #dbch-root .kc-pc-n { font-size: 13px; font-weight: 600; color: var(--text-1);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #dbch-root .kc-pc-0 .kc-pc-n { color: var(--text-3); font-weight: 500; }
        #dbch-root .kc-pc-go { color: var(--accent); text-decoration: none; font-weight: 600; }
        #dbch-root .kc-pc-go:hover { text-decoration: underline; }
        #dbch-root .kc-pc .kc-pc-av { width: 30px; height: 30px; font-size: 10.5px; flex: none; }
        #dbch-root .kc-pc-r { display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%; }
        #dbch-root .kc-pc-av { border-radius: 50%; background: var(--ink); color: var(--lime);
          display: inline-flex; align-items: center; justify-content: center;
          font-weight: 700; overflow: hidden; }
        #dbch-root .kc-pc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
        #dbch-root .kc-sec { display: flex; flex-direction: column; gap: 10px; }
        #dbch-root .kc-sec h3 { margin: 0; font-size: 11px; text-transform: uppercase;
          letter-spacing: .09em; color: var(--text-3); font-weight: 700; }
        #dbch-root .kc-secbox { border: 1px solid var(--border); border-radius: var(--r-lg);
          background: var(--surface); padding: 18px 20px; }
        #dbch-root .kc-secbox p { margin: 0; font-size: 13.5px; line-height: 1.65;
          color: var(--text-1); white-space: pre-wrap; word-break: break-word; }
        @media (max-width: 900px) {
          #dbch-root .kc-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }


        /* ═══ EL BRIEF DE SOLICITUDES (28 ago 2026, KATALYST Core BD v44) ═══
         *
         * El paso 1 del formulario de «Nueva solicitud» y los campos que la
         * agencia configuró. Todo nace oculto: sin brief, este bloque no pinta
         * nada y el formulario que se ve es el de siempre.
         *
         * ⚠️ Va ANTES de los bloques @media y de la re-declaración final de
         * `.dbch-hidden`, que es la regla de este archivo: a igual especificidad
         * gana la última regla, y un estilo base escrito después pisaría el
         * responsive entero. Ya pasó una vez y costó un «se ve muy mal en el
         * celular». */
        #dbch-root .dbch-req-types { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
          gap: 9px; margin-top: 4px; }
        #dbch-root .dbch-req-type { display: block; width: 100%; text-align: left;
          padding: 13px 15px !important; background: var(--surface); border: 1px solid var(--border);
          border-radius: 11px; font-size: 13.5px; font-weight: 500; color: var(--text-0);
          cursor: pointer; transition: border-color .15s ease, background .15s ease; }
        #dbch-root .dbch-req-type:hover { border-color: var(--accent); background: var(--tint); }

        /* El cupo del plan. Neutro mientras quede, y solo se pone ámbar cuando
           de verdad se acabó: un aviso que grita desde la primera solicitud deja
           de leerse a la tercera. */
        #dbch-root .dbch-req-quota { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5;
          color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 9px 12px; }
        #dbch-root .dbch-req-quota-full { background: #FFF8E1; color: #6B5200;
          border: 1px solid #F7C948; }

        /* Astra le mete su padding a TODO botón, así que los que no lo declaran
           salen deformados. Regla del proyecto, y van varias veces. */
        #dbch-root .dbch-req-back { background: none; border: 0; padding: 0 0 6px !important;
          font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; }
        #dbch-root .dbch-req-back:hover { text-decoration: underline; }

        #dbch-root .dbch-req-star { color: #D14343; margin-left: 3px; font-weight: 600; }

        #dbch-root .dbch-req-asap { display: flex; align-items: center; gap: 7px;
          margin-top: 9px; font-size: 12.5px; color: var(--text-1); cursor: pointer; }
        #dbch-root .dbch-req-asap input { width: auto !important; margin: 0 !important; }

        /* Un input deshabilitado tiene que VERSE deshabilitado: si no, «lo antes
           posible» deja una caja de fecha que parece editable y no responde. */
        #dbch-root .dbch-req-input:disabled { opacity: .5; cursor: not-allowed; }

        @media(max-width:480px){
          /* Una columna: dos tarjetas de tipo a 375px quedan a media palabra. */
          #dbch-root .dbch-req-types { grid-template-columns: minmax(0,1fr); }
        }
        @media(max-width:1024px){
          /* Advisor en una columna — orden pedido por David (móvil): tarjeta
             del Advisor → chat → shortcuts. display:contents disuelve la
             columna de contexto para intercalar el chat entre sus hijos */
          #dbch-root .dbch-ai-layout{display:flex;flex-direction:column;}
          #dbch-root .dbch-ai-side{display:contents;}
          #dbch-root .dbch-ai-hero{order:-1;max-width:100% !important;}
          #dbch-root .dbch-ai-layout .dbch-chat-panel{order:0;height:480px !important;}
          #dbch-root .dbch-ai-suggest{order:1;max-width:100% !important;flex:none !important;}
          #dbch-root .dbch-ai-note{order:2;}
          /* La foto del Advisor era la caja desbordada del responsive */
          #dbch-root .dbch-ai-photo{max-width:100% !important;height:auto !important;}
          /* El panel del calendario no estira a llenar el viewport — dejaba
             una caja blanca vacía bajo la leyenda (feedback de David) */
          #dbch-root #dbch-cal .dbch-panel-full{flex:none !important;}
          /* En una sola columna ya no cabe todo en el viewport: los paneles
             vuelven a alto natural con tope de scroll interno */
          #dbch-root .dbch-ov-bottom{grid-template-columns:minmax(0,1fr);flex:none;min-height:auto;}
          #dbch-root .dbch-tabpane.active .dbch-panel-scroll{height:auto;max-height:380px;}
          #dbch-root .dbch-act-scroll{max-height:300px !important;}
          #dbch-root .dbch-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
          #dbch-root .dbch-section{padding:24px;}
        }

        @media(max-width:900px){
          /* La tarjeta clara arranca debajo del topbar oscuro (mockup) */
          #dbch-root .dbch-main{margin:72px 8px 10px;border-radius:20px;height:calc(100vh - 82px);}
          #dbch-root .dbch-sidebar{transform:translateX(-100%);width:min(78vw,320px);}
          #dbch-root .dbch-sidebar.open{transform:translateX(0);}
          #dbch-root .dbch-mob-toggle{display:flex;}

          /* ── Topbar móvil (mockup): hamburguesa + K|COS centrado + lupa ── */
          #dbch-root .dbch-mob-topbar{
            display:flex;
            position:fixed;
            top:0; left:0; right:0;
            height:64px;
            align-items:center;
            justify-content:center;
            background:#1A1A1A;
            z-index:99980;
          }
          #dbch-root .dbch-mob-topbar-logo{ height:30px; width:auto; display:block; }
          #dbch-root .dbch-mob-searchbtn{
            position:absolute;
            right:8px; top:50%;
            transform:translateY(-50%);
            background:none; border:none;
            color:var(--lime);
            cursor:pointer;
            padding:12px;
            line-height:0;
          }
          /* La búsqueda cae del topbar como franja oscura (mismo nodo del
             sidebar, mudado por JS) */
          #dbch-root .dbch-mob-searchwrap{
            display:block;
            position:fixed;
            top:64px; left:0; right:0;
            z-index:99979;
            background:#1A1A1A;
            padding:2px 14px 12px;
          }
          #dbch-root .dbch-mob-searchwrap .dbch-side-search{ margin:0 !important; }
          /* Hamburguesa integrada al topbar: sin caja, barras lima (mockup) */
          #dbch-root .dbch-mob-toggle{ top:12px; left:8px; background:transparent; border:none; }
          #dbch-root .dbch-mob-toggle span{ background:var(--lime); width:24px; height:3px; border-radius:3px; }

          /* Drawer según mockup: el topbar queda detrás del panel abierto y
             los ítems del nav crecen a tamaño dedo */
          #dbch-root .dbch-sidebar-inner{padding-top:64px;}
          #dbch-root .dbch-nav-item{ font-size:15.5px !important; padding:13px 16px !important; gap:14px !important; }
          #dbch-root .dbch-nav-icon{ width:20px !important; height:20px !important; }
          #dbch-root .dbch-mob-backdrop.open{
            display:block;
            position:fixed;
            inset:0;
            background:rgba(8,17,31,.55);
            backdrop-filter:blur(2px);
            z-index:99990;
          }
          #dbch-root .dbch-section{padding:22px 16px 36px;}
          /* minmax(0,1fr), no un 1fr suelto — un 1fr sin clamp no se achica
             por debajo del contenido mínimo de sus hijos, y una tabla con
             min-width (ej. 440px) revienta todo el ancho del grid (y de la
             página completa) en vez de quedarse scrolleable dentro de su
             propia tarjeta. */
          #dbch-root .dbch-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
          #dbch-root .dbch-ov-bottom{grid-template-columns:minmax(0,1fr);}
          #dbch-root .dbch-trb{grid-template-columns:minmax(0,1fr);}
          #dbch-root .dbch-ov-header{flex-direction:column;}
          /* display:contents disuelve .dbch-ov-tools: sus hijos (sync,
             cluster) se vuelven hijos directos del header y se pueden
             ORDENAR entre la bienvenida — mismo truco del login mobile
             (v4.18). Orden del mockup: identidad → bienvenida → sync */
          #dbch-root .dbch-ov-tools{display:contents;}
          /* Tabs deslizables con el dedo, sin barra visible; la tab activa
             se desliza al centro (animación rAF en el JS — ni scrollTo smooth
             ni scroll-behavior corren en todos los engines embebidos) */
          #dbch-root .dbch-tabs{width:100%;overflow-x:auto;scrollbar-width:none;}
          #dbch-root .dbch-tabs::-webkit-scrollbar{display:none;}

          /* Cluster de identidad PRIMERO (mockup): avatar grande + nombre +
             "Cliente desde" + campana a la derecha, como fila de cabecera
             de la tarjeta */
          #dbch-root .dbch-user-cluster{
            order:-1;
            width:100% !important;
            align-items:center !important;
            gap:12px !important;
            padding-bottom:14px !important;
            border-bottom:1px solid var(--border) !important;
          }
          #dbch-root .dbch-ov-hero{ order:0; }
          #dbch-root .dbch-sync-inline{
            order:1;
            width:100%;
            display:flex !important;
            flex-direction:row !important;
            flex-wrap:nowrap !important;
            align-items:center !important;
            justify-content:space-between !important;
            gap:10px !important;
          }
          #dbch-root .dbch-sync-stack{ flex:1 !important; min-width:0 !important; }
          #dbch-root .dbch-user-cluster .dbch-since-block{ flex:1 !important; min-width:0 !important; }
          #dbch-root .dbch-user-btn .dbch-since-photo,
          #dbch-root .dbch-user-cluster .dbch-since-avatar{ width:46px !important; height:46px !important; font-size:13px !important; }
          #dbch-root .dbch-user-name{ font-size:16px !important; }
          #dbch-root .dbch-user-since{ display:block; font-size:12.5px; font-weight:300; color:var(--text-2); margin-top:1px; }
          #dbch-root .dbch-user-cluster .dbch-bell{ margin-left:auto !important; flex-shrink:0 !important; }
          /* La bienvenida baja de escala para no partirse en 3 líneas */
          #dbch-root .dbch-welcome-title{ font-size:24px !important; }

          /* Badges "Estado actual" / tag de mes — bajan a su propia línea en vez
             de intentar quedar en línea con textos largos en tarjetas angostas */
          #dbch-root .dbch-live-badge,
          #dbch-root .dbch-live-badge-light,
          #dbch-root .dbch-month-badge-light{
            display:inline-block !important;
            margin-left:0 !important;
            margin-top:5px !important;
          }

          /* (la regla del viejo .dbch-chat-newconvo flotante se eliminó en
             v4.26.0 — esa clase murió con el rediseño fase 6, el botón ahora
             es .dbch-ai-newconvo y vive en la tarjeta del Advisor) */
          #dbch-root .dbch-chat-empty{ max-width:88% !important; }

          /* Tablas de Trabajo Activo / Entregables — en vez de apretar las
             columnas hasta que el nombre de la tarea se envuelva en 5+ líneas
             y la fecha quede cortada fuera de pantalla, la tabla mantiene un
             ancho mínimo razonable y se desplaza horizontalmente dentro de
             su propia tarjeta. */
          #dbch-root .dbch-panel-scroll{
            overflow-x:auto !important;
            -webkit-overflow-scrolling:touch !important;
          }
          #dbch-root .dbch-tbl{ min-width:440px !important; }
          #dbch-root .dbch-tbl-full{ min-width:560px !important; }
          #dbch-root .dbch-tn{ white-space:nowrap !important; }

          /* Entregables: los anchos fijos por columna son de desktop — en
             móvil dejaban la primera columna en negativo y los encabezados
             encimados; vuelve a layout automático con scroll horizontal */
          #dbch-root #dbch-en .dbch-tbl{ table-layout:auto !important; min-width:620px !important; }
          #dbch-root #dbch-en .dbch-tbl th:nth-child(2), #dbch-root #dbch-en .dbch-tbl td:nth-child(2),
          #dbch-root #dbch-en .dbch-tbl th:nth-child(3), #dbch-root #dbch-en .dbch-tbl td:nth-child(3),
          #dbch-root #dbch-en .dbch-tbl th:nth-child(4), #dbch-root #dbch-en .dbch-tbl td:nth-child(4),
          #dbch-root #dbch-en .dbch-tbl th:nth-child(5), #dbch-root #dbch-en .dbch-tbl td:nth-child(5){ width:auto !important; }

          /* El pipeline scrollea DENTRO de la tarjeta de pieza (feedback de
             David): antes la tarjeta entera (nombre + botones incluidos) se
             iba de lado y el tinte lima terminaba a mitad de camino */
          #dbch-root .dbch-piece .dbch-pf{
            overflow-x:auto !important;
            -webkit-overflow-scrolling:touch !important;
            padding-bottom:4px !important;
          }
          #dbch-root .dbch-piece{ min-width:0 !important; max-width:100% !important; }

          /* Chips de "Dónde se utilizará" en grilla de 4 (propuesta de David) */
          #dbch-root .dbch-req-chips{
            display:grid !important;
            grid-template-columns:repeat(4,minmax(0,1fr)) !important;
            gap:6px !important;
          }
          #dbch-root .dbch-req-chip{
            padding:7px 4px !important;
            font-size:10.5px !important;
            text-align:center !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:ellipsis !important;
          }

          /* Los paneles NO estiran para llenar el viewport en móvil — la
             caja vacía bajo la leyenda del calendario (feedback de David).
             El chat del Advisor es la excepción: él SÍ llena la pantalla */
          #dbch-root .dbch-panel-full:not(.dbch-chat-panel){ flex:none !important; }

          /* ── Creative Advisor estilo WhatsApp (feedback de David):
             header compacto (foto + nombre + acciones), el chat manda en la
             pantalla, y las preguntas pre-establecidas viven en el popover
             del botón ⋯ del header ── */
          #dbch-root #dbch-ai .dbch-ai-layout{ flex:1; min-height:0; position:relative; }
          #dbch-root #dbch-ai .dbch-ai-hero{
            display:grid !important;
            grid-template-columns:auto minmax(0,1fr) auto auto;
            grid-template-rows:auto auto;
            column-gap:12px;
            align-items:center;
            text-align:left !important;
            padding:10px 12px !important;
            border-radius:14px;
          }
          #dbch-root #dbch-ai .dbch-ai-photo{
            grid-row:1 / span 2; grid-column:1;
            width:42px !important; height:42px !important;
            margin:0 !important; border-width:2px !important;
          }
          #dbch-root #dbch-ai .dbch-ai-name{ grid-column:2; grid-row:1; align-self:end; font-size:14px !important; text-align:left !important; }
          #dbch-root #dbch-ai .dbch-ai-carddesc{ grid-column:2; grid-row:2; align-self:start; margin:0 !important; font-size:10.5px !important; text-align:left !important; }
          /* "Nueva conversación" pasa a ícono redondo (solo el lápiz) */
          #dbch-root #dbch-ai .dbch-ai-newconvo{
            grid-column:3; grid-row:1 / span 2;
            width:34px !important; height:34px !important;
            margin:0 !important; padding:0 !important;
            font-size:0 !important; gap:0 !important;
            border-radius:50% !important;
            flex-shrink:0 !important;
          }
          #dbch-root #dbch-ai .dbch-ai-more{ grid-column:4; grid-row:1 / span 2; display:inline-flex; }
          #dbch-root #dbch-ai .dbch-chat-panel{ flex:1 !important; min-height:300px !important; height:auto !important; }
          #dbch-root #dbch-ai .dbch-ai-note{ display:none !important; }
          /* Popover de preguntas pre-establecidas (se abre con ⋯) */
          #dbch-root #dbch-ai .dbch-ai-suggest{
            display:none;
            position:absolute;
            top:70px; left:4px; right:4px;
            z-index:60;
            max-height:46vh; max-height:46dvh;
            overflow-y:auto;
            border:1px solid var(--border);
            box-shadow:0 18px 44px rgba(0,0,0,.22);
          }
          #dbch-root #dbch-ai .dbch-ai-layout.dbch-ai-suggest-open .dbch-ai-suggest{ display:block; }
        }

        /* ══ MENÚ INFERIOR TIPO APP (≤768px, 15 sep 2026) ══════════════════
           Aprobado por David sobre maqueta. Reemplaza la hamburguesa + drawer
           del portal del CLIENTE: el sidebar se vuelve una píldora oscura fija
           abajo con los MISMOS .dbch-nav-item (el scroll-spy, los badges y el
           clic siguen siendo uno solo), y a su derecha el «+» de Nueva
           solicitud, siempre visible.
           ⚠️ Acotado a :not([data-mode="admin"]): el Admin Portal comparte este
           sidebar con dos navs y un selector de cliente, y ahí se queda con su
           drawer de siempre. Va DESPUÉS del bloque de 768 de arriba y con
           !important donde aquél también lo usa, para ganarle.
           ⚠️ Sin máscara de desvanecido en los bordes: la píldora es el
           contenedor que scrollea y la máscara recortaría su propia sombra. La
           pista de «hay más» es el ícono que asoma a medias (4.5 visibles). */
        @media(max-width:900px){
          #dbch-root:not([data-mode="admin"]) .dbch-mob-toggle,
          #dbch-root:not([data-mode="admin"]) .dbch-mob-backdrop{ display:none !important; }
          #dbch-root:not([data-mode="admin"]) .dbch-sidebar{
            top:auto; left:12px; right:12px; width:auto; height:auto; min-height:0;
            /* En tablet no se estira: tamaño de teléfono, centrada (márgenes auto). */
            max-width:390px; margin-inline:auto;
            bottom:calc(14px + env(safe-area-inset-bottom, 0px));
            background:transparent; transform:none; z-index:99970;
          }
          #dbch-root:not([data-mode="admin"]) .dbch-sidebar-inner{
            flex-direction:row; align-items:center; gap:8px; height:64px; padding:0; overflow:visible;
          }
          #dbch-root:not([data-mode="admin"]) .dbch-logo-wrap,
          #dbch-root:not([data-mode="admin"]) .dbch-sidebar-inner > .dbch-side-search,
          #dbch-root:not([data-mode="admin"]) .dbch-sidebar-bottom{ display:none !important; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav{
            flex:1; min-width:0; height:64px; flex-direction:row; gap:0; padding:6px;
            border-radius:999px; background:rgba(26,26,26,.94);
            -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
            box-shadow:0 12px 30px rgba(14,14,14,.28), 0 0 0 1px rgba(255,255,255,.06);
            overflow-x:auto; overflow-y:hidden;
            /* SIN scroll-snap a propósito: el imán cortaba el ícono activo del final. */
            /* scroll-padding = padding: sin él el imán pega el primer ícono al borde
               y el activo queda con más aire arriba/abajo que a los lados. */
            scroll-padding-inline:6px;
            scrollbar-width:none; overscroll-behavior-x:contain;
          }
          #dbch-root:not([data-mode="admin"]) .dbch-nav::-webkit-scrollbar{ display:none; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item{
            flex:0 0 calc(100% / 4.5); height:100%; position:relative;
            justify-content:center !important; padding:0 !important; gap:0 !important;
            border-radius:999px !important; border:0 !important; box-shadow:none !important;
            color:rgba(255,255,255,.62) !important; transform:none !important; order:20;
          }
          /* El orden aprobado: Overview, Trabajo activo, Mensajes, Entregables;
             al deslizar, Calendario y Advisor. */
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-ov"]{ order:1; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-tr"]{ order:2; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-dm"]{ order:3; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-en"]{ order:4; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-cal"]{ order:5; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item[data-s="dbch-ai"]{ order:6; }
          /* Solo íconos: el nombre se oculta visualmente pero sigue en el DOM,
             así que un lector de pantalla anuncia la sección igual. */
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item > span:not(.dbch-nav-badge){
            position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
          }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item::after{ content:none !important; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-icon{ width:24px !important; height:24px !important; opacity:1; }
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item.active{
            background:var(--brand-dark); color:var(--on-brand-dark) !important;
          }
          /* El Advisor pierde su color propio: en una barra de solo íconos, un
             ícono en color de marca sin estar activo se confunde con el activo. */
          #dbch-root:not([data-mode="admin"]) .dbch-nav-item-ai:not(.active){ color:rgba(255,255,255,.62) !important; }
          /* Badge rojo sin aro, arriba a la derecha del ícono (David: sin borde). */
          #dbch-root:not([data-mode="admin"]) .dbch-nav-badge{
            position:absolute !important; top:6px; left:calc(50% + 4px); margin:0 !important;
            background:#EF4444 !important; color:#fff !important; box-shadow:none !important;
          }
          #dbch-root:not([data-mode="admin"]) .dbch-dock-plus{
            display:grid; place-items:center; flex:none; width:64px; height:64px; padding:0 !important;
            border:0 !important; border-radius:50%; cursor:pointer;
            background:var(--brand-dark); color:var(--on-brand-dark);
            box-shadow:0 12px 30px rgba(14,14,14,.24);
          }
          #dbch-root:not([data-mode="admin"]) .dbch-dock-plus svg{ display:block; flex-shrink:0; }
          #dbch-root:not([data-mode="admin"]) .dbch-dock-plus:active{ transform:scale(.93); }
          #dbch-root:not([data-mode="admin"]) .dbch-dock-plus:focus-visible{ outline:2px solid var(--brand-dark); outline-offset:3px; }
          /* El Advisor y Mensajes llenan la pantalla con su chat: sin este relleno el
             campo para escribir quedaba DEBAJO de la barra (visto en el inventario). */
          #dbch-root:not([data-mode="admin"]) #dbch-ai,
          #dbch-root:not([data-mode="admin"]) #dbch-dm{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
          /* Y el Advisor mide exactamente lo visible de la tarjeta (100vh - 82px,
             el alto de .dbch-main en móvil): con el min-height de 100vh de las
             secciones, su campo quedaba 82px más abajo de lo que se ve. */
          #dbch-root:not([data-mode="admin"]) #dbch-ai{ height:calc(100vh - 82px); min-height:0 !important; }
          /* Espacio al final del contenido para que la barra no tape lo último. */
          #dbch-root:not([data-mode="admin"]) .dbch-main::after{ content:''; display:block; flex:none; height:calc(92px + env(safe-area-inset-bottom, 0px)); }
        }

        @media(max-width:480px){
          #dbch-root .dbch-modal-actions { flex-direction: column !important; }
          #dbch-root .dbch-btn-cancel { width: 100% !important; }

          /* ── Calendario tipo app (v4.26.0, feedback de David): número
             centrado en círculo + dots de color por evento; el panel del
             día (que en ≤1024px ya baja debajo del grid) hace de lista,
             como un calendario de celular moderno ── */
          #dbch-root .dbch-cal-grid{ gap:2px !important; }
          #dbch-root .dbch-cal-day{
            min-height:48px !important;
            background:transparent !important;
            border-radius:10px !important;
            padding:3px 0 5px !important;
            text-align:center !important;
          }
          #dbch-root .dbch-cal-off{ background:transparent !important; }
          #dbch-root .dbch-cal-today{ border:none !important; background:transparent !important; }
          #dbch-root .dbch-cal-sel{ background:var(--tint) !important; }
          /* display:flex (bloque) y no inline-flex: el círculo del número
             ocupa su propia línea y los dots fluyen centrados DEBAJO */
          #dbch-root .dbch-cal-num{
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            width:28px !important;
            height:28px !important;
            border-radius:50% !important;
            font-size:12.5px !important;
            color:var(--text-1) !important;
            margin:0 auto 1px !important;
          }
          #dbch-root .dbch-cal-today .dbch-cal-num{ background:var(--lime) !important; color: var(--on-brand) !important; font-weight:700 !important; }
          #dbch-root .dbch-cal-sel .dbch-cal-num{ background:var(--ink) !important; color:#fff !important; font-weight:700 !important; }
          #dbch-root .dbch-cal-todaytag{ display:none !important; }
          /* Chips → dots de color (el texto vive en el panel del día) */
          #dbch-root .dbch-cal-day .dbch-cal-chip{
            display:inline-block !important;
            width:6px !important;
            height:6px !important;
            padding:0 !important;
            border-radius:50% !important;
            margin:3px 1.5px 0 !important;
            font-size:0 !important;
            line-height:0 !important;
            vertical-align:top !important;
          }
          #dbch-root .dbch-cal-day .dbch-cc-done{ background:#0F6E56 !important; }
          #dbch-root .dbch-cal-day .dbch-cc-work{ background:#7F77DD !important; }
          #dbch-root .dbch-cal-day .dbch-cc-rev{ background:#F59E0B !important; }
          #dbch-root .dbch-cal-day .dbch-cc-wish{ background:#fff !important; border:1.5px dashed #C4CBD4 !important; }
          #dbch-root .dbch-cal-more{ display:none !important; }
          #dbch-root .dbch-cal-day .dbch-cal-plus{ display:none !important; }
        }

        /* ══ LA FICHA DE LA SOLICITUD, VISTA DEL CLIENTE (2 ago 2026) ═══════
           Ajustes #11 y #12 de David: el cliente abre su pieza, revisa cómo
           quedó, ve sus archivos, ve en qué va y puede corregir la descripción
           mientras nadie haya empezado.

           Vive DENTRO del modal del hilo, encima de la conversación. Por eso
           lleva su propio scroll: el modal ya limita el alto y un bloque suelto
           ahí adentro se recorta por abajo sin forma de alcanzarlo. Es la misma
           regla que en la Mesa ya mordió tres veces. */
        #dbch-root .dbch-pd { max-height: 40vh !important; max-height: 40dvh !important; overflow-y: auto !important;
          overflow-x: hidden !important; margin: 14px 0 0 !important;
          display: flex !important; flex-direction: column !important; gap: 14px !important; }
        #dbch-root .dbch-pd-b { background: #FBFCFD !important; border: 1px solid #F1F5F9 !important;
          border-radius: 12px !important; padding: 13px 14px !important; }

        #dbch-root .dbch-pd-b h4 { margin: 0 0 8px !important; font-size: 11.5px !important;
          font-weight: 700 !important; letter-spacing: .04em !important;
          text-transform: uppercase !important; color: #6B7280 !important;
          display: flex !important; align-items: center !important; gap: 8px !important; }
        #dbch-root .dbch-pd-count { margin-left: auto !important; font-size: 11px !important;
          font-weight: 700 !important; color: #4B5563 !important; background: #EFF1F5 !important;
          border-radius: 20px !important; padding: 1px 8px !important; letter-spacing: 0 !important; }
        #dbch-root .dbch-pd-text { margin: 0 !important; font-size: 13.5px !important;
          line-height: 1.6 !important; color: #0D1117 !important; white-space: pre-wrap !important;
          word-break: break-word !important; }

        /* El textarea crece con su contenido y no se puede achicar a mano:
           un handle de resize dentro de un modal con scroll propio deja el
           control fuera de la vista en cuanto alguien lo estira. */
        #dbch-root .dbch-pd-desc { width: 100% !important; box-sizing: border-box !important;
          font-family: inherit !important; font-size: 13.5px !important; line-height: 1.6 !important;
          color: #0D1117 !important; background: #fff !important; border: 1px solid #E2E8F0 !important;
          border-radius: 10px !important; padding: 11px 12px !important; resize: vertical !important; }
        #dbch-root .dbch-pd-desc:focus { outline: none !important; border-color: var(--lime) !important;
          box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18) !important; }
        #dbch-root .dbch-pd-actions { display: flex !important; align-items: center !important;
          gap: 10px !important; flex-wrap: wrap !important; margin-top: 9px !important; }
        #dbch-root .dbch-pd-save { background: var(--lime) !important; color: var(--on-brand) !important;
          border: none !important; border-radius: 9px !important; padding: 8px 14px !important;
          font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important;
          font-family: inherit !important; }
        #dbch-root .dbch-pd-save:disabled { opacity: .5 !important; cursor: default !important; }
        #dbch-root .dbch-pd-hint { font-size: 11.5px !important; color: #9CA3AF !important; }

        #dbch-root .dbch-pd-files { list-style: none !important; margin: 0 !important;
          padding: 0 !important; display: flex !important; flex-direction: column !important;
          gap: 6px !important; }
        #dbch-root .dbch-pd-files li { display: flex !important; align-items: center !important;
          gap: 8px !important; font-size: 13px !important; }
        #dbch-root .dbch-pd-files a { color: #0D1117 !important; text-decoration: none !important;
          font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important;
          white-space: nowrap !important; }
        #dbch-root .dbch-pd-files a:hover { text-decoration: underline !important; }
        #dbch-root .dbch-pd-files span { font-size: 11.5px !important; color: #9CA3AF !important;
          flex: none !important; }

        #dbch-root .dbch-pd-bar { height: 5px !important; background: #EFF1F5 !important;
          border-radius: 5px !important; overflow: hidden !important; margin-bottom: 10px !important; }
        #dbch-root .dbch-pd-bar i { display: block !important; height: 100% !important;
          background: var(--lime) !important; border-radius: 5px !important; }
        #dbch-root .dbch-pd-steps { list-style: none !important; margin: 0 !important;
          padding: 0 !important; display: flex !important; flex-direction: column !important;
          gap: 5px !important; }
        #dbch-root .dbch-pd-steps li { display: flex !important; align-items: flex-start !important;
          gap: 8px !important; font-size: 13px !important; color: #0D1117 !important;
          line-height: 1.5 !important; }
        #dbch-root .dbch-pd-tick { width: 16px !important; height: 16px !important; flex: none !important;
          border-radius: 5px !important; border: 1.5px solid #D5DBE2 !important; display: grid !important;
          place-items: center !important; font-size: 9.5px !important; color: #fff !important;
          margin-top: 2px !important; }
        /* Un paso hecho se tacha y se apaga: la lista se lee de un vistazo por
           dónde va sin tener que contar los checks. */
        #dbch-root .dbch-pd-done { color: #9CA3AF !important; text-decoration: line-through !important; }
        #dbch-root .dbch-pd-done .dbch-pd-tick { background: var(--lime) !important;
          border-color: var(--lime) !important; color: var(--on-brand) !important; text-decoration: none !important; }

        @media (max-width: 480px) {
          #dbch-root .dbch-pd { max-height: 34vh !important; max-height: 34dvh !important; }
        }

           regla nueva con display !important debe quedar ANTES de esta línea. */
        #dbch-root .dbch-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   LA PANTALLA DE AVISO — la que se pinta EN VEZ del portal (8 sep 2026)

   Tres sitios la usan: el portal para «esta es la página de los clientes» y
   «tu cuenta no tiene espacio», y el Admin Portal para «esta sección es del
   equipo». Antes cada uno traía su HTML a mano con `font-family: sans-serif`
   y un párrafo gris; David lo reportó en la Mesa y aquí valía igual.

   ⚠️ NO cuelga de `#dbch-root`: REEMPLAZA al portal entero, así que ese
   contenedor no existe aquí y sus variables tampoco. Las medidas y los
   colores van literales a propósito, mismo criterio que `.kcore-gate-page`
   en el motor.

   ⚠️ Y va en NEUTRO, sin el color de la agencia. Ese color vive en
   `#dbch-root` y lo pone `KCORE_Branding` a partir del departamento del
   cliente; quien ve esta pantalla es justamente quien NO tiene departamento
   resuelto, así que pintarla de marca sería pintarla con la marca
   equivocada. Ver la cabecera de las variables, arriba.

   `position: fixed; inset: 0` y no `min-height`: si el tema mete cabecera o
   márgenes alrededor del shortcode, con `min-height` esos huecos se quedan
   fuera y el fondo se ve «cortado». Es la misma lección de `.kcore-gate-page`.
   `overflow-x: hidden` explícito al lado del `auto` vertical, o aparece una
   barra horizontal parásita.
   ══════════════════════════════════════════════════════════════ */
.dbch-aviso-page { position: fixed; inset: 0; z-index: 999999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #1A1A1A; padding: 56px 20px; box-sizing: border-box;
  overflow-y: auto; overflow-x: hidden; }
/* El logo va sobre la caja OSCURA porque `katalyst-full.png` lleva el texto en
   BLANCO: sobre el fondo claro de la tarjeta la palabra desaparecería y
   quedaría la K suelta. Mismo motivo que en `KCORE_Login_Brand`.
   `alt=""` a propósito: es decoración, y el título de abajo ya nombra la
   pantalla — un lector de pantalla no gana nada oyendo la marca primero. */
.dbch-aviso-logo { display: block; width: 148px; height: auto; margin: 0 0 32px; flex: none; }
.dbch-aviso-box { max-width: 460px; width: 100%; margin: 0 auto; padding: 48px 32px;
  box-sizing: border-box; background: #fff; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); flex: none; text-align: center;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.dbch-aviso-box h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700;
  color: #1A1A1A; line-height: 1.25; }
.dbch-aviso-box p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #6B7280; }
/* Centrada con o sin acción propia: cuando solo queda «Entrar con otra
   cuenta» (la pantalla de «no tienes espacio»), ese botón se queda solo y
   centrado igual, en vez de pegado a una esquina. */
.dbch-aviso-acts { display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center; }
/* ⚠️ `!important` en el botón, y no es paranoia: esta caja no hereda el
   aislamiento de `#dbch-root` y Astra estila `a` y `button` por su cuenta.
   El CLAUDE.md de este plugin lo tiene registrado varias veces, la última
   con una papelera que quedó invisible por el padding del tema. */
.dbch-aviso-b { display: inline-block; text-decoration: none !important;
  background: #CBF904 !important; color: #1A1A1A !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 600;
  padding: 12px 22px !important; border: 0 !important; border-radius: 10px !important;
  box-sizing: border-box; cursor: pointer; }
.dbch-aviso-b:hover { filter: brightness(.94); }
.dbch-aviso-b2 { background: #F7F8FA !important; color: #374151 !important;
  border: 1px solid #E5E7EB !important; }
.dbch-aviso-b2:hover { background: #EFF1F5 !important; filter: none; }

/* ══ DESVANECIDO EN LOS BORDES DE LO QUE SE DESLIZA (15 sep 2026) ══════════
   El mismo efecto de la Mesa (ver el bloque gemelo al final de kcore-mesa.css),
   aprobado por David en celular y escritorio. Aparece SOLO del lado donde queda
   contenido escondido: el bloque «DESVANECIDO» de dbch-dashboard.js mide y pone
   .dbch-fx-l/-r/-t/-b y .dbch-fx-any.
   1. MÁSCARA en contenedores sin fondo propio (paneles con scroll, chats, la
      línea de etapas de una pieza en móvil).
   2. VELO del color del fondo en los que sí lo tienen (el riel gris de
      pestañas, la barra inferior oscura, la tarjeta clara de .dbch-main): la
      caja no se desvanece, lo que se desvanece es su contenido.
   ⚠️ Sin !important en las propiedades que cambian con las clases, y todo va
   después de la re-declaración de .dbch-hidden a propósito: aquí no hay ningún
   `display`, así que no le compite. */
#dbch-root .dbch-fxm.dbch-fx-any {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--dbch-fl, 0px), #000 calc(100% - var(--dbch-fr, 0px)), transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 var(--dbch-ft, 0px), #000 calc(100% - var(--dbch-fb, 0px)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 var(--dbch-fl, 0px), #000 calc(100% - var(--dbch-fr, 0px)), transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 var(--dbch-ft, 0px), #000 calc(100% - var(--dbch-fb, 0px)), transparent 100%);
          mask-composite: intersect;
}
/* ⚠️ Cada contenedor arranca en 0: las variables CSS se HEREDAN, y sin esto la
   línea de etapas de una pieza heredaba el desvanecido de abajo de la lista que
   la contiene y quedaba desteñida entera. Va antes de las cuatro de abajo. */
#dbch-root .dbch-fxm { --dbch-fl: 0px; --dbch-fr: 0px; --dbch-ft: 0px; --dbch-fb: 0px; }
#dbch-root .dbch-fx-l { --dbch-fl: 28px; }
#dbch-root .dbch-fx-r { --dbch-fr: 28px; }
#dbch-root .dbch-fx-t { --dbch-ft: 28px; }
#dbch-root .dbch-fx-b { --dbch-fb: 28px; }

/* Velo del riel de pestañas (gris var(--surface-3), gap 4px: los márgenes
   negativos lo compensan para no correr las pestañas). */
#dbch-root .dbch-tabs::before, #dbch-root .dbch-tabs::after {
  content: ''; position: sticky; flex: none; align-self: stretch; width: 28px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s; }
#dbch-root .dbch-tabs::before { left: 0; order: -1; margin-right: -32px; border-radius: 18px 0 0 18px;
  background: linear-gradient(to right, var(--surface-3) 20%, rgba(244,244,242,0)); }
#dbch-root .dbch-tabs::after { right: 0; order: 999; margin-left: -32px; border-radius: 0 18px 18px 0;
  background: linear-gradient(to left, var(--surface-3) 20%, rgba(244,244,242,0)); }
#dbch-root .dbch-tabs.dbch-fx-l::before, #dbch-root .dbch-tabs.dbch-fx-r::after { opacity: 1; }
/* Lo ACTIVO nunca queda bajo el velo (David): la pestaña elegida y, en el
   celular, el ícono activo de la barra van por encima. */
#dbch-root .dbch-tabs .dbch-tab.active { position: relative; z-index: 3; }

/* Velo de la tarjeta clara (.dbch-main scrollea por dentro, fondo #F4F4F2). */
#dbch-root .dbch-main::before {
  content: ''; position: sticky; top: 0; flex: none; height: 28px; margin-bottom: -28px; z-index: 40;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to bottom, #F4F4F2, rgba(244,244,242,0)); }
#dbch-root .dbch-main.dbch-fx-t::before { opacity: 1; }
@media (min-width: 901px) {
  #dbch-root .dbch-main::after {
    content: ''; position: sticky; bottom: 0; flex: none; height: 28px; margin-top: -28px; z-index: 40;
    pointer-events: none; opacity: 0; transition: opacity .15s;
    background: linear-gradient(to bottom, rgba(244,244,242,0), #F4F4F2); }
  #dbch-root .dbch-main.dbch-fx-b::after { opacity: 1; }
}
/* ══ SIN VELOS EN LA BARRA NI SOBRE EL CONTENIDO (≤900px, 16 sep 2026) ══════
   David, probando en el iPad: «el menú se ve raro con ese difuminado sobre
   todo, incluso sobre el fondo negro». Dos motivos, los dos estructurales:

   1. El velo de la barra se pinta del color de la píldora, pero la píldora es
      TRANSLÚCIDA y con desenfoque: un rectángulo opaco del mismo color encima
      no desaparece, se ve como una mancha en la esquina redondeada.
   2. El velo del contenido se pinta del color del FONDO, y encima hay paneles
      BLANCOS: sobre ellos deja una bruma gris. Un velo no puede saber de qué
      color es lo que tapa.

   El `::after` de `.dbch-main` VUELVE A SER SOLO EL ESPACIO para que la barra
   no tape lo último, que es para lo que nació. Los desvanecidos de los
   contenedores que se deslizan por dentro (`FX_MASCARA` en dbch-dashboard.js)
   se quedan: ahí es una máscara sobre el contenido, no un color encima. */
@media (max-width: 900px) {
  #dbch-root:not([data-mode="admin"]) .dbch-main::after {
    position: static; background: none; z-index: auto;
    height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #dbch-root:not([data-mode="admin"]) .dbch-nav::before,
  #dbch-root:not([data-mode="admin"]) .dbch-nav::after { content: none; }
  #dbch-root:not([data-mode="admin"]) .dbch-nav-item.active { z-index: 3; }
}
@media (prefers-reduced-motion: reduce) {
  #dbch-root .dbch-tabs::before, #dbch-root .dbch-tabs::after,
  #dbch-root .dbch-main::before, #dbch-root .dbch-main::after,
  #dbch-root .dbch-nav::before, #dbch-root .dbch-nav::after { transition: none; }
}

/* ══ ENTREGABLES COMO TARJETAS EN EL CELULAR (≤768px, 15 sep 2026) ══════════
   Aprobado por David sobre maqueta (https://claude.ai/artifact/W86JFEEiweT2Kn2JX8Mqoh).
   La tabla obligaba a deslizar de lado para ver la fecha y el botón. Aquí NO se
   toca el HTML ni el JS: las MISMAS filas de #dbch-appr se reacomodan con CSS
   en tarjeta (nombre y estado arriba, estrellas y fecha, y «Ver entregable» a
   lo ancho). La fila sigue siendo .dbch-clickrow, así que tocarla abre el
   detalle igual que antes. En escritorio y tablet sigue la tabla.
   ⚠️ Con !important porque las reglas de la tabla que pisa (anchos por columna,
   min-width, nowrap, padding de celda) ya lo llevan. */
@media (max-width: 900px) {
  #dbch-root #dbch-en .dbch-panel-scroll { overflow-x: visible !important; }
  #dbch-root #dbch-en .dbch-tbl { display: block !important; min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  #dbch-root #dbch-en .dbch-tbl thead { display: none !important; }
  #dbch-root #dbch-en .dbch-tbl tbody { display: grid !important; gap: 8px !important; }
  #dbch-root #dbch-en .dbch-tbl tr {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "nombre estado" "estrellas fecha" "boton boton" !important;
    align-items: center !important; gap: 8px 10px !important;
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 14px !important; padding: 12px 13px !important; }
  #dbch-root #dbch-en .dbch-tbl td { display: block !important; width: auto !important; padding: 0 !important; background: transparent !important; }
  #dbch-root #dbch-en .dbch-tbl tr:hover td { background: transparent !important; }
  #dbch-root #dbch-en .dbch-tbl td:nth-child(1) { grid-area: nombre; min-width: 0; }
  #dbch-root #dbch-en .dbch-tbl td:nth-child(2) { grid-area: estado; align-self: start !important; }
  #dbch-root #dbch-en .dbch-tbl td:nth-child(3) { grid-area: fecha; justify-self: end; font-variant-numeric: tabular-nums; }
  #dbch-root #dbch-en .dbch-tbl td:nth-child(4) { grid-area: estrellas; }
  #dbch-root #dbch-en .dbch-tbl td:nth-child(5) { grid-area: boton; }
  #dbch-root #dbch-en .dbch-tbl .dbch-tn { display: block !important; white-space: normal !important; font-size: 14px !important; line-height: 1.3 !important; }
  #dbch-root #dbch-en .dbch-tbl .dbch-vb-green {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 40px !important; padding: 0 !important; border-radius: 11px !important; font-size: 13px !important; }
  /* La fila de «no hay entregables» ocupa la tarjeta entera. */
  #dbch-root #dbch-en .dbch-tbl td[colspan] { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; }
}

/* ══ iOS HACE ZOOM SI UN CAMPO TIENE LA LETRA POR DEBAJO DE 16px (16 sep 2026) ══
   Reportado por David desde producción, con tres capturas del portal en iPhone
   (Advisor, Calendario y Overview): al tocar «Buscar tarea», Safari AMPLÍA la
   página y la deja descuadrada — el título se sale por la derecha, el buscador
   se pasa del borde y las tarjetas quedan cortadas. Al salir del campo la
   página se queda así. No es el teclado: es la ampliación automática de iOS
   cuando el texto del campo mide menos de 16px.

   ⚠️ NO se arregla con `maximum-scale=1` en el viewport: eso le quita también
   el zoom con dos dedos a quien lo necesita para leer.

   Va al final de la hoja (no toca `display`, así que la re-declaración de
   `.dbch-hidden` sigue mandando) y solo en móvil. */
@media (max-width: 900px) {
  /* ⚠️ EL ID VA DOS VECES, y es lo único que hace que esta regla aplique.
     Los campos del portal traen su tamaño con `!important` desde su propia
     clase — `#dbch-root .dbch-side-search input` es (1,1,1) y le gana a
     (1,0,1) por más !important que lleve y por más al final que esté. Medido
     en el navegador: con un solo id el buscador seguía en 12,5px y iOS seguía
     ampliando. Repetir el id sube a (2,0,1) sin tener que enumerar cada campo,
     que es lo que haría que el próximo campo nuevo volviera a traer el fallo. */
  #dbch-root#dbch-root input,
  #dbch-root#dbch-root select,
  #dbch-root#dbch-root textarea { font-size: 16px !important; }
}

/* ══ LAS PESTAÑAS ENVUELVEN EN EL CELULAR (≤768px, 16 sep 2026) ═════════════
   Mismo caso que en la Mesa, y lo señaló David con una captura del Overview:
   el velo del riel pasaba por encima de la pastilla BLANCA de la pestaña
   activa y se leía como una mancha gris, no como un desvanecido. Con tres
   pestañas cortas, envolver en dos líneas las muestra todas y deja de hacer
   falta el desvanecido. */
@media (max-width: 900px) {
  #dbch-root:not([data-mode="admin"]) .dbch-tabs {
    flex-wrap: wrap !important; overflow: visible !important; border-radius: 18px !important; }
  #dbch-root:not([data-mode="admin"]) .dbch-tabs::before,
  #dbch-root:not([data-mode="admin"]) .dbch-tabs::after { display: none !important; }
  /* Con el relleno de escritorio, tres pestañas piden una fila cada una. Se
     aprietan lo justo para que quepan las tres en una sola línea; si aun así no
     caben (un nombre más largo, una traducción), envuelven en vez de cortarse. */
  #dbch-root:not([data-mode="admin"]) .dbch-tab {
    padding: 7px 11px !important; font-size: 11.5px !important; }
}

/* ══ EL «+» Y EL FINAL DE LA BARRA (≤768px, 16 sep 2026) ════════════════════
   David, probando en su iPhone: «el + tapa el último ícono». No lo tapa —hay
   8px entre la píldora y el botón, medido— pero se lee así: el quinto ícono
   asoma justo en el borde redondeado de la píldora y el «+» arranca pegado a
   él, así que el recorte del ícono parece culpa del botón.

   Se separan un poco más y el desvanecido del borde se hace más ancho, que es
   lo que convierte un ícono cortado en un ícono que ASOMA. */
@media (max-width: 900px) {
  #dbch-root:not([data-mode="admin"]) .dbch-sidebar-inner { gap: 14px !important; }
  /* ⚠️ El desvanecido se ACHICA, no se agranda. Medido en la captura: con los
     íconos a 1/4.5 del riel, el quinto asoma unos 29px y el velo de 28px se lo
     comía entero — quedaba una mancha, no un ícono. Con 20px de velo y los
     íconos un punto más angostos, el quinto se ve a medias y se entiende que
     la barra sigue. */
  #dbch-root:not([data-mode="admin"]) .dbch-nav::after { width: 20px !important; }
  #dbch-root:not([data-mode="admin"]) .dbch-nav-item { flex: 0 0 calc(100% / 4.8) !important; }
}