/*
 * RespuestaChat.css — estilos del sello del semáforo, una sola copia para el chat de
 * cuentas (FrontRobinH.php) y para el chat del visitante de la landing. Lo pinta
 * pintarSemaforo (RespuestaChat.js).
 *
 * Movido de FrontRobinH.php el 25-oct-2026 con la misma prioridad que tenía cada regla:
 * antes colgaban de `.upo-ai` (el contenedor del chat) y ahora cuelgan del propio
 * sello (.bubble-semaforo) o de su sitio (.bubble-actions), así sirven en cualquier página.
 * Los colores salen de las variables del tema de la página; si la página no las
 * define, se usa el valor del tema claro del chat.
 */
/* Sello del semáforo (Fase 5): chip discreto junto a Copiar/PDF; al pasar el ratón, llegar con Tab o pulsar, tarjeta con los 3 criterios. */
.bubble-actions .bubble-semaforo{position:relative;}
.bubble-semaforo .semaforo-chip{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--border-color, #e5e7eb);background:var(--bg-secondary, #ffffff);color:var(--text-secondary, #64748b);cursor:pointer;font-size:11px;font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all var(--transition-fast, 0.15s ease);white-space:nowrap;}
.bubble-semaforo .semaforo-chip:hover,.bubble-semaforo.open .semaforo-chip{background:var(--bg-primary, #f8fafc);color:var(--text-primary, #0f172a);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.12);}
.bubble-semaforo .semaforo-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,0.04);}
.bubble-semaforo.semaforo--verde .semaforo-dot{background:#10b981;}
.bubble-semaforo.semaforo--ambar .semaforo-dot{background:#f59e0b;}
.bubble-semaforo.semaforo--rojo .semaforo-dot{background:#ef4444;}
.bubble-semaforo.semaforo--verde .semaforo-chip:hover{border-color:#10b981;}
.bubble-semaforo.semaforo--ambar .semaforo-chip:hover{border-color:#f59e0b;}
.bubble-semaforo.semaforo--rojo .semaforo-chip:hover{border-color:#ef4444;}
.bubble-semaforo .semaforo-card{display:none;position:absolute;bottom:34px;right:0;width:min(360px,80vw);box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;border-radius:12px;border:1px solid var(--border-color, #e5e7eb);background:var(--bg-primary, #f8fafc);color:var(--text-primary, #0f172a);box-shadow:0 8px 24px rgba(0,0,0,0.12);font-size:12px;line-height:1.5;text-align:left;z-index:20;animation:bannerFadeIn .15s ease-out;}
.bubble-semaforo.open .semaforo-card{display:block;}
/* 28-oct-2026: con la tarjeta abierta, el bubble pasa por encima de los siguientes: en el chat de cuentas cada
   bubble es su propia capa (`.upo-ai .bubble{position:relative;z-index:2}`, más específica que esta regla, de ahí
   el !important) y el siguiente taparía la tarjeta cuando se abre hacia abajo. La posición exacta
   (left/top/width/max-height) la pone pintarSemaforo para que se vea entera; lo de arriba es el respaldo. */
.semaforo-abierto{position:relative;z-index:30 !important;}
.bubble-semaforo .semaforo-card-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px;margin-bottom:8px;}
.bubble-semaforo .semaforo-card-row{display:flex;gap:8px;align-items:flex-start;padding:4px 0;color:var(--text-secondary, #64748b);}
.bubble-semaforo .semaforo-card-row.ok{color:var(--text-primary, #0f172a);}
.bubble-semaforo .semaforo-card-mark{flex-shrink:0;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-top:1px;}
.bubble-semaforo .semaforo-card-row.ok .semaforo-card-mark{background:rgba(16,185,129,0.15);color:#059669;}
.bubble-semaforo .semaforo-card-row.ko .semaforo-card-mark{background:rgba(245,158,11,0.18);color:#b45309;}
.bubble-semaforo .semaforo-card-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color, #e5e7eb);color:var(--text-secondary, #64748b);font-size:11px;}
[data-theme="dark"] .bubble-semaforo .semaforo-card{background:rgba(30,41,59,0.98);border-color:rgba(51,65,85,0.8);}