/* ============================================================ app_shell.css — piel del explorador según el prototipo entregado (docs/talk2doc Web App (offline).html, siete pantallas). QUÉ ES ESTO Una capa de estilo, la ÚLTIMA que carga drive.html, que traduce el sistema visual del prototipo sobre el DOM `.pd-*` que ya existe. No renombra un solo gancho, no toca ningún renderizador y no añade ni quita comportamiento: si se borra este fichero, la aplicación vuelve exactamente a como estaba. POR QUÉ ASÍ Y NO REESCRIBIENDO EL MARCADO El explorador se pinta desde JS (drive_init.js son 200 KB, más los renderizadores de tarjetas y filas). Reescribir ese marcado para adoptar el vocabulario de clases del prototipo (`.gcard`, `.ft`, `.tree-row`…) es cambiar el contrato con nueve ficheros a la vez, y ya se probó: rompe cosas en silencio. El prototipo mismo se declara «reskin fiel de _drive_body.html», así que la piel es exactamente lo que pide. ALCANCE Todo cuelga de `body:has(#pd-drive-root)`. La landing (que usa `body:has(.t2d-landing)`) y `/guia` no ven ni una regla de aquí. `pibico.css` y `collab.css` NO se tocan: son byte-idénticos en api_auth, api_talk2doc y api_script. QUÉ DEL PROTOTIPO SE DESCARTA A PROPÓSITO 1. Su `.pibico-glass` es plano (`rgba(255,255,255,.9)`, sin `mask`). Quien lo maquetó no tenía `pibico-tabs.js`, así que sus finger tabs son pestañas planas. Adoptarlo sería tirar la firma visual de la casa. Se conserva la máscara curva de producción. 2. Su `.slide-panel` anima `transform` y vive en `z-index:201`. Aquí las cortinas animan `right` en píxeles porque `drive_init.js` las vigila con un MutationObserver que lee `parseInt(el.style.right)`, y van a 1500 porque `.app-header` es 1400. No se tocan. 3. Sus botones «Subir», «Nueva carpeta» y «Carpetas desde plantilla». Talk2Doc es una capa de lectura sobre repositorios conectados: esos botones se retiraron a conciencia y no vuelven. 4. Sus cápsulas de 999px en buscadores, selectores y chips de preajuste. Aquí todo control (botón, entrada, select) comparte `--radius-sm`. ============================================================ */ /* ------------------------------------------------------------ 0 · Tokens de la piel, acotados al explorador ------------------------------------------------------------ */ body:has(#pd-drive-root) { /* Alturas de control, una por barra: dentro de una misma fila todos los botones, entradas y selectores miden lo mismo. Que no lo hagan es el defecto que más se nota. */ --bar-h: 32px; /* barra de ruta y barra de herramientas */ --bar-h-sm: 28px; /* barra de vista, más liviana */ --card-pad: 12px; } /* ------------------------------------------------------------ 1 · Cáscara: navbar, principal, pie ------------------------------------------------------------ */ /* El cristal de collab.css es 0.65: sobre el degradado de marca deja pasar tanto azul que la barra se lee como una banda oscura. El prototipo usa 0.85 y por eso su navbar se lee blanca. */ body:has(#pd-drive-root) .app-header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } body:has(#pd-drive-root) .app-header-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #1a3a54; gap: 8px; } /* Botones de la navbar: fondo tenue en vez de blanco sobre blanco. `drive_overrides.css:1089` fuerza un filete de 1px en cada botón de icono con `!important`; el prototipo los resuelve con relleno tenue y sin borde, que es lo que se adopta. De ahí los `!important` de aquí en adelante: no hay otra forma de ganar a una declaración forzada. */ body:has(#pd-drive-root) .app-header-btn { width: 34px; height: 34px; min-width: 34px; border: none !important; border-radius: var(--radius-sm); background: rgba(44, 81, 113, 0.10); color: #1a3a54; transition: background 0.18s, color 0.18s; } body:has(#pd-drive-root) .app-header-btn:hover { background: rgba(44, 81, 113, 0.20); color: var(--accent-color); } body:has(#pd-drive-root) .app-header-btn.avatar-btn { background: var(--primary-color); color: #fff; font-weight: 700; font-size: 13px; } body:has(#pd-drive-root) .app-header-btn.avatar-btn:hover { background: var(--accent-color); } /* La pastilla de plan era una cápsula dorada de 999px: fuera. Mismo radio que el resto de la barra, y cifra en monoespaciada como el `credit-badge` del prototipo. */ body:has(#pd-drive-root) .header-tier-chip { /* Misma altura EXACTA que `.app-header-btn`, no una aproximada: la pastilla y los botones comparten fila, así que 26 contra 34 se lee como un elemento hundido, no como una jerarquía. */ height: 34px; padding: 0 12px; border: none; border-radius: var(--radius-sm); background: rgba(44, 81, 113, 0.15); color: #1a3a54; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; line-height: 1; display: inline-flex; align-items: center; white-space: nowrap; } body:has(#pd-drive-root) .header-tier-chip:hover { background: rgba(44, 81, 113, 0.24); } /* El selector de idioma viene de `pibico.css` con 32 px y ese fichero es byte-idéntico en los tres servicios: no se toca. Se iguala aquí, dentro del ámbito del explorador, para que la fila de la barra no tenga tres alturas distintas. */ body:has(#pd-drive-root) .pibico-lang-btn { height: 34px; border-radius: var(--radius-sm); } /* Arriba respira más que a los lados aunque la medida canónica sean 12 px por los cuatro costados. No es capricho: la barra proyecta una sombra hacia abajo (`0 2px 8px`) que se come parte de esa franja, así que doce píxeles iguales se ven desiguales y la tarjeta parece pegada. */ body:has(#pd-drive-root) .app-main { padding: 18px 12px 12px; gap: 12px; } /* Pie: cristal blanco de 42 px como el canon, y los dos enlaces dejan de ser cápsulas para ser enlaces. */ body:has(#pd-drive-root) .app-footer { height: 42px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--glass-border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); color: var(--text-light); font-size: 12px; } body:has(#pd-drive-root) .app-footer .footer-link-btn { border: none !important; background: none; padding: 0; border-radius: 0; color: var(--primary-color); font-family: var(--font-body); font-size: 12px; cursor: pointer; } body:has(#pd-drive-root) .app-footer .footer-link-btn:hover { color: var(--accent-color); text-decoration: underline; } body:has(#pd-drive-root) .app-footer .footer-sep { color: #ccc; } /* ------------------------------------------------------------ 2 · Las dos tarjetas Radios concéntricos: la tarjeta exterior 24, lo de dentro 12, los controles 8. Que no lo fueran era otro defecto visible. ------------------------------------------------------------ */ body:has(#pd-drive-root) .pd-drive-container { gap: 12px; } /* Las dos tarjetas llevan EL MISMO radio que su marco. `#pd-drive-root` es un marco visible —borde blanco de 1 px, sombra y `border-radius: var(--radius)`— con 8 px de padding, y las tarjetas viven dentro. Con 24 px contra los 12 del marco las curvas no se acompañaban y el rincón quedaba sucio. Mismo token para los tres. */ body:has(#pd-drive-root) .pd-sidebar, body:has(#pd-drive-root) .pd-main-panel { border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } body:has(#pd-drive-root) .pd-main-panel { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* La máscara curva de las finger tabs la calcula pibico-tabs.js con el radio real de la tarjeta, así que basta con subir la opacidad; el recorte se recalcula solo en el siguiente `resize`. */ body:has(#pd-drive-root) .pd-sidebar .pibico-glass { background: rgba(255, 255, 255, 0.95); } /* Finger tabs inactivas: el prototipo las deja en rgba(44,81,113,.55), que sobre el blanco de la tarjeta son 2.72 de contraste. Se suben lo justo para pasar de 3 sin que dejen de leerse como secundarias. */ body:has(#pd-drive-root) .pd-sidebar .pibico-tab { color: rgba(44, 81, 113, 0.72); } body:has(#pd-drive-root) .pd-sidebar .pibico-tab:hover { color: var(--accent-color); } body:has(#pd-drive-root) .pd-sidebar .pibico-tab.active { color: var(--accent-color); } /* La manilla de redimensión se queda como está: ya tiene su pulgar de 48 px (`.pd-resize-handle::after`) y es lo bastante descubrible. El raíl continuo del prototipo se probó y solo añadía un segundo indicador encima del que ya había. */ /* ------------------------------------------------------------ 3 · Barras del panel derecho Ruta, herramientas y vista. El prototipo las separa por función y les da aire; producción las tenía apretadas y con alturas dispares. ------------------------------------------------------------ */ /* El alto y el relleno de esta barra ya no se deciden aquí: es la cabecera de la tarjeta derecha del Explorador y va con las otras cuatro, en «LA CABECERA DE LA TARJETA DERECHA». Aquí queda sólo lo que es suyo. */ body:has(#pd-drive-root) .pd-path-bar { background: none; border-bottom: none; gap: 6px; height: auto; } /* 26, no `--bar-h` (32): este botón hace exactamente el mismo papel que el de plegar de los otros cuatro módulos, que miden 26 como todos los botones de icono de la tarjeta derecha. Con 32 eran dos botones parecidos en vez del mismo botón, y además sostenían la barra por encima de los 39 de canon. */ body:has(#pd-drive-root) .pd-path-bar > .pd-sidebar-toggle.pd-btn-icon { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; } /* La ruta es un dato, no un título: monoespaciada, sobre papel, y editable como estaba. El contenedor hace de campo y el input vive dentro sin borde propio (evita el doble marco). */ body:has(#pd-drive-root) .pd-path-input-container { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: var(--bar-h) !important; padding: 0 4px 0 10px; border: 1px solid rgba(44, 81, 113, 0.14) !important; border-radius: var(--radius-sm); background: #fbfcfd; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s; } body:has(#pd-drive-root) .pd-path-input-container:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.1); background: #fff; } body:has(#pd-drive-root) .pd-path-input { flex: 1; min-width: 0; height: auto; border: none; background: none; outline: none; padding: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-color); } body:has(#pd-drive-root) .pd-toolbar { padding: 4px 14px 10px !important; background: none; border-bottom: none; gap: 8px; height: auto !important; min-height: 0 !important; flex-wrap: wrap; } body:has(#pd-drive-root) .pd-toolbar-right { margin-left: auto; flex: 1 1 260px; min-width: 0; justify-content: flex-end; } body:has(#pd-drive-root) .pd-search-container { flex: 1 1 170px; max-width: 320px; min-width: 150px; } body:has(#pd-drive-root) .pd-search-box { position: relative; display: flex; align-items: center; width: 100%; } /* Mismo radio que los botones de al lado: nada de cápsulas. */ body:has(#pd-drive-root) .pd-search-input { width: 100%; height: var(--bar-h) !important; padding: 0 10px 0 30px !important; border: 1px solid rgba(44, 81, 113, 0.14) !important; border-radius: var(--radius-sm) !important; background: #fbfcfd; font-family: var(--font-body); font-size: 13px; color: var(--text-color); } body:has(#pd-drive-root) .pd-search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.1); background: #fff; } body:has(#pd-drive-root) .pd-search-box > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--idle, #94a3b8); pointer-events: none; } /* Los botones de icono de las barras comparten alto con las entradas de su fila. Es la corrección que se pidió expresamente. */ body:has(#pd-drive-root) .pd-path-bar .pd-btn-icon, body:has(#pd-drive-root) .pd-toolbar .pd-btn-icon, body:has(#pd-drive-root) .pd-view-controls .pd-btn-icon { width: var(--bar-h) !important; height: var(--bar-h) !important; min-width: var(--bar-h) !important; min-height: var(--bar-h) !important; max-width: var(--bar-h) !important; max-height: var(--bar-h) !important; border: none !important; border-radius: var(--radius-sm) !important; background: rgba(44, 81, 113, 0.08); color: #1a3a54; transition: background 0.16s, color 0.16s, transform 0.16s; } body:has(#pd-drive-root) .pd-path-bar .pd-btn-icon:hover, body:has(#pd-drive-root) .pd-toolbar .pd-btn-icon:hover, body:has(#pd-drive-root) .pd-view-controls .pd-btn-icon:hover { background: rgba(44, 81, 113, 0.18); transform: translateY(-1px); } body:has(#pd-drive-root) .pd-path-bar .pd-path-input-container .pd-btn-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; border-radius: var(--radius-sm) !important; background: transparent !important; /* #94a3b8 sobre el papel del campo son 2.50 de contraste: demasiado flojo para un control que se pulsa. slate-600 da 5.9. */ color: var(--slate-600, #5A6478) !important; } body:has(#pd-drive-root) .pd-path-bar .pd-path-input-container .pd-btn-icon:hover { background: rgba(44, 81, 113, 0.1) !important; color: var(--accent-color) !important; transform: none; } /* Conmutador de vista: segmentado sobre un raíl, como el prototipo. Es una sola pieza, así que aquí el radio exterior es el del raíl y el interior el de cada segmento. */ body:has(#pd-drive-root) .pd-view-toggle { display: inline-flex; gap: 2px; padding: 2px; background: rgba(44, 81, 113, 0.08); border-radius: var(--radius-sm); } body:has(#pd-drive-root) .pd-view-toggle .pd-btn-icon { width: var(--bar-h-sm) !important; height: var(--bar-h-sm) !important; min-width: var(--bar-h-sm) !important; min-height: var(--bar-h-sm) !important; max-width: var(--bar-h-sm) !important; max-height: var(--bar-h-sm) !important; background: transparent !important; border: none !important; border-radius: var(--radius-sm) !important; color: var(--slate-600, #5A6478); } body:has(#pd-drive-root) .pd-view-toggle .pd-btn-icon:hover { background: rgba(255, 255, 255, 0.6) !important; color: var(--accent-color); transform: none; } /* CONTRASTE EN ESTADO ACTIVO — leer antes de tocar los colores de arriba. Un botón de icono activo se rellena de azul de marca, y su glifo tiene que ir en blanco o desaparece. El `color:#fff` de `drive_overrides.css:468` NO lleva `!important`, así que la regla de color de las barras de aquí arriba —más específica— se lo comía: azul marino #1a3a54 sobre azul acero #4682b4 son 2.88 de contraste, o sea invisible. Le pasó al conmutador de miniaturas. REGLA: fondo y glifo se tocan SIEMPRE JUNTOS. Cambiar solo el color deja el trazo blanco sobre el relleno tenue y el botón se borra —que es justo lo que pasó con la pastilla de «seleccionar todo», que marca su estado con `aria-pressed`, no con `.active`, y por tanto no recibía el relleno azul. */ body:has(#pd-drive-root) .pd-path-bar .pd-btn-icon.active, body:has(#pd-drive-root) .pd-toolbar .pd-btn-icon.active, body:has(#pd-drive-root) .pd-view-controls .pd-btn-icon.active, body:has(#pd-drive-root) .pd-view-controls .pd-btn-icon[aria-pressed="true"], body:has(#pd-drive-root) #t2d-select-all-toggle[aria-pressed="true"] { background: var(--primary-color) !important; color: #fff !important; } /* Selección parcial: mismo par, medio tono, para que se distinga de «todos marcados» sin dejar de leerse. */ body:has(#pd-drive-root) #t2d-select-all-toggle.is-partial { background: rgba(70, 130, 180, 0.55) !important; color: #fff !important; } /* La excepción es el conmutador de vista: ahí el activo se marca con relleno BLANCO y sombra —así el par «rejilla / lista» se lee como un conmutador y no como dos botones sueltos—, de modo que su glifo va oscuro. Esta regla va después a propósito. */ body:has(#pd-drive-root) .pd-view-toggle .pd-btn-icon.active { background: #fff !important; border-color: transparent !important; color: var(--accent-color) !important; box-shadow: 0 1px 4px rgba(13, 26, 38, 0.14); } body:has(#pd-drive-root) .pd-toolbar-divider { width: 1px; height: 20px; background: rgba(44, 81, 113, 0.14); } /* ------------------------------------------------------------ 4 · Tarjeta izquierda: cabeceras, árbol, chips Las carpetas se quedan a la izquierda y los archivos a la derecha. El prototipo los junta en una sola tarjeta y ahí no mejora nada. ------------------------------------------------------------ */ /* Una sola cabecera para la tarjeta izquierda. Había tres clases distintas para lo mismo —`.pd-folder-list-header` en Bibliotecas, Carpetas y Estadísticas; `.t2d-srch-head` en Filtros; `.t2d-mod-head` en los módulos— y las tres se veían distintas: distinto relleno y unas con raya de separación y otras sin ella. Aquí se declaran juntas para que no puedan volver a separarse. */ body:has(#pd-drive-root) .pd-folder-list-header, body:has(#pd-drive-root) .pd-section-header, body:has(#pd-drive-root) .t2d-srch-head, body:has(#pd-drive-root) .pd-thread-history-header, body:has(#pd-drive-root) .t2d-mod-head { display: flex; align-items: center; gap: 6px; flex-shrink: 0; box-sizing: border-box; /* Un alto mínimo, y no porque falte aire: porque una cabecera CON botones mide 39 —26 del botón más el relleno y la raya— y una SIN ellos mide 24, que es lo que da el rótulo solo. El Asistente esconde los suyos, así que su cabecera saltaba 15 px al cambiar de pestaña. Con el mínimo, llevar botones o no deja de mover la línea donde empieza la lista. */ min-height: 39px; padding: 6px 10px; border-bottom: 1px solid rgba(70, 130, 180, 0.15); } /* Y el rótulo de una cabecera no trae márgenes. `pd_drive.css:983` le pone `margin: 16px 0 8px` a `.pd-section-title`, que es medida de encabezado de bloque —cuando esto era un `

` suelto en una columna— y dentro de un flex se suma al alto: Conectores y Soporte medían 55 px de cabecera contra los 39 de la de al lado, por 24 px de margen invisible. */ body:has(#pd-drive-root) .pd-folder-list-header > .pd-section-title, body:has(#pd-drive-root) .t2d-srch-head > .pd-section-title, body:has(#pd-drive-root) .pd-thread-history-header > .pd-section-title, body:has(#pd-drive-root) .t2d-mod-head > .pd-section-title { margin: 0 !important; } /* Las cabeceras de GRUPO dentro de una lista (Filtros y Etiquetas dentro de la pestaña Filtros) no llevan raya: no encabezan la tarjeta, encabezan un bloque, y una raya por bloque convierte la columna en una tabla. */ body:has(#pd-drive-root) .pd-sidebar-section > .pd-section-header { border-bottom: none; padding-bottom: 2px; } /* Los botones de la cabecera, a la derecha, sin importar en cuál estén. */ body:has(#pd-drive-root) .pd-folder-list-header > .pd-btn-icon:first-of-type, body:has(#pd-drive-root) .t2d-srch-head > .pd-btn-icon:first-of-type, body:has(#pd-drive-root) .t2d-mod-head > .pd-btn-icon:first-of-type { margin-left: auto; } /* …pero UNO SOLO reparte el espacio libre. En Carpetas ya lo reparte el punto de estado del origen (línea ~919), que es quien separa el nombre de la biblioteca de sus accesos; si además lo reparte el botón, los dos huecos se suman y «abrir el origen» queda flotando en mitad de la cabecera, a media pantalla del árbol. Los accesos de una cabecera van juntos, en bloque. */ body:has(#pd-drive-root) .pd-folder-list-header:has(> .t2d-src-dot) > .pd-btn-icon:first-of-type { margin-left: 0; } /* ---- EL PIE DE UNA TARJETA, declarado UNA sola vez ---- Mismo argumento que el bloque de cabeceras de arriba, y por el mismo motivo: había TRES pies —Filtros, Búsqueda y la lista de conversaciones del Asistente— con tres rellenos, tres rayas de distinto color y tres alineaciones, más el bloque de acciones de Conectores que no era pie de nada y flotaba al final de una ficha con scroll. Cambiando de pestaña se notaba, y lo que se nota es que cada una parece de otra mano. Aquí se declaran juntos para que no puedan volver a separarse. Contrapeso de la cabecera: la misma raya, del otro lado. `sticky` para que se quede pegado al borde inferior visible aunque la lista siga por debajo, y fondo opaco porque es lo que pasa por delante del contenido al desplazar; con el cristal de la tarjeta se leerían los dos a la vez. Todo a la derecha: la burbuja flotante del asistente se posa justo en la esquina inferior izquierda de la tarjeta y se come lo que haya ahí. */ body:has(#pd-drive-root) .t2d-srch-foot, body:has(#pd-drive-root) .t2d-card-foot, body:has(#pd-drive-root) .pd-pager, /* Sin acotar al módulo: el MISMO pie sale también en la pestaña Filtros del Explorador, y ahí se quedaba fuera del bloque —45 px con su relleno propio de 10— mientras sus vecinos iban a 34. */ body:has(#pd-drive-root) .t2d-search-footer, /* El de Valoraciones sí: es el que cierra su tarjeta. El del historial de conversaciones NO entra aquí aunque también sea un paginador, porque va DENTRO de `.pd-thread-history-footer`, que ya es el pie — meterlo daba pie dentro de pie: dos rellenos, dos rayas y dos fondos superpuestos. */ body:has(#pd-drive-root) .t2d-fb-pager > .t2d-pager, body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-thread-history-footer, /* Y el del chat, que es el pie de la tarjeta DERECHA del Asistente y era el último que iba por libre: 31 px de alto con relleno de 8×20 y letra de 12, contra los 36 con 5×10 y 11 de todos los demás. Dice el estado y el modelo —«Listo · Auto»—, que es exactamente lo que hace un pie: contar qué estás mirando. */ body:has(#pd-drive-root) #t2d-mod-main-assistant .pd-ai-chat-footer, body:has(#pd-drive-root) #t2d-mod-main-connectors .t2d-conn-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; margin-top: auto; /* MISMA ALTURA en la tarjeta izquierda y en la de detalle. El relleno solo no la garantiza: un pie con botón medía 34 px y uno con sólo el rótulo 22 px, así que al cambiar de pestaña la raya inferior saltaba de sitio. Con `min-height` las dos tarjetas cierran a la misma línea tengan botón o no, y `box-sizing` evita que el borde la empuje un píxel. */ box-sizing: border-box; /* 36 y no 34: `min-height` sólo pone un SUELO, así que hay que dejarlo por encima del contenido más alto o el pie que lo lleva se sale por arriba. El más alto es el que trae botón (24) + relleno (10) + filete (1) = 35. Con 34 salían 34 · 34 · 35 y volvía a no cuadrar por un píxel; con 36 todos —el de sólo rótulo, el del desplegable de página y el del botón— cierran exactamente igual. */ min-height: 36px; padding: 5px 10px !important; border-top: 1px solid rgba(70, 130, 180, 0.15) !important; background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-body); font-size: 11px; line-height: 1.2; } /* El estado, a la izquierda del botón y en el mismo tono de rótulo que los títulos de sección: dice DÓNDE estás, no qué hacer. */ body:has(#pd-drive-root) .t2d-srch-foot-state { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); /* Ni `margin-right:auto` ni hueco para la burbuja: el pie ya alinea a la derecha, así que el estado se lee siempre en la misma esquina —con botón al lado o sin él— y nunca cae debajo del bocadillo flotante, que vive en la de enfrente. Con el margen automático, las tarjetas sin botón lo mandaban a la izquierda y cada pestaña volvía a empezar en un sitio. */ } /* ═══════════════════════════════════════════════════════════════════════ LA FILA DE UNA LISTA, declarada UNA sola vez ═══════════════════════════════════════════════════════════════════════ Quinto bloque de la familia (cabecera · pie · rótulo · cabecera de panel · esto), y el que más se repite: es el objeto que más veces se ve en toda la aplicación. Estaba escrito CINCO veces, con cinco rellenos y cuatro huecos entre filas, medido en el DOM vivo: Bibliotecas .t2d-lib-card 7px 8px 7px 10px hueco 6 Conectores .t2d-lib-card 7px 8px 7px 10px hueco 4 Carpetas .pd-folder-item 3px 8px hueco 0 Asistente .pd-thread-item 6px 8px hueco 3 Soporte .t2d-sup-row 8px 6px hueco — Los ALTOS pueden diferir —una biblioteca dice dos líneas y una carpeta una—, pero el relleno, el hueco, el radio y la letra del nombre no: eso es lo que hace que cambiar de pestaña se note. Aquí van juntos. ═══════════════════════════════════════════════════════════════════════ */ body:has(#pd-drive-root) .t2d-lib-card, body:has(#pd-drive-root) .t2d-sup-row, body:has(#pd-drive-root) .pd-folder-item, body:has(#pd-drive-root) .pd-thread-item, body:has(#pd-drive-root) .t2d-fb-card, body:has(#pd-drive-root) .t2d-tr-card, body:has(#pd-drive-root) .t2d-conn-row { box-sizing: border-box; padding: 5px 10px !important; margin: 0 0 2px !important; border: none !important; border-radius: var(--radius-sm) !important; background: transparent; box-shadow: none; transition: background 0.14s, box-shadow 0.14s; } /* ── La excepción del árbol, y es una sola ── Las otras cuatro listas dicen DOS líneas por fila —nombre y debajo la fecha, el estado o el repositorio— y son cortas: una biblioteca, un conector, un hilo, un ticket. El árbol de carpetas dice UNA línea y no tiene tope: hay bibliotecas con cientos de carpetas, y ahí cada píxel de relleno se multiplica por todas. A 5 px la fila medía 31 px de paso, así que en una tarjeta de 974 px cabían 31 carpetas de las cientos que hay. Baja a 21 px de paso —la medida de un árbol de ficheros de cualquier editor— y caben 46. NO se toca nada más: el radio, el color del nombre, el resalte al pasar y el de la fila abierta siguen siendo los del bloque común, que es lo que hace que se reconozca como la misma lista. Lo único que cambia es la densidad, y cambia porque el objeto es distinto: un árbol, no una lista. */ body:has(#pd-drive-root) .pd-folder-item { padding: 2px 10px !important; margin: 0 0 1px !important; } body:has(#pd-drive-root) .t2d-lib-card:hover, body:has(#pd-drive-root) .t2d-sup-row:hover, body:has(#pd-drive-root) .pd-folder-item:hover, body:has(#pd-drive-root) .pd-thread-item:hover, body:has(#pd-drive-root) .t2d-fb-card:hover, body:has(#pd-drive-root) .t2d-tr-card:hover, body:has(#pd-drive-root) .t2d-conn-row:hover { background: rgba(70, 130, 180, 0.07) !important; } body:has(#pd-drive-root) .t2d-lib-card.active, body:has(#pd-drive-root) .t2d-sup-row.active, body:has(#pd-drive-root) .pd-folder-item.active, body:has(#pd-drive-root) .pd-folder-item.current-folder, body:has(#pd-drive-root) .pd-thread-item.active { background: rgba(70, 130, 180, 0.14) !important; box-shadow: 0 2px 8px rgba(70, 130, 180, 0.18) !important; } /* Y el NOMBRE de una fila se dice siempre igual: la tipografía de titular a 13, semibold; en negrita y en color de acento cuando es la fila abierta. Iba en Montserrat 700 en Bibliotecas, Inter 400 en Carpetas y Montserrat 600 en Soporte — tres voces para el mismo dato. */ body:has(#pd-drive-root) .t2d-lib-card-name, body:has(#pd-drive-root) .t2d-sup-row-subject, body:has(#pd-drive-root) .pd-folder-item-name, body:has(#pd-drive-root) .pd-thread-item-title, body:has(#pd-drive-root) .t2d-fb-q, /* Los tres modos de Búsqueda —Nombre, Híbrida, Semántica— son filas que se eligen y que llevan nombre arriba y explicación debajo, exactamente el mismo objeto que una fila de lista. Iban en Inter, que era la última voz suelta que quedaba en esa tarjeta. */ body:has(#pd-drive-root) .t2d-sf-mode-t b, /* El título de una conversación. La clase es `.pd-thread-title`, NO `.pd-thread-item-title`: en la pasada anterior se escribió el nombre que parecía y no el que hay, así que la regla no casaba con nada y el Asistente se quedó con Inter 12 mientras las otras cuatro listas ya iban a Figtree 13. Se comprueba en el DOM, no de memoria. */ body:has(#pd-drive-root) .pd-thread-title, body:has(#pd-drive-root) .t2d-conn-row-name { /* Figtree, NO Montserrat. Montserrat es geométrica y ancha: separa mucho entre caracteres, y en una lista densa —el árbol de carpetas es la más larga de la aplicación— un nombre ocupa media fila y se lee pesado aunque el peso sea bajo. Figtree es compacta y de trazos redondeados, y NO es una familia nueva: ya está vendorizada y `pd_drive.css` la usa en medio explorador desde siempre; lo que faltaba era usarla también aquí. Variable 300–900, así que el 600 es un 600 de verdad y no una negrita sintética. 600 en reposo, 700 y color de acento en la fila abierta. */ font-family: 'Figtree', var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #1a3a54 !important; } /* El hueco entre filas lo pone la fila (`margin-bottom: 3px`), que funciona tanto en una lista `flex` como en una `block`. Los contenedores `flex` ponían ADEMÁS el suyo —6 px en Bibliotecas, 4 en Conectores— y se sumaban: salían 9 y 7 contra los 3 de las otras tres listas. Se les quita, y así el hueco se declara en un solo sitio. */ body:has(#pd-drive-root) .t2d-lib-cards, body:has(#pd-drive-root) .t2d-conn-list { gap: 0 !important; } body:has(#pd-drive-root) .t2d-lib-card.active .t2d-lib-card-name, body:has(#pd-drive-root) .t2d-sup-row.active .t2d-sup-row-subject, body:has(#pd-drive-root) .pd-folder-item.active .pd-folder-item-name, body:has(#pd-drive-root) .pd-folder-item.current-folder .pd-folder-item-name, body:has(#pd-drive-root) .pd-thread-item.active .pd-thread-item-title { font-weight: 700 !important; color: var(--accent-color) !important; } /* ═══════════════════════════════════════════════════════════════════════ UNA FACETA Y SUS VALORES, declarada UNA sola vez ═══════════════════════════════════════════════════════════════════════ El mismo objeto —«cliente = ASPRU», «tipo = informe»— se pinta en DOS sitios: el editor de etiquetas del panel de detalle (`.t2d-te-opt`, en `drive_overrides.css`) y las Reglas de etiquetado. Y se pintaba distinto: allí 11 px con fondo azul claro, aquí 0.7rem con borde y otro azul. Es literalmente el mismo dato con dos caras según por dónde llegues. Aquí van los dos juntos. `app_shell.css` se carga DESPUÉS de `drive_overrides.css`, así que a igualdad de especificidad manda este. */ body:has(#pd-drive-root) .t2d-te-opt, body:has(#pd-drive-root) .t2d-tr-val { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 1px solid rgba(70, 130, 180, 0.25); border-radius: var(--radius-sm); background: rgba(70, 130, 180, 0.08); color: #2c5171; font-family: var(--font-body); font-size: 11px; line-height: 1.3; } body:has(#pd-drive-root) .t2d-tr-val { padding-right: 3px; } /* La × de quitar un valor: atenuada, se enciende al acercarse. Nunca escondida hasta el hover — sin ratón no aparecería jamás. */ body:has(#pd-drive-root) .t2d-tr-vdel { padding: 0 3px; border: 0; border-radius: var(--radius-sm); background: none; color: #94a3b8; font-size: 12px; line-height: 1; cursor: pointer; transition: color 0.12s, background 0.12s; } body:has(#pd-drive-root) .t2d-tr-vdel:hover { color: #ef4444; background: rgba(239, 68, 68, 0.10); } /* ═══════════════════════════════════════════════════════════════════════ REGLAS DE ETIQUETADO — la pantalla con más deriva de todas ═══════════════════════════════════════════════════════════════════════ 73 atributos `style` y SIETE tamaños de letra en `rem` que no caen en ningún paso de la escala: 0.62 · 0.66 · 0.68 · 0.70 · 0.72 · 0.74 · 0.78. Más líneas de puntos entre filas, que no se usan en ninguna otra pantalla. La estructura también cambia. El vocabulario tenía `flex:1` con el argumento —correcto— de que es la lista que crece; pero con tres facetas dejaba media tarjeta en blanco y el cuadro de reglas encajonado en 150 px abajo del todo. Ahora el vocabulario crece hasta un tope y luego scrollea, y lo que sobra se lo queda el cuadro de reglas. Con pocas facetas se escribe cómodo; con cuarenta, se recorren. */ body:has(#pd-drive-root) #t2dTrBody { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; /* Sin relleno abajo: el pie va pegado al borde de la tarjeta, como el de la columna de al lado. Con relleno inferior el pie se queda `sticky` DENTRO de él y cerraba ocho píxeles más arriba que su vecino. */ padding: 8px 10px 0; } body:has(#pd-drive-root) .t2d-tr-intro { font-size: 12px; line-height: 1.35; color: var(--text-light); } body:has(#pd-drive-root) .t2d-tr-vocab { flex: 0 1 auto; min-height: 0; max-height: 55%; overflow-y: auto; } /* Una faceta por fila. Sin línea de puntos: el resto de la aplicación separa con aire y con fondo, nunca con rayas — y menos punteadas, que no aparecen en ninguna otra pantalla. */ body:has(#pd-drive-root) .t2d-tr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px 4px; border: none; border-radius: var(--radius-sm); } body:has(#pd-drive-root) .t2d-tr-row:hover { background: rgba(70, 130, 180, 0.05); } body:has(#pd-drive-root) .t2d-tr-key { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: #1a3a54; } /* Cuántos valores admite un documento. Es un interruptor de dos estados, no un botón de acción: se dice con la chapa de la casa —fondo 50, texto 800— y el estado activo con el azul plano de los segmentados. */ body:has(#pd-drive-root) .t2d-tr-multi { padding: 2px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--slate-50, #F0F2F5); color: var(--slate-800, #3A4050); font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.3; cursor: pointer; } body:has(#pd-drive-root) .t2d-tr-multi[data-multi="1"] { background: #4682b4; border-color: #4682b4; color: #fff; } body:has(#pd-drive-root) .t2d-tr-kdel, body:has(#pd-drive-root) .t2d-tr-vadd, body:has(#pd-drive-root) .t2d-tr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: #94a3b8; font-size: 12px; line-height: 1; cursor: pointer; transition: color 0.12s, background 0.12s; } body:has(#pd-drive-root) .t2d-tr-vadd { color: var(--primary-color, #4682b4); } body:has(#pd-drive-root) .t2d-tr-kdel:hover { color: #ef4444; background: rgba(239, 68, 68, 0.10); } body:has(#pd-drive-root) .t2d-tr-vadd:hover, body:has(#pd-drive-root) .t2d-tr-iconbtn:hover { color: #2c5171; background: rgba(70, 130, 180, 0.10); } body:has(#pd-drive-root) .t2d-tr-free { font-size: 11px; color: #94a3b8; font-style: italic; } body:has(#pd-drive-root) .t2d-tr-newval { display: inline-flex; align-items: center; gap: 2px; } body:has(#pd-drive-root) .t2d-tr-newdim { display: flex; align-items: center; gap: 4px; padding-top: 4px; } body:has(#pd-drive-root) .t2d-tr-vnew, body:has(#pd-drive-root) .t2d-tr-input { padding: 2px 6px; border: 1px solid rgba(70, 130, 180, 0.30); border-radius: var(--radius-sm); outline: none; background: #fff; color: #333; font-family: var(--font-body); font-size: 11px; line-height: 1.3; } body:has(#pd-drive-root) .t2d-tr-vnew { width: 90px; } body:has(#pd-drive-root) #t2dTrNewKey { width: 140px; } body:has(#pd-drive-root) #t2dTrNewVal { width: 100px; } /* Los dos cuadros de texto: las reglas se llevan lo que sobre, las indicaciones para el analizador se quedan en tres renglones. */ body:has(#pd-drive-root) #t2dTrText { flex: 1; min-height: 90px; resize: vertical; padding: 8px 10px; border: 1px solid rgba(70, 130, 180, 0.30); border-radius: var(--radius-sm); outline: none; background: #fff; color: #1e293b; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; } body:has(#pd-drive-root) #t2dTrText[readonly] { background: #f8fafc; } body:has(#pd-drive-root) #t2dTrGuia { flex: none; resize: vertical; padding: 6px 10px; border: 1px solid rgba(70, 130, 180, 0.30); border-radius: var(--radius-sm); outline: none; background: #fff; color: #1e293b; font-family: var(--font-body); font-size: 12px; line-height: 1.35; } body:has(#pd-drive-root) .t2d-tr-guia { display: flex; flex-direction: column; gap: 3px; flex: none; } body:has(#pd-drive-root) .t2d-tr-guia-head { display: flex; align-items: center; gap: 6px; } body:has(#pd-drive-root) .t2d-tr-count { flex: none; font-family: var(--font-mono); font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; color: var(--text-light); } body:has(#pd-drive-root) .t2d-tr-count.warn { color: #b45309; } body:has(#pd-drive-root) .t2d-tr-count.full { color: #b91c1c; } body:has(#pd-drive-root) .t2d-tr-readonly { padding: 5px 9px; border: none; border-radius: var(--radius-sm); background: var(--marigold-50, #FFF8E6); color: var(--marigold-800, #7A5A10); font-size: 11px; line-height: 1.35; } /* La cabecera tenía SIETE botones en fila, de tres familias distintas, sin una sola separación: historial, avisos, las tres de la hoja de O.F., guardar y cerrar. El grupo de la hoja se separa con aire para que se lea como lo que es —tres pasos de una misma tarea—, y «Guardar» baja al pie de la tarjeta, que es donde esta aplicación pone siempre la acción principal (el «Aplicar» de Filtros). */ body:has(#pd-drive-root) #t2dTagRulesPanel .t2d-tr-ofgroup { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; padding: 0 4px; border-left: 1px solid rgba(70, 130, 180, 0.20); border-right: 1px solid rgba(70, 130, 180, 0.20); } body:has(#pd-drive-root) #t2dTagRulesPanel .t2d-tr-ofgroup:empty { display: none; } /* El pie va pegado a los bordes de la tarjeta, no al relleno del cuerpo. */ body:has(#pd-drive-root) #t2dTrBody > .t2d-card-foot { margin: 4px -10px 0; } body:has(#pd-drive-root) #t2dTrBody > .t2d-mod-note { flex: none; } body:has(#pd-drive-root) .t2d-tr-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* Último resto fuera de escala del barrido: los comodines de la ayuda de Búsqueda iban a `0.92em` sobre 10 px = 9,2. Un paso de la escala, el 9. */ body:has(#pd-drive-root) .t2d-sf-hint code { font-size: 9px; } /* --- Las dos subvistas: Historial de etiquetas y Avisos --- */ body:has(#pd-drive-root) .t2d-tr-state, body:has(#pd-drive-root) .t2d-tr-empty { padding: 30px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--text-light); } body:has(#pd-drive-root) .t2d-tr-empty { flex: 1; display: flex; align-items: center; justify-content: center; } body:has(#pd-drive-root) .t2d-tr-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: none; } body:has(#pd-drive-root) .t2d-tr-toolbar-txt { flex: 1; min-width: 120px; font-size: 11px; line-height: 1.35; color: var(--text-light); } body:has(#pd-drive-root) .t2d-tr-scroll { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } /* Igual que la tarjeta de Valoraciones y que la fila de un ticket: sin recuadro, el fondo marca el hover. */ body:has(#pd-drive-root) .t2d-tr-card { padding: 5px 10px; border: none; border-radius: var(--radius-sm); background: transparent; transition: background 0.14s; } body:has(#pd-drive-root) .t2d-tr-card:hover { background: rgba(70, 130, 180, 0.06); } body:has(#pd-drive-root) .t2d-tr-card-top { display: flex; align-items: center; gap: 8px; } /* El contador de avisos pegado a su bandera. */ body:has(#pd-drive-root) .t2d-tr-badge { position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--radius-sm); background: var(--marigold-800, #7A5A10); color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 600; line-height: 14px; text-align: center; } body:has(#pd-drive-root) .t2d-tr-badge[hidden] { display: none; } /* ═══════════════════════════════════════════════════════════════════════ VALORACIONES — la consola, con la ropa de la casa ═══════════════════════════════════════════════════════════════════════ Se construía entera con atributos `style` (38 de ellos) y con tamaños en `rem` que caían entre los pasos de la escala: 0.66rem, 0.72rem, 0.74rem, 0.78rem, 0.8rem — cinco tamaños que no existen en ninguna otra pantalla. Aquí se declara con clases y con los pasos de siempre. La tarjeta de una valoración es la misma pieza que una fila de biblioteca o un ticket: sin línea divisoria, el fondo marca el hover. */ body:has(#pd-drive-root) .t2d-fb-filters { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 10px; border-bottom: 1px solid rgba(70, 130, 180, 0.15); } body:has(#pd-drive-root) .t2d-fb-list { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden; padding: 6px 10px; } body:has(#pd-drive-root) .t2d-fb-pager { flex: none; } body:has(#pd-drive-root) .t2d-fb-totals { font-family: var(--font-mono); font-size: 10px; color: var(--text-light); } body:has(#pd-drive-root) .t2d-fb-totals .up { color: #10b981; } body:has(#pd-drive-root) .t2d-fb-totals .down { color: #ef4444; } body:has(#pd-drive-root) .t2d-fb-state { padding: 30px; text-align: center; font-size: 12px; color: var(--text-light); } body:has(#pd-drive-root) .t2d-fb-spin { animation: t2dspin 1s linear infinite; } body:has(#pd-drive-root) .t2d-fb-card { padding: 5px 10px; border: none; border-radius: var(--radius-sm); background: transparent; transition: background 0.14s; } body:has(#pd-drive-root) .t2d-fb-card:hover { background: rgba(70, 130, 180, 0.06); } body:has(#pd-drive-root) .t2d-fb-q { font-family: var(--font-heading); font-size: 12px; font-weight: 600; line-height: 1.25; color: #1a3a54; } body:has(#pd-drive-root) .t2d-fb-a { margin-top: 2px; max-height: 60px; overflow: hidden; font-size: 11px; line-height: 1.35; color: #475569; word-break: break-word; } /* El «por qué» de un pulgar abajo: tinta rosa del tramo 800 sobre su 50, no un recuadro rojo de alarma. Es información para afinar, no un error. */ body:has(#pd-drive-root) .t2d-fb-why { margin-top: 3px; padding: 3px 8px; border: none; border-radius: var(--radius-sm); background: var(--rose-50, #FFF0F0); font-size: 11px; line-height: 1.35; color: var(--rose-800, #9E3A4A); } body:has(#pd-drive-root) .t2d-fb-why .ideal { color: var(--mint-800, #1A5C3A); } body:has(#pd-drive-root) .t2d-fb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-family: var(--font-mono); font-size: 9px; line-height: 1.3; color: var(--text-light); } body:has(#pd-drive-root) .t2d-fb-meta i { font-size: 10px; } body:has(#pd-drive-root) .t2d-fb-open-wrap { margin-left: auto; } /* Chapa de valoración: la misma regla que las demás —fondo 50, texto 800— y CON su palabra. Un pulgar suelto de color no dice si es útil o incorrecta sin acercar el ratón a buscar el `title`. */ body:has(#pd-drive-root) .t2d-fb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; } body:has(#pd-drive-root) .t2d-fb-pill.up { background: var(--mint-50, #ECFDF5); color: var(--mint-800, #1A5C3A); } body:has(#pd-drive-root) .t2d-fb-pill.down { background: var(--rose-50, #FFF0F0); color: var(--rose-800, #9E3A4A); } /* ---- EL FILTRO SEGMENTADO, el mismo en los dos sitios ---- La pieza se declara en `t2d_base.css`; aquí sólo se le monta encima al segmentado de la lista de hilos, que se pinta desde `slide_panel_frappe.js` con `!important` y si no ganaría él. */ body:has(#pd-drive-root) .pd-thread-scope-seg { display: inline-flex !important; gap: 4px !important; border: none !important; overflow: visible !important; } body:has(#pd-drive-root) .pd-thread-scope-opt { padding: 4px 9px !important; border: 1px solid rgba(70, 130, 180, 0.18) !important; border-radius: var(--radius-sm) !important; background: rgba(70, 130, 180, 0.08) !important; color: #2c5171 !important; font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important; } body:has(#pd-drive-root) .pd-thread-scope-opt:hover:not(.active) { background: rgba(70, 130, 180, 0.16) !important; } /* Marcada en TINTE, como una ficha de faceta marcada. El azul macizo era de cuando esto era una barra segmentada; suelta, un relleno macizo la separa de sus vecinas en vez de emparentarlas. */ body:has(#pd-drive-root) .pd-thread-scope-opt.active { background: rgba(70, 130, 180, 0.14) !important; border-color: rgba(70, 130, 180, 0.45) !important; color: var(--accent-color) !important; font-weight: 600 !important; } body:has(#pd-drive-root) .pd-thread-scope-label { font-family: var(--font-mono) !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-light) !important; } /* ---- EL PAGINADOR, el mismo en los tres sitios ---- Había tres: «25 ▾ 1–1/1 « ‹ 1 › »» en Soporte, «Por página: 14 ‹ Página 1 ›» en el historial de conversaciones y «‹ 1–3 ›» en Valoraciones. Tres maneras de pasar página en tres pestañas de la misma aplicación. La lógica de cada uno se queda como está —uno numera, otro va por cursor— pero se ven y se pulsan igual. */ /* Va dentro del pie, así que no lleva relleno ni raya propios: sólo el reparto y la letra. Los suyos se sumaban a los del pie. */ body:has(#pd-drive-root) .pd-thread-pager { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px; padding: 0 !important; border: none !important; background: none !important; font-family: var(--font-body) !important; font-size: 11px !important; color: #577793 !important; } /* Y los botones de los TRES paginadores miden lo mismo: 22, como el desplegable de tamaño de página que llevan al lado. Iban a 20 en el historial y a 17 en Valoraciones. */ body:has(#pd-drive-root) .t2d-pager-btn, body:has(#pd-drive-root) .pd-thread-pager-prev, body:has(#pd-drive-root) .pd-thread-pager-next { height: 22px !important; min-width: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 6px !important; } body:has(#pd-drive-root) .pd-thread-pager-select, body:has(#pd-drive-root) .pd-thread-pager-prev, body:has(#pd-drive-root) .pd-thread-pager-next { min-width: 24px !important; padding: 2px 6px !important; border: 1px solid rgba(70, 130, 180, 0.35) !important; border-radius: var(--radius-sm) !important; background: #fff !important; color: #577793 !important; font-family: var(--font-body) !important; font-size: 11px !important; line-height: 1 !important; cursor: pointer !important; } body:has(#pd-drive-root) .pd-thread-pager-prev:hover:not(:disabled), body:has(#pd-drive-root) .pd-thread-pager-next:hover:not(:disabled) { background: rgba(70, 130, 180, 0.08) !important; } body:has(#pd-drive-root) .pd-thread-pager-prev:disabled, body:has(#pd-drive-root) .pd-thread-pager-next:disabled { opacity: 0.45 !important; cursor: default !important; } /* Los dos rótulos de paginador —«Página 1» y el rango— se fueron al bloque de versalitas, donde ya estaba su gemelo `.pd-pager-range`. Aquí solo queda lo suyo: que no partan de línea. */ body:has(#pd-drive-root) .pd-thread-pager-page, body:has(#pd-drive-root) .t2d-pager-range { white-space: nowrap; } @keyframes t2dspin { to { transform: rotate(360deg); } } /* Una raya, no dos. La nota de un módulo ya cierra el contenido con la suya; si el pie pone otra justo debajo quedan dos hilos separados por un renglón, que es de las cosas que más se ven y menos se saben nombrar. */ body:has(#pd-drive-root) .t2d-mod-note + .t2d-card-foot { border-top: none !important; } /* Y los botones de un pie miden todos lo mismo, estén en la pestaña que estén. */ body:has(#pd-drive-root) .t2d-card-foot[hidden] { display: none !important; } /* Y los botones de un pie miden todos lo mismo Y CABEN en él. `.pd-btn` trae `height: 32px` fijos, así que un pie con botón se iba a 42-53 px mientras el de al lado se quedaba en 34: cambiando de pestaña la raya inferior saltaba casi veinte píxeles. 24 es la altura que deja el pie en los 34 exactos con el relleno de 5. */ body:has(#pd-drive-root) .t2d-srch-foot .pd-btn, body:has(#pd-drive-root) .t2d-card-foot .pd-btn, body:has(#pd-drive-root) .t2d-search-footer .pd-btn, body:has(#pd-drive-root) #t2d-mod-left-search .t2d-search-footer .pd-btn, body:has(#pd-drive-root) #t2d-mod-main-connectors .t2d-conn-actions .pd-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px !important; min-height: 24px !important; padding: 0 12px !important; font-size: 12px; line-height: 1.1; border-radius: var(--radius-sm); } /* El disquete de la cabecera de Reglas se retira: «Guardar» está en el pie con su palabra. Va por hoja de estilos y no con `style="display:none"` porque `drive_overrides.css:464` declara `display: inline-flex !important` para todo `.pd-btn-icon`, y un `!important` de hoja gana a un estilo en línea normal — el botón seguía viéndose por más que el JS lo escondiera. */ body:has(#pd-drive-root) #t2dTagRulesPanel #t2dTrSave { display: none !important; } /* ---- EL RÓTULO EN VERSALITAS, declarado UNA sola vez ---- Tercer bloque de la misma familia que las cabeceras y los pies, y el que más ruido hacía: el MISMO papel visual —una etiqueta corta en mayúsculas que nombra un bloque— estaba escrito de TRECE maneras distintas por la interfaz. Seis familias tipográficas (ninguna, Raleway, mono, body, heading, brand), cinco tamaños (9, 10, 11, 12, 13 px), cuatro pesos (400, 500, 600, 700) y ocho colores (#4682b4, #666, #94a3b8, #8fa0b4, #577793, #2c5171, --text-light, --slate-600). Nada de eso significaba nada: eran trece manos. Uno solo: mono, 9 px, 400, 0.12em, versalitas, gris de rótulo. Dice «esto es una etiqueta, no contenido», y al ser el más callado deja que lo que nombra tenga el peso. NO entran aquí las CHAPAS (`.pd-doc-type-badge`, `.pd-data-badge`…), que son mayúsculas pero con fondo de color y papel de dato, ni la chapa de plan de la barra, que es marca. Un elemento nuevo con este papel se AÑADE al selector; no se le escribe una regla propia. */ body:has(#pd-drive-root) .pd-section-title, body:has(#pd-drive-root) .t2d-srch-key, body:has(#pd-drive-root) .t2d-srch-scope-label, body:has(#pd-drive-root) .t2d-srch-foot-state, body:has(#pd-drive-root) .t2d-kpi-label, body:has(#pd-drive-root) .t2d-conn-prov, body:has(#pd-drive-root) .t2d-conn-sec h4, body:has(#pd-drive-root) .t2d-gv-lbl, body:has(#pd-drive-root) .t2d-gv-pick-lbl, body:has(#pd-drive-root) .t2d-gv-legend-title, body:has(#pd-drive-root) .t2d-gv-facet label, body:has(#pd-drive-root) .t2d-sf-rhead, body:has(#pd-drive-root) .t2d-sf-fglabel, body:has(#pd-drive-root) .t2d-te-label, body:has(#pd-drive-root) .t2d-tr-lbl, body:has(#pd-drive-root) .t2d-seg-label, /* Los rótulos del formulario de Búsqueda —Texto, Biblioteca, Carpeta, Modo, Relevancia mínima—. Iban en Inter 12 px 600, y justo debajo, en la MISMA columna, «TIPO DE ARCHIVO» y «FILTROS» salen en versalitas de 9. Dos voces para rotular en una tarjeta de 380 px. Hacen el mismo papel que las etiquetas del panel de detalles (`.pd-metadata-group > label`, ya en esta lista), así que hablan igual. */ body:has(#pd-drive-root) .t2d-sf > span, /* El recuento que cierra la tarjeta derecha hace el MISMO papel que el de la izquierda —decir qué estás mirando— y salía en minúsculas a 11 px mientras el otro iba en versalitas a 9. Los dos se leen de una ojeada, uno al lado del otro. `Por página` no entra: eso rotula un mando, no un estado. */ body:has(#pd-drive-root) .pd-pager-range, /* Y sus tres primos del Asistente, que decían lo mismo con otra letra: el rótulo de la cabecera del historial, el «Página 1» de su paginador —gemelo exacto de `.pd-pager-range`, que ya estaba aquí— y el nombre del modelo en el pie del chat. `.t2d-pager-range` entra con ellos: es el mismo dato que `.pd-pager-range` con otro prefijo. */ body:has(#pd-drive-root) .pd-thread-history-title, body:has(#pd-drive-root) .pd-thread-pager-page, body:has(#pd-drive-root) .t2d-pager-range, body:has(#pd-drive-root) .pd-ai-model-name, body:has(#pd-drive-root) .t2d-tier-actions-title, body:has(#pd-drive-root) .t2d-menu-group-label, body:has(#pd-drive-root) .pd-document-table thead th, body:has(#pd-drive-root) .pd-metadata-group > label { font-family: var(--font-mono) !important; font-size: 9px !important; /* También el interlineado: iba a 9, 10,8 y 11,25 px según de qué rótulo se tratara, y son tres alturas distintas para la misma línea de texto. En un ritmo vertical de tres píxeles eso se nota al cambiar de pestaña. */ line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-light) !important; font-weight: 400 !important; } /* El título de Carpetas lleva el nombre de la biblioteca, y se le había dado ropa propia —Montserrat 13 px, caja normal, color de acento— por ser un nombre propio y no una etiqueta de sección. Se retira: cambiando de pestaña, ese título cantaba contra los otros cinco y lo que se leía no era «esto es un nombre», era «esta pestaña la hizo otro». Una excepción que hay que justificar cada vez no es una excepción, es una grieta. Se queda solo lo que necesita por ser un texto largo y variable: no romper la línea. */ body:has(#pd-drive-root) #t2dFoldersTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* También en la tarjeta DERECHA de un módulo, y no solo en la izquierda. La regla estaba acotada a `.pd-sidebar`, así que los mandos de la cabecera del chat —ajustes, conversación nueva, limpiar, enviar— se quedaban en los 34 px que pone `drive_overrides.css:459` para todo `.pd-btn-icon`. Ocho píxeles no parecen nada hasta que se ven las dos tarjetas a la vez: los de la izquierda pequeños y los de enfrente grandes, en la misma pantalla. El panel de detalles se queda en 34 a propósito: es un panel deslizante, no una tarjeta, y ahí el blanco de alrededor es otro. */ body:has(#pd-drive-root) .pd-sidebar .pd-btn-icon, /* `:not(.pd-ai-send-btn)`: enviar NO es un botón de cabecera. Va pegado al campo de escribir, es la acción principal de la tarjeta y necesita fondo y borde para existir sobre el área blanca. Sin excluirlo se llevaba también el `background: transparent` y el gris de rótulo de esta regla, y un icono gris sin fondo sobre blanco es un botón que no está. */ body:has(#pd-drive-root) .t2d-mod-main .pd-btn-icon:not(.pd-ai-send-btn), body:has(#pd-drive-root) .pd-sidebar .t2d-folders-open { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; border: none !important; border-radius: var(--radius-sm) !important; background: transparent !important; color: var(--slate-600, #5A6478) !important; transition: background 0.16s, color 0.16s; } body:has(#pd-drive-root) .pd-sidebar .pd-btn-icon:hover, body:has(#pd-drive-root) .pd-sidebar .t2d-folders-open:hover { background: rgba(44, 81, 113, 0.1) !important; color: var(--accent-color) !important; } body:has(#pd-drive-root) .pd-sidebar .pd-btn-icon i[class*="ph-"], body:has(#pd-drive-root) .pd-sidebar .t2d-folders-open i[class*="ph-"] { font-size: 14px !important; } /* Filas de carpeta: contador a la derecha en mono y chevron de entrada. Alto ajustado — el interlineado heredado (1.4) sobre 13 px sumaba casi 5 px de aire por fila que no dibujaba nada; con `line-height: 1.2` y 3 px de relleno la fila baja de 27.6 px a ~22 px, o sea que en el mismo alto de tarjeta entran cinco carpetas más. La zona pulsable sigue por encima del mínimo cómodo y el resaltado de la fila activa no se pega a la de al lado. */ body:has(#pd-drive-root) .pd-folder-item { display: flex; align-items: center; gap: 6px; /* El relleno lo pone «LA FILA DE UNA LISTA»: aquí estaba escrito otra vez, y con 3px, que era la quinta versión del mismo papel. */ /* `pd_drive.css` da a cada fila un `border: 1px solid transparent` que se vuelve azul sólido al pasar por encima y en la fila activa. Es exactamente el filete que esta casa no dibuja: fuera, y el estado se dice con relleno y sombra. De paso la fila adelgaza otros 2 px. */ border: none; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.2; color: var(--text-color); transition: background 0.14s, box-shadow 0.14s; } body:has(#pd-drive-root) .pd-folder-item:hover { background: rgba(70, 130, 180, 0.07); border-color: transparent; } /* El icono de carpeta, en el marrón tenue del prototipo. Allí es una pastilla `--marigold-50` con el glifo en `--marigold-800`; aquí el glifo va suelto sobre la tarjeta, así que solo se toma el color. Es la única nota cálida de una interfaz entera en azules, y hace lo que un icono debe hacer: distinguir carpeta de documento antes de leer nada. marigold-800 y no 600 porque el 600 (#C49A18) sobre blanco se queda en 2.4:1 y un icono no es decoración. Va en la lista y en el árbol del panel: si solo se pintara una de las dos, la misma carpeta cambiaría de color según dónde se mire. */ body:has(#pd-drive-root) .pd-folder-item > .ph-folder, body:has(#pd-drive-root) .t2d-tree-name > .ph-folder { color: var(--marigold-800, #7A5A10); } /* El chevron va DELANTE del icono, como en el árbol del panel deslizante (`.t2d-tree-caret`, que también abre la fila). Al final de la fila competía con los contadores y quedaba separado de aquello a lo que se refiere; delante forma una sola unidad con el icono de carpeta. El `order` negativo, y no reordenar el marcado, porque applyCloudCounts() añade los contadores como hijos directos de la fila más tarde: el orden del DOM no es de fiar aquí. */ body:has(#pd-drive-root) .pd-folder-chev { order: -1; flex-shrink: 0; /* Pega el chevron al icono: entre los dos, medio hueco; el nombre conserva el suyo entero. */ margin-right: -2px; font-size: 12px !important; color: rgba(44, 81, 113, 0.32); transition: color 0.14s, transform 0.14s; } body:has(#pd-drive-root) .pd-folder-item:hover .pd-folder-chev { color: var(--primary-color); transform: translateX(1px); } body:has(#pd-drive-root) .pd-folder-item.active .pd-folder-chev, body:has(#pd-drive-root) .pd-folder-item.selected .pd-folder-chev { color: var(--accent-color); } @media (prefers-reduced-motion: reduce) { body:has(#pd-drive-root) .pd-folder-chev { transition: color 0.14s; } body:has(#pd-drive-root) .pd-folder-item:hover .pd-folder-chev { transform: none; } } /* Sin contadores la fila no reserva hueco y el chevron se pega al nombre; el margen automático lo manda al borde derecho, que es donde se busca. */ body:has(#pd-drive-root) .pd-folder-item > .pd-folder-item-name { flex: 1 1 auto; } /* La carpeta seleccionada, como tarjeta destacada: relleno tenue + la sombra de `.list-item.active` de la guía de marca. La sombra es lo que la levanta del resto —sin ella el relleno se confunde con el del `:hover`, que es casi el mismo color y desaparece al mover el ratón—. Sombra y no filete: en las tarjetas de esta casa no se dibujan líneas. */ body:has(#pd-drive-root) .pd-folder-item.active, body:has(#pd-drive-root) .pd-folder-item.selected { background: rgba(70, 130, 180, 0.14); border-color: transparent; box-shadow: 0 2px 8px rgba(70, 130, 180, 0.18); } body:has(#pd-drive-root) .pd-folder-item.active .pd-folder-item-name, body:has(#pd-drive-root) .pd-folder-item.selected .pd-folder-item-name { font-weight: 700; color: var(--accent-color); } /* La fila de "estás aquí" no navega a ningún sitio, así que tampoco se comporta como si lo hiciera: ni cursor de mano ni cambio al pasar. */ body:has(#pd-drive-root) .pd-folder-current { cursor: default; margin-bottom: 3px; } body:has(#pd-drive-root) .pd-folder-current:hover { background: rgba(70, 130, 180, 0.14); } body:has(#pd-drive-root) .pd-folder-current > .ph-folder-open { color: var(--marigold-800, #7A5A10); } body:has(#pd-drive-root) .pd-folder-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El contador de ficheros era un globo azul flotante sobre una pastilla cuadrada; pasa a ser una cifra alineada a la derecha, que es donde se compara una columna de números. OJO: `.pd-fcount-num` es `position:absolute` (era el globo de la esquina) y su ancla era `.pd-fcount`, que es `position:relative`. Poner el contenedor en `static` sin tocar el número le quita el ancla y la cifra se va a volar a la esquina de la tarjeta, fuera de vista: los contadores desaparecen. Los dos tienen que volver al flujo. */ body:has(#pd-drive-root) .pd-fcount { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; width: auto; height: auto; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; position: static; flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: var(--idle, #94a3b8); min-width: 0; min-height: 0; } body:has(#pd-drive-root) .pd-fcount i { display: none; } body:has(#pd-drive-root) .pd-fcount-num { position: static; top: auto; right: auto; width: auto; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; text-align: right; font-family: var(--font-mono); font-size: 10px; /* En negrita: es la cifra que se compara de un vistazo al recorrer la columna, y en mono a 10 px el peso normal se diluye. */ font-weight: 700; line-height: 1; color: var(--slate-600, #5A6478); } /* Dos contadores en la misma fila (carpetas y ficheros) se separan. */ body:has(#pd-drive-root) .pd-fcount + .pd-fcount { margin-left: 6px; } /* Chips de faceta y de etiqueta. El prototipo los pone con el mismo radio que el resto de controles y el contador DENTRO del chip, no en un globo aparte: así el chip es una sola cosa clicable. */ body:has(#pd-drive-root) .t2d-srch-chip, body:has(#pd-drive-root) .t2d-srch-date-chip { /* SIN `!important`, y es la única declaración de este bloque que no lo lleva. `search_chips.js` calcula cuántos chips caben en la fila y esconde el resto con `style.display='none'` para poner en su lugar un «… +N». Un `!important` aquí gana a ese estilo en línea, así que los chips sobrantes seguían ocupando sitio: la fila desbordaba, se cortaba a media palabra por el borde derecho y el «… +N» quedaba fuera de la vista. Se veía en Filtros y en el módulo de Búsqueda por igual. Tampoco hacía falta: el valor que hay que ganar —el de pd_drive.css— es este mismo y el selector ya es más específico. */ display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px !important; border: 1px solid rgba(44, 81, 113, 0.14) !important; border-radius: var(--radius-sm) !important; background: #fff !important; font-family: var(--font-body); font-size: 11px; color: var(--text-color); cursor: pointer; transition: background 0.16s, border-color 0.16s, color 0.16s; } body:has(#pd-drive-root) .t2d-srch-chip:hover, body:has(#pd-drive-root) .t2d-srch-date-chip:hover { background: var(--sky-50, #eef6ff) !important; border-color: rgba(70, 130, 180, 0.35) !important; } body:has(#pd-drive-root) .t2d-srch-chip.active, body:has(#pd-drive-root) .t2d-srch-chip[aria-pressed="true"], body:has(#pd-drive-root) .t2d-srch-date-chip.active { background: rgba(70, 130, 180, 0.14) !important; border-color: rgba(70, 130, 180, 0.45) !important; color: var(--accent-color) !important; font-weight: 600; } body:has(#pd-drive-root) .t2d-srch-chip-n { margin-left: 2px; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 9px; color: var(--idle, #94a3b8) !important; min-width: 0 !important; } body:has(#pd-drive-root) .t2d-srch-chip.active .t2d-srch-chip-n { color: var(--accent-color) !important; } /* Etiqueta del grupo de facetas: mismo rótulo mono que las secciones. Ojo con el tracking: la columna de la clave mide 64 px fijos y con 0.14em una clave larga como «equipamiento» pedía 80 y se comía los chips de al lado. Menos tracking y, por si aparece una clave aún más larga, que parta de línea en vez de desbordar. */ body:has(#pd-drive-root) .t2d-srch-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; line-height: 1.25; text-transform: uppercase; color: var(--text-light); font-weight: 400; overflow-wrap: anywhere; } body:has(#pd-drive-root) .t2d-srch-ftcnt, body:has(#pd-drive-root) .t2d-srch-ftextcnt { font-family: var(--font-mono); font-size: 10px; color: var(--idle, #94a3b8); background: none !important; border: none !important; padding: 0 !important; } body:has(#pd-drive-root) .t2d-srch-ftsum, body:has(#pd-drive-root) .t2d-srch-ftext { border-radius: var(--radius-sm); padding: 5px 8px; } body:has(#pd-drive-root) .t2d-srch-ftsum:hover, body:has(#pd-drive-root) .t2d-srch-ftext:hover { background: rgba(70, 130, 180, 0.07); } body:has(#pd-drive-root) .t2d-srch-scope-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); } /* ---- Tarjetas de biblioteca ---- Mismo traje que el resto de listas de una columna de la tarjeta izquierda (carpetas, repositorios de Conectores, secciones de Admin y Soporte): sin línea de borde, 8 px de radio, fondo transparente, y el estado marcado con tinte + sombra suave + nombre en negrita. Era la única lista con borde dibujado, que además es lo que la casa no hace en tarjetas: se distingue con fondo, sombra o brillo, nunca con una raya. */ body:has(#pd-drive-root) .t2d-lib-card { border: none !important; border-radius: var(--radius-sm) !important; background: transparent; box-shadow: none; transition: background 0.14s, box-shadow 0.14s; } body:has(#pd-drive-root) .t2d-lib-card:hover { background: rgba(70, 130, 180, 0.07); box-shadow: none; } body:has(#pd-drive-root) .t2d-lib-card.active { background: rgba(70, 130, 180, 0.14); box-shadow: 0 2px 8px rgba(70, 130, 180, 0.18); } body:has(#pd-drive-root) .t2d-lib-card-name { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: #1a3a54; } body:has(#pd-drive-root) .t2d-lib-card.active .t2d-lib-card-name { font-weight: 700; color: var(--accent-color); } /* Los accesos van EN LA FILA, no flotando encima con posición absoluta y `right` calculado a mano — que era lo de antes y obligaba a reservar 62 px de relleno a la derecha aunque no hubiera botones. Así caben tres o ninguno sin tocar nada. */ body:has(#pd-drive-root) .t2d-lib-card { padding: 7px 8px 7px 10px; gap: 8px; } body:has(#pd-drive-root) .t2d-lib-card-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; } /* Ni se esconden hasta pasar el ratón por encima, que era lo de antes: sin ratón —un móvil, un teclado— no aparecían nunca. Quedan atenuados y se encienden al acercarse. */ body:has(#pd-drive-root) .t2d-lib-card-act { position: static !important; transform: none !important; opacity: 0.5; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--accent-color); cursor: pointer; text-decoration: none; transition: opacity 0.14s, background 0.14s, color 0.14s; } body:has(#pd-drive-root) .t2d-lib-card:hover .t2d-lib-card-act, body:has(#pd-drive-root) .t2d-lib-card.active .t2d-lib-card-act, body:has(#pd-drive-root) .t2d-lib-card-act:focus-visible { opacity: 1; } body:has(#pd-drive-root) .t2d-lib-card-act:hover { background: var(--primary-color); color: #fff; opacity: 1; } body:has(#pd-drive-root) .t2d-lib-card-act i { font-size: 14px; } body:has(#pd-drive-root) .t2d-lib-card-meta { display: flex; align-items: center; gap: 5px; } body:has(#pd-drive-root) .t2d-lib-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--idle, #94a3b8); } body:has(#pd-drive-root) .t2d-lib-badge { border-radius: var(--radius-sm) !important; padding: 2px 6px !important; font-size: 9px !important; font-weight: 600; letter-spacing: 0.03em; } body:has(#pd-drive-root) .t2d-lib-badge-ok { background: var(--mint-50, #ECFDF5) !important; color: var(--mint-800, #1A5C3A) !important; } body:has(#pd-drive-root) .t2d-lib-badge-off { background: var(--slate-50, #F0F2F5) !important; color: var(--slate-800, #3A4050) !important; } /* ---- Punto de estado del origen ---- Idea del prototipo (`drive.js:392`), adaptada: allí va en cada fila del árbol porque su maqueta mezcla conectores; aquí una biblioteca tiene un solo conector, así que va junto al nombre de la biblioteca —en la cabecera de Carpetas y en cada ficha—, que es donde el dato distingue. El ámbar late para que un origen caído se note sin tener que mirarlo. */ body:has(#pd-drive-root) .t2d-src-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 5px; vertical-align: middle; } body:has(#pd-drive-root) .t2d-src-up { background: var(--ok, #10b981); } body:has(#pd-drive-root) .t2d-src-down { background: var(--warn, #fbbf24); animation: t2d-src-pulse 1.6s ease-in-out infinite; } body:has(#pd-drive-root) .t2d-src-local { background: var(--idle, #94a3b8); } /* Hueco = sin comprobar. Se distingue de un lleno de un vistazo y no afirma nada que no sepamos. */ body:has(#pd-drive-root) .t2d-src-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.75); } @keyframes t2d-src-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { body:has(#pd-drive-root) .t2d-src-down { animation: none; } } /* En la cabecera de Carpetas el punto va pegado al NOMBRE, no arrimado a los botones del otro extremo: el título es flexible y se comía todo el hueco. El `margin-right:auto` lo absorbe el punto, así que título y punto quedan juntos a la izquierda y los botones siguen a la derecha. */ body:has(#pd-drive-root) .pd-folder-list-header #t2dFoldersTitle { flex: 0 1 auto; } body:has(#pd-drive-root) .pd-folder-list-header .t2d-src-dot { margin: 0 auto 0 7px; } /* ---- Fichas de estadística ---- El prototipo las resuelve como `.stat`: papel blanco, cifra en monoespaciada grande y rótulo en versalitas. La cifra es el dato, así que es lo que pesa. */ body:has(#pd-drive-root) .t2d-kpi-card { background: #fff !important; border: 1px solid rgba(44, 81, 113, 0.08) !important; border-radius: var(--radius) !important; box-shadow: none !important; } body:has(#pd-drive-root) .t2d-kpi-value { font-family: var(--font-mono); font-size: 18px; line-height: 1; letter-spacing: -0.02em; color: #1a3a54; } body:has(#pd-drive-root) .t2d-kpi-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); font-weight: 500; } body:has(#pd-drive-root) .t2d-kpi-bar { height: 5px; border-radius: var(--radius-sm); background: rgba(44, 81, 113, 0.1); overflow: hidden; } body:has(#pd-drive-root) .t2d-kpi-bar-fill { border-radius: var(--radius-sm); background: var(--primary-color); } /* ------------------------------------------------------------ 5 · Rejilla de documentos La tarjeta del prototipo es una hoja de papel reconstruida con una franja de color por tipo: el tipo se lee de un vistazo sin tener que descifrar un glifo. Aquí se consigue vistiendo `.pd-doc-preview`, sin tocar el renderizador. ------------------------------------------------------------ */ body:has(#pd-drive-root) .pd-content-area { padding: 12px 14px 14px; } body:has(#pd-drive-root) .pd-doc-card { border: 1px solid rgba(44, 81, 113, 0.09); border-radius: var(--radius); padding: 10px 12px 9px; background: #fff; box-shadow: none; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; } body:has(#pd-drive-root) .pd-doc-card:hover { transform: translateY(-2px); border-color: rgba(70, 130, 180, 0.32); box-shadow: 0 10px 26px -18px rgba(13, 26, 38, 0.5); } body:has(#pd-drive-root) .pd-doc-card.selected, body:has(#pd-drive-root) .pd-doc-card.active { border-color: rgba(70, 130, 180, 0.5); background: rgba(70, 130, 180, 0.05); } /* El tipo de documento se lee por COLOR, no por filete. Aquí hubo una franja de 4 px arriba de la miniatura. Es exactamente la línea decorativa que la norma de la casa prohíbe en tarjetas, y da igual que viviera dentro de la miniatura: se ve como un filete pegado al borde superior. Fuera. El tipo se sigue leyendo igual de rápido con lo que sí está permitido —tinte de fondo, sombra y color de icono— y sin una sola línea. */ body:has(#pd-drive-root) .pd-doc-preview { position: relative; height: 104px; border-radius: var(--radius-sm); border: none; background: var(--doc-tint, rgba(44, 81, 113, 0.05)); /* Sombra, no `inset 0 0 0 1px`: un anillo interior de 1 px es una línea con otro nombre y volvería a saltarse la misma norma. */ box-shadow: 0 1px 3px rgba(13, 26, 38, 0.08); overflow: hidden; } body:has(#pd-drive-root) .pd-doc-preview > i { color: var(--doc-accent, var(--primary-color)); opacity: 0.9; } /* Una rampa pastel por familia: el 600 para el glifo y el 50 para el tinte del papel. Son los pares que manda la paleta de la casa. */ body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="pdf"]) { --doc-accent: var(--rose-600, #D4505E); --doc-tint: var(--rose-50, #FFF0F0); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="doc"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="docx"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="odt"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="rtf"]) { --doc-accent: var(--sky-600, #2E82C8); --doc-tint: var(--sky-50, #EEF6FF); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="xls"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="xlsx"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="csv"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="ods"]) { --doc-accent: var(--mint-600, #28946A); --doc-tint: var(--mint-50, #ECFDF5); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="ppt"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="pptx"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="odp"]) { --doc-accent: var(--peach-600, #D47838); --doc-tint: var(--peach-50, #FFF4EC); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="eml"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="msg"]) { --doc-accent: var(--lavender-600, #7456C8); --doc-tint: var(--lavender-50, #F4F0FF); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="png"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="jpg"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="jpeg"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="svg"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="tif"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="tiff"]) { --doc-accent: var(--slate-600, #5A6478); --doc-tint: var(--slate-50, #F0F2F5); } body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="md"]), body:has(#pd-drive-root) .pd-doc-card:has([data-filetype="txt"]) { --doc-accent: var(--marigold-600, #C49A18); --doc-tint: var(--marigold-50, #FFF8E6); } body:has(#pd-drive-root) .pd-doc-info { padding: 8px 0 0; } body:has(#pd-drive-root) .pd-doc-name { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: #1a3a54; line-height: 1.32; } body:has(#pd-drive-root) .pd-doc-meta { font-family: var(--font-mono); font-size: 10px; color: var(--idle, #94a3b8); margin-top: 3px; } body:has(#pd-drive-root) .pd-doc-badges { margin-top: 6px; gap: 4px; } body:has(#pd-drive-root) .pd-doc-type-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(44, 81, 113, 0.08); color: var(--text-light); } body:has(#pd-drive-root) .pd-idx-badge { font-size: 9px; padding: 2px 6px; border-radius: var(--radius-sm); } body:has(#pd-drive-root) .pd-idx-indexed { background: var(--mint-50, #ECFDF5); color: var(--mint-800, #1A5C3A); } body:has(#pd-drive-root) .pd-doc-facets { margin-top: 6px; } body:has(#pd-drive-root) .pd-doc-facet-chip { font-size: 9px; padding: 2px 7px; border-radius: var(--radius-sm); border: none; background: rgba(44, 81, 113, 0.06); color: var(--text-light); } body:has(#pd-drive-root) .pd-doc-facet-chip b { color: var(--accent-color); font-weight: 600; } body:has(#pd-drive-root) .pd-doc-facet-chip:hover { background: rgba(70, 130, 180, 0.14); } /* La casilla de selección y el menú de tres puntos: mismo tamaño, misma altura óptica, uno en cada esquina de la miniatura. */ body:has(#pd-drive-root) .pd-doc-more-btn { width: 24px; height: 24px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(44, 81, 113, 0.12); color: var(--text-light); box-shadow: 0 1px 3px rgba(13, 26, 38, 0.1); } body:has(#pd-drive-root) .pd-doc-more-btn:hover { background: #fff; color: var(--accent-color); border-color: rgba(70, 130, 180, 0.35); } /* ------------------------------------------------------------ 6 · Lista y tabla ------------------------------------------------------------ */ body:has(#pd-drive-root) .pd-document-table thead th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; color: var(--text-light); padding: 8px 10px; background: #fbfcfd; border-bottom: 1px solid rgba(44, 81, 113, 0.14); } body:has(#pd-drive-root) .pd-document-table td { padding: 7px 10px; border-bottom: 1px solid rgba(44, 81, 113, 0.06); vertical-align: middle; } /* La tabla es `table-layout: fixed`, así que los anchos los fija el thead. «Modificado» se quedaba en 120 px y cortaba la hora. */ body:has(#pd-drive-root) .pd-document-table thead th:nth-child(2) { width: 140px; } body:has(#pd-drive-root) .pd-document-table thead th:nth-child(3) { width: 92px; } body:has(#pd-drive-root) .pd-document-table thead th:nth-child(4) { width: 120px; } body:has(#pd-drive-root) .pd-document-table thead th:nth-child(5) { width: 152px; } body:has(#pd-drive-root) .pd-document-table tbody tr:hover td { background: rgba(70, 130, 180, 0.05); } body:has(#pd-drive-root) .pd-doc-row.selected td, body:has(#pd-drive-root) .pd-doc-row.active td { background: rgba(70, 130, 180, 0.12); } /* Primera celda: casilla, tres puntos, icono de tipo y nombre, en ese orden. Los tres puntos van DELANTE porque al final de la fila su menú se abría fuera de la pantalla por la derecha. */ body:has(#pd-drive-root) .pd-doc-name-cell { display: flex; align-items: center; gap: 7px; min-width: 0; } body:has(#pd-drive-root) .pd-doc-name-cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } body:has(#pd-drive-root) .pd-doc-name-cell > i { flex-shrink: 0; font-size: 14px; color: var(--doc-accent, var(--primary-color)); } body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="pdf"]) { --doc-accent: var(--rose-600, #D4505E); } body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="doc"]), body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="docx"]) { --doc-accent: var(--sky-600, #2E82C8); } body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="xls"]), body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="xlsx"]), body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="csv"]) { --doc-accent: var(--mint-600, #28946A); } body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="ppt"]), body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="pptx"]) { --doc-accent: var(--peach-600, #D47838); } body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="eml"]), body:has(#pd-drive-root) .pd-doc-row:has([data-filetype="msg"]) { --doc-accent: var(--lavender-600, #7456C8); } /* OJO — `opacity` y `pointer-events` viajan JUNTOS en este código. La regla base de `pd_drive.css:3643` nace oculta Y NO CLICABLE (`opacity:0; transform:scale(.9); pointer-events:none`) y solo la revive `.pd-doc-card:hover`, que en la rejilla existe y en la fila de lista no. Al mover el botón a la celda del nombre puse la opacidad a 1 pero no lo demás: el botón SE VEÍA y no respondía, y el clic atravesaba al ``, que abría la cortina del documento. Con `.click()` desde consola funcionaba —va directo al elemento— y con el ratón no; por eso hay que probar con un clic real. */ body:has(#pd-drive-root) .pd-doc-name-cell .pd-doc-more-btn { position: static; flex-shrink: 0; width: 22px !important; height: 22px !important; min-width: 22px !important; border: none !important; border-radius: var(--radius-sm) !important; background: transparent !important; box-shadow: none !important; /* Atenuado pero legible: con `opacity` sobre gris claro el trazo se quedaba en 2.4 de contraste. Color sólido apagado, sin opacidad. */ color: var(--slate-600, #5A6478); opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: background 0.14s, color 0.14s; } body:has(#pd-drive-root) .pd-doc-name-cell .pd-doc-more-btn:hover { background: rgba(44, 81, 113, 0.12) !important; color: var(--accent-color); } /* La variante de fila mostraba a la vez la casilla nativa Y la caja dibujada: dos casillas, una de ellas siempre vacía. Se queda la dibujada, que es la misma que en la rejilla. */ body:has(#pd-drive-root) .t2d-card-pick--row { position: relative; /* `.t2d-card-pick` es `position:absolute; top:8px; right:8px`. Al pasar a `relative` esos desplazamientos NO se anulan solos: siguen corriendo la casilla 8 px a la izquierda, que en los resultados de búsqueda avanzada la metía debajo del icono del fichero y solo se veía media casilla. Hay que devolverlos a `auto` explícitamente. */ top: auto; right: auto; bottom: auto; left: auto; align-self: center; opacity: 1; flex-shrink: 0; width: 16px; height: 16px; margin-right: 0; display: inline-flex; align-items: center; justify-content: center; } /* En los resultados de búsqueda avanzada la fila es un flex en COLUMNA —título arriba, ruta debajo— y la casilla se le antepone como primer hijo, así que caía sobre el icono del fichero. No se puede arreglar con `align-items` (en columna eso centra en horizontal y estrecha la fila): la casilla se saca del flujo y la fila reserva su hueco. */ body:has(#pd-drive-root) .t2d-sf-rrow-wrap { position: relative; padding-left: 24px; } body:has(#pd-drive-root) .t2d-sf-rrow-wrap > .t2d-card-pick--row { position: absolute; left: 0; top: 11px; right: auto; bottom: auto; align-self: auto; } body:has(#pd-drive-root) .t2d-card-pick--row .t2d-card-pick-input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; margin: 0; } body:has(#pd-drive-root) .t2d-card-pick--row .t2d-card-pick-box { width: 16px; height: 16px; border-width: 2px; border-radius: var(--radius-sm); box-shadow: none; } /* El tick, centrado por geometría y no por píxeles a ojo. ------------------------------------------------------------------ El original lo colocaba con `left:12px; top:9px`, y como la caja del recuadro es `position:static` esos dos números no se medían desde el recuadro sino desde la etiqueta de 22×22 que lo envuelve: el tick acababa 3 px abajo y 3 px a la derecha del centro, con la punta larga comiéndose el borde. Y al reutilizar la casilla a 16 px en la fila hacía falta OTRO par de números, porque los primeros no eran proporcionales a nada. Aquí el recuadro pasa a ser el bloque contenedor y el tick se ancla a su centro, así que un único juego de reglas sirve para los dos tamaños —y para cualquier otro que venga después—. El descuento de 0.4 px es real y no un ajuste al gusto: el palo del tick es un rectángulo del que solo se pintan dos bordes, o sea que su tinta pesa hacia abajo-derecha del centro geométrico; al girarlo 45° ese sesgo se convierte en desplazamiento vertical puro. Medido sobre la captura: con el descuento puesto, el centro de masa de la tinta cae a menos de 0.05 px del centro del recuadro en los dos ejes. */ body:has(#pd-drive-root) .t2d-card-pick-box { position: relative; } body:has(#pd-drive-root) .t2d-card-pick-input:checked + .t2d-card-pick-box::after { left: 50%; top: 50%; right: auto; bottom: auto; width: 4px; height: 8px; border-width: 0 2px 2px 0; transform: translate(-50%, calc(-50% - 0.4px)) rotate(45deg); } /* La celda de tamaño llevaba tamaño + tipo + estado de índice en una línea y se cortaba con puntos suspensivos. Que respire. */ body:has(#pd-drive-root) .pd-document-table td:nth-child(4) { white-space: normal; } body:has(#pd-drive-root) .pd-document-table td:nth-child(4) .pd-doc-size { font-family: var(--font-mono); font-size: 11px; color: var(--text-light); margin-bottom: 3px; } /* ------------------------------------------------------------ 7 · Estados vacío y de carga ------------------------------------------------------------ */ body:has(#pd-drive-root) .pd-empty-state, body:has(#pd-drive-root) .pd-loading, body:has(#pd-drive-root) .pd-no-selection { color: var(--text-light); } body:has(#pd-drive-root) .pd-empty-state i, body:has(#pd-drive-root) .pd-no-selection i { color: #c3ccd4; } body:has(#pd-drive-root) .pd-empty-state h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-light); } /* ------------------------------------------------------------ 8 · Cortinas Solo color y ritmo. Ni la posición, ni el z-index, ni la animación de `right` se tocan: drive_init.js depende de las tres. ------------------------------------------------------------ */ /* Las cabeceras de panel se declaran ENTERAS más abajo, en un solo bloque —busca «LA CABECERA DE UN PANEL»—. Este trozo de aquí solo ponía la tipografía y era el principio de la dispersión: media regla en un sitio y media en otro es como acaban habiendo seis. */ body:has(#pd-drive-root) .pd-details-panel .pd-btn-icon, body:has(#pd-drive-root) .pd-ai-chat-panel .pd-btn-icon, body:has(#pd-drive-root) .t2d-account-panel .pd-btn-icon, body:has(#pd-drive-root) .t2d-search-panel .pd-btn-icon { border-radius: var(--radius-sm); } /* ---- Cortina de detalles ---- El prototipo resuelve los metadatos como una `.kv`: clave en monoespaciada versalita, valor en cuerpo. Es la lectura correcta cuando lo que se compara es el valor, no la etiqueta. */ body:has(#pd-drive-root) .t2d-cf-title, body:has(#pd-drive-root) .pd-doc-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #1a3a54; line-height: 1.3; word-break: break-word; } body:has(#pd-drive-root) .t2d-cf-meta dt, body:has(#pd-drive-root) .pd-metadata-group > label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); font-weight: 400; } body:has(#pd-drive-root) .t2d-cf-meta dd, body:has(#pd-drive-root) .pd-metadata-value { font-size: 13px; color: var(--text-color); word-break: break-word; } body:has(#pd-drive-root) .t2d-cf-fullpath { border-radius: var(--radius-sm); background: #fbfcfd; border: 1px solid rgba(44, 81, 113, 0.14); } body:has(#pd-drive-root) .t2d-cf-path-btn { border: none !important; border-radius: var(--radius-sm) !important; background: transparent !important; color: var(--idle, #94a3b8) !important; } body:has(#pd-drive-root) .t2d-cf-path-btn:hover { background: rgba(44, 81, 113, 0.1) !important; color: var(--accent-color) !important; } /* Chips de faceta de la cortina: mismo radio que en la tarjeta. */ body:has(#pd-drive-root) .t2d-cf-chip { border-radius: var(--radius-sm) !important; padding: 3px 8px !important; font-size: 10px !important; border: none !important; background: rgba(44, 81, 113, 0.06) !important; color: var(--text-light) !important; } body:has(#pd-drive-root) .t2d-cf-chip b { color: var(--accent-color) !important; font-weight: 600; } body:has(#pd-drive-root) .t2d-cf-chip:hover { background: rgba(70, 130, 180, 0.14) !important; } body:has(#pd-drive-root) .t2d-cf-editbtn { border-radius: var(--radius-sm) !important; } /* Últimas cápsulas de 999 px que quedaban en controles: los conmutadores del panel de búsqueda avanzada. Un botón es un botón y lleva el radio de los botones. */ body:has(#pd-drive-root) .t2d-sf-pill { border-radius: var(--radius-sm) !important; } /* ---- Barra de selección múltiple ---- Vive en `body`, fuera de #pd-drive-root, pero sigue siendo descendiente de `body:has(...)`, así que la alcanza igual. */ body:has(#pd-drive-root) .t2d-multi-bar { border-radius: var(--radius) !important; border: 1px solid rgba(70, 130, 180, 0.22) !important; box-shadow: 0 12px 32px -18px rgba(13, 26, 38, 0.5); } body:has(#pd-drive-root) .t2d-multi-btn { border-radius: var(--radius-sm) !important; font-size: 12px; } body:has(#pd-drive-root) .t2d-multi-count { font-size: 11px; font-weight: 700; color: var(--accent-color); } /* ---- Panel de perfil ---- Las pastillas de plan y de coste eran cápsulas de 999 px: mismo tratamiento que la pastilla de la navbar. */ body:has(#pd-drive-root) .tier-badge, body:has(#pd-drive-root) .t2d-action-cost { border-radius: var(--radius-sm) !important; font-family: var(--font-mono); font-size: 10px !important; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px !important; } body:has(#pd-drive-root) .t2d-action-cost { font-weight: 400; background: rgba(44, 81, 113, 0.08) !important; color: var(--text-light) !important; } body:has(#pd-drive-root) .t2d-tier-actions-title, body:has(#pd-drive-root) .t2d-tier-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); } /* Pestaña inactiva del panel de soporte: #8aa4bd sobre blanco son 2.58. Previo a esta piel, pero cae dentro del alcance y es una línea. */ body:has(#pd-drive-root) #support-tab-mine, body:has(#pd-drive-root) .support-tab { color: var(--slate-600, #5A6478); } /* Menú contextual: sombra larga y baja, del prototipo. */ body:has(#pd-drive-root) .pd-context-menu { border: 1px solid rgba(44, 81, 113, 0.12); border-radius: var(--radius); box-shadow: 0 18px 44px -16px rgba(13, 26, 38, 0.45); padding: 5px; } body:has(#pd-drive-root) .pd-context-item { border-radius: var(--radius-sm); padding: 7px 9px; font-size: 12px; gap: 9px; } body:has(#pd-drive-root) .pd-context-item:hover { background: rgba(70, 130, 180, 0.09); } body:has(#pd-drive-root) .pd-context-item.danger { color: #dc2626; } body:has(#pd-drive-root) .pd-context-item.danger:hover { background: rgba(239, 68, 68, 0.09); } body:has(#pd-drive-root) .pd-context-divider { height: 1px; background: rgba(44, 81, 113, 0.09); margin: 4px 6px; } /* ------------------------------------------------------------ 8.bis · Paginación del listado ------------------------------------------------------------ Del prototipo se toma la idea y la disposición; no las medidas. Allí la barra ofrece 5/10/25 —tamaños de maqueta— y aquí una carpeta con mil documentos es lo normal, así que empieza en 25 y llega a 200. El filete superior sí se queda: no es adorno sobre una tarjeta, es la separación entre dos zonas del panel (lo que se lee y lo que lo gobierna), igual que el borde inferior de la barra de herramientas. */ /* La ALTURA, el relleno, la raya y la letra ya vienen del bloque común de arriba: este pie y el de la tarjeta izquierda se miran de frente, y medían 37 contra 32 con la letra a 14 contra 11 — la raya inferior saltaba de sitio al pasar de una tarjeta a la otra. Aquí sólo queda lo que de verdad es propio: el reparto, porque tiene mandos a los dos lados (el tamaño de página a la izquierda, el recuento a la derecha) en vez de un solo rótulo. */ body:has(#pd-drive-root) .pd-pager { justify-content: space-between !important; gap: 10px; } /* ---- La caja de cristal del Explorador, sin relleno ---- Las cuatro pestañas del Explorador viven dentro de `.pibico-content`, que metía su contenido `4px 6px 6px` por dentro; los cinco módulos cuelgan directamente de la tarjeta y llegan al borde. Resultado: el mismo pie cerraba en 1127 en el Explorador y en 1133 en Conectores, y las listas empezaban siete píxeles más adentro en una mitad de la aplicación que en la otra. No se veía nunca —las dos pantallas no salen a la vez— pero era una diferencia real entre dos sitios que deberían ser el mismo. El relleno no hacía falta: cada pieza de dentro trae el suyo (la cabecera de tarjeta, el pie, las filas), así que quitarlo no pega nada al borde, sólo deja de sumar dos veces. */ body:has(#pd-drive-root) .pd-sidebar .pibico-content { padding: 0 !important; } body:has(#pd-drive-root) .pd-pager[hidden] { display: none; } body:has(#pd-drive-root) .pd-pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--slate-600, #5A6478); white-space: nowrap; } /* 22 y no 24: con el relleno de 5 px del pie común, 22 deja el pie en los 32 px exactos de la tarjeta izquierda. Con 24 se iba a 34 y volvía a no cuadrar por dos píxeles, que es justo lo que se ve y no se sabe nombrar. */ body:has(#pd-drive-root) .pd-pager-size select, body:has(#pd-drive-root) .pd-pager-page { height: 22px; border: 1px solid rgba(44, 81, 113, 0.18); border-radius: var(--radius-sm); background: #fff; color: var(--text-color); font-family: var(--font-mono); font-size: 11px; padding: 0 4px; } body:has(#pd-drive-root) .pd-pager-page { width: 46px; text-align: center; /* Sin las flechas del `number`: a 46 px se comen media cifra y el mismo salto ya lo dan los botones de al lado. */ -moz-appearance: textfield; appearance: textfield; } body:has(#pd-drive-root) .pd-pager-page::-webkit-outer-spin-button, body:has(#pd-drive-root) .pd-pager-page::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body:has(#pd-drive-root) .pd-pager-range { font-family: var(--font-mono); font-size: 11px; color: var(--slate-600, #5A6478); white-space: nowrap; } body:has(#pd-drive-root) .pd-pager-nav { display: inline-flex; align-items: center; gap: 4px; } /* `display` explícito gana a `hidden`, así que hay que devolvérselo. */ body:has(#pd-drive-root) .pd-pager-nav[hidden] { display: none; } body:has(#pd-drive-root) .pd-pager-of { font-family: var(--font-mono); font-size: 11px; color: var(--slate-600, #5A6478); margin-right: 2px; } body:has(#pd-drive-root) .pd-pager-btn { width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: var(--radius-sm); background: rgba(44, 81, 113, 0.08); color: var(--accent-color); cursor: pointer; font-size: 13px; line-height: 1; transition: background 0.14s, color 0.14s; } body:has(#pd-drive-root) .pd-pager-btn:hover:not(:disabled) { background: var(--primary-color); color: #fff; } /* Deshabilitado se dice con el color, no solo con `opacity`: bajar la opacidad de un glifo ya tenue lo deja por debajo del contraste mínimo y además parece un botón que no ha terminado de cargar. */ body:has(#pd-drive-root) .pd-pager-btn:disabled { background: transparent; /* A 0.28 el glifo se quedaba en 1.63:1 y en la primera página parecía que faltaban dos botones. Un control desactivado está exento del mínimo de contraste, pero tiene que VERSE: si no, no se lee como "no disponible" sino como "no existe". */ color: rgba(44, 81, 113, 0.45); cursor: default; } @media (max-width: 768px) { /* En móvil sobra el rango textual: los botones y el número de página bastan, y así la barra no envuelve en dos líneas. */ body:has(#pd-drive-root) .pd-pager-range { display: none; } body:has(#pd-drive-root) .pd-pager { padding: 6px; } } /* ------------------------------------------------------------ 10 · Módulos (fila superior de pestañas) ------------------------------------------------------------ Fila secundaria del sistema de la casa: más pequeña y más tenue que la principal, para que se lea como el nivel de ARRIBA y no como cuatro hermanas más. La máscara curva de `pibico-tabs.js` la dibuja sola — las filas superiores salen como dedos sueltos y la de abajo fundida con la tarjeta— así que aquí solo van tamaños y color. */ body:has(#pd-drive-root) .t2d-mod-row { position: relative; z-index: 3; display: flex; justify-content: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body:has(#pd-drive-root) .t2d-mod-row::-webkit-scrollbar { display: none; } /* ── Las dos filas son DOS NIVELES, y tienen que leerse como tales ── Arriba, los módulos: cambian las dos tarjetas enteras. Debajo, las pestañas del explorador: cambian solo el contenido de la izquierda, dentro del módulo Explorador. Hasta ahora se distinguían por 1 px de tamaño de letra —9 contra 8— y nada más: mismo icono, mismo tono, misma caja. Dos filas idénticas apiladas se leen como un bloque de dos renglones, no como padre e hijo. La diferencia es ahora de REGISTRO, no de grado: los módulos van en VERSALITAS espaciadas, que es el mismo lenguaje con el que esta aplicación rotula las secciones (BIBLIOTECAS, REPOSITORIOS, ESTADÍSTICAS); las pestañas de dentro van en caja normal, como el contenido que gobiernan. Y la fila de dentro va SANGRADA respecto a la de fuera, que es el modo más viejo y más claro de decir «esto va dentro de aquello». */ body:has(#pd-drive-root) .t2d-mod-row .pibico-tab { /* Seis abajo, no dos: el rótulo no puede morir en el canto de la fila, que es justo donde empieza la tarjeta. Se ve mejor que en ningún sitio en Soporte, que sólo tiene esta fila: los rótulos NO activos quedaban apoyados sobre el cuerpo, como si fueran parte de él. El aire pertenece a la pestaña —debajo de su texto— y no al cuerpo de la tarjeta, que es donde lo había puesto primero. */ padding: 3px 10px 6px; min-width: 52px; /* El blanco de `collab.css` es para pestañas sobre el degradado; estas van sobre el cristal claro de la tarjeta y ahí serían blanco sobre blanco. */ color: rgba(44, 81, 113, 0.62); } /* Se probó con VERSALITAS espaciadas y no cabe: siete rótulos en versalitas piden unos 480 px y la tarjeta tiene 430, así que las pestañas se encogían y el texto se salía de su dedo. La jerarquía se dice entonces con lo que no cuesta ancho: la fila de fuera, pequeña y clara —es contexto, como una miga de pan—; la de dentro, mayor y más oscura, que es la que se pulsa a todas horas. Antes estaba justo al revés: el rótulo de los módulos medía 9 px y el del explorador 8. */ body:has(#pd-drive-root) .t2d-mod-row .pibico-tab-label { font-size: 10px; letter-spacing: 0.01em; } body:has(#pd-drive-root) .t2d-mod-row .pibico-tab.active .pibico-tab-label { font-weight: 700; } /* La fila de dentro, sangrada y con el icono un punto mayor: es la que se pulsa a todas horas. */ /* La fila secundaria de un módulo es EL MISMO NIVEL que las pestañas del explorador: mismo sitio, mismo traje, misma sangría. Nunca se ven las dos a la vez. */ body:has(#pd-drive-root) .t2d-drive-tabs, body:has(#pd-drive-root) .t2d-mod-subrow { padding-left: 22px; padding-right: 22px; } body:has(#pd-drive-root) .t2d-mod-subrow[hidden] { display: none !important; } body:has(#pd-drive-root) .t2d-drive-tabs .pibico-tab, body:has(#pd-drive-root) .t2d-mod-subrow .pibico-tab { color: rgba(44, 81, 113, 0.78); } body:has(#pd-drive-root) .t2d-drive-tabs .pibico-tab-label, body:has(#pd-drive-root) .t2d-mod-subrow .pibico-tab-label { font-size: 8px; letter-spacing: 0.02em; } body:has(#pd-drive-root) .t2d-drive-tabs .pibico-tab svg, body:has(#pd-drive-root) .t2d-mod-subrow .pibico-tab svg { width: 14px; height: 14px; } /* `collab.css` manda la pestaña activa al final de la fila (`order: 1`) para que, al envolver, caiga sola en la fila de abajo pegada al contenido. En la fila principal tiene sentido; en una de navegación no: las pestañas cambiarían de sitio en cada clic y el usuario tendría que volver a buscar dónde está cada módulo. Ese fichero es byte-idéntico en los tres servicios y no se toca, así que se anula aquí. */ /* El `order: 0` que anulaba a `collab.css` ya no aplica: ahora la activa SÍ se va al final, a propósito, y lo dice el bloque de alineación de más abajo. Se retira entero, incluido el `flex-grow: 0` que lo acompañaba —era el que dejaba el rótulo pegado a los cantos: sus vecinas se estiraban a 90 px y ella se encogía a 56 para un texto de 47, o sea 4 px de aire en vez de los 10 que declara el relleno. Crece como las demás. */ body:has(#pd-drive-root) .t2d-mod-row .pibico-tab svg { width: 18px; height: 18px; } body:has(#pd-drive-root) .t2d-mod-row .pibico-tab:hover { color: var(--accent-color); } body:has(#pd-drive-root) .t2d-mod-row .pibico-tab.active { color: var(--accent-color); } /* Tarjetas de módulo. La izquierda vive dentro de `.pd-sidebar`, o sea por encima del cristal enmascarado; la derecha es hermana de `.pd-main-panel` y hereda su caja para que el splitter siga midiendo lo mismo se mire el módulo que se mire. */ body:has(#pd-drive-root) .t2d-mod-left { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; gap: 8px; } body:has(#pd-drive-root) .t2d-mod-main { flex: 1; min-width: 400px; height: 100%; display: flex; flex-direction: column; overflow: hidden; /* Ancla para el botón de colapsar cuando la tarjeta no tiene cabecera donde meterlo (búsqueda). La tarjeta no tenía ni un descendiente `position: absolute`, así que hacerla contenedor no le quita el suelo a nadie. */ position: relative; margin-left: -1px; background: var(--bg-primary, #fff); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } /* `hidden` contra un `display` explícito lo pierde: hay que devolvérselo. Vale para los dos anfitriones y para los bloques del explorador, que se ocultan con la misma propiedad al salir de él. */ body:has(#pd-drive-root) .t2d-mod-left[hidden], body:has(#pd-drive-root) .t2d-mod-main[hidden], body:has(#pd-drive-root) .pd-main-panel[hidden], body:has(#pd-drive-root) .pibico-content[hidden], body:has(#pd-drive-root) .t2d-drive-tabs[hidden] { display: none !important; } /* ── Módulo Búsqueda ── El formulario y el pie llegan del panel deslizante, donde el ancho era fijo. Aquí el formulario ocupa la tarjeta y solo él hace scroll: el pie con Limpiar/Aplicar se queda anclado abajo, que es donde se busca después de rellenar doce campos. */ body:has(#pd-drive-root) #t2d-mod-left-search { padding: 0; } body:has(#pd-drive-root) #t2d-mod-left-search .t2d-search-body { flex: 1; min-height: 0; overflow-y: auto; } /* El pie de esta tarjeta lo declara el bloque común de pies (busca «EL PIE DE UNA TARJETA» más arriba): relleno, raya y alineación son los mismos en las cuatro pestañas que tienen pie. Aquí solo queda lo suyo. */ body:has(#pd-drive-root) #t2d-mod-left-search .t2d-search-footer .pd-btn { white-space: nowrap; } /* El valor vivo del deslizador va DENTRO del rótulo («RELEVANCIA MÍNIMA: 0%»). Como ``, el navegador le da `bolder`, que sobre el 400 del rótulo sale 700 — más peso que cualquier otro número de la interfaz. Los recuentos de esta misma tarjeta (`.t2d-srch-chip-n`) van a 600; este también. */ body:has(#pd-drive-root) #t2dSearchMinRelVal { font-weight: 600; } /* El aside vacío se queda en el DOM pero NO se ve. `hidden` solo no basta: `.t2d-search-panel` trae `display:flex` explícito y gana. Sin esto el panel vacío —620 px de blanco fijados a la derecha— tapaba media ventana, cabecera de la aplicación incluida. */ body:has(#pd-drive-root) .t2d-search-panel[hidden], body:has(#pd-drive-root) #t2dSearchBackdrop[hidden] { display: none !important; } /* Aquí vivían cuatro reglas que vestían la cabecera del panel dentro de la tarjeta. La cabecera ya no se trae —el nombre lo dice la pestaña—, así que se van con ella: una regla que no casa con nada es la que sobrevive a la siguiente pasada y estorba. */ body:has(#pd-drive-root) #t2d-mod-main-search .t2d-sf-results { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; } body:has(#pd-drive-root) #t2d-mod-main-search .t2d-sf-rlist { flex: 1; min-height: 0; overflow-y: auto; } body:has(#pd-drive-root) .t2d-mod-hint { padding: 22px 16px; font-size: 13px; color: var(--slate-600, #5A6478); text-align: center; } /* Cuando hay resultados, la pista sobra. */ body:has(#pd-drive-root) #t2d-mod-main-search:has(.t2d-sf-results:not([style*="none"])) .t2d-mod-hint { display: none; } /* Estas cuatro reglas estaban acotadas a `.t2d-search-panel` en drive_overrides.css y los nodos ya no están dentro de él. Se repiten aquí para los dos anfitriones en vez de desacotarlas allí, que afectaría también al panel de ayuda. */ body:has(#pd-drive-root) .t2d-mod-left .t2d-srch-chips, body:has(#pd-drive-root) .t2d-mod-left .t2d-srch-tags { display: flex; flex-wrap: wrap; gap: 4px; } body:has(#pd-drive-root) .t2d-mod-left .t2d-srch-group { margin-bottom: 6px; } /* ── Módulo Grafo ── El panel deja de deslizarse: ocupa el anfitrión. Se anulan a mano las propiedades de panel (posición fija, transformada, ancho) porque la regla original las fija con valores absolutos. */ body:has(#pd-drive-root) #t2d-mod-main-graph #t2d-graph-panel { position: static; transform: none; width: auto; max-width: none; height: 100%; inset: auto; border-radius: 0; box-shadow: none; pointer-events: auto; display: flex; flex-direction: column; flex: 1; min-height: 0; } body:has(#pd-drive-root) #t2d-mod-main-graph .t2d-gv-header { flex-shrink: 0; } body:has(#pd-drive-root) #t2d-mod-main-graph .t2d-gv-body { flex: 1; min-height: 0; } /* La cortina del grafo no pinta nada cuando el grafo es una tarjeta, y el aspa tampoco: se sale cambiando de pestaña. Las dos llevan `display` explícito en su regla original, así que `hidden` no basta. */ body:has(#pd-drive-root) #t2d-graph-backdrop, body:has(#pd-drive-root) #t2d-gv-close[hidden] { display: none !important; } /* Mandos en la tarjeta izquierda: dejan de flotar sobre el lienzo. Y se les cambia la ropa entera. Venían vestidos para el panel del grafo, que es negro (`#0f1622`): textos `#cdd6e0`, rótulos `#8fa0b4`, fondos `rgba(255,255,255,…)` y estados apagados a base de `opacity: .45`. Sobre la tarjeta blanca eso es gris claro sobre blanco — ilegible. Aquí el fondo es claro, así que el texto es oscuro, los estados se distinguen con fondo y no con transparencia, y las cápsulas de 999 px pasan al radio único de los controles de la casa. */ body:has(#pd-drive-root) #t2d-mod-left-graph { padding: 0; } body:has(#pd-drive-root) .t2d-gv-controls { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; } body:has(#pd-drive-root) .t2d-gv-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-top: 8px; } /* ---- Elegir documento (nivel «Documento» del Grafo) ---- Es la puerta del módulo, así que va arriba del todo y ocupa poco: un campo, el atajo al documento que acabas de abrir, y la lista de coincidencias. */ body:has(#pd-drive-root) .t2d-gv-pick, body:has(#pd-drive-root) .t2d-gv-agg { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; padding: 8px 12px 0; } body:has(#pd-drive-root) .t2d-gv-pick[hidden], body:has(#pd-drive-root) .t2d-gv-agg[hidden] { display: none; } body:has(#pd-drive-root) .t2d-gv-pick-q, body:has(#pd-drive-root) .t2d-gv-agg-sel { width: 100%; height: 30px; border: 1px solid rgba(44, 81, 113, 0.18); border-radius: var(--radius-sm); background: #fff; color: var(--text-color); font-family: var(--font-body); font-size: 12px; padding: 0 8px; } body:has(#pd-drive-root) .t2d-gv-pick-q:focus, body:has(#pd-drive-root) .t2d-gv-agg-sel:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.14); } body:has(#pd-drive-root) .t2d-gv-pick-cur { display: flex; align-items: baseline; gap: 6px; min-width: 0; } body:has(#pd-drive-root) .t2d-gv-pick-cur[hidden] { display: none; } body:has(#pd-drive-root) .t2d-gv-pick-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); flex-shrink: 0; } body:has(#pd-drive-root) .t2d-gv-pick-cur strong { font-size: 12px; font-weight: 600; color: var(--accent-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#pd-drive-root) .t2d-gv-pick-res { display: flex; flex-direction: column; gap: 1px; max-height: 40vh; overflow-y: auto; } body:has(#pd-drive-root) .t2d-gv-pick-row { display: flex; align-items: center; gap: 6px; width: 100%; border: none; background: none; border-radius: var(--radius-sm); padding: 4px 6px; font-family: var(--font-body); font-size: 12px; line-height: 1.2; color: var(--text-color); text-align: left; cursor: pointer; } body:has(#pd-drive-root) .t2d-gv-pick-row:hover { background: rgba(70, 130, 180, 0.09); } body:has(#pd-drive-root) .t2d-gv-pick-row i { color: var(--primary-color); flex-shrink: 0; } body:has(#pd-drive-root) .t2d-gv-pick-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#pd-drive-root) .t2d-gv-pick-note { font-size: 11px; color: var(--text-light); padding: 4px 6px; } body:has(#pd-drive-root) .t2d-gv-hops { display: flex; gap: 4px; } body:has(#pd-drive-root) .t2d-gv-hops[hidden] { display: none; } body:has(#pd-drive-root) .t2d-gv-hop { flex: 1; border: none; background: rgba(44, 81, 113, 0.07); border-radius: var(--radius-sm); padding: 4px 8px; font-family: var(--font-body); font-size: 11px; line-height: 1.1; color: var(--text-light); cursor: pointer; } body:has(#pd-drive-root) .t2d-gv-hop.on { background: rgba(70, 130, 180, 0.16); color: var(--accent-color); font-weight: 600; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-lib-sel { width: 100%; max-width: none; height: 30px; border: 1px solid rgba(44, 81, 113, 0.18); border-radius: var(--radius-sm); background: #fff; color: var(--text-color); font-family: var(--font-body); font-size: 12px; padding: 0 8px; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: none; } /* Cada relación conserva SU color —es el mismo que la arista pinta en el lienzo, y esa correspondencia es el motivo de que el chip lleve color— pero el texto pasa a ser oscuro y el estado apagado se dice con un fondo gris, no bajando la opacidad: apagado no es lo mismo que ilegible. */ body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-chip { border-radius: var(--radius-sm); padding: 4px 9px; font-family: var(--font-body); font-size: 11px; line-height: 1.2; opacity: 1; color: var(--slate-600, #5A6478); background: #fff; border: 1px solid rgba(44, 81, 113, 0.14); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-chip::before { opacity: 0.35; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-chip.on { color: var(--text-color); background: color-mix(in srgb, var(--gv-c) 12%, #fff); border-color: var(--gv-c, rgba(44, 81, 113, 0.14)); font-weight: 600; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-chip.on::before { opacity: 1; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-facet, body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-legend { position: static; inset: auto; max-height: none; max-width: none; width: auto; background: rgba(70, 130, 180, 0.05); border: none; border-radius: var(--radius-sm); box-shadow: none; padding: 8px 10px; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-facet { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* `hidden` pierde contra un `display` explícito, y aquí hay tres: los chips de relación y el «color por» declaran `display:flex` a mano, así que ocultarlos desde el módulo —en el Panorama no filtran nada— no hacía nada. La regla que ya está escrita arriba para los paneles aparcados, aplicada también aquí: una pestaña oculta no es una pestaña, y un mando oculto no es un mando. */ body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-facet[hidden], body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-chips[hidden], body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-legend[hidden] { display: none !important; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-facet label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-light); flex-shrink: 0; } body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-facet select { flex: 1; min-width: 0; height: 26px; background: #fff; color: var(--text-color); border: 1px solid rgba(44, 81, 113, 0.18); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 12px; padding: 0 6px; } /* La leyenda se queda con el sitio que sobra en vez de dejar medio metro de blanco debajo: es la lista más larga de las cuatro y la que se recorre. */ body:has(#pd-drive-root) .t2d-gv-controls #t2d-gv-legend { flex: 1; min-height: 90px; overflow-y: auto; margin-top: 8px; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-stats { border-bottom: 1px solid rgba(44, 81, 113, 0.10); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-stats-line { font-family: var(--font-mono); font-size: 10px; color: var(--slate-600, #5A6478); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-more { background: #fff; color: var(--primary-color); border: 1px solid rgba(70, 130, 180, 0.35); border-radius: var(--radius-sm); font-size: 10px; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-more:hover:not([disabled]) { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legend-title { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-light); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi { font-family: var(--font-body); font-size: 12px; line-height: 1.45; color: var(--text-color); border-radius: var(--radius-sm); padding: 1px 5px; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi:hover { background: rgba(70, 130, 180, 0.09); } /* Apagado: gris, no transparente. Un valor descartado se sigue leyendo —hace falta para volver a encenderlo. */ body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi.off { opacity: 1; color: var(--idle, #94a3b8); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi.off span.sw { opacity: 0.35; } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi.on { background: rgba(70, 130, 180, 0.14); color: var(--accent-color); } body:has(#pd-drive-root) .t2d-gv-controls .t2d-gv-legi .cnt { font-family: var(--font-mono); font-size: 10px; color: var(--slate-600, #5A6478); } /* ── Módulo Conectores ── */ body:has(#pd-drive-root) #t2d-mod-left-connectors { padding: 0; } body:has(#pd-drive-root) .t2d-conn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 6px; flex-shrink: 0; } /* Columna con separación: sin ella las filas se tocan y el fondo del `:hover` de una empieza donde acaba el de la anterior, así que la lista se lee como un bloque en vez de como elementos sueltos. */ body:has(#pd-drive-root) .t2d-conn-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; } /* Un solo «aquí no hay nada». Había cinco maneras de decirlo, cada una con su tamaño y su color: la de bibliotecas, la de repositorios, la de filtros, la de estadísticas y la pista de los módulos. Dicen lo mismo y se ven igual. */ body:has(#pd-drive-root) .t2d-lib-empty, body:has(#pd-drive-root) .t2d-srch-empty, body:has(#pd-drive-root) .t2d-kpi-empty { padding: 14px 10px; font-family: var(--font-body); font-size: 12px; line-height: 1.45; color: var(--slate-600, #5A6478); text-align: center; } body:has(#pd-drive-root) .t2d-conn-empty, body:has(#pd-drive-root) .t2d-conn-note { font-size: 11px; line-height: 1.45; color: var(--slate-600, #5A6478); padding: 8px 4px 0; margin: 0; } body:has(#pd-drive-root) .t2d-conn-detail-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 14px; border-bottom: 1px solid rgba(44, 81, 113, 0.09); } body:has(#pd-drive-root) .t2d-conn-detail-head h3 { margin: 0; font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--accent-color); } body:has(#pd-drive-root) .t2d-conn-prov { margin-left: auto; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate-600, #5A6478); background: rgba(44, 81, 113, 0.08); border-radius: var(--radius-sm); padding: 3px 8px; } body:has(#pd-drive-root) .t2d-conn-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; } body:has(#pd-drive-root) .t2d-conn-sec h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate-600, #5A6478); } body:has(#pd-drive-root) .t2d-conn-dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 3px 12px; font-size: 12px; } body:has(#pd-drive-root) .t2d-conn-kv { display: contents; } body:has(#pd-drive-root) .t2d-conn-kv dt { color: var(--slate-600, #5A6478); white-space: nowrap; } body:has(#pd-drive-root) .t2d-conn-kv dd { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-color); overflow-wrap: anywhere; } /* Los números en rejilla, no en párrafo: se comparan de un vistazo. */ /* Las cuentas del repositorio las pinta el componente de Estadísticas (`.t2d-kpi-*`), prestado por `T2DCorpusKPIs.renderFor`. Aquí solo se le quita el scroll propio: el que manda es el de la ficha, y dos barras anidadas atrapan la rueda del ratón en la de dentro. */ body:has(#pd-drive-root) #t2d-conn-kpis { padding: 0; overflow: visible; } body:has(#pd-drive-root) .t2d-conn-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } body:has(#pd-drive-root) .t2d-conn-errs li { font-size: 11px; line-height: 1.35; background: rgba(239, 68, 68, 0.06); border-radius: var(--radius-sm); padding: 5px 8px; } body:has(#pd-drive-root) .t2d-conn-err-path { display: block; font-family: var(--font-mono); color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#pd-drive-root) .t2d-conn-err-msg { display: block; color: #b91c1c; overflow-wrap: anywhere; } body:has(#pd-drive-root) .t2d-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; } body:has(#pd-drive-root) .t2d-conn-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-color); background: rgba(251, 191, 36, 0.12); border-radius: var(--radius-sm); padding: 8px 10px; } body:has(#pd-drive-root) .t2d-conn-confirm span { flex: 1 1 220px; } /* ── Navegación de secciones (Admin, Soporte) ── Conectores llena su tarjeta izquierda con datos; Admin y Soporte la llenan con secciones. Es la misma pieza —una lista de una columna que manda sobre la tarjeta derecha— así que comparte aspecto con `.t2d-conn-row` y solo cambia el nombre. */ body:has(#pd-drive-root) #t2d-mod-left-admin, body:has(#pd-drive-root) #t2d-mod-left-support { padding: 0; } body:has(#pd-drive-root) .t2d-mod-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; flex-shrink: 0; } body:has(#pd-drive-root) .t2d-mod-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; font-family: var(--font-body); transition: background 0.14s, box-shadow 0.14s; } body:has(#pd-drive-root) .t2d-mod-nav-item:hover { background: rgba(70, 130, 180, 0.07); } body:has(#pd-drive-root) .t2d-mod-nav-item.active { background: rgba(70, 130, 180, 0.14); box-shadow: 0 2px 8px rgba(70, 130, 180, 0.18); } body:has(#pd-drive-root) .t2d-mod-nav-item > .ph { flex-shrink: 0; font-size: 14px; color: rgba(44, 81, 113, 0.55); } body:has(#pd-drive-root) .t2d-mod-nav-item.active > .ph { color: var(--accent-color); } body:has(#pd-drive-root) .t2d-mod-nav-main { min-width: 0; display: block; } body:has(#pd-drive-root) .t2d-mod-nav-name { display: block; font-size: 13px; line-height: 1.2; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#pd-drive-root) .t2d-mod-nav-item.active .t2d-mod-nav-name { font-weight: 700; color: var(--accent-color); } body:has(#pd-drive-root) .t2d-mod-nav-sub { display: block; font-size: 10px; line-height: 1.3; color: var(--slate-600, #5A6478); } body:has(#pd-drive-root) .t2d-mod-note { font-size: 11px; line-height: 1.45; color: var(--slate-600, #5A6478); padding: 8px 12px 10px; margin: 0; border-top: 1px solid rgba(44, 81, 113, 0.09); } /* Las secciones de Admin que además traen un selector (las reglas son POR repositorio) crecen debajo de la navegación y hacen scroll ellas solas. */ body:has(#pd-drive-root) .t2d-mod-sublist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; } /* ── Módulo Admin ── Los tres paneles que hospeda (Valoraciones, Reglas, Skills IA) se dibujan a sí mismos como paneles deslizantes: `position:fixed`, ancho fijo y una transformada que los saca de la pantalla. Aquí ocupan la tarjeta, así que hay que anular esas propiedades. Con `!important` deliberadamente: los tres las fijan en el atributo `style`, y además su `close()` interno —el que cuelga de la tecla Escape, que no se puede desenganchar— vuelve a escribir la transformada. Así ese cierre queda en nada en vez de dejar la tarjeta en blanco. */ body:has(#pd-drive-root) #t2d-mod-main-connectors > aside, body:has(#pd-drive-root) #t2d-mod-main-assistant > aside { position: static !important; transform: none !important; transition: none !important; inset: auto !important; width: auto !important; max-width: none !important; height: 100% !important; min-height: 0; flex: 1; border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: flex !important; flex-direction: column; overflow: hidden; background: var(--bg-primary, #fff) !important; } /* Y el que no toca ahora mismo, fuera. Va DESPUÉS de la regla de arriba a propósito: misma especificidad, gana la última. */ /* Y el que no toca ahora, fuera — esté donde esté. Al salir de su módulo se aparcan colgando de `body`, porque la tarjeta se repinta con `innerHTML` y se los llevaría por delante; ahí vuelve a mandar su CSS de panel deslizante, que trae `display:flex` en el atributo `style` y le gana a `hidden`. Sin esto, salir de Conectores dejaba las reglas de etiquetado flotando encima del módulo siguiente. */ body:has(#pd-drive-root) #t2dTagRulesPanel[hidden], body:has(#pd-drive-root) #t2dFeedbackPanel[hidden], body:has(#pd-drive-root) #t2dSkillsPanel[hidden] { display: none !important; } /* Sus cortinas se quedan en el DOM —`open()` las busca sin comprobar que existan— pero no pintan: dentro de una tarjeta no hay nada que atenuar. */ body:has(#pd-drive-root) #t2dFeedbackBackdrop, body:has(#pd-drive-root) #t2dSkillsBackdrop, body:has(#pd-drive-root) #t2dTagRulesBackdrop, body:has(#pd-drive-root) #support-backdrop { display: none !important; } /* Y sus botones de cerrar tampoco: la fila de módulos es la salida. */ body:has(#pd-drive-root) #t2dFbClose, body:has(#pd-drive-root) #t2dSkClose, body:has(#pd-drive-root) #t2dTrClose { display: none !important; } /* ── Módulo Asistente ── Ni el chat ni la lista de hilos se reescriben: se mudan. Aquí se les quita la ropa de panel deslizante —posición fija, ancho fijo, transformada— y la de cajón —la lista de hilos vive con `position:absolute; inset:44px 0 0 0` encima de la conversación, que es justo lo que aquí NO se quiere. */ body:has(#pd-drive-root) #t2d-mod-main-assistant > .pd-ai-chat-panel[hidden] { display: none !important; } body:has(#pd-drive-root) #t2d-mod-main-assistant > .pd-ai-chat-panel { position: static !important; transform: none !important; transition: none !important; inset: auto !important; width: auto !important; max-width: none !important; height: 100% !important; min-height: 0; flex: 1; border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: auto !important; opacity: 1 !important; pointer-events: auto !important; display: flex !important; flex-direction: column; overflow: hidden; background: var(--bg-primary, #fff) !important; } body:has(#pd-drive-root) #t2d-mod-left-assistant { padding: 0; } /* Todo lo de aquí abajo lleva `!important`, y no por gusto: el companion se inyecta su propia hoja desde `slide_panel_frappe.js` con `!important` en CADA declaración. Está escrita para un panel deslizante estrecho y oscuro —cabecera con degradado azul y texto blanco, filas pegadas con raya de separación, sin radio— y aquí eso es una tarjeta más de la columna izquierda. Con `!important` a los dos lados decide la especificidad, y estos selectores llevan dos identificadores. */ body:has(#pd-drive-root) #t2d-mod-left-assistant > .pd-thread-history-panel { position: static !important; inset: auto !important; z-index: auto !important; flex: 1; min-height: 0; display: flex !important; flex-direction: column !important; background: transparent !important; } /* Su cabecera traía «Volver al chat» y un aspa: dos maneras de cerrar algo que ya no se cierra. Y el degradado azul, que era ropa de panel. */ body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-back-thread-history, body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-close-thread-history { display: none !important; } body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-thread-history-header { padding: 6px 10px !important; background: none !important; border-bottom: 1px solid rgba(70, 130, 180, 0.15) !important; justify-content: flex-start !important; } /* El rótulo del historial lo declara el bloque «EL RÓTULO EN VERSALITAS». Aquí había una copia suya, palabra por palabra: la misma regla en dos sitios es la que se queda atrás cuando la otra cambia. */ /* El acceso a Valoraciones, a la derecha del rótulo. La hoja inyectada pinta los botones de esta cabecera en blanco, porque allí la cabecera es un degradado azul; aquí es clara y serían invisibles. */ body:has(#pd-drive-root) #t2d-mod-left-assistant .t2d-asst-ratings { margin-left: auto !important; color: var(--accent-color) !important; background: transparent !important; border: none !important; opacity: 0.6; transition: opacity 0.14s, background 0.14s, color 0.14s; } body:has(#pd-drive-root) #t2d-mod-left-assistant .t2d-asst-ratings:hover { opacity: 1; background: var(--primary-color) !important; color: #fff !important; } body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-thread-scope-bar { padding: 6px 10px !important; border-bottom: none !important; background: none !important; } /* El selector de ámbito lo declara EL BLOQUE DEL SEGMENTADO, junto al de Valoraciones y al de los avisos de etiquetado (busca «UN FILTRO SEGMENTADO»). Aquí había una segunda versión suya —fondo tenue y texto de acento en vez del azul plano— escrita en el repaso anterior, cuando el de Valoraciones todavía era otra cosa: dos reglas mías discrepando sobre el mismo control, y ganaba ésta por llevar un id delante. Quitarla es lo que hace que los dos filtros del Asistente se vean por fin iguales. */ body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-thread-history-list { padding: 4px 8px !important; } /* Las conversaciones son filas de lista y las declara el bloque «LA FILA DE UNA LISTA». Aquí llevaban ADEMÁS su relleno y su hueco repetidos, puestos para ganarle al CSS que `slide_panel_frappe.js` inyecta en caliente. No hacía falta: el bloque común va con `body:has(#pd-drive-root)`, que es especificidad de id, y ya le gana al `.pd-thread-item` suelto del inyectado. Lo que sí hacían era congelar los números: cuando el bloque común pasó a 5 px con 2 de hueco, el Asistente se quedó en los 6 y 3 de antes, y era la única lista de las cinco con otra densidad. */ body:has(#pd-drive-root) #t2d-mod-left-assistant .pd-thread-item { line-height: 1.3 !important; } /* El pie de esta tarjeta también lo declara el bloque común (busca «EL PIE DE UNA TARJETA»), incluido el apartarse de la burbuja flotante del chat, que vive justo en esta esquina. */ /* Y en la cabecera de la conversación sobran tres botones: el que abre y cierra la lista de hilos —que ya está siempre a la izquierda—, el de ampliar ancho —la tarjeta ya ocupa lo que tiene que ocupar— y el aspa, porque de un módulo se sale por la fila de pestañas. */ body:has(#pd-drive-root) #t2d-mod-main-assistant .pd-thread-history-btn, body:has(#pd-drive-root) #t2d-mod-main-assistant .pd-ai-wide-toggle, body:has(#pd-drive-root) #t2d-mod-main-assistant .pd-close-ai-chat { display: none !important; } /* La cortina del chat no pinta nada cuando el chat es una tarjeta: no hay nada debajo que atenuar. La condición es literal —«el panel de chat está dentro del anfitrión del módulo»— para que la cortina siga funcionando cuando el chat vuelve a ser panel deslizante. */ body:has(#t2d-mod-main-assistant > .pd-ai-chat-panel) .pd-ai-chat-backdrop { display: none !important; } /* ── Módulo Soporte ── Aquí no se mueve el panel entero sino su cuerpo. El `