; el de adentro va transparente. Cuando el input traia fondo propio quedaba un rectangulo recto pintado encima de un contenedor redondeado, y las cuatro esquinas se veian asomar por debajo de la curva. Parecia que la caja se desbordaba y en realidad eran dos fondos peleandose. */ html[data-tema="claro"] .buscador input { background: transparent !important; border: none !important; } html[data-tema="claro"] input::placeholder, html[data-tema="claro"] textarea::placeholder { color: var(--text-dim) !important; } html[data-tema="claro"] input:focus, html[data-tema="claro"] select:focus, html[data-tema="claro"] textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.18) !important; } /* Los botones de icono y los secundarios eran "un blanco al 4% sobre negro". Sobre claro ese blanco es invisible. */ html[data-tema="claro"] .btn-icon, html[data-tema="claro"] .btn-icono, html[data-tema="claro"] .btn-secondary, html[data-tema="claro"] .btn-fila { background: var(--surf-2) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } html[data-tema="claro"] .btn-icon:hover, html[data-tema="claro"] .btn-icono:hover, html[data-tema="claro"] .btn-secondary:hover, html[data-tema="claro"] .btn-fila:hover { background: var(--surf-3) !important; color: var(--text-main) !important; } /* El boton principal se queda con el acento de fondo, pero el texto encima tiene que contrastar con EL, no con la pagina. Con acentos claros (menta, lima) el blanco no alcanza. */ html[data-tema="claro"] .btn-primary-3d, html[data-tema="claro"] .btn-primary { color: #05140e !important; } /* ========================================================== 5. BLANCOS CON ALFA El proyecto usa rgba(255,255,255,.04-.09) para tres cosas: separar filas, marcar el hover y dibujar el borde superior de una caja. Las tres se apoyan en que el fondo es oscuro. Se invierten a negro con el mismo peso visual. ========================================================== */ html[data-tema="claro"] .grid-fila { border-bottom-color: rgba(16, 20, 30, 0.07) !important; } html[data-tema="claro"] .grid-head { background: var(--surf-2) !important; border-bottom-color: var(--border-color) !important; box-shadow: none !important; } html[data-tema="claro"] .main-tabs .tab-btn:hover:not(.active), html[data-tema="claro"] .custom-table tbody tr:hover, html[data-tema="claro"] .lead-row:hover { background: rgba(16, 20, 30, 0.045) !important; } html[data-tema="claro"] .triage-chip { /* Contra la superficie y no contra blanco puro: si no, el chip queda mas brillante que la tarjeta que lo contiene. */ background: color-mix(in srgb, var(--triage-color, #5b6272) 16%, var(--surf-1)) !important; color: color-mix(in srgb, var(--triage-color, #5b6272) 72%, #05070c) !important; } /* ========================================================== 6. LA MARCA El logotipo son dos mascaras: una pintada de blanco y otra del acento. La blanca sobre fondo claro no existe. Pasa a ser casi negra, que es como se imprime la marca en papel. ========================================================== */ html[data-tema="claro"] .marca-nombre__blanco, html[data-tema="claro"] .marca-iso__blanco { background: #14161c; } /* El resplandor del isotipo era para que no quedara plano sobre negro. Sobre blanco es una mancha. */ html[data-tema="claro"] .marca-iso__acento { filter: none; } /* La marca de agua del fondo es el logo al 3% en blanco: sobre claro no se ve, y subirle la opacidad lo unico que hace es ensuciar. Se apaga. */ html[data-tema="claro"] .watermark-logo-glow-wrapper { display: none !important; } /* ========================================================== 7. LOS FONDOS ANIMADOS Las cuatro tramas estan dibujadas en blanco o en acento sobre negro. En claro se invierten: la trama pasa a ser oscura y baja de intensidad, porque sobre blanco el mismo contraste se ve el doble. La lluvia de codigo es un canvas y no se puede alcanzar desde aca: los colores se los da js/fondo.js, que lee el tema (ver `tonos()`). ========================================================== */ html[data-tema="claro"][data-fondo="puntos"] body::before { background-image: radial-gradient(rgba(16, 20, 30, 0.075) 1px, transparent 1px); } html[data-tema="claro"][data-fondo="malla"] body::before { background-image: linear-gradient(rgba(var(--acento-rgb), 0.085) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--acento-rgb), 0.085) 1px, transparent 1px); } /* El orbe de luz del fondo es un resplandor del acento pensado para brillar en la oscuridad. Sobre blanco queda como una mancha de color: se baja a un velo. */ html[data-tema="claro"] #ambient-background-glow::before { opacity: 0.18 !important; } /* ========================================================== 8. BARRAS DE DESPLAZAMIENTO ========================================================== */ html[data-tema="claro"] ::-webkit-scrollbar-track { background: var(--surf-2); } html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #c4cad6; border-radius: 8px; } html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: #aab2c2; } /* ========================================================== 9. EL PANEL LATERAL Hereda casi todo de las variables. Lo unico propio es la pastilla de la seccion activa: el lavado del acento al 12% sobre negro se ve; sobre blanco hay que subirlo. ========================================================== */ html[data-tema="claro"].nav-lateral body .main-tabs .tab-btn.active { background: rgba(var(--acento-rgb), 0.16) !important; color: var(--acento-legible) !important; } html[data-tema="claro"].nav-lateral body .grid-consultas .grid-fila { background: linear-gradient(180deg, color-mix(in srgb, var(--estado-color, var(--primary)) 12%, transparent) 0%, transparent 60%), var(--surf-1); box-shadow: var(--elev-1); } /* El globo de la seccion, con el panel plegado. */ html[data-tema="claro"].nav-lateral.nav-plegada body .main-tabs .tab-btn::before { background: #14161c; border-color: #14161c; color: #ffffff; } /* ========================================================== EL CHAT La burbuja propia se pintaba mezclando el acento con #101014 —un negro escrito a mano— asi que en claro quedaba oscura, y el texto de adentro hereda --text-main, que en claro es casi negro. Negro sobre negro: el mensaje propio no se leia. Aca la burbuja propia se mezcla contra la superficie clara, como la ajena, pero con bastante mas acento para que igual se distinga de un vistazo quien dijo que. ========================================================== */ html[data-tema="claro"] .chat-msj.mio .chat-burbuja { background: color-mix(in srgb, var(--primary) 22%, var(--surf-1)) !important; color: var(--text-main) !important; } html[data-tema="claro"] .chat-burbuja, html[data-tema="claro"] .chat-burbuja p, html[data-tema="claro"] .chat-msj.mio .chat-burbuja p { color: var(--text-main) !important; } /* La hora estaba en un gris clarito pensado para fondo oscuro: sobre la burbuja clara desaparecia. */ html[data-tema="claro"] .chat-burbuja time { color: rgba(20, 22, 28, 0.45) !important; } /* La sombra negra al 35% sobre fondo claro se ve como suciedad alrededor de cada burbuja. */ html[data-tema="claro"] .chat-burbuja { box-shadow: 0 1px 2px rgba(16, 20, 30, 0.10) !important; } html[data-tema="claro"] .chat-burbuja a { color: var(--acento-legible) !important; } /* ========================================================== EL AVISO DE GUARDADO Es una capa a pantalla completa con una caja en el medio, y las dos estaban en negro fijo: rgba(8,8,10,.42) el velo y rgba(23,23,26,.92) la caja. En modo claro aparecia un ladrillo negro flotando sobre la pantalla —parecia que la animacion se habia colgado en el tema anterior— y encima el texto usa --text-main, que en claro es casi negro: la leyenda "Estado guardado" quedaba negro sobre negro. Aca va la version clara: el velo aclara en vez de oscurecer y la caja es una superficie del tema. Los anillos y el logo no se tocan, que son del acento y funcionan en los dos. ========================================================== */ html[data-tema="claro"] body .guardando, html[data-tema="claro"] .guardando { background: rgba(210, 215, 225, 0.55) !important; } html[data-tema="claro"] .guardando-caja { background: var(--surf-1) !important; border: 1px solid rgba(var(--acento-rgb), 0.35) !important; box-shadow: 0 18px 44px rgba(16, 20, 30, 0.18) !important; } html[data-tema="claro"] .guardando strong { color: var(--text-main) !important; } /* ========================================================== HERRAMIENTAS COMO PANTALLAS: EL VELO 20260814_3 El resto de `es-pagina` —posicion, tamaño, animacion— se apaga en legibilidad.css. El VELO OSCURO hay que apagarlo ACA, y no es capricho: unas lineas mas arriba en este mismo archivo esta html[data-tema="claro"] .modal-overlay { background: ... !important } que tiene un selector mas fuerte (0,2,1) que `.modal-overlay.es-pagina` (0,2,0). Con !important de los dos lados gana la especificidad, asi que la regla de alla ganaba siempre y el Hunter quedaba de pestaña pero con el fondo negro del modal encima del tablero. `html` adelante empata la especificidad, y como claro.css es la ULTIMA hoja que se carga, el empate lo gana esta. Vale para los dos temas: el selector no menciona cual. ========================================================== */ /* `html body` y no solo `html`: el que gana no era el de arriba sino agenda.css, con `html body .modal-overlay:not(.hidden)`. El :not() suma la especificidad de lo que lleva adentro, asi que esa regla vale 0,2,2 y hay que igualarla. Empatada, gana esta por ser la ultima hoja que carga. */ html body .modal-overlay.es-pagina { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; }