/* ────────────────────────────────────────────────────────────── Modo oscuro. Se enciende con «data-theme="dark"» en , que pone el botón de la barra de arriba. Mientras no esté, este archivo no hace absolutamente nada: todas sus reglas cuelgan de ese atributo. Cómo está hecho y por qué así: el panel no tiene una paleta única —los colores se declararon a mano pantalla por pantalla, hay más de setecientos blancos escritos a pelo— así que un modo oscuro «de verdad» es ir cambiándolos por fichas, pantalla por pantalla. Esto es el primer paso: la paleta oscura y las superficies grandes que comparten todas las pantallas —fondo, tarjetas, tablas, campos, diálogos—. Lo que todavía no esté convertido se verá claro sobre oscuro; se va arreglando por tandas. ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --ink: #e7e9ef; --ink-1: #e7e9ef; --ink-2: #b9c0d0; --ink-3: #8b93a7; --muted: #8b93a7; --faint: #6c7489; --card: #161a24; --canvas: #0f1219; --surface: #161a24; --surface-2: #1d2230; --line: #262c3a; --line-soft: #1e2330; --line-2: #2f3647; --grid-line: #2a3142; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5); --danger: #ff6b81; color-scheme: dark; } /* ───────────────────────────────────────────── Cada pantalla trae su propia paleta ───────────────────────────────────────────── Y esa era la razón de verdad de que Tareas no se oscureciera. Las fichas de color no viven solo en la raíz: cada portal —tareas, archivos, redes, solicitudes, marca…— vuelve a declararlas en su propio contenedor con los valores claros. Así que las reglas del tema SÍ se aplicaban, pero dentro de esos contenedores «var(--card)» seguía valiendo blanco. Con esto se reescriben ahí también, y se arregla de una vez en todas esas pantallas en lugar de ir regla por regla. */ :root[data-theme="dark"] .cgm-otp-portal, :root[data-theme="dark"] .cgm-repo-portal, :root[data-theme="dark"] .cgm-sm-portal, :root[data-theme="dark"] .cgm-reqPortal, :root[data-theme="dark"] .cgm-ftBrand, :root[data-theme="dark"] .cgm-designerFantime, :root[data-theme="dark"] .cgm-meetNotetaker, :root[data-theme="dark"] .cgm-gridReqView { --ink: #e7e9ef; --ink-1: #e7e9ef; --ink-2: #b9c0d0; --ink-3: #8b93a7; --muted: #8b93a7; --faint: #6c7489; --card: #161a24; --canvas: #0f1219; --surface: #161a24; --surface-2: #1d2230; --line: #262c3a; --line-soft: #1e2330; --line-2: #2f3647; --grid-line: #2a3142; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5); } /* El lienzo. */ :root[data-theme="dark"] body, :root[data-theme="dark"] .cgm-appShell, :root[data-theme="dark"] .cgm-workspace, :root[data-theme="dark"] .cgm-mainStack, :root[data-theme="dark"] .cgm-main { background: var(--canvas) !important; color: var(--ink); } /* Tarjetas y paneles. Con «!important» a propósito y solo en las superficies: estos blancos están escritos a pelo en reglas más concretas que estas —«.cgm-otp-portal .cgm-card--tasks» y cien parecidas—, y pelearse con cada una a base de selectores más largos sería escribir el panel dos veces. Lo que SÍ se deja en paz es el color con significado: los estados, los grupos, las píldoras de fecha. Eso lo pone cada uno y no es «fondo de la pantalla», es el dato. */ :root[data-theme="dark"] .cgm-card, :root[data-theme="dark"] .cgm-ftTopbar, :root[data-theme="dark"] .cgm-settings-dlg__panel, :root[data-theme="dark"] .cgm-dateRangeDlg__panel, :root[data-theme="dark"] .cgm-tasksToolbar__menu, :root[data-theme="dark"] .cgm-rowMenu, :root[data-theme="dark"] .cgm-updPanel, :root[data-theme="dark"] .cgm-briefPanel { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink); } /* Tablas: la rejilla y las celdas. */ :root[data-theme="dark"] .cgm-tasksTable, :root[data-theme="dark"] .cgm-tasksTableWrap, :root[data-theme="dark"] .cgm-tasksTable thead th, :root[data-theme="dark"] .cgm-tasksTable tbody td, :root[data-theme="dark"] .cgm-tasksTable tr.cgm-tasksGroupCols th { background: var(--card) !important; color: var(--ink); border-color: var(--grid-line) !important; } :root[data-theme="dark"] .cgm-tasksTable thead th, :root[data-theme="dark"] .cgm-tasksTable tr.cgm-tasksGroupCols th { background: var(--surface-2) !important; } /* Las celdas congeladas llevan fondo propio para tapar lo que pasa por detrás: si se quedan blancas, se ve una franja clara al desplazar. */ :root[data-theme="dark"] .cgm-tasksTable__title, :root[data-theme="dark"] .cgm-taskCmtCell, :root[data-theme="dark"] .cgm-taskSelCell, :root[data-theme="dark"] .cgm-taskCodeCell { background: var(--card) !important; } :root[data-theme="dark"] .cgm-tasksTable tbody tr:hover td { background: var(--surface-2) !important; } /* Campos y botones sobrios. */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] textarea, /* Los desplegables que NO se pintan solos. Los de estado llevan su color en un «style» en línea, y este bloque usa «!important», que le gana a un estilo en línea normal: con «select» a secas los aplastaba todos al mismo gris y la tabla perdía la única señal que se lee de un vistazo. Si trae fondo propio, se respeta. */ :root[data-theme="dark"] select:not([style*="background"]), :root[data-theme="dark"] .cgm-btn--soft, :root[data-theme="dark"] .cgm-tasksToolbar__btn, :root[data-theme="dark"] .cgm-tasksHead__pill, :root[data-theme="dark"] .cgm-settings-dlg__input { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } :root[data-theme="dark"] ::placeholder { color: var(--faint); } /* El código de la tarea y demás cápsulas claras. */ :root[data-theme="dark"] .cgm-taskCodeTag, :root[data-theme="dark"] .cgm-itemEdit__code, :root[data-theme="dark"] .cgm-tasksFilterRule__check { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink-2) !important; } /* El botón del tema, en la barra de arriba. Sin cuadrito, como sus vecinos: solo el icono, y la caja aparece al pasar por encima. */ .cgm-themeBtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; border: 0; background: transparent; /* Vive dentro de la barra de arriba, que ahora comparte fondo con el menú: si se queda con el gris de los textos claros, es el único elemento de la cabecera que no se ve. Fuera de ella, el valor de siempre. */ color: var(--cgm-topbar-ink, var(--ink-2, #475067)); cursor: pointer; padding: 0; transition: 0.15s; } .cgm-themeBtn:hover { background: var(--cgm-topbar-hover, rgba(15, 23, 42, 0.06)); color: var(--cgm-topbar-ink-strong, var(--ft-accent, #2f63ff)); } .cgm-themeBtn svg { width: 19px; height: 19px; } /* Un icono u otro, nunca los dos: el que se ve es el modo al que vas a ir. */ .cgm-themeBtn__moon { display: none; } :root[data-theme="dark"] .cgm-themeBtn { background: transparent; color: var(--ink-2); } :root[data-theme="dark"] .cgm-themeBtn:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); } :root[data-theme="dark"] .cgm-themeBtn__sun { display: none; } :root[data-theme="dark"] .cgm-themeBtn__moon { display: block; } /* ───────────────────────────────────────────── Inicio ───────────────────────────────────────────── */ :root[data-theme="dark"] .cgm-posts, :root[data-theme="dark"] .cgm-semana, :root[data-theme="dark"] .cgm-hoy__ficha, :root[data-theme="dark"] .cgm-hoy__limpio, :root[data-theme="dark"] .cgm-homePortal__org, :root[data-theme="dark"] .cgm-homePortal__stat, :root[data-theme="dark"] .cgm-homePortal__panel, :root[data-theme="dark"] .cgm-homePortal__create--ghost { background: var(--card) !important; border: 1px solid var(--line) !important; } /* OJO: esta lista de arriba se quedó un tiempo sin llaves y se pegaba a la regla del buscador; un comentario no corta una lista de selectores, así que las cajas del inicio heredaban su «transparente y sin borde». */ /* El buscador de la barra ya tiene su pastilla; la regla general de campos de formulario le pintaba encima una caja sólida más oscura y dentro de la pastilla se veía un recuadro raro. El campo no es una caja: es el texto. */ /* El selector lleva etiqueta y atributo a propósito: la regla general de más arriba es «input[type="search"]» y con «!important» en las dos gana la más concreta, no la que esté después. */ :root[data-theme="dark"] input.cgm-ftSearch__inp[type="search"] { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--cgm-topbar-ink-strong, #fff) !important; } :root[data-theme="dark"] .cgm-ftTopbar__userPop { background: var(--card) !important; border-color: var(--line) !important; } :root[data-theme="dark"] .cgm-homePortal__title, :root[data-theme="dark"] .cgm-homePortal__orgName, :root[data-theme="dark"] .cgm-homePortal__secTitle, :root[data-theme="dark"] .cgm-homePortal__statNum, :root[data-theme="dark"] .cgm-homePortal__create--ghost, :root[data-theme="dark"] .cgm-homePortal b, :root[data-theme="dark"] .cgm-homePortal strong { color: var(--ink) !important; } :root[data-theme="dark"] .cgm-homePortal__sub, :root[data-theme="dark"] .cgm-homePortal__role, :root[data-theme="dark"] .cgm-homePortal__admin, :root[data-theme="dark"] .cgm-homePortal__stackMore, :root[data-theme="dark"] .cgm-homePortal__statLbl, :root[data-theme="dark"] .cgm-homePortal__meta { color: var(--ink-2) !important; } /* La raya que separa el nombre de la organización de sus caras. */ :root[data-theme="dark"] .cgm-homePortal__org hr, :root[data-theme="dark"] .cgm-homePortal__orgSep { border-color: var(--line) !important; background: var(--line) !important; } /* ───────────────────────────────────────────── El menú lateral, en la marca de cada quien ───────────────────────────────────────────── No se pinta un azul oscuro para todos: se coge el color que YA tiene cada marca y se le baja la luz mezclándolo con negro. Así Grapheting sigue siendo morada y Fantime azul, pero las dos acompañan al fondo oscuro en vez de brillar al lado. Una marca nueva no hay que tocarla: sale sola de su propio color. */ /* Casi el mismo negro que la pantalla, con un 16% de la marca dentro: lo justo para que se note de quién es el panel sin que la banda morada se despegue del resto. El color de la marca se gasta donde dice algo —en lo que está abierto—, no en seiscientos píxeles de fondo. Se define como variable del marco, no como fondo del menú: de ese fondo viven también la barra de arriba y el hueco del redondeo, y cambiándolo solo aquí el menú se iba a negro mientras la barra seguía morada. */ :root[data-theme="dark"] .cgm-workspace { /* En oscuro el marco y la hoja casi comparten tono, así que el filo tiene que decirse más alto: sin él, la pantalla es una sola mancha negra y no se sabe dónde empieza lo que estás mirando. */ --ft-shell-edge: rgba(255, 255, 255, 0.11); /* El marco, un punto MÁS CLARO que la hoja de trabajo (#0f1219). Antes salía casi idéntico a ella —tres unidades de diferencia— y la pantalla entera era una sola mancha negra en la que no se sabía dónde acababa el programa y empezaba lo que estás mirando. El filo de 1px ayudaba, pero una línea no sustituye a dos superficies distintas. Sigue llevando un 16% de la marca dentro: lo justo para saber de quién es el panel sin que la banda de color se despegue del resto. */ --ft-shell-bg: linear-gradient( 185deg, color-mix(in srgb, var(--ft-side-1, #101d34) 16%, #171b26), color-mix(in srgb, var(--ft-side-2, #0c1525) 16%, #14171f) ); } :root[data-theme="dark"] .cgm-sidebar { background: var(--ft-shell-bg) !important; /* Sin borde derecho. Esta regla lo volvía a poner de arriba abajo y partía en dos la franja superior, que es la costura que veníamos de quitar. La línea la pinta el «::after» del menú, que empieza por debajo de la cabecera; aquí solo se le da el tono del tema. */ border-right: 0 !important; --ft-side-line: var(--line); } :root[data-theme="dark"] .cgm-mainStack { background: var(--ft-shell-bg) !important; } /* Lo abierto sí lleva la marca. */ :root[data-theme="dark"] .cgm-sidebar__tool.is-active { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 28%, transparent) !important; color: #fff !important; } :root[data-theme="dark"] .cgm-sidebar__tool:hover { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 14%, transparent) !important; } /* Donde no haya «color-mix» —navegadores viejos— se queda el degradado de la marca tal cual, que ya es oscuro. Nada se rompe. */ /* ───────────────────────────────────────────── Los botones de la barra de arriba ───────────────────────────────────────────── */ :root[data-theme="dark"] .cgm-ftTopbar__bell, :root[data-theme="dark"] .cgm-ftTopbar__appr { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ink-2) !important; } :root[data-theme="dark"] .cgm-ftTopbar__bell:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; } /* Abierto sí se marca, con el color de la marca. */ :root[data-theme="dark"] .cgm-ftTopbar__bell.is-active { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 26%, transparent) !important; color: #e7e9ef !important; } :root[data-theme="dark"] .cgm-ftTopbar__appr.is-active { background: rgba(245, 158, 11, 0.22) !important; color: #fbbf24 !important; } /* El fondo de la barra, que es contra lo que se recorta el contador. */ :root[data-theme="dark"] .cgm-ftTopbar { --cgm-topbar-bg: #11151e; } /* En oscuro la regla de «.cgm-card» de más arriba le pone el fondo de ficha con «!important» y se lleva por delante el de la barra. Se le devuelve: la cabecera sigue siendo la misma superficie que el menú, también de noche. */ :root[data-theme="dark"] .cgm-ftTopbar { background: var(--ft-shell-bg) !important; background-attachment: fixed !important; border-bottom: 0 !important; } :root[data-theme="dark"] .cgm-ftTopbar__bell:hover, :root[data-theme="dark"] .cgm-ftTopbar__appr:hover { border-color: var(--ft-accent, #7c3aed) !important; color: var(--ink) !important; } /* ───────────────────────────────────────────── Las cápsulas de color pálido ───────────────────────────────────────────── «Admin», el rol de la barra, el icono de cada sección: en claro son un lila casi blanco, y sobre fondo oscuro ese lila se convierte en una mancha que pesa más que el nombre de la organización que tiene al lado. Se quedan del mismo color de la marca, pero como un velo encima del fondo en vez de como un bloque: siguen diciendo lo mismo y dejan de gritarlo. */ :root[data-theme="dark"] .cgm-homePortal__role, :root[data-theme="dark"] .cgm-ftTopbar__userRole, :root[data-theme="dark"] .cgm-homePortal__secIco, :root[data-theme="dark"] .cgm-homePortal__admin { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 24%, transparent) !important; color: var(--ink) !important; border-color: transparent !important; } :root[data-theme="dark"] .cgm-homePortal__stackMore { background: var(--surface-2) !important; color: var(--ink-2) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"] .cgm-homePortal__orgAdd { background: var(--surface) !important; border-color: var(--line-2) !important; color: var(--ink-2) !important; } /* ───────────────────────────────────────────── El recuadro del logo de cada organización ───────────────────────────────────────────── Este NO se vuelve oscuro, y es a propósito: no es una superficie nuestra, es el marco donde vive el logotipo de otro. Muchos vienen en negro sobre fondo transparente —Menesses, BioMol— y sobre un recuadro oscuro desaparecerían. Lo que sí se hace es bajarle el brillo del blanco puro y darle un borde, para que sea un marco y no una linterna. */ :root[data-theme="dark"] .cgm-brandMark--home, :root[data-theme="dark"] .cgm-brandMark { background: #eceef4 !important; border: 1px solid var(--line-2) !important; } /* ───────────────────────────────────────────── Tareas ───────────────────────────────────────────── El atributo va repetido —[data-theme][data-theme]— a propósito. No es un descuido: en esta pantalla los blancos están escritos con selectores largos y muchos con «!important» por la pelea de las columnas congeladas, y la única forma de ganarles sin reescribir media hoja es pesar más que ellos. Repetir el atributo es la manera barata y legible de subir ese peso. */ :root[data-theme="dark"][data-theme="dark"] .cgm-card, :root[data-theme="dark"][data-theme="dark"] .cgm-card--tasks, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTableWrap, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable, :root[data-theme="dark"][data-theme="dark"] .cgm-otp-gbody, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksBoard__shell, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTableScroll { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } /* Las celdas, incluidas las congeladas: si alguna se queda clara, al desplazar se ve una franja blanca pasando por debajo de las demás. */ :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable td, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable__title, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable__custom, :root[data-theme="dark"][data-theme="dark"] .cgm-taskCmtCell, :root[data-theme="dark"][data-theme="dark"] .cgm-taskSelCell, :root[data-theme="dark"][data-theme="dark"] .cgm-taskCodeCell { background: var(--card) !important; color: var(--ink) !important; border-color: var(--grid-line) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable th, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksTable thead th { background: var(--surface-2) !important; color: var(--ink-2) !important; border-color: var(--grid-line) !important; } /* El carril de las pestañas y la barra de herramientas. */ :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead__scope, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar__search, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead__teamSel, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead__orgSel { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill.is-active { color: var(--ft-accent-2, #a78bfa) !important; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent) !important; } /* El esqueleto de carga: también es una superficie, y era lo único blanco mientras el tablero se coloca. */ :root[data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton { background: var(--card) !important; border-color: var(--line) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton__head, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton__bar { background: var(--surface-2) !important; } /* Diálogos y cajones: el de estados, el de personalizar, el de notificaciones, el panel del item. Aquí va el PANEL de cada uno, nunca su contenedor. «.cgm-ntDrawer» es la capa que cubre la pantalla entera para recoger el clic de fuera: pintarla de color la convierte en un telón opaco y la página desaparece detrás, que es justo lo que no tiene que pasar. El contenedor va transparente y quien oscurece es el velo. */ :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__panel, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__head, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__body, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__foot, :root[data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__panel, :root[data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__head, :root[data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__foot, :root[data-theme="dark"][data-theme="dark"] .cgm-ntSeg, :root[data-theme="dark"][data-theme="dark"] .cgm-schemaGrid__row, :root[data-theme="dark"][data-theme="dark"] .cgm-sysCols, :root[data-theme="dark"][data-theme="dark"] .cgm-dateRangeDlg__panel, :root[data-theme="dark"][data-theme="dark"] .cgm-rowMenu, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar__menu { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-ntField__inp, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__input, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__label, :root[data-theme="dark"][data-theme="dark"] .cgm-topbar2__text { color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-ntField__inp, :root[data-theme="dark"][data-theme="dark"] .cgm-settings-dlg__input { background: var(--surface-2) !important; border-color: var(--line-2) !important; } /* Los títulos de pantalla. */ :root[data-theme="dark"][data-theme="dark"] .cgm-otp-portal__title, :root[data-theme="dark"][data-theme="dark"] .cgm-tasksHead h1, :root[data-theme="dark"][data-theme="dark"] .cgm-card--tasks h1, :root[data-theme="dark"][data-theme="dark"] .cgm-main > h1 { color: var(--ink) !important; } /* Lo que NO se toca, y es a propósito: el color de un estado, el de un grupo, la píldora de la fecha y los avatares. Eso no es fondo de pantalla, es el dato; si se apagara, el tablero dejaría de decir de un vistazo lo que dice. */ /* ───────────────────────────────────────────── Nada de brillos ───────────────────────────────────────────── En claro, una sombra morada debajo de un botón morado se lee como relieve. Sobre fondo oscuro una sombra de color no es sombra: es luz, y el botón parece una bombilla. Lo mismo con los aros blancos que separan las caras apiladas —en claro desaparecen contra la tarjeta, en oscuro son un halo—. Aquí la sombra vuelve a ser lo que es: oscuridad, y poca. */ :root[data-theme="dark"][data-theme="dark"] .cgm-homePortal__create, :root[data-theme="dark"][data-theme="dark"] .cgm-profileDlg__primary, :root[data-theme="dark"][data-theme="dark"] .cgm-topbar2__btn, :root[data-theme="dark"][data-theme="dark"] .cgm-newTaskOpen { box-shadow: none !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-homePortal__org, :root[data-theme="dark"][data-theme="dark"] .cgm-homePortal__stat, :root[data-theme="dark"][data-theme="dark"] .cgm-homePortal__panel, :root[data-theme="dark"][data-theme="dark"] .cgm-card, :root[data-theme="dark"][data-theme="dark"] .cgm-brandMark { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important; } /* El aro que separa las caras apiladas se pone del color de la tarjeta, que es para lo que estaba el blanco: para separar, no para brillar. */ :root[data-theme="dark"][data-theme="dark"] .cgm-homePortal__stackAv, :root[data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__avatarOn { border-color: var(--card) !important; } /* El punto de aviso de la campana llevaba un aro blanco para despegarse de la barra clara; aquí se despega con el color de la barra. */ :root[data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__badge { box-shadow: 0 0 0 2.5px var(--card) !important; } /* ───────────────────────────────────────────── Las superficies tozudas de la tabla ───────────────────────────────────────────── Estas son las que pintan las columnas congeladas, y se escribieron con selectores muy largos y «!important» para ganarle a todo lo demás —«.cgm-otp-portal .cgm-tasksBoard__group--items > tr > td.cgm-tasksTable__title»—. Para que el tema pese más hace falta repetir el atributo una vez más. Es feo de leer y es el precio de no reescribir media hoja de estilos. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-card--tasks, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard__shell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-gbody, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTableWrap, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTableScroll, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable__title, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable__custom, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskCmtCell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskSelCell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskCodeCell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton { background: var(--card) !important; color: var(--ink) !important; border-color: var(--grid-line) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable th, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton__head { background: var(--surface-2) !important; color: var(--ink-2) !important; border-color: var(--grid-line) !important; } /* Las pestañas y el selector de organización, que viven en el mismo carril. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__teamSel, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__orgSel { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill.is-active { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 26%, transparent) !important; color: #fff !important; } /* Las pestañas y el buscador de la barra se pintan con un blanco escrito a pelo, así que aquí también va el color a pelo: con una ficha no bastaba. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar__search, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar__search input { background: #161a24 !important; color: #e7e9ef !important; border-color: #2f3647 !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__pill.is-active { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 28%, #161a24) !important; color: #fff !important; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent) !important; } /* ───────────────────────────────────────────── Un fondo, no tres ───────────────────────────────────────────── En claro la pantalla se ordena con bandejas: una tarjeta blanca sobre un gris, la barra sobre otro gris. En oscuro esas bandejas se convierten en manchas grises flotando, y lo que se ve son los recuadros, no el contenido. Así que los envoltorios desaparecen —se quedan transparentes y dejan ver el fondo— y solo quedan dos niveles: la pantalla, y las filas de la tabla. La separación la hacen las líneas de la rejilla, que para eso están. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-card--tasks, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard__shell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-board, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-group, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-gbody, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTableWrap, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTableScroll, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksToolbar, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__scope, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksSplit, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksSplit__block, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-orgBoardSwap { background: transparent !important; box-shadow: none !important; } /* El carril de las pestañas, sin nada: ni relleno ni borde. El borde que había puesto seguía dibujando la bandeja, solo que de contorno. Las pastillas ya se agrupan solas por estar juntas. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksHead__scope { border: 0 !important; } /* Y el esqueleto de carga, que también era una bandeja. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksSkeleton { background: transparent !important; border-color: var(--line) !important; } /* El «⋯» que sale al lado de cada fila. En claro es blanco sobre blanco: no se ve hasta que lo necesitas. En oscuro se quedaba relleno y parecía un cuadradito gris flotando fuera de la tabla. Mismo trato: invisible hasta que pasas por encima. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-rowMenu, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-rowMenu--task { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-rowMenu:hover, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-rowMenu--task:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; } /* ───────────────────────────────────────────── La fila señalada ───────────────────────────────────────────── Al pasar por encima, al seleccionar y al abrir una fila, las celdas se ponían BLANCAS: en claro eso es «se ilumina un poco», en oscuro es un fogonazo. Aquí señalar es lo contrario, aclarar un punto —de #161a24 a #1d2230—, que es lo mismo que hace la fila de cabecera. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable tbody tr:hover > td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.cgm-tasksTable__cardRow.is-row-active > td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.is-selected > td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.cgm-tasksUnit--open > td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr:hover > td.cgm-tasksTable__title, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr:hover > td.cgm-taskCmtCell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.is-row-active > td.cgm-taskCmtCell, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.is-selected > td.cgm-taskCmtCell { background: var(--surface-2) !important; color: var(--ink) !important; } /* El campo donde se escribe el nombre de la tarea vive dentro de la celda y no es una caja aparte: en claro es blanco sobre blanco y no se nota. Aquí tampoco debe notarse. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskEdit, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskTitleCell__content, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] td .cgm-taskEdit[type="text"], /* Lo mismo para la agenda personal: sus campos son .cgm-ptInline y vivían dentro de una lista, no de una tabla, así que nunca pasaron por aquí. Ahora están en el tablero y una caja oscura por celda se ve como un agujero. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard td .cgm-ptInline--title, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard td .cgm-ptInline--text, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard td input[type="text"].cgm-ptInline { background: transparent !important; color: var(--ink) !important; border-color: transparent !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-taskEdit:focus, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard td .cgm-ptInline--title:focus, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksBoard td .cgm-ptInline--text:focus { background: var(--surface-2) !important; border-color: var(--line-2) !important; } /* Las tarjetas de arriba de la agenda personal y sus dos botones. Llevan el blanco escrito en el estilo claro y nadie los había traído a oscuro: salían como cuatro focos sobre el fondo, y el texto de los botones desaparecía. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ptasks__stat, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ptasks__toolbar .cgm-otp-portal__hbtn { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ptasks__stat span { color: var(--muted) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ptasks__toolbar .cgm-otp-portal__hbtn:hover { background: var(--surface-2) !important; } /* El cajón de «Nueva tarea»: el panel entero era blanco, y como ocupa media pantalla tapaba todo lo demás. El velo de detrás también se oscurece un poco más, que sobre un fondo ya oscuro el de antes casi no se notaba. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__panel, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__head, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__body, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__foot { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } /* El velo de detrás del cajón. En claro oscurece la página y por eso se entiende que hay algo encima. En oscuro la página YA es oscura: con un 58 % de negro se volvía negro liso y desaparecía todo: no se veía ni qué había debajo ni dónde termina el cajón. Lo que separa el cajón del fondo aquí no es la oscuridad, es el canto y la sombra: por eso el velo baja y el panel gana borde. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__scrim { background: rgba(0, 0, 0, 0.3) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer__panel { border-left: 1px solid #2f3647 !important; box-shadow: -18px 0 50px rgba(0, 0, 0, 0.6) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntSeg, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntSeg__btn, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntBtn { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntSeg__btn.is-on, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntBtn--primary { color: #fff !important; } /* El título de la pantalla. Vive en la barra de arriba del contenido y se llama «topbar2», que es por donde no lo busqué la primera vez. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-topbar2__title, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-topbar2__sub { color: var(--ink) !important; } /* Las fichas de «te está esperando» se pintan con una ficha de color propia —«--ficha-fondo»—, que se resuelve en el propio elemento: así no hay que ganarle ninguna guerra de selectores al blanco que traen los enlaces. */ :root[data-theme="dark"] .cgm-hoy { --ficha-fondo: #161a24; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-hoy__limpio { background: #161a24 !important; border-color: #262c3a !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] a.cgm-hoy__ficha .cgm-hoy__n { color: #e7e9ef; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] a.cgm-hoy__ficha.is-urgente .cgm-hoy__n { color: #ff6b81; } /* La tira de publicaciones: las pastillas de cada post un punto por encima del fondo, para que se vean como cosas y no como texto suelto. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-posts__post { background: #1d2230 !important; color: #b9c0d0 !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-posts__post:hover { background: #262c3a !important; color: #e7e9ef !important; } /* ───────────────────────────────────────────── Menú de la persona, recientes y los iconos de las cifras ───────────────────────────────────────────── */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__userItem { color: #e7e9ef !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__userItem:hover { background: #1d2230 !important; } /* «Cerrar sesión» se queda rojo: es lo único de ese menú que no se deshace. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__userItem--danger, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ftTopbar__userItem[class*="danger"] { color: #ff6b81 !important; } /* La fila de «Recientes» se iluminaba en blanco al pasar por encima. Aquí señalar es aclarar un punto, como en las tablas. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-homePortal__recentRow { border-color: #262c3a !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-homePortal__recentRow:hover { background: #1d2230 !important; } /* Los cuadraditos de las cifras: en claro son un pastel del color de cada una; en oscuro ese pastel es casi blanco. Se queda el MISMO color, pero como un velo sobre el fondo —cada ficha conserva el suyo y ninguna deslumbra—. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-homePortal__statIco { background: color-mix(in srgb, var(--c, #7c3aed) 20%, transparent) !important; color: var(--c, #7c3aed) !important; } /* Y el icono de cada sección, igual. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-homePortal__secIco { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 22%, transparent) !important; color: #e7e9ef !important; } /* ───────────────────────────────────────────── El hub de organización (las tarjetas de módulos) ───────────────────────────────────────────── Esta pantalla sí tiene paleta propia —toda en fichas «--ft-*»— así que no hace falta ir regla por regla: basta con volver a declararlas en oscuro y caen con ellas el lienzo, las tarjetas, los textos y las líneas. Lo único que hay que tocar a mano es lo que se mezcla contra «white» literal, que ninguna ficha puede alcanzar. */ :root[data-theme="dark"] .cgm-workspace--orgHome { --ft-canvas: #0f1219; --ft-card: #161a24; --ft-ink: #e7e9ef; --ft-ink-2: #b9c0d0; --ft-muted: #8b93a7; --ft-faint: #6c7489; --ft-line: #262c3a; --ft-line-soft: #1e2330; --ft-accent-ink: #9db4ff; --ft-accent-soft: #1b2440; --ft-sh-1: 0 1px 2px rgba(0, 0, 0, 0.45); --ft-sh-2: 0 6px 14px rgba(0, 0, 0, 0.5), 0 18px 38px rgba(0, 0, 0, 0.45); } /* El borde de hover venía escrito a pelo y encendía un gris claro. */ :root[data-theme="dark"] .cgm-ftOrg__card:hover { border-color: #38415a; } /* Los iconos se mezclan contra «white»: en oscuro hay que mezclarlos contra el color de la tarjeta o salen pastillas lechosas sobre fondo negro. */ :root[data-theme="dark"] .cgm-ftOrg__iconTile { background: linear-gradient( 150deg, color-mix(in srgb, var(--c, #2f63ff) 26%, #161a24), color-mix(in srgb, var(--c, #2f63ff) 12%, #161a24) ); color: color-mix(in srgb, var(--c, #2f63ff) 70%, #e7e9ef); } /* Lo mismo con el adorno de la tarjeta grande: las tres hojas de papel. */ :root[data-theme="dark"] .cgm-ftOrg__heroPeek i { background: linear-gradient( 160deg, color-mix(in srgb, var(--c, #2f63ff) 24%, #161a24), color-mix(in srgb, var(--c, #2f63ff) 10%, #161a24) ); border-color: color-mix(in srgb, var(--c, #2f63ff) 30%, #161a24); } :root[data-theme="dark"] .cgm-ftOrg__heroPeek i::after { background: color-mix(in srgb, var(--c, #2f63ff) 45%, #161a24); box-shadow: 0 16px 0 color-mix(in srgb, var(--c, #2f63ff) 32%, #161a24), 0 32px 0 color-mix(in srgb, var(--c, #2f63ff) 24%, #161a24); } /* «Pronto»: una tarjeta apagada, no una tarjeta blanca. */ :root[data-theme="dark"] .cgm-ftOrg__card--soon { background: #12161f; } :root[data-theme="dark"] .cgm-ftOrg__card--soon .cgm-ftOrg__iconTile { background: #1d2230; color: #6c7489; } :root[data-theme="dark"] .cgm-ftOrg__card--soon .cgm-ftOrg__cardTitle, :root[data-theme="dark"] .cgm-ftOrg__soonTag { color: #8b93a7; } :root[data-theme="dark"] .cgm-ftOrg__soonTag { background: #1d2230; } :root[data-theme="dark"] .cgm-ftOrg__flag { background: color-mix(in srgb, var(--c, #7c3aed) 22%, #161a24); border-color: color-mix(in srgb, var(--c, #7c3aed) 40%, #161a24); color: color-mix(in srgb, var(--c, #7c3aed) 60%, #e7e9ef); } :root[data-theme="dark"] .cgm-ftOrg__adminChip { background: linear-gradient(135deg, #1b2440, #19213a); } /* ───────────────────────────────────────────── El panel de actualizaciones (el cajón de la derecha) ───────────────────────────────────────────── Este es el caso contrario al hub: no tiene ni una ficha de color. Es un calco de Monday con la paleta escrita a mano —veinticuatro blancos, los grises #323338/#676879/#9699a6 y el azul #0073ea— así que no hay atajo: toca traducir superficie por superficie. Se queda aquí junto y no mezclado con el resto para que, cuando algún día esa pantalla pase a fichas, esto se borre de una pieza. */ :root[data-theme="dark"] .cgm-updPanel__drawer { background: #11151e; border-left-color: #262c3a; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55); color-scheme: dark; } :root[data-theme="dark"] .cgm-updPanel__backdrop { background: rgba(0, 0, 0, 0.55); } /* Cabecera, pestañas y el borde del compositor: una sola línea para todas. */ :root[data-theme="dark"] .cgm-updPanel__head, :root[data-theme="dark"] .cgm-updPanel__tabs, :root[data-theme="dark"] .cgm-updPanel__composer, :root[data-theme="dark"] .cgm-updFiles__head, :root[data-theme="dark"] .cgm-updThread { border-color: #262c3a; } :root[data-theme="dark"] .cgm-updPanel__composer { background: #0f1219; } :root[data-theme="dark"] .cgm-updPanel__title, :root[data-theme="dark"] .cgm-updPost__name, :root[data-theme="dark"] .cgm-updPost__body, :root[data-theme="dark"] .cgm-updReplyItem__name, :root[data-theme="dark"] .cgm-updReplyItem__body, :root[data-theme="dark"] .cgm-updReplyComposer__field, :root[data-theme="dark"] .cgm-updEditor__field, :root[data-theme="dark"] .cgm-updFile__name, :root[data-theme="dark"] .cgm-updAct__line, :root[data-theme="dark"] .cgm-updMore__item, :root[data-theme="dark"] .cgm-updEdit__field, :root[data-theme="dark"] .cgm-updComposer__attachName, :root[data-theme="dark"] .cgm-updAttach__file, :root[data-theme="dark"] .cgm-updItem__txt, :root[data-theme="dark"] .cgm-mentionMenu2__head, :root[data-theme="dark"] .cgm-mentionMenu2__name { color: #e7e9ef; } :root[data-theme="dark"] .cgm-updPanel__sub, :root[data-theme="dark"] .cgm-updPanel__tab, :root[data-theme="dark"] .cgm-updEditor__btn, :root[data-theme="dark"] .cgm-updEditor__tool, :root[data-theme="dark"] .cgm-updBtn, :root[data-theme="dark"] .cgm-updMore__btn, :root[data-theme="dark"] .cgm-updEdit__cancel, :root[data-theme="dark"] .cgm-updReplyComposer__mention, :root[data-theme="dark"] .cgm-updFiles__hint, :root[data-theme="dark"] .cgm-updFile__sub, :root[data-theme="dark"] .cgm-updAct__txt, :root[data-theme="dark"] .cgm-updEmpty, :root[data-theme="dark"] .cgm-updItem__meta, :root[data-theme="dark"] .cgm-updPanel__back, :root[data-theme="dark"] .cgm-updComposer__attachSpin, :root[data-theme="dark"] .cgm-updComposer__attachRm { color: #8b93a7; } :root[data-theme="dark"] .cgm-updPost__when, :root[data-theme="dark"] .cgm-updReplyItem__when, :root[data-theme="dark"] .cgm-updAct__when, :root[data-theme="dark"] .cgm-mentionMenu2__role, :root[data-theme="dark"] .cgm-updEditor__field:empty::before, :root[data-theme="dark"] .cgm-updReplyComposer__field:empty::before { color: #6c7489; } /* El azul de Monday sobre blanco es legible; sobre negro no. Se aclara. */ :root[data-theme="dark"] .cgm-updPanel__tab.is-active, :root[data-theme="dark"] .cgm-updBtn.is-liked, :root[data-theme="dark"] .cgm-updMention, :root[data-theme="dark"] .cgm-updPanel__tabCount { color: #6ea8ff; } :root[data-theme="dark"] .cgm-updPanel__tab.is-active { border-bottom-color: #6ea8ff; } :root[data-theme="dark"] .cgm-updPanel__tabCount { background: rgba(110, 168, 255, 0.16); } /* El editor: caja, barra de herramientas y pie son tres superficies distintas que en claro eran las tres blancas. En oscuro se separan un poco para que se note dónde se escribe. */ :root[data-theme="dark"] .cgm-updEditor { background: #161a24; border-color: #3d6fd6; } :root[data-theme="dark"] .cgm-updEditor.is-collapsed { border-color: #2f3647; } :root[data-theme="dark"] .cgm-updEditor:focus-within { border-color: #4a86ff; box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.22); } :root[data-theme="dark"] .cgm-updEditor__toolbar, :root[data-theme="dark"] .cgm-updEditor__foot { background: #12161f; border-color: #262c3a; } :root[data-theme="dark"] .cgm-updEditor__sep { background: #2f3647; } /* Todos los «hover» eran una pizca de negro sobre blanco. Al revés. */ :root[data-theme="dark"] .cgm-updEditor__btn:hover, :root[data-theme="dark"] .cgm-updEditor__tool:hover, :root[data-theme="dark"] .cgm-updPanel__back:hover, :root[data-theme="dark"] .cgm-updEdit__cancel:hover, :root[data-theme="dark"] .cgm-updComposer__attachRm:hover, :root[data-theme="dark"] .cgm-updReplyComposer__mention:hover { background: rgba(255, 255, 255, 0.08); color: #e7e9ef; } :root[data-theme="dark"] button.cgm-updBtn:hover:not(:disabled) { color: #e7e9ef; } :root[data-theme="dark"] .cgm-updMore__btn:hover, :root[data-theme="dark"] .cgm-updMore__btn.is-open { background: rgba(110, 168, 255, 0.16); color: #6ea8ff; } /* La lista de actualizaciones y las burbujas de respuesta. */ :root[data-theme="dark"] .cgm-updPanel__body { background: #11151e; } :root[data-theme="dark"] .cgm-updPost__foot, :root[data-theme="dark"] .cgm-updAct { border-color: #1e2330; } :root[data-theme="dark"] .cgm-updReplyItem__bubble, :root[data-theme="dark"] .cgm-updReplyComposer__box { background: #1b2029; border-color: #262c3a; } :root[data-theme="dark"] .cgm-updReplyComposer__box:focus-within { background: #161a24; border-color: #4a86ff; box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.18); } /* Archivos adjuntos, en el compositor y ya publicados. */ :root[data-theme="dark"] .cgm-updComposer__attachItem, :root[data-theme="dark"] .cgm-updAttach__file { background: #1b2029; border-color: #262c3a; } :root[data-theme="dark"] .cgm-updComposer__attachIco { background: #161a24; } :root[data-theme="dark"] .cgm-updAttach__file:hover, :root[data-theme="dark"] .cgm-updFile:hover { background: #1b2436; border-color: #3d6fd6; } :root[data-theme="dark"] .cgm-updAttach__imgBtn img { border-color: #262c3a; } :root[data-theme="dark"] .cgm-updFile, :root[data-theme="dark"] .cgm-updItem { background: #161a24; border-color: #262c3a; } /* Menús que flotan: el de «...» y el de menciones. */ :root[data-theme="dark"] .cgm-updMore__pop, :root[data-theme="dark"] .cgm-mentionMenu2 { background: #1b2029; border-color: #2f3647; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .cgm-mentionMenu2::before { background: #1b2029; border-color: #2f3647; } :root[data-theme="dark"] .cgm-mentionMenu2__head { background: #1b2029; border-color: #262c3a; } :root[data-theme="dark"] .cgm-updMore__item:hover, :root[data-theme="dark"] .cgm-mentionMenu2__item.is-active, :root[data-theme="dark"] .cgm-mentionMenu2__item:hover { background: #242b38; } /* La caja de editar una actualización ya escrita. */ :root[data-theme="dark"] .cgm-updEdit__field { background: #161a24; border-color: #4a86ff; box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.18); } /* La X del visor de imágenes: en claro es un botón blanco sobre la foto. */ :root[data-theme="dark"] .cgm-updLightbox__x { background: #1b2029; color: #e7e9ef; } /* El buscador del selector de emojis cuando se abre desde este panel. */ :root[data-theme="dark"] .cgm-emoji-dlg--updPanel .cgm-emoji-dlg__search-input { border-color: #2f3647; } :root[data-theme="dark"] .cgm-emoji-dlg--updPanel .cgm-emoji-dlg__search-input:focus { border-color: #4a86ff; box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.18); } /* La franja de arriba del hub llevaba el gris escrito a pelo —no la ficha— así que se quedaba clara encima de todo lo demás. Es translúcida a propósito (lleva desenfoque), así que aquí también. */ :root[data-theme="dark"] .cgm-workspace--orgHome .cgm-topbar2 { background: rgba(15, 18, 25, 0.85); } /* El globo del gráfico de la semana. Es un contraste a propósito: en claro, una pastilla oscura sobre la tarjeta blanca. En oscuro no puede «invertirse» otra vez o sale gris claro con letra blanca —ilegible—, así que se queda oscuro y se separa de la tarjeta subiendo un escalón y con sombra. */ :root[data-theme="dark"] .cgm-semana__globo { --cgm-tip-bg: #2a3242; --cgm-tip-ink: #e7e9ef; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); } /* ───────────────────────────────────────────── El diálogo de Perfil ───────────────────────────────────────────── Salía a medias —campos oscuros dentro de un modal blanco— porque las reglas generales de campos del tema sí lo alcanzaban y el armazón del diálogo no: su hoja tiene la paleta escrita a mano y nada de ahí cuelga de una ficha. */ :root[data-theme="dark"] .cgm-profileDlg { color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__backdrop { background: rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .cgm-profileDlg__modal { background: #11151e; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .cgm-profileDlg__head, :root[data-theme="dark"] .cgm-profileDlg__nav, :root[data-theme="dark"] .cgm-profileDlg__tgRow { border-color: #262c3a; } /* La columna de secciones, un escalón por debajo del contenido. Lleva el borde a la derecha (o abajo, en pantalla estrecha), así que se tocan los cuatro de golpe en vez de adivinar cuál está puesto. */ :root[data-theme="dark"] .cgm-profileDlg__nav { background: #0f1219; border-color: #262c3a; } :root[data-theme="dark"] .cgm-profileDlg__navBtn svg { color: var(--muted); } :root[data-theme="dark"] .cgm-profileDlg__navBtn.is-on { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 22%, transparent); color: #e7e9ef; } :root[data-theme="dark"] .cgm-profileDlg__navBtn.is-on svg { color: #cbb8ff; } :root[data-theme="dark"] .cgm-profileDlg__x { background: #1d2230; color: var(--ink-2); } :root[data-theme="dark"] .cgm-profileDlg__x:hover { background: #2a3242; color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__card { background: #161a24; border-color: #262c3a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .cgm-profileDlg__navBtn { color: var(--ink-2); } :root[data-theme="dark"] .cgm-profileDlg__navBtn:hover, :root[data-theme="dark"] .cgm-profileDlg__ed:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__nameIn, :root[data-theme="dark"] .cgm-profileDlg__cargoIn, :root[data-theme="dark"] .cgm-profileDlg__ed, :root[data-theme="dark"] .cgm-profileDlg__panelTitle, :root[data-theme="dark"] .cgm-profileDlg__cardsTitle { color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__ci, :root[data-theme="dark"] .cgm-profileDlg__cl, :root[data-theme="dark"] .cgm-profileDlg__hint, :root[data-theme="dark"] .cgm-profileDlg__panelSub, :root[data-theme="dark"] .cgm-profileDlg__tgTx span, :root[data-theme="dark"] .cgm-profileDlg__sessTx, :root[data-theme="dark"] .cgm-profileDlg__miniH svg, :root[data-theme="dark"] .cgm-profileDlg__colorAuto, :root[data-theme="dark"] .cgm-profileDlg__frow label { color: var(--muted); } /* Los campos: la regla general del tema ya los oscurecía, pero no el estado desactivado ni el borde, que se quedaban claros. */ :root[data-theme="dark"] .cgm-profileDlg__inp { background: #1b2029; border-color: #2f3647; color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__inp:disabled { background: #161a24; color: var(--faint); } :root[data-theme="dark"] .cgm-profileDlg__inp::placeholder, :root[data-theme="dark"] .cgm-profileDlg__nameIn::placeholder, :root[data-theme="dark"] .cgm-profileDlg__cargoIn::placeholder { color: var(--faint); } /* Pastillas y avisos: el verde de «sesión actual» sobre blanco era legible; sobre negro hay que apagar el fondo y encender la letra. */ :root[data-theme="dark"] .cgm-profileDlg__tagNow { background: rgba(22, 160, 107, 0.2); color: #4ade80; } :root[data-theme="dark"] .cgm-profileDlg__chip { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 24%, transparent); color: #cbb8ff; } /* El botón «Explorar los equipos» era blanco con letra oscura; sobre negro el fondo se quedaba blanco y la letra se aclaraba con el tema: ilegible. */ :root[data-theme="dark"] .cgm-profileDlg__ghost { background: #1b2029; border-color: #2f3647; color: var(--ink); } :root[data-theme="dark"] .cgm-profileDlg__ghost:hover { background: #242b38; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent); color: var(--ink); } /* La insignia del rol, junto al nombre. */ :root[data-theme="dark"] .cgm-profileDlg__roleBadge { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 24%, transparent); color: #cbb8ff; } /* El botón de cambiar la foto, pegado al avatar. */ :root[data-theme="dark"] .cgm-profileDlg__cam { background: #1d2230; border-color: #2f3647; color: var(--ink-2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .cgm-profileDlg__cam:hover { background: #2a3242; color: #cbb8ff; } /* El icono cuadrado de cada sesión, en el historial. */ :root[data-theme="dark"] .cgm-profileDlg__si { background: #1d2230; color: var(--ink-2); } :root[data-theme="dark"] .cgm-profileDlg__miniRow { border-color: #1e2330; } /* El aviso flotante era oscuro sobre claro. Aquí al revés, o no se ve. */ :root[data-theme="dark"] .cgm-profileDlg__toast { background: #2a3242; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .cgm-profileDlg__team:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .cgm-profileDlg__sess { border-color: #262c3a; } /* La ruta de la cabecera. Los colores van escritos porque en claro también lo van: el contraste entre el camino y dónde estás es el que hace que se lea. */ :root[data-theme="dark"] .cgm-topbar2__crumb, :root[data-theme="dark"] .cgm-topbar2__crumb a { color: #8b93a7; } :root[data-theme="dark"] .cgm-topbar2__crumbSep { color: #4a5368; } :root[data-theme="dark"] .cgm-topbar2__crumbCurrent { color: #f2f4f9; } :root[data-theme="dark"] .cgm-topbar2__crumb a:hover { color: color-mix(in srgb, var(--ft-accent, #7c3aed) 55%, #e7e9ef); } /* ───────────────────────────────────────────── El hub de equipos ───────────────────────────────────────────── Las baldosas llevan los colores en rgba() sobre blanco —«rgba(255,255,255, .96)» y grises con alfa— que ninguna ficha alcanza: la tarjeta se quedaba blanca y el texto de intro, oscuro sobre oscuro, desaparecía. */ :root[data-theme="dark"] .cgm-portal__teamsIntro, :root[data-theme="dark"] .cgm-tile__meta { color: var(--muted); } :root[data-theme="dark"] .cgm-tile--team, :root[data-theme="dark"] .cgm-tile--grid { background: #1b2029; border-color: #2f3647; } :root[data-theme="dark"] .cgm-tile--team:hover, :root[data-theme="dark"] .cgm-tile--grid:hover { background: #242b38; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 55%, transparent); } :root[data-theme="dark"] .cgm-tile__title { color: var(--ink); } :root[data-theme="dark"] .cgm-tile__icon--team { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 26%, #1b2029); border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 40%, transparent); color: #cbb8ff; } :root[data-theme="dark"] .cgm-tile__icon--grid { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 22%, #1b2029); border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 36%, transparent); color: #cbb8ff; } :root[data-theme="dark"] .cgm-tile--repo { background: rgba(245, 158, 11, 0.12); border-color: rgba(217, 119, 6, 0.3); } :root[data-theme="dark"] .cgm-tile--req { background: rgba(99, 102, 241, 0.14); border-color: rgba(79, 70, 229, 0.32); } :root[data-theme="dark"] .cgm-tile--meetings { background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), #1b2029); border-color: rgba(37, 99, 235, 0.35); } /* ───────────────────────────────────────────── Configuración del negocio y de la organización ───────────────────────────────────────────── Estas dos pantallas suman 2.600 líneas con la paleta escrita a mano, así que en vez de perseguirlas regla por regla pasé sus colores a fichas «--bs-*» —cada una con su valor original de fallback, para que en claro nada cambie— y aquí solo hay que redeclararlas. Lo que sí hay que mirar a ojo son las pastillas de estado: en claro son fondo pálido con letra fuerte, y sobre negro eso se invierte. */ :root[data-theme="dark"] { --bs-canvas: #0f1219; --bs-surface: #161a24; --bs-surface-2: #1b2029; --bs-surface-3: #242b38; --bs-ink: #e7e9ef; --bs-ink-2: #b9c0d0; --bs-muted: #8b93a7; --bs-faint: #6c7489; --bs-line: #262c3a; --bs-line-2: #2f3647; --bs-line-soft: #1e2330; /* Lavados de color: en claro son tintes casi blancos; en oscuro, tintes casi negros. Si se dejan como están, cada aviso es un foco. */ --bs-accent-wash: #1b2033; --bs-accent-line: #343154; --bs-ok-bg: rgba(22, 160, 107, 0.16); --bs-ok-line: rgba(22, 160, 107, 0.32); --bs-warn-bg: rgba(245, 158, 11, 0.14); --bs-warn-line: rgba(245, 158, 11, 0.3); --bs-bad-bg: rgba(216, 50, 63, 0.14); --bs-bad-line: rgba(216, 50, 63, 0.32); } /* La insignia de rol y las pastillas de la marca. */ :root[data-theme="dark"] .cgm-bizCfg__adm, :root[data-theme="dark"] .cgm-orgCfg__adm, :root[data-theme="dark"] .cgm-bizCfg__badge--cus { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 24%, transparent); color: #cbb8ff; } :root[data-theme="dark"] .cgm-bizCfg__back:hover, :root[data-theme="dark"] .cgm-orgCfg__back:hover, :root[data-theme="dark"] .cgm-bizCfg__ghost:hover, :root[data-theme="dark"] .cgm-bizCfg__roleEdit:hover { color: color-mix(in srgb, var(--ft-accent, #7c3aed) 55%, #e7e9ef); } :root[data-theme="dark"] .cgm-orgCfg__copy:hover, :root[data-theme="dark"] .cgm-orgCfg__dropzone.is-drag, :root[data-theme="dark"] .cgm-orgCfg__dropzone:hover { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 18%, transparent); } /* Verde de «todo bien»: en claro fondo pálido y letra fuerte; aquí al revés. */ :root[data-theme="dark"] .cgm-bizCfg__statusline.ok, :root[data-theme="dark"] .cgm-orgCfg__alert--ok { background: rgba(22, 160, 107, 0.18); border-color: rgba(22, 160, 107, 0.35); color: #4ade80; } :root[data-theme="dark"] .cgm-logoUp__msg.is-ok { color: #4ade80; } /* Rojo de borrar. */ :root[data-theme="dark"] .cgm-orgCfg__dmIc, :root[data-theme="dark"] .cgm-orgCfg__dmWarn, :root[data-theme="dark"] .cgm-orgCfg__delLink:hover { background: rgba(216, 50, 63, 0.16); border-color: rgba(216, 50, 63, 0.35); color: #ff8a93; } :root[data-theme="dark"] .cgm-bizCfg__delRole, :root[data-theme="dark"] .cgm-logoUp__clear:hover, :root[data-theme="dark"] .cgm-onbCard__ghost:hover { color: #ff8a93; } /* El fondo del lienzo también lo pinta el workspace, fuera de estas hojas. */ :root[data-theme="dark"] .cgm-workspace--bizSettings .cgm-main, :root[data-theme="dark"] .cgm-workspace--orgSettings .cgm-main { background: var(--bs-canvas); } /* ───────────────────────────────────────────── Panel de equipo ───────────────────────────────────────────── */ :root[data-theme="dark"] .cgm-teamSpace, :root[data-theme="dark"] .cgm-teamRes { background: #161a24; border-color: #262c3a; } /* El recorte del distintivo y de los avatares es el color de la tarjeta: con el blanco de antes quedaban aros luminosos sobre el fondo oscuro. */ :root[data-theme="dark"] .cgm-teamSpace__mark { border-color: #161a24; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"] .cgm-teamSpace__stack span { border-color: #161a24; } :root[data-theme="dark"] .cgm-teamSpace__more { background: #2a3242; color: var(--ink-2); } :root[data-theme="dark"] .cgm-teamSpace__about:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .cgm-teamSpace__about:focus { background: #1b2029; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent); } :root[data-theme="dark"] .cgm-teamSpace__tabs, :root[data-theme="dark"] .cgm-teamTable__head { border-color: #262c3a; } :root[data-theme="dark"] .cgm-teamSpace__tabN, :root[data-theme="dark"] .cgm-teamRes__soon { background: #242b38; color: var(--muted); } :root[data-theme="dark"] .cgm-teamSpace__tab.is-on { border-bottom-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 75%, #e7e9ef); } :root[data-theme="dark"] .cgm-teamTable__row { border-color: #1e2330; } :root[data-theme="dark"] .cgm-teamTable__btn { border-color: #2f3647; color: var(--ink-2); } :root[data-theme="dark"] .cgm-teamTable__btn:hover { border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent); color: #cbb8ff; } :root[data-theme="dark"] .cgm-teamRes__ico--ann { color: #fbbf24; } /* La frase del equipo no es un campo hasta que la tocas, también en oscuro. La regla general de campos del tema le ganaba por especificidad y le pintaba su caja, así que en claro la cabecera salía limpia y en oscuro con un recuadro flotando bajo el nombre. */ :root[data-theme="dark"] input.cgm-teamSpace__about { background: transparent; border-color: transparent; } :root[data-theme="dark"] input.cgm-teamSpace__about:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] input.cgm-teamSpace__about:focus { background: #1b2029; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 60%, transparent); } /* El botón del avatar, arriba a la derecha. Su «hover» era un gris casi blanco escrito a pelo, así que en oscuro el botón entero se encendía al pasar por encima. Igual que sus vecinos: una pizca de luz, no una pastilla. */ :root[data-theme="dark"] .cgm-ftTopbar__avatarBtn:hover { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .cgm-ftTopbar__avatarBtn.is-active { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 26%, transparent); } /* El punto verde de «conectado» se recorta contra la barra, no contra blanco. */ :root[data-theme="dark"] .cgm-ftTopbar__avatarOn { border-color: #11151e; } /* Las opciones del desplegable de estado. El menú nativo lo pinta el sistema y el blanco de la hoja clara se cuela ahí: al abrirlo salía una lista blanca colgando de una pastilla de color. */ :root[data-theme="dark"] .cgm-statusSelect option, :root[data-theme="dark"] .cgm-otp-portal .cgm-statusSelect option, :root[data-theme="dark"] select option { background: #1b2029; color: #e7e9ef; } /* El hueco de las columnas automáticas, en el diálogo de crear. */ :root[data-theme="dark"] .cgm-ntAuto { background: #161a24; border-color: #2f3647; color: var(--faint); } /* El contenedor del cajón de «Nueva tarea» NO se pinta: solo recoge el clic de fuera. Lo que oscurece es «__scrim», y lo que se ve es «__panel». */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-ntDrawer { background: transparent !important; } /* La cabecera de cada grupo. La barra de progreso pintaba su tramo «sin estado» de un gris claro fijo, y el contador era blanco puro: las dos cosas quedaban como manchas sobre la cabecera oscura. */ :root[data-theme="dark"] .cgm-otp-battery__seg.is-sinEstado { background: #39404f; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-gcount { background: #1b2029 !important; border-color: #2f3647 !important; color: var(--muted) !important; } /* Celdas de desplegable sin valor. En claro son un gris pálido que dice «aquí no hay nada puesto». Sobre el tema oscuro ese mismo gris es lo más claro de la pantalla y la celda vacía acaba gritando más que las que sí tienen estado. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal .cgm-statusPick__btn.is-empty, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal .cgm-statusPick__btn.cgm-otp-status-light, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-statusPick__btn.is-empty { background: #262c3a !important; color: var(--muted) !important; } /* ───────────────────────────────────────────── La bandeja de detrás de los grupos ───────────────────────────────────────────── En claro, dentro del tablero, la tabla y su envoltorio NO pintan nada: el color lo ponen las filas, y por eso la cabecera de cada grupo —«Agenda ya», su contador y su barra— flota sobre el fondo de la página, y entre un grupo y otro se ve ese fondo. Mis reglas del tema oscuro pintaban la tabla y TODAS las celdas con el color de tarjeta, así que esa franja volvía a aparecer: una bandeja gris detrás del título del grupo que en claro no existe. Aquí se devuelve la estructura de claro. Importante el «:not(.cgm-tasksGlobal)»: la lista global SÍ quiere su tarjeta con borde y fondo, y comparte clase con el tablero. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal:not(.cgm-tasksGlobal) .cgm-tasksTable, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal:not(.cgm-tasksGlobal) .cgm-tasksTableWrap, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal:not(.cgm-tasksGlobal) .cgm-tasksTableScroll { background: transparent !important; border-color: transparent !important; } /* La fila del título del grupo no es una fila de datos: no lleva fondo. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] tr.cgm-tasksGroupHdr > td, :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-tasksTable.is-grouped tr.cgm-tasksGroupHdr > td { background: transparent !important; border-color: transparent !important; } /* El contorno que quedaba alrededor del bloque del grupo. En claro, cuando la tabla está agrupada, el cuerpo del grupo se queda sin fondo, sin borde y sin sombra a propósito: así cada grupo se lee como un bloque suelto sobre la página. Mi regla del tema le devolvía el borde, y al quitarle yo el fondo lo que quedaba era lo peor de los dos mundos: un marco redondeado vacío envolviendo el título del grupo. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-portal .cgm-otp-gbody.gbody:has(.cgm-tasksTable.is-grouped) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* La barra de desplazamiento fija de abajo. Lleva fondo blanco translúcido y un filo claro arriba para despegarse del contenido. Sobre el tema oscuro ese filo es la raya fina que se ve cruzando la pantalla, y el fondo blanco se nota en cuanto algo pasa por debajo. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-otp-hbar { background: rgba(15, 18, 25, 0.92) !important; border-top-color: #222838 !important; } /* Las pestañas de equipos. */ :root[data-theme="dark"] .cgm-teamTabs__tab { background: #161a24; border-color: #262c3a; color: var(--ink-2); } :root[data-theme="dark"] .cgm-teamTabs__tab.is-on { background: color-mix(in srgb, var(--tc, #7c3aed) 22%, #161a24); border-color: color-mix(in srgb, var(--tc, #7c3aed) 55%, transparent); color: var(--ink); } /* ── La barra de la Vista global ── Su título llevaba el azul marino escrito a fuego (#1b2435) y el fondo de esta pantalla SÍ se oscurece: quedaba texto oscuro sobre fondo oscuro, o sea, ilegible. La flecha de volver y la línea de abajo, igual: pintadas con negros translúcidos que sobre oscuro no separan nada. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalBar__title { color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalBar { border-bottom-color: var(--line) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalBar__back { background: var(--card) !important; border-color: var(--line) !important; color: var(--muted) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalBar__back:hover { background: var(--surface-2) !important; color: var(--ink) !important; } /* Y el conmutador Parrilla / Solicitudes, que iba con los mismos negros. */ :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalTabs { background: var(--surface-2) !important; border-color: var(--line) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalTabs__link { color: var(--muted) !important; } :root[data-theme="dark"][data-theme="dark"][data-theme="dark"] .cgm-globalTabs__link.is-active { background: var(--card) !important; color: var(--ink) !important; } /* ── El portal de Solicitudes ── Declara su propia paleta entera en claro (--ink, --card, --canvas…). Como «var()» se resuelve EN EL ELEMENTO, esa declaración gana a cualquier regla de tema que venga de fuera: la pastilla activa acababa con fondo claro y texto blanco, ilegible. Se vuelve a declarar aquí, que es una vez, en vez de perseguir los sesenta y cuatro «#fff» sueltos del archivo. */ :root[data-theme="dark"] .cgm-reqPortal { --ink: #e7e9ef; --ink-2: #c3c9d6; --muted: #8b93a7; --faint: #6b7489; --card: #161a24; --canvas: #0f1219; --line: #262c3a; --line-soft: #1d2230; --line-2: #2f3647; --accent-soft: #1b2440; --ok-soft: #10251d; --coral-soft: #2a1619; --pieza-soft: #211a33; --pub-soft: #1b2440; --gen-soft: #10251f; --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3); --sh-2: 0 24px 60px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35); } /* El fondo de la pantalla y las piezas que llevan el blanco escrito. */ :root[data-theme="dark"] .cgm-workspace--reqPortal { background: var(--canvas) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .ftab { background: var(--card) !important; border-color: var(--line-2) !important; color: var(--ink-2) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .ftab.on { background: var(--accent, #2f63ff) !important; border-color: var(--accent, #2f63ff) !important; color: #fff !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .btn-wrap { background: var(--card) !important; border-color: var(--line-2) !important; color: var(--muted) !important; } /* Las superficies del portal que llevan el blanco escrito a mano. Son una docena y van juntas: dejar la tabla blanca sobre el fondo oscuro era, con diferencia, lo que más cantaba de esta pantalla. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .tbl-wrap, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .trow, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .card, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .ghost, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .cell-expand-btn, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .req-cell-pop, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .act, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .ref-lb__box, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .ref-card, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .cmt-bar, :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .link-pill { background: var(--card) !important; color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .thead { background: var(--surface-2, #1d2230) !important; } /* La fila, al pasar por encima, se aclara un poco en vez de blanquearse. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .trow:hover { background: var(--surface-2, #1d2230) !important; } /* Las columnas congeladas de la derecha llevan su propio fondo —tienen que taparlo todo al desplazar la tabla de lado— y ese fondo iba escrito en claro, así que quedaba una franja blanca cruzando la cabecera. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .thead > div.stk { background-color: var(--surface-2, #1d2230) !important; border-left-color: var(--line) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .trow > div.stk { background-color: var(--card) !important; border-left-color: var(--line) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .trow:hover > div.stk { background-color: var(--surface-2, #1d2230) !important; } /* Y su sombra: sobre oscuro una sombra negra no se ve, pero la que había estaba calculada para fondo claro y dejaba un halo sucio. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .stk-edge { box-shadow: -12px 0 16px -14px rgba(0, 0, 0, .7) !important; } /* La barra de desplazamiento de la tabla, que salía gris claro sobre oscuro. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .tbl-wrap::-webkit-scrollbar { height: 10px; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .tbl-wrap::-webkit-scrollbar-track { background: transparent; } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .tbl-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; } /* ────────────────────────────────────────────────────────────── LA PARRILLA No tenía NADA de modo oscuro: su hoja escribe los colores a mano —#f5f6f9 de fondo, blancos en cada día y en cada tarjeta— en vez de usar los tokens, así que el tema no la alcanzaba y quedaba una pantalla blanca dentro de un panel oscuro. Vale para la parrilla de una organización y para la Vista global, que es la misma. ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime, :root[data-theme="dark"][data-theme="dark"] .cgm-global-grid-shell { background: var(--canvas, #0f1219) !important; color: var(--ink) !important; } /* Cada día es una tarjeta: fondo de tarjeta y su línea, no blanco al 78%. */ :root[data-theme="dark"][data-theme="dark"] .cgm-day { background: var(--card, #161a24) !important; border-color: var(--line, #262c3a) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-day--blank { background: transparent !important; border-color: transparent !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-day:not(.cgm-day--blank):hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .45) !important; } /* La mitad de abajo de cada publicación —donde va el título— y sus adornos. */ :root[data-theme="dark"][data-theme="dark"] .cgm-mini__body { background: var(--card, #161a24) !important; color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-mini { background: var(--card, #161a24) !important; border-color: var(--line, #262c3a) !important; } /* La hora y la esquina de estado son pastillas que flotan sobre la imagen: ahí el blanco ERA correcto, pero sobre la tarjeta oscura se vuelven un parche. Se oscurecen y conservan su color de texto. */ :root[data-theme="dark"][data-theme="dark"] .cgm-mini__statusCorner { background: var(--surface-2, #1d2230) !important; border-color: var(--line, #262c3a) !important; } /* La hora de la publicación. Llevaba el morado OSCURO de la marca (--ft-accent-ink), que está pensado para texto sobre fondo claro; sobre la pastilla oscura quedaba morado sobre gris, sin contraste y con aspecto de error. Se le da el morado claro sobre un fondo con un punto de ese mismo color: sigue siendo la marca y se lee. Va con color-mix sobre --ft-accent para que siga al preset de cada empresa en vez de quedarse con un morado fijo. */ :root[data-theme="dark"][data-theme="dark"] .cgm-mini__timechip { background: color-mix(in srgb, var(--ft-accent, #7c3aed) 20%, var(--card, #161a24)) !important; border-color: color-mix(in srgb, var(--ft-accent, #7c3aed) 32%, transparent) !important; color: color-mix(in srgb, var(--ft-accent, #7c3aed) 45%, #ffffff) !important; } /* El número del día, los nombres de la semana y el botón de añadir. */ :root[data-theme="dark"][data-theme="dark"] .cgm-day__num, :root[data-theme="dark"][data-theme="dark"] .cgm-day__dow, /* Los nombres de la semana iban en negro al 55%: sobre oscuro eso es casi invisible, que es lo que pasaba con LUN / MAR / MIÉ. */ :root[data-theme="dark"][data-theme="dark"] .cgm-grid-cal__dow, :root[data-theme="dark"][data-theme="dark"] .cgm-grid-cal__dow > *, :root[data-theme="dark"][data-theme="dark"] .cgm-grid-header__title, :root[data-theme="dark"][data-theme="dark"] .cgm-monthbar__label { color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-day__add, :root[data-theme="dark"][data-theme="dark"] .cgm-monthbtn, :root[data-theme="dark"][data-theme="dark"] .cgm-viewbtn { background: var(--card, #161a24) !important; border-color: var(--line, #262c3a) !important; color: var(--ink-2, #c3c9d6) !important; } /* Los dos contenedores blancos que quedaban arriba de la parrilla: el conmutador Calendario / Lista / Grid y la caja del mes. Sus botones ya estaban oscuros, pero la caja que los envuelve llevaba el blanco escrito, así que se veían dos parches claros cruzando la cabecera. */ :root[data-theme="dark"][data-theme="dark"] .cgm-grid-viewtoggle, :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime .cgm-grid-monthbar__nav, :root[data-theme="dark"][data-theme="dark"] .cgm-grid-monthbar__nav { background: var(--card, #161a24) !important; border-color: var(--line, #262c3a) !important; box-shadow: none !important; } /* El título de cada publicación iba en azul marino fijo (#1b2435): sobre la tarjeta ya oscura era texto negro sobre negro. Es lo único que se lee de una tarjeta cuando la portada no dice de qué va. */ :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime .cgm-mini__title, :root[data-theme="dark"][data-theme="dark"] .cgm-mini__title { color: var(--ink) !important; } :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime .cgm-mini__body { background: var(--card, #161a24) !important; } /* La lista simple, que es la misma parrilla en otra forma. */ :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime .cgm-grid-simpleList, :root[data-theme="dark"][data-theme="dark"] .cgm-grid-shell--fantime .cgm-grid-simpleList__row { background: var(--card, #161a24) !important; border-color: var(--line, #262c3a) !important; color: var(--ink) !important; } /* La píldora de entrega del formulario de solicitudes, en oscuro. Puesta solo la vacía: con fecha ya lleva su degradado, que se lee igual en los dos temas. Vacía heredaba un gris claro pensado para fondo blanco y quedaba como un parche. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .cgm-dateRangePick--field .cgm-dateRangePick__btn.is-empty { /* Los porcentajes suman 100 a propósito: con 70% + 6% el color sale translúcido y la píldora dejaba ver el fondo del formulario. */ background: color-mix(in srgb, var(--surface) 94%, #fff 6%); border-color: var(--line-2); color: var(--faint); } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .cgm-dateRangePick--field .cgm-dateRangePick__btn.is-empty:hover { background: color-mix(in srgb, var(--surface) 90%, #fff 10%); } :root[data-theme="dark"][data-theme="dark"] .cgm-reqPortal .cgm-dateRangePick--field .cgm-dateRangePick__clear { background: color-mix(in srgb, var(--surface) 88%, #fff 12%); color: var(--ink-2); } /* El panel de «Mandar a…» en oscuro: flota sobre el documento, así que no hereda la paleta de ninguna pantalla y hay que dársela aquí. */ :root[data-theme="dark"][data-theme="dark"] .cgm-handoff { background: var(--surface, #161a24); border-color: var(--line-2, #2f3647); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"][data-theme="dark"] .cgm-handoff__item { color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-handoff__tit, :root[data-theme="dark"][data-theme="dark"] .cgm-handoff__grupo, :root[data-theme="dark"][data-theme="dark"] .cgm-handoff__vacio { color: var(--faint, #6b7489); } /* El diálogo de «Mover a…» en oscuro: flota sobre el documento y no hereda la paleta de ninguna pantalla. */ :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__panel { background: var(--surface, #161a24); color: var(--ink, #e7e9ef); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__sub, :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__src span { color: var(--ink-2, #c3c9d6); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__heads, :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__nofit, :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__arrow { color: var(--faint, #6b7489); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__heads { border-bottom-color: var(--line-2, #2f3647); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__dst select, :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__cancel { background: color-mix(in srgb, var(--surface) 92%, #fff 8%); border-color: var(--line-2, #2f3647); color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__x:hover { background: color-mix(in srgb, var(--surface) 85%, #fff 15%); } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__warn { background: color-mix(in srgb, #e2445c 18%, var(--surface) 82%); color: #ff9aab; } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__ok { background: color-mix(in srgb, #16a06b 18%, var(--surface) 82%); color: #7fe0b6; } :root[data-theme="dark"][data-theme="dark"] .cgm-moveMap__src b i { background: color-mix(in srgb, var(--surface) 80%, #fff 20%); color: var(--faint, #6b7489); } /* La bandeja de solicitudes de un equipo, en oscuro. */ :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqCard { background: var(--surface, #161a24); border-color: var(--line-2, #2f3647); } :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqCard__t, :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqs__head h1, :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqs__grpH { color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqCard__state { background: color-mix(in srgb, var(--surface) 92%, #fff 8%); border-color: var(--line-2, #2f3647); color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqs__grpN { background: color-mix(in srgb, var(--surface) 80%, #fff 20%); color: var(--faint, #6b7489); } :root[data-theme="dark"][data-theme="dark"] .cgm-teamReqs__empty { border-color: var(--line-2, #2f3647); color: var(--faint, #6b7489); } /* Las listas de fases y estados en oscuro. */ :root[data-theme="dark"][data-theme="dark"] .cgm-stateList { background: var(--surface, #161a24); border-color: var(--line-2, #2f3647); } :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__h b { color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__h span, :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__hint { color: var(--faint, #6b7489); } :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__row input[type="text"], :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__row input[type="color"], :root[data-theme="dark"][data-theme="dark"] .cgm-stateList__row button { background: color-mix(in srgb, var(--surface) 92%, #fff 8%); border-color: var(--line-2, #2f3647); color: var(--ink, #e7e9ef); } /* La franja de solicitudes asomada a un tablero, en oscuro. */ :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand, :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand__card { background: var(--surface, #161a24); border-color: var(--line-2, #2f3647); } :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand__h { color: var(--ink, #e7e9ef); } :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand__hint, :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand__meta, :root[data-theme="dark"][data-theme="dark"] .cgm-reqBand__code { color: var(--faint, #6b7489); } /* La sombra que cierra la zona fija de la tabla. En claro es un gris muy tenue sobre blanco; sobre una tarjeta oscura eso no se ve, y la columna congelada vuelve a parecer que se come el texto que pasa por debajo. Aquí la sombra tiene que ser negra de verdad. */ :root[data-theme="dark"] { --cgm-fija-sombra: rgba(0, 0, 0, 0.6); } /* El fondo de las filas que son solicitudes. En claro es un lila muy pálido sobre blanco; aquí tiene que ser un punto MÁS oscuro que la tarjeta, no más claro, o la fila parece seleccionada. */ :root[data-theme="dark"] { --cgm-req-row: #1b1a28; }