:root { /* Paleta derivada del logo Biotec: gris acero del wordmark + el azul petróleo del isotipo celular como único acento cromático. Clínico, sobrio, no el azul Material saturado de antes. */ --azul: #00486c; /* petróleo de marca (acento primario) */ --azul-700: #00354f; /* petróleo hover/activo */ --azul-50: #e7eef2; /* tinte petróleo muy claro (focus ring, fondos) */ --azul-100: #d6e2e9; --grad: linear-gradient(135deg, #00486c 0%, #006089 100%); --gris: #eef1f3; /* fondo: gris azulado frío, no blanco puro */ --panel: #ffffff; --borde: #dde3e7; /* hairline */ --borde-fuerte: #c6ced4; --rojo: #b3261e; --verde: #1b7a3d; --ambar: #9a6a00; --ink: #16202a; /* títulos */ --texto: #28333d; --texto-2: #5d6975; --texto-3: #5f6b77; /* gris-azulado: oscurecido a WCAG AA (≥4.5:1 sobre blanco y sobre --gris) */ --acero: #4a5560; /* gris acero del wordmark */ --sombra-sm: 0 1px 2px rgba(16,32,42,.05); --sombra: 0 4px 14px rgba(16,32,42,.08), 0 1px 3px rgba(16,32,42,.05); --sombra-lg: 0 18px 48px rgba(16,32,42,.18); --r: 12px; --r-sm: 8px; --ease: cubic-bezier(.22,.61,.36,1); --pulso: cubic-bezier(.45,0,.2,1); /* Identidad del agente IA (estilo Gemini): superficie lavanda, borde con el degradé azul→púrpura→magenta, resplandor y púrpura de etiqueta. Un solo lugar para afinar el look, reutilizado por la burbuja del bot y el indicador "procesando". */ --ia-surface: #f7f6ff; --ia-grad: linear-gradient(135deg, #4285f4 0%, #9b72cb 50%, #d96570 100%); --ia-glow: 0 8px 20px -10px rgba(123,97,255,.45); --ia-fg: #7b61c9; } /* ---- Tema oscuro (PAN-14, admin-design-system) ------------------------- Conmutable con el toggle del nav (persiste en localStorage; default = el del sistema). Redefine los tokens de color y oscurece las pocas superficies con color fijo (chips, burbujas de chat) para mantener contraste legible. No rediseña componentes: solo cambia la paleta. */ [data-theme="dark"] { --azul: #5aa9d8; --azul-700: #7bbbe3; --azul-50: #1e4257; --azul-100: #27566f; --grad: linear-gradient(135deg, #2b6f93 0%, #357fa6 100%); --gris: #10161b; --panel: #18222b; --borde: #2a3742; --borde-fuerte: #3a4a57; --rojo: #ef6b62; --verde: #54c07c; --ambar: #d9a441; --ink: #eef3f7; --texto: #d6dee4; --texto-2: #a7b3bd; --texto-3: #9aa7b1; --acero: #9aa7b1; --fondo-2: #1e2a34; --sombra-sm: 0 1px 2px rgba(0,0,0,.4); --sombra: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --sombra-lg: 0 18px 48px rgba(0,0,0,.6); --ia-surface: #211f33; --ia-glow: 0 8px 20px -10px rgba(123,97,255,.55); --ia-fg: #bda9f0; } /* Chips/badges con tinte fijo claro → tinte oscuro equivalente (texto = acento). */ [data-theme="dark"] .appt-badge.confirmed, [data-theme="dark"] .venc.verde, [data-theme="dark"] .pill.sent, [data-theme="dark"] .camp-badge.ok, [data-theme="dark"] .bot-toggle .on { background: #13321f; border-color: #1f5235; } [data-theme="dark"] .appt-badge.pending, [data-theme="dark"] .badge.paused, [data-theme="dark"] .venc.ambar, [data-theme="dark"] .camp-badge.partial, [data-theme="dark"] .warn, [data-theme="dark"] .appt-edit-warn, [data-theme="dark"] .pause-banner { background: #382c10; border-color: #5a4a1d; } [data-theme="dark"] .warn { color: #e9d3a1; } [data-theme="dark"] .appt-badge.cancelled, [data-theme="dark"] .venc.rojo, [data-theme="dark"] .pill.failed, [data-theme="dark"] .camp-badge.fail, [data-theme="dark"] .bot-toggle .off { background: #3a1a18; border-color: #5e2620; } /* Burbujas del chat y superficies sueltas con color fijo. */ [data-theme="dark"] .msg.user { background: #222d36; } [data-theme="dark"] .msg.human { background: #13321f; border-color: #1f5235; color: #bfe9cd; } [data-theme="dark"] .msg.campaign { background: #382c10; border-color: #5a4a1d; color: #e9d3a1; } [data-theme="dark"] .env-preview { color: var(--texto); } [data-theme="dark"] .hl { background: #7a5b00; color: #fff; } [data-theme="dark"] button:hover { background: #222d36; } [data-theme="dark"] .add { background: #1c262f; } [data-theme="dark"] .load-more { background: #1c262f; } [data-theme="dark"] .load-more:hover { background: #243039; } [data-theme="dark"] .env-table tr:nth-child(even):not(:first-child) td { background: #1c262f; } [data-theme="dark"] .env-table tr.row-bad td { background: #2e1d1c; } * { box-sizing: border-box; } body { font-family: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", sans-serif; margin: 0; background: var(--gris); color: var(--texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1; /* cifras tabulares: datos alineados */ } /* Eyebrow / micro-rótulo: el rótulo de instrumento clínico. */ .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); } header { background: var(--panel); color: var(--ink); padding: 13px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); position: relative; z-index: 5; } /* Logo de marca: el PNG real sobre superficie limpia (no invertido). */ .brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px; } .brand-logo { height: 30px; width: auto; display: block; } .brand-divider { width: 1px; height: 26px; background: var(--borde); flex: 0 0 auto; } header h1 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--texto-2); white-space: nowrap; } .bot-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bot-toggle button { border: 1px solid transparent; border-radius: 999px; padding: 7px 15px 7px 13px; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .15s ease, border-color .15s ease; box-shadow: var(--sombra-sm); } .bot-toggle button:hover { transform: translateY(-1px); box-shadow: var(--sombra); } .bot-toggle button:active { transform: translateY(0); } /* El punto de estado late cuando el bot está activo (vivo). */ .bot-toggle .on { background: #eaf6ef; color: var(--verde); border-color: #cce8d6; } .bot-toggle .off { background: #fbeae8; color: var(--rojo); border-color: #f1cfcb; } .bot-toggle button.danger-armed { background: var(--rojo); color: #fff; border-color: var(--rojo); } nav { background: var(--panel); border-bottom: 1px solid var(--borde); padding: 0 20px; display: flex; gap: 2px; align-items: center; position: sticky; top: 0; z-index: 4; } nav button.tab { position: relative; border: none; background: none; padding: 14px 14px; font-size: 13.5px; color: var(--texto-2); border-radius: 0; transition: color .15s ease; display: inline-flex; align-items: center; gap: 7px; } /* Subrayado activo animado con transform (no border): se desliza al activarse. */ nav button.tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2.5px; background: var(--azul); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .28s var(--ease); } nav button.tab:hover { background: none; color: var(--ink); } nav button.tab.active { color: var(--azul); font-weight: 600; } nav button.tab.active::after { transform: scaleX(1); } nav .spacer { flex: 1; } .nav-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 0 rgba(0,72,108,.5); } .nav-count.show { display: inline-block; animation: countPop .3s var(--ease); } @keyframes countPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } main { max-width: 880px; margin: 0 auto; padding: 24px 16px 120px; animation: viewIn .32s var(--ease); } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hint { color: var(--texto-2); font-size: 13px; margin: 8px 0 16px; line-height: 1.55; } .kbd-hint { color: var(--texto-3); font-size: 12px; margin: 2px 0 14px; line-height: 1.9; } .kbd-hint kbd { font-family: inherit; font-size: 11px; color: var(--texto-2); background: var(--gris); border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } .warn { color: #6b4e00; background: #fbf4e2; border: 1px solid #ecdcae; border-radius: var(--r-sm); padding: 11px 12px; } .card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra-sm); transition: box-shadow .18s var(--ease), border-color .18s ease; } .card:focus-within { box-shadow: var(--sombra); border-color: var(--borde-fuerte); } .card-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .card-head input { flex: 1; font-size: 15px; font-weight: 600; padding: 9px 11px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); } textarea { width: 100%; min-height: 140px; font-size: 14px; line-height: 1.55; padding: 11px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); resize: vertical; font-family: inherit; color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease; } input, select { transition: border-color .15s ease, box-shadow .15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); } /* --- Sistema de botones ------------------------------------------------- Set acotado de variantes; preferí reusar una de estas antes que inventar estilos sueltos. La base 'button' ya da los CUATRO estados coherentes (hover / active / disabled / focus-visible con anillo --azul-50); cada variante solo cambia color/relleno/tamaño, nunca el foco. - (base) button : neutro (borde gris, fondo claro). Default. - .icon : neutro compacto (acciones de barra: Actualizar, Salir…). - .save : primario azul de marca (acción afirmativa: Guardar, Enviar). - .add : "agregar" punteado de ancho completo (sumar sección/fila). - .danger : peligro en rojo (acción destructiva en reposo). - .danger-armed : peligro armado (segundo paso, relleno rojo). - .conv-resume : pastilla azul outline (Reanudar bot en una fila). Los estados hover/active/disabled/focus son consistentes en TODAS gracias a las reglas base de abajo; las variantes no los redefinen (salvo el color de hover propio de cada acento). */ button { cursor: pointer; border: 1px solid var(--borde-fuerte); background: var(--panel); border-radius: var(--r-sm); padding: 9px 13px; font-size: 14px; color: var(--texto); transition: background .15s ease, border-color .15s ease, transform .12s var(--ease), box-shadow .15s ease; } button:hover { background: #f1f4f6; border-color: var(--borde-fuerte); } button:active { transform: translateY(1px); } button:disabled { opacity: .5; cursor: default; transform: none; } button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--azul-50); border-color: var(--azul); } .icon { padding: 8px 11px; font-size: 13px; } .danger { color: var(--rojo); } .danger:hover { background: #fbeae8; border-color: #f1cfcb; } .danger-armed { background: var(--rojo); border-color: var(--rojo); color: #fff; } .danger-armed:hover { background: #921f18; border-color: #921f18; } .add { width: 100%; padding: 13px; border-style: dashed; border-color: var(--borde-fuerte); color: var(--azul); font-weight: 600; background: #fafbfc; } .add:hover { background: var(--azul-50); border-color: var(--azul); } details { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 0 16px; margin-top: 26px; box-shadow: var(--sombra-sm); } summary { cursor: pointer; font-weight: 600; padding: 15px 2px; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; } summary::-webkit-details-marker { display: none; } summary::before { content: "›"; display: inline-block; font-size: 18px; line-height: 1; color: var(--texto-3); transition: transform .2s var(--ease); } details[open] > summary::before { transform: rotate(90deg); } details textarea { min-height: 320px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; } .rules-actions { display: flex; gap: 12px; align-items: center; padding: 12px 0 16px; } .cupo-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; cursor: pointer; } .cupo-toggle input { width: auto; } .cupo-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 8px 0; } .cupo-fields input:disabled { opacity: .5; cursor: not-allowed; } .cupo-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); } .cupo-fields input { width: 140px; } #cupo-availability { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; } .cupo-slot { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--borde); color: var(--texto-2); } .cupo-slot.full { background: var(--rojo); border-color: var(--rojo); color: #fff; } footer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-top: 1px solid var(--borde); padding: 12px 16px; box-shadow: 0 -2px 16px rgba(16,32,42,.05); } .footer-inner { max-width: 880px; margin: 0 auto; display: flex; gap: 12px; align-items: center; } .save { background: var(--azul); color: #fff; border: 1px solid var(--azul); font-weight: 600; padding: 11px 24px; box-shadow: var(--sombra-sm); } .save:hover { background: var(--azul-700); border-color: var(--azul-700); box-shadow: var(--sombra); } .status { font-size: 13px; color: var(--texto-2); transition: color .15s ease; } .status.ok { color: var(--verde); } .status.error { color: var(--rojo); } #login { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 30px 28px; max-width: 400px; margin: 9vh auto; box-shadow: var(--sombra-lg); text-align: center; animation: loginIn .4s var(--ease); } @keyframes loginIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } #login .login-logo { width: auto; height: 38px; margin: 2px auto 18px; display: block; } #login .login-pulse { height: 2px; width: 48px; margin: 0 auto 18px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--azul), transparent); } #login strong { font-size: 16px; color: var(--ink); letter-spacing: -.01em; } #login .hint { text-align: center; } #login input { width: 100%; padding: 12px; font-size: 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); margin: 12px 0; } #login button { width: 100%; background: var(--azul); color: #fff; border: 1px solid var(--azul); font-weight: 600; padding: 12px; font-size: 15px; } #login button:hover { background: var(--azul-700); border-color: var(--azul-700); } .hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Toasts */ #toasts { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); } .toast { background: var(--ink); color: #fff; padding: 11px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; box-shadow: var(--sombra-lg); display: flex; align-items: center; gap: 9px; min-width: 220px; max-width: 360px; animation: toastIn .3s var(--ease); border-left: 3px solid var(--azul); } .toast .t-ico { font-size: 13px; line-height: 1; opacity: .9; } .toast .t-msg { flex: 1 1 auto; } /* Botón de acción del toast (p. ej. "Deshacer"): claro sobre el fondo oscuro. */ .toast .t-action { flex: 0 0 auto; margin-left: 4px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease; } .toast .t-action:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.45); } .toast .t-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .toast.ok { border-left-color: #2ecc71; } .toast.error { border-left-color: #ff6b6b; } .toast.leaving { animation: toastOut .22s var(--ease) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(24px); } } /* Banner de reconexión: barra ámbar fija arriba, centrada. No tapa el contenido (los toasts viven a la derecha; este se centra). Persiste hasta reconectar. */ .reconnect-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px); background: #fbf4e2; color: #6b4e00; border: 1px solid #ecd99e; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; box-shadow: var(--sombra-lg); animation: bannerDown .3s var(--ease); } .reconnect-banner.hidden { display: none; } .reconnect-banner .rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); flex: 0 0 auto; animation: rcPulse 1.1s var(--pulso) infinite; } @keyframes rcPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes bannerDown { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Skeletons */ .skel { background: linear-gradient(90deg, #eef1f3 25%, #e1e6ea 50%, #eef1f3 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skel-row { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px; margin-bottom: 8px; box-shadow: var(--sombra-sm); } .skel-line { height: 12px; margin-bottom: 8px; } .skel-stat { height: 76px; border-radius: var(--r); } /* Conversaciones */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 15px 16px 14px; box-shadow: var(--sombra-sm); overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s ease; } /* Acento de instrumento: una fina barra petróleo a la izquierda al pasar. */ .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azul); transform: scaleY(0); transform-origin: top; transition: transform .25s var(--ease); } .stat:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--borde-fuerte); } .stat:hover::before { transform: scaleY(1); } .stat .num { font-size: 27px; font-weight: 700; color: var(--azul); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat .lbl { font-size: 10.5px; color: var(--texto-3); margin-top: 5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .conv-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .conv-controls input[type=search] { flex: 1; min-width: 160px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); } .conv-controls select { padding: 10px 10px; font-size: 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); background: var(--panel); } .conv-controls label { font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 5px; cursor: pointer; } /* Indicador de frescura "Actualizado hace X": tenue, a la derecha de los controles. Late brevemente al refrescar (señal de datos vivos). */ .fresh-ind { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; } .fresh-ind.pulse { animation: freshPulse .6s var(--ease); } @keyframes freshPulse { 0% { color: var(--azul); } 100% { color: var(--texto-3); } } /* Filtros tipo badge de la lista de conversaciones (canal + no leídos). */ .chan-filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .chan-filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; line-height: 1; border: 1px solid var(--borde-fuerte); background: var(--panel); color: var(--texto-2); } .chan-filter:hover { background: var(--gris); } .chan-filter .chan-icon { width: 14px; height: 14px; flex: 0 0 auto; } /* Inactivo: texto neutro fuerte e ícono con el color de marca (--cf, seteado por el JS). channelIcon() pone el fill inline, así que para el badge lo forzamos con !important (única forma de ganarle a un estilo inline en CSS). Activo: relleno con el color de marca y texto + ícono en blanco. */ .chan-filter[data-channel]:not(.all) { color: var(--texto); } .chan-filter[data-channel]:not(.all) .chan-icon { fill: var(--cf) !important; } .chan-filter[data-channel]:not(.all).active { background: var(--cf); } .chan-filter.all.active { background: var(--azul); } .chan-filter.active { color: #fff !important; border-color: transparent; } /* Más específico que la regla del ícono inactivo (:not(.all)) para ganarle cuando el badge está activo: el ícono pasa a blanco sobre el relleno. */ .chan-filter[data-channel].active .chan-icon { fill: #fff !important; } /* "No leídos": toggle aparte; activo en ROJO (señal urgente: alguien espera), con su contador. "Bot sin revisar": toggle aparte; activo en AZUL de marca (cola tranquila: el bot ya contestó). Dos señales bien distintas. */ .chan-filter.unread.active { background: var(--rojo); } .chan-filter.bot.active { background: var(--azul); } .cf-count { display: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; } .cf-count.show { display: inline-block; } .chan-filter.unread.active .cf-count { background: #fff; color: var(--rojo); } .chan-filter.bot.active .cf-count { background: #fff; color: var(--azul); } /* Filtros de estado server-side: activos con su color de acento (ámbar para "con agenda pendiente", rojo para "opt-out"). */ .chan-filter.pending.active { background: var(--ambar); } .chan-filter.optout.active { background: var(--rojo); } /* Resaltado de la coincidencia de búsqueda en el nombre/número de la fila. */ .hl { background: #fde68a; color: var(--texto); border-radius: 2px; padding: 0 1px; } .conv-row { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 13px 15px; margin-bottom: 9px; cursor: pointer; display: flex; gap: 12px; align-items: center; box-shadow: var(--sombra-sm); transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s ease; } /* Sin translate en hover: dentro de .conv-scroll (overflow), levantar la fila recortaba su borde superior contra el tope del contenedor. La sombra y el borde alcanzan como señal de interacción. */ .conv-row:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); } /* Foco visible al navegar la lista por teclado (↑/↓): mismo anillo azul que los botones (:focus-visible global), para que se note qué fila está activa. */ .conv-row:focus { outline: none; } .conv-row:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); } /* Animación de entrada SOLO para filas recién aparecidas (reconciliación): las que ya estaban no se re-animan en cada poll (sin parpadeo). */ .conv-row.is-new { animation: convRowIn .26s var(--ease); } @keyframes convRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Encabezado de sección de la lista ("No leídos" / "Leídos"). Discreto y sticky dentro del scroll de la lista, como los separadores de WhatsApp. */ .conv-section { position: sticky; top: 0; z-index: 1; padding: 6px 4px 6px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); background: var(--gris); } /* 🔴 No leído (alguien espera respuesta): borde + punto rojo PULSANTE (señal urgente). El paciente escribió y nadie contestó. */ .conv-row.unread { border-color: var(--rojo); } .conv-row.unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: 0 0 auto; box-shadow: 0 0 0 3px #f6dedc; animation: unreadPulse 2.2s var(--pulso) infinite; } @keyframes unreadPulse { 0%, 100% { box-shadow: 0 0 0 3px #f6dedc; } 50% { box-shadow: 0 0 0 5px rgba(179,38,30,.22); } } /* 🔵 Bot sin revisar (el bot ya contestó, falta que un humano lo mire): borde + punto azul SIN pulso (cola tranquila, no alarma). Visualmente más calmo que el rojo a propósito. */ .conv-row.bot-unreviewed { border-color: var(--azul); } .conv-row.bot-unreviewed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: 0 0 auto; box-shadow: 0 0 0 3px var(--azul-50); } /* En una fila no-leída resaltamos SOLO el texto del último mensaje del paciente (negrita). El rótulo de autor (Bot:/Staff:/Campaña:) no aplica a filas no-leídas, pero lo dejamos siempre tenue y sin negrita por las dudas. */ .conv-row.unread .conv-preview { color: var(--texto); } .conv-row.unread .conv-preview-text { font-weight: 600; } .conv-preview-prefix { color: var(--texto-3); font-weight: 400; } .conv-main { flex: 1; min-width: 0; } .conv-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .conv-id { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Subtítulo tenue: el ID/usuario crudo cuando ya mostramos un nombre. */ .conv-sub { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Avatar redondo. Foto si la hay; si no, inicial sobre un color sólido. */ .avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; text-transform: uppercase; overflow: hidden; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .chat-header .avatar { width: 38px; height: 38px; font-size: 15px; } .conv-preview { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-time { font-size: 12px; color: var(--texto-3); white-space: nowrap; } /* Columna de la derecha: hora arriba y, si hay, el badge de no-leídos debajo. */ .conv-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } /* Pastilla numérica de no-leídos, estilo WhatsApp (mismo ámbar que el punto). */ .conv-unread-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e3a900; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; letter-spacing: .2px; } .badge.paused { background: #fbf4e2; color: var(--ambar); } /* Agendas: badges de estado y resumen */ .appt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; letter-spacing: .2px; } .appt-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .appt-badge.pending { background: #fbf4e2; color: var(--ambar); } .appt-badge.confirmed { background: #eaf6ef; color: var(--verde); } .appt-badge.cancelled { background: #fbeae8; color: var(--rojo); } .appt-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; } .appt-sum-card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 11px 14px; box-shadow: var(--sombra-sm); border-left: 4px solid var(--borde); transition: transform .15s ease, box-shadow .15s ease; } .appt-sum-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); } .appt-sum-card.pending { border-left-color: var(--ambar); } .appt-sum-card.confirmed { border-left-color: var(--verde); } .appt-sum-card.cancelled { border-left-color: var(--rojo); } .appt-sum-card .num { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--texto); } .appt-sum-card .lbl { font-size: 12px; color: var(--texto-2); margin-top: 2px; } /* Embudo del KPI de campaña: enviados → respondieron → agendaron → asistieron. */ .camp-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 16px; } .camp-funnel-card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 11px 14px; box-shadow: var(--sombra-sm); border-left: 4px solid var(--azul); } .camp-funnel-card .num { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--texto); } .camp-funnel-card .lbl { font-size: 12px; color: var(--texto-2); margin-top: 2px; } .camp-funnel-card .rate { font-size: 11.5px; color: var(--texto-3); margin-top: 3px; font-variant-numeric: tabular-nums; } /* Acciones por agenda: grilla compacta que hace wrap (sin desbordar). */ .appt-acciones { display: flex; flex-wrap: wrap; gap: 5px; } .appt-acciones .icon { font-size: 12px; padding: 5px 9px; } /* Utilidades (editar, chat): tono más neutro para diferenciarlas de las acciones de estado/asistencia, sin competir visualmente. */ .appt-acciones .act-util { color: var(--texto-2); background: var(--fondo-2, #f6f7f9); } .appt-acciones .act-util:hover { background: var(--azul-50); color: var(--azul); } .appt-turno { font-weight: 600; color: var(--texto); } .appt-when { display: block; font-size: 11.5px; font-weight: 600; margin-top: 2px; } .appt-when.soon { color: var(--ambar); } .appt-when.today { color: var(--azul); } .appt-when.past { color: var(--texto-3); } .appt-acciones { display: flex; gap: 6px; flex-wrap: wrap; } .appt-acciones .ok-act { color: var(--verde); border-color: #cce8d6; } .appt-acciones .ok-act:hover { background: #eaf6ef; } /* Agendas (Fase 1): conmutador de vista, barra de filtros, acciones masivas y vista Calendario por día. Sin librerías: inputs nativos y grid/flex. */ .agendas-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .view-switch { display: inline-flex; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; gap: 2px; } .view-switch-btn { font-size: 13px; font-weight: 600; color: var(--texto-2); background: none; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .12s ease, color .12s ease; } .view-switch-btn[aria-selected="true"] { background: var(--azul); color: #fff; } .agendas-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; } .agendas-filters .filter-input, .agendas-filters .filter-select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--panel); color: var(--texto); } .agendas-filters .filter-input { min-width: 180px; flex: 1 1 180px; max-width: 260px; } .date-presets { display: inline-flex; gap: 2px; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; } .date-preset { font-size: 12.5px; font-weight: 600; color: var(--texto-2); background: none; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .12s ease, color .12s ease; } .date-preset[aria-pressed="true"] { background: var(--azul); color: #fff; } .custom-range { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; } .custom-range label { font-size: 12.5px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; } .custom-range input { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--panel); color: var(--texto); } .bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 9px 12px; margin-bottom: 12px; box-shadow: var(--sombra-sm); position: sticky; top: 46px; z-index: 5; } .bulk-count { font-size: 13px; font-weight: 700; color: var(--texto); margin-right: 4px; } .appt-check input { width: 16px; height: 16px; cursor: pointer; } /* Vista Calendario: encabezado por día + filas (reusa .appt-* del estilo común). */ .agendas-calendar { display: flex; flex-direction: column; gap: 18px; } .cal-day { border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: var(--sombra-sm); } .cal-day-head { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; background: var(--fondo-2, #f6f7f9); border-bottom: 1px solid var(--borde); } .cal-day-head .cal-day-rel { font-size: 13.5px; font-weight: 800; color: var(--texto); letter-spacing: -.2px; } .cal-day-head .cal-day-date { font-size: 12px; color: var(--texto-2); } .cal-day-head .cal-day-count { margin-left: auto; font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; } .cal-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--borde); } .cal-row:first-child { border-top: none; } .cal-row.cancelled { opacity: .55; } .cal-row .cal-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); min-width: 48px; } .cal-row .cal-main { flex: 1 1 auto; min-width: 0; } .cal-row .cal-name { font-weight: 600; color: var(--texto); } .cal-row .cal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* Conmutador de vista (Calendario / Grilla) + vista Grilla horaria (PAN-10). */ .view-switch { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r-sm); overflow: hidden; } .view-switch .view-btn { border: none; border-radius: 0; padding: 7px 14px; background: var(--panel); color: var(--texto-2); font-weight: 600; font-size: 13px; } .view-switch .view-btn + .view-btn { border-left: 1px solid var(--borde); } .view-switch .view-btn:hover { background: var(--azul-50); } .view-switch .view-btn.active { background: var(--azul-50); color: var(--azul); } .agendas-grid-view { display: flex; flex-direction: column; gap: 14px; } .agenda-grid { display: grid; grid-template-columns: 56px 1fr; } .agenda-grid-hour { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--texto-3); font-variant-numeric: tabular-nums; border-top: 1px solid var(--borde); text-align: right; } .agenda-grid-slot { padding: 7px 10px; border-top: 1px solid var(--borde); border-left: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; } .agenda-grid-slot.empty { background: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--gris) 7px, var(--gris) 8px); } .agenda-chip { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--sombra-sm); max-width: 100%; } .agenda-chip.cancelled { opacity: .55; } .agenda-chip .cal-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); } .agenda-chip .cal-main { min-width: 0; } .agenda-chip .cal-name { font-weight: 600; color: var(--texto); } .agenda-chip .cal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* Procedencia (Fase 2) e indicador de nota interna. */ .appt-prov { font-size: 11px; color: var(--texto-3); white-space: nowrap; } .appt-prov.edited { color: var(--azul); font-weight: 600; } .appt-note-ind { font-size: 12px; cursor: default; } .conv-ttl { font-size: 11px; font-weight: 600; color: var(--ambar); white-space: nowrap; } /* Línea de estado "Modo humano": badge + retoma + Reanudar, con aire y wrap en columnas angostas (no se amontona contra la hora ni el título). */ .conv-paused-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; margin-top: 7px; } .conv-resume { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--azul); background: none; border: 1px solid var(--azul); border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; } .conv-paused-meta .conv-resume { margin-left: auto; } .conv-resume:hover { background: var(--azul); color: #fff; } .conv-resume:disabled { opacity: .55; cursor: default; } /* Criterio de iconografía: los canales (WhatsApp/Instagram/Facebook) usan SIEMPRE su SVG (.chan-icon, inline en el bundle) — consistente entre sistemas operativos y reconocible. Los emojis (📎 ⏸️ 🤖 ✦ 📅 📣 ✓ ⚠ ℹ 🔍 💬) quedan para acentos decorativos o estados no críticos; cuando el texto ya informa, se marcan aria-hidden (ver toasts, empty states, pause-banner). */ .chan-icon { width: 17px; height: 17px; display: inline-block; vertical-align: middle; flex: 0 0 auto; } .chan-badge { display: inline-flex; align-items: center; } .chat-header .chan-icon { width: 20px; height: 20px; } .empty { text-align: center; color: var(--texto-3); padding: 40px 0; font-size: 14px; } .empty .empty-icon { font-size: 34px; display: block; margin-bottom: 8px; opacity: .55; } /* "Cargar más" al pie de las listas paginadas */ .load-more { display: block; width: 100%; margin: 10px 0 4px; padding: 9px 0; font-size: 13px; color: var(--texto-2); background: #f3f6f8; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; } .load-more:hover { background: #e9eef1; } .load-more:disabled { opacity: .6; cursor: default; } .load-more.hidden { display: none; } /* --- Split master-detail (Conversaciones, estilo WhatsApp Desktop) ------- En desktop: tira de stats arriba a todo el ancho, y debajo dos columnas (lista ~360px + chat 1fr) que ocupan el alto útil y scrollean por separado. El split es un
(no
), así no le aplica el max-width:880px. */ .convo-split { /* Alto útil = viewport menos header (~57px) y nav (~46px). */ --split-top: 103px; display: grid; grid-template-columns: 360px 1fr; grid-template-rows: auto 1fr; height: calc(100vh - var(--split-top)); background: var(--gris); animation: viewIn .32s var(--ease); } .convo-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 16px 16px 4px; } /* Columna izquierda: controles fijos arriba, filas scrolleables debajo. */ #view-convs.split-list { max-width: none; margin: 0; padding: 12px 8px 12px 16px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); animation: none; } .split-list .conv-controls { flex: 0 0 auto; margin-bottom: 12px; } /* padding-top chico: deja aire para la sombra de la fila activa/hover y evita que el borde superior se recorte contra el tope del contenedor scrolleable. */ .split-list .conv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 3px 6px 0 0; } /* Columna derecha: header arriba, mensajes en el medio (único scroll), caja de respuesta fija al pie. */ #view-chat.split-detail { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; animation: none; } .split-detail .chat-body { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 16px 16px 14px; } .split-detail .chat-body.hidden { display: none; } .split-detail #chat-messages { flex: 1; min-height: 0; max-height: none; } .split-detail .reply-box { flex: 0 0 auto; } /* En desktop la lista siempre se ve: el botón "← Volver" es solo de móvil. */ .split-detail #chat-back { display: none; } /* Estado vacío del panel derecho (sin conversación elegida). */ .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--texto-3); text-align: center; padding: 24px; } .chat-empty.hidden { display: none; } .chat-empty-logo { height: 44px; width: auto; opacity: .28; filter: grayscale(1); } .chat-empty-text { font-size: 14px; margin: 0; } /* Fila seleccionada en la lista (resaltado tenue, como WhatsApp). */ .conv-row.active { border-color: var(--azul); background: var(--azul-50); } .conv-row.active:hover { border-color: var(--azul); } /* Vista de chat */ .chat-header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .chat-header .conv-id { font-size: 17px; } /* Columna título/subtítulo del encabezado del chat y el espaciador flexible. Antes eran style="" inline; la CSP (style-src 'self') los bloquea, así que viven como clases (decompose-admin-panel). */ .chat-title-col { display: flex; flex-direction: column; min-width: 0; } .chat-header-spacer { flex: 1; } .chat-state { font-size: 13px; color: var(--texto-2); margin-bottom: 12px; } /* Estado activo del bot: punto petróleo latiendo, como señal "en línea". */ .chat-state.active { display: flex; align-items: center; gap: 7px; } .chat-state.active::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(0,72,108,.45); animation: livePulse 2s var(--pulso) infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(0,72,108,.4); } 70% { box-shadow: 0 0 0 6px rgba(0,72,108,0); } 100% { box-shadow: 0 0 0 0 rgba(0,72,108,0); } } .pause-banner { display: none; align-items: center; gap: 10px; background: #fbf4e2; border: 1px solid #ecd99e; border-radius: var(--r); padding: 10px 14px; margin-bottom: 12px; } .pause-banner.show { display: flex; animation: bannerIn .3s var(--ease); } @keyframes bannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .pause-banner .pb-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; } .pause-banner .pb-text { font-size: 13px; color: #6b4e00; flex: 1; min-width: 0; } .pause-banner .pb-text b { color: var(--ambar); } .pause-banner .pb-count { font-variant-numeric: tabular-nums; font-weight: 700; } /* padding-right/bottom holgados: el resplandor de las burbujas del bot no queda recortado por el overflow del contenedor. */ .messages { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 18px 20px 20px 16px; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--sombra-sm); } .msg { position: relative; max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: var(--sombra-sm); animation: msgIn .24s var(--ease); } @keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .msg.user { align-self: flex-start; background: #eef1f4; border-bottom-left-radius: 4px; color: var(--texto); } /* --- Identidad del agente automático (IA), estilo Gemini ---------------- La respuesta del bot se lee como salida de IA: superficie lavanda muy suave, un fino borde con el degradé azul→púrpura→magenta de Gemini, un resplandor del mismo tono (contenido, no se recorta) y la chispa ✦. Distinta de la humana (verde) y del cliente (gris, a la izquierda). */ .msg.assistant { align-self: flex-end; background: linear-gradient(var(--ia-surface), var(--ia-surface)) padding-box, var(--ia-grad) border-box; border: 1.5px solid transparent; /* el degradé asoma por el border-box */ border-bottom-right-radius: 4px; color: #2a2440; padding: 11px 15px 9px 28px; /* sangría izquierda para la chispa ✦ */ box-shadow: 0 1px 2px rgba(40,30,70,.06), var(--ia-glow); /* glow Gemini, radio contenido */ } /* Chispa ✦ con el degradé de Gemini, recortado al texto. Estática por defecto: el degradé ya lee como "IA". Solo la respuesta recién llegada (.fresh) late, así evitamos decenas de animaciones infinitas corriendo a la vez en un hilo largo. */ .msg.assistant::before { content: "✦"; position: absolute; left: 10px; top: 10px; font-size: 13px; line-height: 1; font-weight: 700; background: linear-gradient(135deg, #4285f4, #9b72cb 55%, #d96570); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .msg.assistant.fresh::before { animation: aiSpark 3s var(--pulso) infinite; } /* La chispa late suavemente (señal viva de "generado por IA"). */ @keyframes aiSpark { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } } /* Barrido del escáner: una sola pasada de luz, solo en respuestas recién llegadas (.fresh). Los re-renders del polling no lo repiten. */ .msg.assistant.fresh::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(155,114,203,.16) 48%, rgba(255,255,255,.5) 52%, transparent 70%); background-size: 220% 100%; background-position: 130% 0; animation: aiScan 1.25s var(--ease) 1; } @keyframes aiScan { from { background-position: 130% 0; } to { background-position: -60% 0; } } /* La respuesta humana es cálida y verde: una persona, no la máquina. */ .msg.human { align-self: flex-end; background: #eaf6ef; border: 1px solid #cce8d6; color: #14492a; box-shadow: var(--sombra-sm); } .msg.human::before, .msg.human::after { content: none; display: none; } .msg.campaign { align-self: flex-end; background: #fbf4e2; border: 1px solid #ecd99e; color: #6b4e00; box-shadow: var(--sombra-sm); } .msg.campaign::before, .msg.campaign::after { content: none; display: none; } .msg .meta { display: block; font-size: 11px; color: var(--texto-3); margin-top: 5px; font-variant-numeric: tabular-nums; } /* Mensaje optimista (enviando…): atenuado hasta que el server lo confirma. */ .msg.pending { opacity: .6; } /* Falló el envío: marco rojo y meta de error (no desaparece en silencio). */ .msg.failed { border: 1px solid var(--rojo); } .msg.failed .meta { color: var(--rojo); } /* La etiqueta "Bot" en el meta lleva su emoji y el púrpura de Gemini. */ .msg.assistant .meta { color: var(--ia-fg); opacity: .9; font-weight: 600; } /* Indicador "el bot está procesando", estilo Gemini: borde degradé + puntos. */ .ai-thinking { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: linear-gradient(var(--ia-surface), var(--ia-surface)) padding-box, var(--ia-grad) border-box; border: 1.5px solid transparent; box-shadow: var(--ia-glow); animation: msgIn .24s var(--ease); } .ai-thinking .ai-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ia-fg); } .ai-dots { display: inline-flex; gap: 4px; } .ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #4285f4, #9b72cb); display: inline-block; animation: aiPulse 1.2s var(--pulso) infinite; } .ai-dots i:nth-child(2) { animation-delay: .18s; } .ai-dots i:nth-child(3) { animation-delay: .36s; } @keyframes aiPulse { 0%, 100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1.15); opacity: 1; } } .msg img.media-img { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; } .msg audio.media-audio { display: block; width: 240px; max-width: 100%; margin-bottom: 4px; } .msg a.media-doc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--azul); text-decoration: none; margin-bottom: 4px; } .msg a.media-doc:hover { text-decoration: underline; } .msg .media-loading { font-size: 12.5px; color: var(--texto-3); font-style: italic; } .reply-box { margin-top: 14px; } /* Auto-grow: el alto base es min-height; el JS sube el height hasta un máximo y ahí aparece el scroll interno. resize: none para que el alto lo maneje el auto-grow y no el tirador del navegador. */ .reply-box textarea { min-height: 72px; max-height: 200px; resize: none; overflow-y: auto; } .reply-actions { display: flex; gap: 12px; align-items: center; margin-top: 9px; flex-wrap: wrap; } /* Input de archivo oculto: lo dispara el botón Adjuntar por JS (.click()). Antes era style="display:none" inline, pero la CSP del panel (style-src 'self', sin 'unsafe-inline') bloquea los atributos style, así que el ocultar vive en esta clase (decompose-admin-panel: assets propios, no inline). */ .reply-file-hidden { display: none; } .attach-btn { font-size: 13.5px; padding: 8px 12px; cursor: pointer; } .attach-btn:disabled { opacity: .5; cursor: not-allowed; } .attach-preview { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--texto-2); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 6px 10px; } .attach-preview.show { display: inline-flex; } .attach-preview button { font-size: 12px; padding: 2px 8px; cursor: pointer; } /* Miniatura de la imagen adjunta (object URL). Vacía para documentos. */ .attach-thumb { display: none; } .attach-thumb.show { display: inline-flex; } .attach-thumb img { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; } /* Spinner del botón "Enviar" mientras sube. Reemplaza el texto por un aro que gira; respeta prefers-reduced-motion (se queda quieto). */ #reply-send.loading { color: transparent; position: relative; pointer-events: none; } #reply-send.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Zona de drop activa: borde punteado sobre el cuerpo del chat al arrastrar. */ #chat-body.drag-over { outline: 2px dashed var(--azul); outline-offset: -6px; border-radius: var(--r); background: rgba(0,72,108,.05); } /* Envíos */ .env-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .env-tab { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; } .env-tab.active { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; } .env-h { font-size: 15px; margin: 0 0 12px; color: var(--ink); letter-spacing: -.01em; } /* Ajustes puntuales de spacing/layout en Envíos que antes eran style="" inline. La CSP del panel (style-src 'self', sin 'unsafe-inline') bloquea los atributos style, así que se vuelven clases (decompose-admin-panel). */ .env-gap-sm { margin-top: 8px; } .env-gap-md { margin-top: 10px; } .env-gap-lg { margin-top: 12px; } .env-mb-sm { margin-bottom: 10px; } .env-btn-auto { width: auto; } .env-fill { flex: 1; margin: 0; } /* .hint en línea (dentro de un