/* ========================================================================== Tema E-Ink — WhatsApp CRM -------------------------------------------------------------------------- Dos modos: "eink" (por defecto) y "color" (el aspecto original de la app). Todo lo que hay bajo :root[data-theme="eink"] es una CAPA DE OVERRIDE: en modo "color" este archivo no pinta nada salvo el propio switcher, así que apagar E-Ink devuelve la app exactamente a como estaba. El modo se escribe en desde PHP (cookie crm_theme), por eso no hay parpadeo al cargar. assets/js/theme.js lo cambia en vivo. Paleta: rampa de grises cuantizada al estilo de un panel Carta de 16 niveles (neutra, ligeramente fría — no es papel crema). El color no comunica nada en E-Ink: la jerarquía se hace con tono, regla de 1px y peso tipográfico. ========================================================================== */ :root { /* Rampa E-Ink (niveles del panel, de blanco a tinta), calibrada a contraste máximo: papel blanco puro, tinta casi negra y los grises de texto colapsados hacia arriba. Un e-reader real solo tiene dos tonos de texto usables, así que la rampa los imita en vez de fingir seis. Con el papel en blanco, la jerarquía de superficie ya no puede apoyarse en el tono: página y tarjeta son el mismo blanco y las separa el filete. El único escalón de gris que queda es el chrome (--e-sunk), que es donde de verdad hace falta distinguir instrumento de contenido. Ratios medidos sobre --e-paper. */ --e-white: #ffffff; /* L15 */ --e-raise: #ffffff; /* L15 — tarjetas: blancas también; las separa el filete, no el tono */ --e-paper: #ffffff; /* L15 — fondo de página: blanco puro */ --e-sunk: #e7e6e2; /* L12 — chrome, campos, superficie hundida */ --e-rule-2: #adaca7; /* L10 — separador de filas */ --e-rule: #807e79; /* L8 — filete de panel (4.1:1, AA no textual) */ --e-mute-2: #56554f; /* L6 — texto terciario (7.5:1, AAA) */ --e-mute: #3b3a36; /* L5 — texto secundario (11.4:1, AAA) */ --e-soft: #24231f; /* L2 — texto enfático sobre tinta */ --e-ink: #0b0b0a; /* L0 — texto (19.7:1, AAA) */ /* Tramas ordenadas: el artefacto propio del papel electrónico. Densidad creciente = mayor énfasis. Se usan con moderación. El punto de cada trama tiene su propio tono: la del fondo del hilo debe quedarse en el umbral de lo perceptible, la de las burbujas debe leerse. */ --dither-6: radial-gradient(circle at 1px 1px, var(--e-rule-2) 0 1px, transparent 1.2px) 0 0 / 4px 4px; --dither-11: radial-gradient(circle at 1px 1px, var(--e-rule) 0 1px, transparent 1.2px) 0 0 / 3px 3px; --dither-25: radial-gradient(circle at 1px 1px, var(--e-mute-2) 0 1px, transparent 1.2px) 0 0 / 2px 2px; --e-font-read: "Literata", Georgia, "Times New Roman", serif; --e-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================================== 1. El switcher (visible en ambos modos) ========================================================================== */ .theme-switch { display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; overflow: hidden; font-family: var(--e-font-ui); line-height: 1; flex-shrink: 0; } .theme-switch__opt { appearance: none; border: 0; background: transparent; color: inherit; opacity: 0.6; font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; cursor: pointer; white-space: nowrap; } .theme-switch__opt:hover { opacity: 0.9; } .theme-switch__opt[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); opacity: 1; font-weight: 600; } .theme-switch__opt:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } /* ========================================================================== 2. Capa E-Ink ========================================================================== */ :root[data-theme="eink"] { color-scheme: light; /* Variables propias de pages/whatsapp-chat.php: redefinirlas aquí reconvierte de una sola vez todo lo que las usa en esa página. */ --wa-bg: var(--e-paper); --wa-header: var(--e-ink); --wa-chat-bg: var(--e-paper); --wa-bubble-in: var(--e-white); --wa-bubble-out: var(--e-white); /* Bootstrap 5 */ --bs-body-bg: var(--e-paper); --bs-body-color: var(--e-ink); --bs-border-color: var(--e-rule); --bs-link-color: var(--e-ink); --bs-link-hover-color: var(--e-ink); } /* --- Fundamentos ---------------------------------------------------------- */ :root[data-theme="eink"] body { background: var(--e-paper) !important; color: var(--e-ink) !important; font-family: var(--e-font-ui); -webkit-font-smoothing: antialiased; } /* El papel electrónico no refresca a 60fps: sin transiciones ni animaciones, salvo el spinner de "enviando", que sí comunica estado. */ :root[data-theme="eink"] *:not(.spinner):not(.spinner-border) { transition: none !important; animation: none !important; } /* Tampoco hay sombras: la profundidad se dibuja con un filete de 1px. */ :root[data-theme="eink"] * { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; } /* Radios casi rectos; lo redondo (avatares, badges, botones circulares) se queda. */ :root[data-theme="eink"] [class*="rounded"]:not(.rounded-full):not(.rounded-circle):not(.action-btn), :root[data-theme="eink"] .btn, :root[data-theme="eink"] .form-control, :root[data-theme="eink"] .modal-content, :root[data-theme="eink"] .dropdown-menu { border-radius: 2px !important; } :root[data-theme="eink"] img, :root[data-theme="eink"] video, :root[data-theme="eink"] .message-image { filter: grayscale(1) contrast(1.08); } :root[data-theme="eink"] :focus-visible { outline: 2px solid var(--e-ink) !important; outline-offset: 2px; } /* Tipografía: serif de e-reader para lo que se LEE (prosa), palo seco para la instrumentación (navegación, etiquetas, cifras). */ :root[data-theme="eink"] h1, :root[data-theme="eink"] h2, :root[data-theme="eink"] h3, :root[data-theme="eink"] h4, :root[data-theme="eink"] h5, :root[data-theme="eink"] .chat-name, :root[data-theme="eink"] .message, :root[data-theme="eink"] .empty-state p { font-family: var(--e-font-read); } /* Escala tipográfica de E-Ink: un escalón por encima del modo Color en todo, y dos en la superficie de lectura. El papel electrónico se mira a distancia de libro, no de monitor, y la serif necesita cuerpo para no adelgazarse. */ :root[data-theme="eink"] body { font-size: 17px; } :root[data-theme="eink"] .message { font-size: 18px; line-height: 1.55; } :root[data-theme="eink"] .chat-name { font-size: 17.5px; font-weight: 500; } :root[data-theme="eink"] .chat-preview { font-size: 15px; } :root[data-theme="eink"] .chat-time { font-size: 13px; } :root[data-theme="eink"] .chat-input { font-size: 17px; } :root[data-theme="eink"] .filter-tab { font-size: 15px; } :root[data-theme="eink"] .filter-tab i { font-size: 20px; } :root[data-theme="eink"] .message-meta, :root[data-theme="eink"] .history-count, :root[data-theme="eink"] .group-participants { font-size: 12.5px; } :root[data-theme="eink"] .message.group-msg .participant-name { font-size: 13px; } :root[data-theme="eink"] .group-badge, :root[data-theme="eink"] .status-badge { font-size: 11px; } :root[data-theme="eink"] .unread-badge { font-size: 13px; } :root[data-theme="eink"] .theme-switch__opt { font-size: 12px; } /* Utilidades de Tailwind: se reescala la escala entera, incluidas sus variantes responsive (sm:text-sm, lg:text-base, …). */ :root[data-theme="eink"] [class*="text-xs"] { font-size: 13px; line-height: 1.45; } :root[data-theme="eink"] [class*="text-sm"] { font-size: 15.5px; line-height: 1.5; } :root[data-theme="eink"] [class*="text-base"] { font-size: 17.5px; line-height: 1.55; } :root[data-theme="eink"] [class*="text-lg"] { font-size: 19.5px; line-height: 1.4; } :root[data-theme="eink"] [class*="text-xl"] { font-size: 22px; line-height: 1.35; } :root[data-theme="eink"] [class*="text-2xl"] { font-size: 28px; line-height: 1.25; } /* Tablas: más aire, porque el cuerpo subió. */ :root[data-theme="eink"] th, :root[data-theme="eink"] td { padding-top: 0.7rem; padding-bottom: 0.7rem; } /* Cifras alineadas en columnas y horas */ :root[data-theme="eink"] td, :root[data-theme="eink"] .chat-time, :root[data-theme="eink"] .message-meta, :root[data-theme="eink"] .unread-badge, :root[data-theme="eink"] .history-count { font-variant-numeric: tabular-nums; } /* --- Tailwind: superficies ------------------------------------------------ */ :root[data-theme="eink"] [class*="bg-gray-950"], :root[data-theme="eink"] [class*="bg-gradient-to"] { background-color: var(--e-paper) !important; background-image: none !important; } :root[data-theme="eink"] [class*="bg-gray-900"] { background-color: var(--e-raise) !important; } :root[data-theme="eink"] [class*="bg-gray-800"], :root[data-theme="eink"] [class*="bg-gray-700"], :root[data-theme="eink"] [class*="bg-gray-600"] { background-color: var(--e-sunk) !important; } /* Rellenos teñidos (bg-green-600/20, bg-red-900/50, iconos de tarjeta…): en E-Ink no hay matiz, así que pasan a superficie hundida con filete. */ :root[data-theme="eink"] [class*="bg-green-6"], :root[data-theme="eink"] [class*="bg-green-9"], :root[data-theme="eink"] [class*="bg-blue-6"], :root[data-theme="eink"] [class*="bg-blue-9"], :root[data-theme="eink"] [class*="bg-red-6"], :root[data-theme="eink"] [class*="bg-red-9"], :root[data-theme="eink"] [class*="bg-yellow-6"], :root[data-theme="eink"] [class*="bg-yellow-9"], :root[data-theme="eink"] [class*="bg-amber-6"], :root[data-theme="eink"] [class*="bg-purple-6"], :root[data-theme="eink"] [class*="bg-rose-6"] { background-color: var(--e-sunk) !important; border: 1px solid var(--e-rule); } /* …salvo los rellenos sólidos de acción, que se INVIERTEN (así marca la selección un lector de tinta electrónica: negro pleno, texto en blanco). */ :root[data-theme="eink"] .bg-green-600, :root[data-theme="eink"] .bg-green-500, :root[data-theme="eink"] .bg-red-600, :root[data-theme="eink"] .bg-red-500, :root[data-theme="eink"] .hover\:bg-green-500:hover, :root[data-theme="eink"] .hover\:bg-red-500:hover, :root[data-theme="eink"] .hover\:bg-red-600:hover { background-color: var(--e-ink) !important; border-color: var(--e-ink); color: var(--e-white) !important; } :root[data-theme="eink"] .bg-green-600 *, :root[data-theme="eink"] .bg-red-600 *, :root[data-theme="eink"] .bg-green-500 *, :root[data-theme="eink"] .bg-red-500 * { color: var(--e-white) !important; } /* Hover de filas y chips: un escalón de gris, sin más. */ :root[data-theme="eink"] [class*="hover:bg-gray"]:hover { background-color: var(--e-sunk) !important; } /* --- Tailwind: texto y filetes -------------------------------------------- */ :root[data-theme="eink"] [class*="text-white"], :root[data-theme="eink"] [class*="text-gray-200"], :root[data-theme="eink"] [class*="text-gray-300"], :root[data-theme="eink"] [class*="text-green-3"], :root[data-theme="eink"] [class*="text-green-4"], :root[data-theme="eink"] [class*="text-green-5"], :root[data-theme="eink"] [class*="text-blue-3"], :root[data-theme="eink"] [class*="text-blue-4"], :root[data-theme="eink"] [class*="text-red-3"], :root[data-theme="eink"] [class*="text-red-4"], :root[data-theme="eink"] [class*="text-yellow-3"], :root[data-theme="eink"] [class*="text-yellow-4"], :root[data-theme="eink"] [class*="text-amber-4"], :root[data-theme="eink"] [class*="text-purple-4"], :root[data-theme="eink"] [class*="text-rose-4"] { color: var(--e-ink) !important; } :root[data-theme="eink"] [class*="text-gray-400"], :root[data-theme="eink"] [class*="placeholder-gray"]::placeholder { color: var(--e-mute) !important; } :root[data-theme="eink"] [class*="text-gray-500"], :root[data-theme="eink"] [class*="text-gray-600"], :root[data-theme="eink"] [class*="text-gray-700"] { color: var(--e-mute-2) !important; } /* Bordes de panel: filete fuerte, para que cada tarjeta tenga un canto legible (la diferencia de tono entre superficies es mínima en esta paleta). */ :root[data-theme="eink"] [class*="border-gray"], :root[data-theme="eink"] [class*="border-green"], :root[data-theme="eink"] [class*="border-red"], :root[data-theme="eink"] [class*="border-yellow"], :root[data-theme="eink"] [class*="border-blue"] { border-color: var(--e-rule) !important; } /* Separadores internos de lista o tabla: filete suave, no compiten con el canto. */ :root[data-theme="eink"] [class*="divide-gray"] > * + * { border-color: var(--e-rule-2) !important; } :root[data-theme="eink"] [class*="focus:ring"]:focus, :root[data-theme="eink"] [class*="focus:border"]:focus { --tw-ring-color: transparent; border-color: var(--e-ink) !important; outline: 2px solid var(--e-ink); outline-offset: -1px; } /* --- Tailwind: chrome (barra lateral y cabecera) --------------------------- */ /* La franja de chrome del dispositivo: trama al 11 %, no un plano de color. */ :root[data-theme="eink"] #sidebar { background-color: var(--e-sunk) !important; border-right: 1px solid var(--e-rule) !important; } :root[data-theme="eink"] #sidebar > div.h-16, :root[data-theme="eink"] header.sticky { background: var(--e-sunk) var(--dither-11) !important; border-color: var(--e-rule) !important; } /* Marca: el cuadro verde pasa a tinta plena con el glifo en blanco. */ :root[data-theme="eink"] #sidebar .bg-green-600 svg, :root[data-theme="eink"] .bg-green-600 > svg { color: var(--e-white) !important; } /* Ítem activo de navegación: inversión, como la selección de un e-reader. */ :root[data-theme="eink"] #sidebar a.bg-gray-800 { background-color: var(--e-ink) !important; color: var(--e-white) !important; } :root[data-theme="eink"] #sidebar a.bg-gray-800 svg { color: var(--e-white) !important; } /* ========================================================================== 3. pages/whatsapp-chat.php (Bootstrap + CSS propio) ========================================================================== */ :root[data-theme="eink"] .app-container { background: var(--e-paper) !important; border-left: 1px solid var(--e-rule); border-right: 1px solid var(--e-rule); } :root[data-theme="eink"] .sidebar { border-right: 1px solid var(--e-rule) !important; } :root[data-theme="eink"] .sidebar-header { background: var(--e-sunk) var(--dither-11) !important; color: var(--e-ink) !important; border-bottom: 1px solid var(--e-rule); } :root[data-theme="eink"] .filter-tabs, :root[data-theme="eink"] .search-box, :root[data-theme="eink"] .chat-window-header, :root[data-theme="eink"] .chat-input-area { background: var(--e-sunk) !important; border-color: var(--e-rule) !important; } :root[data-theme="eink"] .filter-tab { color: var(--e-mute) !important; } :root[data-theme="eink"] .filter-tab:hover { background: var(--e-sunk) !important; } :root[data-theme="eink"] .filter-tab.active { color: var(--e-ink) !important; background: var(--e-white) !important; border-bottom-color: var(--e-ink) !important; font-weight: 600; } :root[data-theme="eink"] .chat-list { background: var(--e-white); } :root[data-theme="eink"] .chat-item { border-bottom: 1px solid var(--e-rule-2) !important; background: var(--e-white); } /* Con el papel en blanco, el hover ya no puede ser "un blanco algo distinto": baja al gris de chrome, que es el único escalón que queda. */ :root[data-theme="eink"] .chat-item:hover { background: var(--e-sunk) !important; } /* Conversación abierta: inversión total de la fila. */ :root[data-theme="eink"] .chat-item.active, :root[data-theme="eink"] .chat-item.active:hover { background: var(--e-ink) !important; } :root[data-theme="eink"] .chat-item.active .chat-name, :root[data-theme="eink"] .chat-item.active .chat-time, :root[data-theme="eink"] .chat-item.active .chat-preview, :root[data-theme="eink"] .chat-item.active .type-icon { color: var(--e-white) !important; } :root[data-theme="eink"] .chat-item.active .chat-avatar { background: var(--e-white) !important; color: var(--e-ink) !important; } /* Sobre la fila invertida los controles se redibujan en blanco; el estado "compartido" sigue siendo el único relleno sólido. */ :root[data-theme="eink"] .chat-item.active .action-btn { background: transparent !important; border: 1px solid var(--e-white) !important; color: var(--e-white) !important; } :root[data-theme="eink"] .chat-item.active .btn-success.action-btn { background: var(--e-white) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] .chat-item.active .unread-badge { background: var(--e-white) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] .chat-name { color: var(--e-ink); } :root[data-theme="eink"] .chat-time, :root[data-theme="eink"] .chat-preview, :root[data-theme="eink"] .type-icon, :root[data-theme="eink"] .group-participants, :root[data-theme="eink"] .history-count, :root[data-theme="eink"] .message-meta { color: var(--e-mute) !important; } :root[data-theme="eink"] .chat-avatar, :root[data-theme="eink"] .chat-item.group .chat-avatar, :root[data-theme="eink"] .chat-item.status .chat-avatar, :root[data-theme="eink"] .chat-window-header .chat-avatar { background: var(--e-sunk) !important; background-image: none !important; color: var(--e-ink) !important; border: 1px solid var(--e-rule); } :root[data-theme="eink"] .unread-badge { background: var(--e-ink) !important; color: var(--e-white) !important; } :root[data-theme="eink"] .group-badge, :root[data-theme="eink"] .status-badge { background: transparent !important; background-image: none !important; color: var(--e-mute) !important; border: 1px solid var(--e-rule); letter-spacing: 0.06em; } :root[data-theme="eink"] .chat-item.active .group-badge, :root[data-theme="eink"] .chat-item.active .status-badge { color: var(--e-white) !important; border-color: var(--e-white); } /* Fondo del hilo: trama muy tenue en vez del estampado de WhatsApp. */ :root[data-theme="eink"] .chat-messages { background: var(--e-paper) var(--dither-6) !important; } /* Firma del tema: la densidad de trama dice de quién es el mensaje. Recibido = papel liso. Enviado = tramado. Sin un solo matiz de color. */ :root[data-theme="eink"] .message { border: 1px solid var(--e-rule); border-radius: 3px; } :root[data-theme="eink"] .message.incoming { background: var(--e-white) !important; } :root[data-theme="eink"] .message.outgoing { background: var(--e-white) var(--dither-11) !important; } :root[data-theme="eink"] .message.group-msg .participant-name { color: var(--e-ink) !important; font-family: var(--e-font-ui); letter-spacing: 0.02em; } /* El reproductor nativo no se puede repintar; al menos se le quita el color para que no sea la única mancha cromática de la pantalla. */ :root[data-theme="eink"] .media-audio audio { filter: grayscale(1) contrast(1.05); } :root[data-theme="eink"] .media-missing { color: var(--e-mute-2) !important; } :root[data-theme="eink"] .chat-input { background: var(--e-white) !important; border: 1px solid var(--e-rule) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] .empty-state { color: var(--e-mute) !important; } :root[data-theme="eink"] .empty-state i { color: var(--e-rule) !important; } /* --- Bootstrap ------------------------------------------------------------ */ :root[data-theme="eink"] .btn-success, :root[data-theme="eink"] .btn-danger, :root[data-theme="eink"] .btn-primary { background: var(--e-ink) !important; border-color: var(--e-ink) !important; color: var(--e-white) !important; } :root[data-theme="eink"] .btn-light, :root[data-theme="eink"] .btn-secondary { background: var(--e-white) !important; border-color: var(--e-rule) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] [class*="btn-outline-"] { background: transparent !important; border-color: var(--e-rule) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] [class*="btn-outline-"]:hover { background: var(--e-sunk) !important; } :root[data-theme="eink"] .badge, :root[data-theme="eink"] [class*="bg-secondary"], :root[data-theme="eink"] [class*="bg-light"], :root[data-theme="eink"] [class*="bg-info"], :root[data-theme="eink"] [class*="bg-success"] { background: var(--e-sunk) !important; background-image: none !important; color: var(--e-ink) !important; border: 1px solid var(--e-rule); } :root[data-theme="eink"] .modal-content, :root[data-theme="eink"] .dropdown-menu { background: var(--e-white) !important; border: 1px solid var(--e-rule) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] .modal-header, :root[data-theme="eink"] .modal-footer { border-color: var(--e-rule-2) !important; } :root[data-theme="eink"] .form-control, :root[data-theme="eink"] .input-group-text { background: var(--e-white) !important; border-color: var(--e-rule) !important; color: var(--e-ink) !important; } :root[data-theme="eink"] .text-muted { color: var(--e-mute) !important; } :root[data-theme="eink"] .text-primary, :root[data-theme="eink"] .text-dark { color: var(--e-ink) !important; } /* --- El switcher en E-Ink -------------------------------------------------- */ :root[data-theme="eink"] .theme-switch { border-color: var(--e-rule) !important; background: var(--e-white); color: var(--e-ink); border-radius: 999px !important; } :root[data-theme="eink"] .theme-switch__opt { opacity: 1; color: var(--e-mute) !important; } :root[data-theme="eink"] .theme-switch__opt[aria-pressed="true"] { background: var(--e-ink) !important; color: var(--e-white) !important; } /* --- Barras de scroll ------------------------------------------------------ */ :root[data-theme="eink"] ::-webkit-scrollbar-track { background: var(--e-sunk); } :root[data-theme="eink"] ::-webkit-scrollbar-thumb { background: var(--e-rule); border-radius: 0; } :root[data-theme="eink"] ::-webkit-scrollbar-thumb:hover { background: var(--e-mute-2); }