:root { /* Paleta tomada de la landing: azul-noche + acento verde menta. */ --bg: #060a10; --bg-elev: #0d131d; --bg-elev-2: #151d2a; --bg-input: #0a1018; --border: #1e2836; --border-soft: #172030; --text: #e8eef5; --text-dim: #8494a8; --text-faint: #5b6879; --accent: #8cc63f; --accent-dim: #6fa62f; --accent-soft: rgba(140, 198, 63, 0.14); /* CTA con degradado, como el botón "Obtener Propy". */ --grad-a: #5b7cfa; --grad-b: #8b5cf6; --amber: #e0b341; --red: #ff6b6b; --radius: 12px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --grid-line: rgba(255, 255, 255, 0.022); --shadow: rgba(0, 0, 0, 0.35); } /* Tema claro: se activa con data-theme="light" en (lo pone app.js). */ :root[data-theme="light"] { --bg: #f4f6fa; --bg-elev: #ffffff; --bg-elev-2: #eef1f6; --bg-input: #ffffff; --border: #d7dde7; --border-soft: #e5e9f0; --text: #18212f; --text-dim: #566274; --text-faint: #8792a3; --accent: #5a8f1e; --accent-dim: #497618; --accent-soft: rgba(90, 143, 30, 0.14); --grid-line: rgba(15, 30, 60, 0.04); --shadow: rgba(30, 45, 70, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } /* Rejilla sutil de fondo, como en la landing. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 46px 46px; } .hidden { display: none !important; } [hidden] { display: none !important; } .muted { color: var(--text-dim); } code { font-family: var(--mono); font-size: 0.9em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-elev-2); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #222e40; } /* ---------- Login ---------- */ .auth-screen { position: relative; z-index: 1; min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient( 900px 460px at 50% -12%, rgba(140, 198, 63, 0.1), transparent 70% ); } .auth-card { width: 100%; max-width: 390px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px; padding: 34px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .auth-logo { text-align: center; } .auth-logo img { width: 78%; max-width: 230px; height: auto; } /* Dos versiones del logo: el texto es blanco en una y negro en la otra, así que se muestra la que contrasta con el tema activo. */ /* img. para ganarle en especificidad a .brand-logo { display:block }. */ img.logo-on-light { display: none; } :root[data-theme="light"] img.logo-on-dark { display: none; } :root[data-theme="light"] img.logo-on-light { display: block; } .auth-logo .logo-on-light { margin: 0 auto; } .auth-card h1 { margin: 0; font-size: 21px; text-align: center; letter-spacing: -0.02em; } .auth-card > p { margin: -8px 0 8px; text-align: center; font-size: 13px; } /* ---------- Layout ---------- */ .app { position: relative; z-index: 1; display: flex; height: 100vh; } .sidebar { width: 216px; flex: 0 0 216px; display: flex; flex-direction: column; gap: 20px; padding: 18px 12px; background: var(--bg-elev); border-right: 1px solid var(--border); } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; } .brand-mark { font-size: 20px; } .brand-logo { display: block; width: 100%; max-width: 184px; height: auto; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-name { font-weight: 700; letter-spacing: -0.01em; } .brand-sub { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .tabs { display: flex; flex-direction: column; gap: 2px; } .tab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--text-dim); padding: 9px 10px; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 500; transition: background 0.12s, color 0.12s; } .tab:hover { background: var(--bg-elev-2); color: var(--text); } .tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .tab-icon { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; } .tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .user-menu { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; } .view-as { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; } .view-as > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; } .view-as select { font-size: 12px; padding: 6px 8px; } .preview-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); color: #fff; font-size: 13px; box-shadow: 0 8px 28px rgba(91, 124, 250, 0.4); } .preview-banner .btn { padding: 5px 11px; font-size: 12px; border-color: rgba(255, 255, 255, 0.4); color: #fff; } .preview-banner .btn:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; color: #fff; } .user-menu #current-user { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view { display: none; flex: 1; min-height: 0; padding: 16px; overflow: hidden; } .view.active { display: flex; flex-direction: column; gap: 14px; } .split { display: grid; grid-template-columns: 340px 1fr; gap: 14px; flex: 1; min-height: 0; } .builder-split { grid-template-columns: 1fr 300px; } .test-split { grid-template-columns: 1fr 340px; } .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto; min-height: 48px; } .head-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .head-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } /* ---------- Controles ---------- */ .btn { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text); padding: 7px 13px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; transition: border-color 0.12s, filter 0.12s, background 0.12s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.primary { background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 4px 18px rgba(109, 106, 250, 0.32); } .btn.primary:hover { filter: brightness(1.1); color: #fff; border-color: transparent; } .btn.ghost { background: transparent; } .btn.danger:hover { border-color: var(--red); color: var(--red); } .btn.block { width: 100%; } .btn.icon { padding: 7px 10px; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; width: 100%; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type="range"] { accent-color: var(--accent); padding: 0; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .field > span { color: var(--text-dim); font-weight: 500; } .field small { font-size: 11px; line-height: 1.45; } .check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .check input { width: auto; accent-color: var(--accent); } .check.big { align-items: flex-start; padding: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; } .check.big span { display: flex; flex-direction: column; gap: 3px; } .check.big small { font-weight: 400; } .error { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.32); color: var(--red); padding: 9px 11px; border-radius: 9px; font-size: 13px; margin: 0; } .badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; border: 1px solid rgba(63, 220, 160, 0.22); white-space: nowrap; } .badge.gray { background: var(--bg-elev-2); color: var(--text-dim); border-color: var(--border); } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 0 0 auto; } .stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; } .stat-value { font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } .stat-label { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-top: 2px; } /* ---------- Lista de conversaciones ---------- */ .list-panel .panel-head { gap: 6px; } .list-panel select { width: auto; flex: 0 0 auto; } .conv-list { overflow-y: auto; flex: 1; } .conv-item { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .conv-item:hover { background: var(--bg-elev-2); } .conv-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .conv-top { display: flex; align-items: center; gap: 6px; } .conv-id { font-family: var(--mono); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .conv-time { font-size: 11px; color: var(--text-faint); white-space: nowrap; } .conv-preview { font-size: 12px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .empty { padding: 20px; text-align: center; color: var(--text-dim); font-size: 13px; } .empty-state { margin: auto; text-align: center; color: var(--text-dim); max-width: 300px; padding: 40px 20px; } .empty-icon { font-size: 32px; display: block; margin-bottom: 10px; } /* ---------- Chat ---------- */ .chat-panel { min-width: 0; } .chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .msg { max-width: min(74%, 620px); display: flex; flex-direction: column; gap: 3px; } .msg-bubble { padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; } .msg-meta { font-size: 10.5px; color: var(--text-faint); padding: 0 4px; } /* Respuesta del asesor. Solo aparece con el seguimiento abierto: si se pudiera escribir con la IA activa, el lead recibiría dos respuestas al mismo mensaje. */ .composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); } .composer textarea { flex: 1; resize: vertical; min-height: 42px; max-height: 180px; font: inherit; font-size: 13.5px; } .composer .btn { flex: 0 0 auto; } .msg.human { align-self: flex-start; } .msg.human .msg-bubble { background: var(--bg-elev-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .msg.ai { align-self: flex-end; } .msg.ai .msg-bubble { background: var(--accent); color: #04150e; font-weight: 500; border-bottom-right-radius: 4px; } .msg.ai .msg-meta { text-align: right; } .msg.tool, .msg.system { align-self: center; max-width: 90%; } .msg.tool .msg-bubble, .msg.system .msg-bubble { background: transparent; border: 1px dashed var(--border); color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; } .msg.pending .msg-bubble { opacity: 0.55; font-style: italic; } /* Marca de origen: el mensaje llegó como audio o como foto, no escrito. */ .msg-media-tag { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); opacity: 0.85; } /* ---------- Composer ---------- */ .composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex: 0 0 auto; align-items: flex-end; } .composer textarea { resize: none; max-height: 140px; } /* ---------- Builder ---------- */ .editor-panel { min-width: 0; } .var-hints { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .var-hints code { background: var(--bg-input); padding: 3px 8px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); color: var(--accent); } .var-hints code:hover { border-color: var(--accent); } .var-hints .muted { margin-left: auto; font-variant-numeric: tabular-nums; } #prompt-editor { flex: 1; border: 0; border-radius: 0; resize: none; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; padding: 16px; background: var(--bg-input); } #prompt-editor:focus { box-shadow: none; } .version-list { overflow-y: auto; flex: 1; } .version-item { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; } .version-item:hover { background: var(--bg-elev-2); } .version-top { display: flex; align-items: center; gap: 6px; } .version-num { font-weight: 700; font-size: 13px; } .version-note { font-size: 12px; color: var(--text-dim); } .version-meta { font-size: 11px; color: var(--text-faint); } .version-actions { display: flex; gap: 6px; margin-top: 4px; } .version-actions .btn { padding: 4px 10px; font-size: 11.5px; } /* ---------- Test ---------- */ .config-panel { min-width: 0; } .config-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .trace { display: flex; flex-direction: column; gap: 6px; } .trace-item { background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; font-family: var(--mono); font-size: 11px; } .trace-name { color: var(--accent); font-weight: 700; } .trace-args { color: var(--text-dim); word-break: break-all; margin-top: 3px; } /* ---------- Conocimiento ---------- */ .kb-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 14px; flex: 1; min-height: 0; align-items: start; align-content: start; grid-auto-rows: min-content; overflow-y: auto; } /* Dos columnas de verdad, no una rejilla de filas. Con filas, el formulario de alta —que es alto— estiraba la fila del panel corto de al lado y dejaba media pantalla en negro. Apilando la izquierda en su propia columna, cada panel mide lo que mide y no hay huecos. */ .kb-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .kb-wide { grid-column: auto; } .kb-aside { align-self: start; } .kb-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .kb-gap-resolved td { opacity: 0.5; } .kb-gap-q { max-width: 460px; } .kb-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; } .kb-table td { vertical-align: middle; } .kb-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; } .kb-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .kb-listo { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .kb-error { background: color-mix(in srgb, #e5484d 18%, transparent); color: #ff8a8d; } .kb-pendiente { background: color-mix(in srgb, #f0b429 18%, transparent); color: #f0b429; } .kb-hit { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; } .kb-hit-head { display: flex; justify-content: space-between; gap: 10px; color: var(--text-dim); font-size: 11px; margin-bottom: 6px; } /* ---------- Webhook ---------- */ .webhook-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 14px; flex: 1; min-height: 0; align-items: start; /* Igual que settings-wrap: sin esto las filas se reparten la altura del contenedor en partes iguales y el panel alto se corta y se desborda sobre el de abajo. Con esto cada fila mide su contenido y el contenedor scrollea. */ align-content: start; grid-auto-rows: min-content; overflow-y: auto; } .webhook-wide { grid-column: 1 / -1; } .wc-brand { display: grid; grid-template-columns: 1fr 160px; gap: 14px; } .wa-wrap { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; } /* Sin esto el panel se comprime como hijo flex y recorta sus últimos campos (los precios por conversación quedaban invisibles). */ .wa-wrap > .panel { flex: 0 0 auto; } .wa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .wc-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .wc-warn { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; background: color-mix(in srgb, #f0b429 14%, transparent); border: 1px solid color-mix(in srgb, #f0b429 40%, transparent); color: var(--text); } /* Mismo aviso, pero cuando ya está resuelto: informa de un costo, no alerta. */ .wc-warn.ok { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .webhook-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; } .webhook-intro { margin: 0; font-size: 13px; } .copy-row { display: flex; gap: 8px; } .copy-row input { font-family: var(--mono); font-size: 12.5px; color: var(--accent); } .code-block { margin: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--text); overflow-x: auto; white-space: pre; } .wh-meta { display: flex; gap: 28px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); } .wh-meta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); font-weight: 600; } .wh-meta dd { margin: 2px 0 0; font-family: var(--mono); font-size: 13px; color: var(--accent); } /* ---------- Consumos (tarjetas + medidor) ---------- */ .cons-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding-top: 14px; } .cons-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev-2); } .cons-card-accent { border-color: rgba(140, 198, 63, 0.4); background: var(--accent-soft); } .cons-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; } .cons-sub { font-size: 11px; margin-top: 2px; } .cons-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 600; } .cons-v { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--accent); margin-top: 3px; } .cons-gauge { margin-top: 16px; } .cons-gauge-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .cons-gauge-head b { font-family: var(--mono); } .cons-gauge-track { height: 12px; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border); overflow: hidden; } .cons-gauge-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: width 0.3s ease, background 0.3s ease; } .cons-gauge-fill.low { background: linear-gradient(90deg, #c9862a, var(--amber)); } .cons-gauge-fill.bad { background: linear-gradient(90deg, #c0392b, var(--red)); } /* ---------- Consumos ---------- */ .cons-period-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; } .cons-period-label { margin-left: auto; text-transform: capitalize; } .cons-tiles { flex-wrap: wrap; row-gap: 16px; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-input); } .seg-btn { border: 0; background: transparent; color: var(--text-dim); padding: 7px 13px; font: inherit; font-size: 12.5px; cursor: pointer; border-left: 1px solid var(--border); transition: background 0.12s, color 0.12s; } .seg-btn:first-child { border-left: 0; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--accent-soft); color: var(--accent); } .cons-dates { display: flex; align-items: center; gap: 8px; } .cons-dates input[type="date"] { width: auto; } input[type="date"] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; color-scheme: dark; } .cons-alert { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 10px 13px; border: 1px solid rgba(224, 179, 65, 0.4); background: rgba(224, 179, 65, 0.1); border-radius: 9px; font-size: 12.5px; color: var(--amber); } .cons-alert::before { content: "!"; font-weight: 700; } .daychart { display: flex; align-items: flex-end; gap: 3px; height: 128px; padding-top: 10px; } .daybar { flex: 1; min-width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-radius: 3px 3px 0 0; transition: filter 0.12s; } .daybar:hover { filter: brightness(1.25); } .daybar.empty { background: var(--border); } .daychart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-faint); font-family: var(--mono); } .conv-source { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 1px 6px; margin-left: 6px; } .cons-table-wrap, .seg-table-wrap { overflow-x: auto; } /* Tabla de Seguimiento: compacta, alineada a la izquierda, textos recortados. */ #seg-table { font-size: 12.5px; width: 100%; } #seg-table th { text-align: left; white-space: nowrap; vertical-align: bottom; } #seg-table td { text-align: left; vertical-align: top; padding: 10px 10px; } #seg-table .seg-cell { white-space: nowrap; color: var(--text); } #seg-table .seg-contact { font-family: var(--mono); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } #seg-table .seg-model { max-width: 160px; color: var(--text); } /* Motivo/Recomendación: texto completo (envuelven), toman el ancho libre. */ #seg-table .seg-w { min-width: 210px; color: var(--text); } .seg-clamp { line-height: 1.4; color: var(--text); } #seg-table .seg-sel { min-width: 118px; } .subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .subtab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; margin-bottom: -1px; } .subtab:hover { color: var(--text); } .subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .subview { display: none; } /* * La subvista es la que hace scroll, no la pestaña. * * `.view` tiene overflow:hidden para que las pantallas de dos columnas no * empujen la página entera. Sin esto, una subvista más alta que la pantalla * —Plantillas con el carrusel abierto— quedaba cortada por abajo y sin forma * de llegar al botón de guardar. */ .subview.active { display: block; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } .fup-test { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; } .fup-test-row { display: flex; gap: 8px; align-items: center; } .fup-test-row input { flex: 1; } .fup-test-out { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); font-size: 13px; white-space: pre-wrap; color: var(--text); } .fup-step-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .fup-step-row .fup-step-num { width: 90px; } .fup-step-row .fup-step-unit { width: 120px; } .fup-step-row .btn { padding: 6px 10px; } /* Qué número de intento es y cuándo cae en total: sin esto, una cadencia de cuatro esperas relativas no se puede leer de un vistazo. */ .fup-step-n { width: 82px; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-dim); } .fup-step-acc { font-size: 12px; color: var(--text-faint); } .fup-step-acc.out { color: var(--amber); } .fup-cadence-hint { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.5; } /* Alta de archivos enviables: el "cuándo enviarlo" pesa más que el nombre, porque es lo único con lo que el agente decide. */ .af-form { display: grid; grid-template-columns: 1fr 1.6fr auto auto; gap: 10px; align-items: end; margin-bottom: 14px; } .af-form .field { margin: 0; } @media (max-width: 1100px) { .af-form { grid-template-columns: 1fr; align-items: stretch; } } /* El panel de seguimiento crece con la cadencia. Sin desplazamiento propio, la vista lo recorta por abajo y se pierde el último bloque. */ #seg-sub-auto.active { flex: 1; min-height: 0; overflow-y: auto; } .seg-actions { display: flex; gap: 6px; } .seg-actions .btn { padding: 5px 10px; font-size: 12px; } .seg-notes-row td { padding: 0 10px 12px; border-bottom: 1px solid var(--border-soft); } .seg-notes-input { min-height: 64px; resize: vertical; margin-bottom: 8px; } /* El logo ya trae versión para fondo claro (.logo-on-light), así que el parche de fondo oscuro tras la marca dejó de hacer falta. */ .seg-sel { width: auto; min-width: 120px; padding: 6px 8px; font-size: 12.5px; } .cons-table .seg-reason { max-width: 320px; color: var(--text-dim); } #view-seguimiento .stats { margin-bottom: 18px; } .cons-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cons-table .cons-model { white-space: nowrap; } .cons-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--border); } .cons-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); } .cons-table tr:last-child td { border-bottom: 0; } .cons-table .cons-model { font-family: var(--mono); color: var(--text); } .cons-table .cons-num { font-family: var(--mono); color: var(--accent); text-align: right; } .cons-table th:not(:first-child) { text-align: right; } .steps { margin: 0; padding: 14px 16px 14px 34px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; } .steps li { padding-left: 2px; } .steps li::marker { color: var(--accent); font-weight: 700; } .steps code { background: var(--bg-input); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--accent); } .steps-note { margin: 0; padding: 0 16px 16px; font-size: 12px; line-height: 1.5; } .steps-note code { background: var(--bg-input); border: 1px solid var(--border); padding: 1px 5px; border-radius: 5px; } /* ---------- Usuarios ---------- */ /* `align-content` + `min-content` + scroll propio, igual que kb-wrap y webhook-wrap. Sin eso las dos filas se repartían el alto del contenedor a partes iguales y el panel de alta quedaba cortado por dentro: el último párrafo y el botón de crear no salían, y como el recorte lo hacía el panel —no la página— bajar con el dedo tampoco los traía. */ .users-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 14px; flex: 1; min-height: 0; align-items: start; align-content: start; grid-auto-rows: min-content; overflow-y: auto; } .user-list { overflow-y: auto; } .user-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border-soft); } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(63, 220, 160, 0.25); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; } .user-info { flex: 1; min-width: 0; } .user-name { font-weight: 550; } .user-email { font-size: 12px; color: var(--text-dim); } .user-form { padding: 12px; display: flex; flex-direction: column; gap: 12px; } /* ---------- Widget: asistente del prompt ---------- */ .fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); color: #fff; box-shadow: 0 8px 26px rgba(109, 106, 250, 0.45); transition: transform 0.14s, box-shadow 0.14s; } .fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(109, 106, 250, 0.55); } .fab-icon { font-size: 21px; line-height: 1; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: 420px; max-width: 100vw; display: flex; flex-direction: column; background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: -16px 0 44px rgba(0, 0, 0, 0.5); } .drawer-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .drawer-avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); font-size: 16px; flex: 0 0 auto; } .drawer-title { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; } .drawer-title small { font-size: 11px; } .drawer-head .btn { padding: 6px 9px; } .drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .drawer-welcome { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .drawer-welcome h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; } .drawer-welcome p { margin: 0; font-size: 12.5px; line-height: 1.55; } .suggestions { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; align-items: flex-start; } .suggestion { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; } .suggestion:hover { border-color: var(--accent); color: var(--accent); } .dmsg { max-width: 88%; font-size: 13px; line-height: 1.55; } .dmsg-bubble { padding: 9px 13px; border-radius: 13px; white-space: pre-wrap; word-break: break-word; } .dmsg.user { align-self: flex-end; } .dmsg.user .dmsg-bubble { background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); color: #fff; border-bottom-right-radius: 4px; } .dmsg.bot { align-self: flex-start; } .dmsg.bot .dmsg-bubble { background: var(--bg-elev-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .dmsg.error .dmsg-bubble { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.32); color: var(--red); } /* Aviso de que el editor se está reescribiendo. */ .dmsg-writing { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 7px 11px; background: var(--accent-soft); border: 1px solid rgba(63, 220, 160, 0.25); border-radius: 9px; font-size: 11.5px; color: var(--accent); font-weight: 550; } .dmsg-writing::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .drawer-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; } .drawer-composer textarea { resize: none; max-height: 130px; } .drawer-composer .btn.icon { padding: 9px 13px; font-size: 15px; } @media (max-width: 700px) { .drawer { width: 100vw; } .fab { right: 16px; bottom: 16px; } } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 11px 20px; border-radius: 999px; font-size: 13px; z-index: 100; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); } .toast.error { border-color: var(--red); color: var(--red); } .toast.success { border-color: var(--accent); color: var(--accent); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .sidebar { width: 60px; flex-basis: 60px; padding: 18px 8px; } .tab { justify-content: center; padding: 10px 0; } .tab-label, .brand-text, .user-menu #current-user { display: none; } .brand { justify-content: center; padding: 4px 0; } .user-menu .btn { padding: 7px 4px; font-size: 11px; } } /* ---------- Móvil ---------- */ /* El botón de menú solo existe en teléfono. Tres rayas dibujadas con bordes, para no depender de un icono externo. */ .nav-burger { display: none; } @media (max-width: 700px) { .app { flex-direction: column; height: 100vh; } /* La barra queda reducida a una cabecera: marca a la izquierda, botón de menú a la derecha. Todo lo demás se despliega al pulsarlo. Una cinta de doce iconos sin nombre no es navegable en un teléfono; el menú desplegado sí puede mostrar el texto de cada sección. */ .sidebar { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); position: relative; } .brand { flex: 0 0 auto; padding: 0; } .brand-logo { max-width: 120px; } .sidebar-toggle { display: none; } .nav-burger { display: block; position: relative; width: 40px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev-2); cursor: pointer; padding: 0; } .nav-burger span, .nav-burger span::before, .nav-burger span::after { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.18s ease, opacity 0.18s ease; } .nav-burger span { top: 16px; } .nav-burger span::before { content: ""; left: 0; top: -6px; } .nav-burger span::after { content: ""; left: 0; top: 6px; } /* Abierto, las tres rayas se vuelven una equis. */ .app.nav-open .nav-burger span { background: transparent; } .app.nav-open .nav-burger span::before { transform: translateY(6px) rotate(45deg); } .app.nav-open .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); } /* Cerrado: solo la cabecera. Abierto: la barra entera se despliega como panel sobre el contenido, con todo dentro en una sola columna que scrollea. Es más simple y más sólido que posicionar dos bloques sueltos y calcular a mano dónde empieza el segundo. */ .tabs, .user-menu { display: none; } .app.nav-open .sidebar { position: fixed; top: 0; left: 0; right: 0; max-height: 100dvh; overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 8px 12px 16px; z-index: 40; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } .app.nav-open .brand { align-self: flex-start; } .app.nav-open .nav-burger { position: absolute; top: 8px; right: 12px; } .app.nav-open .tabs, .app.nav-open .user-menu { display: flex; } .app.nav-open .tabs { flex-direction: column; gap: 2px; } /* Dentro del menú las pestañas recuperan su nombre: es el motivo de tener un menú y no una cinta de iconos. */ .app.nav-open .tab { width: 100%; justify-content: flex-start; padding: 11px 12px; } .app.nav-open .tab-label { display: inline; } .app.nav-open .user-menu { flex-direction: column; gap: 10px; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border); } .app.nav-open .user-menu #current-user { display: block; padding: 0 4px; } .app.nav-open .view-as { padding: 0 4px; } .app.nav-open .view-as > span { display: block; font-size: 10.5px; line-height: 1.4; } .app.nav-open .view-as > span::before { content: none; } .app.nav-open .view-as select { max-width: none; } .sidebar .powered { display: none; } .content { min-height: 0; } .view { padding: 10px; overflow-y: auto; } /* Cualquier pantalla de dos columnas pasa a una. */ .split, .builder-split, .test-split, .users-wrap, .settings-wrap, .kb-wrap, .webhook-wrap, .wc-brand, .af-form, .cons-wrap, .conv3, .conv-foot { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .panel { overflow-x: auto; } } /* ---------- Configuración del agente ---------- */ /* Una sola columna, de arriba abajo. Pasó por rejilla de dos columnas (huecos enormes entre secciones desiguales) y por columnas de texto (desbordaba en horizontal). Lo que de verdad hacía falta era esto: cada sección a lo ancho, una debajo de otra, en un orden que se entienda. Sin huecos posibles y sin parejas forzadas de cosas que no tienen que ver entre sí. El scroll vive aquí, para que la barra de guardar pueda quedarse pegada. */ .settings-wrap { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; } /* Que las secciones NO se encojan. En una columna flex, los hijos se encogen por defecto para caber en el alto del contenedor. Con nueve secciones eso las aplastaba a todas: se veía el título y el contenido quedaba cortado. Lo que hace falta es lo contrario — que cada una mida lo suyo y el contenedor scrollee. */ .settings-wrap > .panel, .settings-wrap > .settings-guardar { flex: 0 0 auto; } /* Guardar: pegado arriba DENTRO del área que scrollea. Estuvo al pie (chocaba con el botón del Copilot) y luego fuera del scroller, donde `sticky` no hace nada y el botón se iba al desplazarse. */ .settings-guardar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); } .settings-guardar .muted { font-size: 12px; } /* Verde de marca: es una confirmación dentro de la pantalla, no la llamada principal del producto. */ #settings-save { background: var(--accent); border-color: var(--accent); color: #04150e; font-weight: 600; } #settings-save:hover { background: var(--accent-dim); border-color: var(--accent-dim); } #settings-save:disabled { opacity: 0.55; } .settings-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; } .skills-intro { margin: 0; font-size: 12.5px; line-height: 1.55; } .skills { display: flex; flex-direction: column; gap: 9px; } .check.big.skill { cursor: pointer; } .check.big.skill:hover { border-color: var(--accent); } @media (max-width: 900px) { .settings-wrap { grid-template-columns: 1fr; } } /* ---------- Custom fields ---------- */ .fields-list { display: flex; flex-direction: column; gap: 8px; } .cf-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; } .cf-item:hover { border-color: var(--accent); } .cf-item input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--accent); } .cf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .cf-label { font-weight: 550; font-size: 13px; } .cf-meta { font-size: 11px; color: var(--text-faint); font-family: var(--mono); } .cf-hint { font-size: 12px; padding: 6px 9px; } /* ---------- Análisis y simulación ---------- */ .analysis-split, .sim-split { grid-template-columns: 320px 1fr; } .an-note { margin: 0; font-size: 11.5px; line-height: 1.5; } .audit-list, .run-list, .profile-list { overflow-y: auto; max-height: 320px; } .audit-item, .run-item, .profile-item { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .audit-item:hover, .run-item:hover, .profile-item:hover { background: var(--bg-elev-2); } .audit-item.active, .run-item.active, .profile-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .item-top { display: flex; align-items: center; gap: 6px; } .item-title { font-weight: 600; font-size: 13px; flex: 1; } .item-meta { font-size: 11px; color: var(--text-faint); } .item-desc { font-size: 12px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .audit-detail { flex: 1; overflow-y: auto; padding: 18px; } .audit-summary { font-size: 14px; line-height: 1.6; padding: 14px 16px; background: var(--accent-soft); border: 1px solid rgba(63, 220, 160, 0.22); border-radius: 10px; margin-bottom: 18px; } .audit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 22px; } .section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; margin: 22px 0 10px; } .finding { border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; background: var(--bg-input); } .finding-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .finding-title { font-weight: 600; font-size: 13.5px; flex: 1; } .finding-quote { border-left: 2px solid var(--border); padding-left: 10px; margin: 8px 0; font-size: 12.5px; color: var(--text-dim); font-style: italic; } .finding-fix { font-size: 12.5px; line-height: 1.55; } .finding-fix b { color: var(--accent); } .badge.alta { background: rgba(255, 107, 107, 0.12); color: var(--red); border-color: rgba(255, 107, 107, 0.3); } .badge.media { background: rgba(224, 179, 65, 0.12); color: var(--amber); border-color: rgba(224, 179, 65, 0.3); } .badge.baja { background: var(--bg-elev-2); color: var(--text-dim); border-color: var(--border); } .bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .bullets li::marker { color: var(--accent); } .verdict { border-top: 1px solid var(--border); padding: 14px 16px; max-height: 320px; overflow-y: auto; } .verdict:empty { display: none; } .score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .score-value { font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } .score-max { font-size: 14px; color: var(--text-dim); } /* Contradicciones: las dos versiones enfrentadas, para compararlas de un vistazo. */ .kb-contra-a, .kb-contra-b { font-size: 12.5px; line-height: 1.45; vertical-align: top; } .kb-contra-a { color: var(--amber); } .kb-contra-b { color: var(--accent); } #kb-contra-panel.kb-contra-alert .panel-head { border-bottom-color: color-mix(in srgb, var(--amber) 35%, transparent); } #kb-contra-when { font-size: 11.5px; } /* Recordatorio de dónde vive una regla. No es una advertencia: es una frontera. */ .rule-note { margin: 8px 0 0; padding: 8px 11px; border-left: 2px solid var(--accent-dim); border-radius: 0 6px 6px 0; background: var(--accent-soft); font-size: 11.5px; line-height: 1.5; color: var(--text-dim); } /* ---------- Plantillas de WhatsApp ---------- */ .tpl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .tpl-example { margin-top: 8px; } /* El cuerpo puede ser largo: se recorta en la tabla y va entero en el title. */ .tpl-body-cell { max-width: 420px; font-size: 12px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tpl-reason { margin-top: 4px; font-size: 11px; color: var(--red); max-width: 220px; line-height: 1.4; } #tpl-review-out { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } #tpl-review-out .wc-warn { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #tpl-review-out .wc-warn .btn { padding: 4px 10px; font-size: 12px; } .wc-warn.ok, .wc-warn.tpl-error { border-width: 1px; border-style: solid; } .wc-warn.ok { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .wc-warn.tpl-error { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); } .tpl-suggestion { padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .tpl-suggestion-text { white-space: pre-wrap; font-size: 13px; line-height: 1.5; } /* ---------- Orden de fuentes ---------- */ .prio-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .prio-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); } .prio-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .prio-name { display: flex; flex-direction: column; min-width: 0; } .prio-name small { font-size: 11px; } .prio-actions { margin-left: auto; display: flex; gap: 4px; } .prio-actions .btn { padding: 3px 10px; } /* ---------- Carrusel de plantilla ---------- */ #tpl-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } #tpl-cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .tpl-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg-input); display: flex; flex-direction: column; gap: 10px; } .tpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tpl-card-head .btn { padding: 3px 9px; font-size: 11.5px; } .tpl-card input[type="file"] { font-size: 11.5px; } /* Los cuerpos de plantilla son de varias líneas: que se lean sin arrastrar. */ #tpl-body { min-height: 150px; } #fup-goal { min-height: 92px; } /* ---------- Envío de campañas ---------- */ .camp-estimate-box { margin: 12px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; background: var(--accent-soft); } .camp-big { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--accent); } .camp-cost { margin-top: 8px; font-size: 13.5px; font-weight: 600; } .camp-sample { margin-top: 6px; font-size: 11.5px; font-family: var(--mono); } .camp-failed { color: var(--red); } /* ---------- Etiquetas ---------- */ .tag-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tag-form #tag-name { width: 190px; flex: 0 0 auto; } .tag-form #tag-desc { flex: 1; min-width: 240px; } /* El aviso de que la skill está apagada: va pegado al catálogo, con el botón que lo arregla al lado. Un aviso que no trae la solución obliga a buscarla. */ .tag-warn { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tag-warn span { flex: 1; min-width: 220px; } .tag-warn .btn { padding: 4px 11px; font-size: 12px; } #tag-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .tag-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); } .tag-row .btn { padding: 3px 9px; font-size: 11.5px; margin-left: auto; } .tag-desc { font-size: 12.5px; color: var(--text-dim); flex: 1; min-width: 0; } .tag-uses { font-size: 11.5px; white-space: nowrap; } .tag-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .camp-tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0; } .camp-tag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; } /* ---------- Pulgares del playground ---------- */ .rate-bar { display: flex; align-items: center; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity 0.12s; } /* Discretos hasta que se buscan: valorar es opcional y no debe pesar en la pantalla más que la propia respuesta. */ .msg:hover .rate-bar, .rate-bar.rated { opacity: 1; } .rate-btn { background: none; border: 0; padding: 2px 5px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; filter: grayscale(1); opacity: 0.55; transition: opacity 0.12s, filter 0.12s, background 0.12s; } .rate-btn:hover:not(:disabled) { opacity: 1; filter: none; background: var(--bg-elev-2); } .rate-btn.on { opacity: 1; filter: none; } .rate-btn:disabled { cursor: default; opacity: 0.25; } .rate-hint { font-size: 11px; color: var(--text-dim); } /* ---------- Captura pegada en el copiloto ---------- */ .drawer-attach { display: flex; align-items: center; gap: 10px; margin: 0 14px 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); font-size: 11.5px; } .drawer-attach img { width: 46px; height: 34px; object-fit: cover; border-radius: 5px; } .drawer-attach span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-attach .btn { padding: 3px 9px; font-size: 11px; } /* La captura, ya enviada, dentro del mensaje del usuario. */ .dmsg-img { display: block; max-width: 100%; margin-top: 8px; border-radius: 8px; border: 1px solid var(--border); } /* ---------- Firma ---------- */ .powered { margin: 10px 0 0; text-align: center; font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-faint); } .powered a { color: var(--accent); text-decoration: none; font-weight: 600; } .powered a:hover { text-decoration: underline; } /* La prueba, marcada en el historial: si se confunde con una difusión, el registro deja de servir para saber qué se le mandó de verdad al cliente. */ .camp-test-chip { margin-left: 8px; font-size: 10.5px; } #camp-test-phone { width: 200px; } /* El campo que provocó el error, marcado un momento. El salto por si solo deja la pantalla en otro sitio sin decir cual de los campos era. */ .tpl-culpable { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .tpl-goto { margin-left: 10px; padding: 2px 9px; font-size: 12px; } /* Calculadora de margen (Consumos, solo admin): tres entradas en fila que caen a una columna en pantallas chicas. */ .calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; } /* Consumos: los paneles de reporte conviven en dos columnas, pero los de configuración (calculadora y tarifa) ocupan el ancho entero. Metidos en la columna de 380px, la tarifa quedaba en una pila larguísima donde había que desplazar para encontrar un campo — y un campo que no se encuentra es un campo que no existe. */ /* `panel-wide` era la marca de "ocupa las dos columnas" cuando esto era una rejilla. Ahora Consumos también baja en una sola columna, así que la regla sobra; se queda el nombre porque es el que decide el reparto interno de esos paneles, justo debajo. */ /* Dentro de esos paneles anchos, los campos se reparten en columnas en vez de apilarse. Se corta a una sola columna cuando la pantalla no da. */ .cons-wrap .panel-wide .settings-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 22px; align-items: start; } /* Lo que debe ocupar la fila entera dentro de esos paneles: textos de ayuda, la rejilla de la calculadora y sus tarjetas de resultado. */ .cons-wrap .panel-wide .settings-body > p, .cons-wrap .panel-wide .settings-body > .calc-grid, .cons-wrap .panel-wide .settings-body > .cons-cards, .cons-wrap .panel-wide .settings-body > .check { grid-column: 1 / -1; } /* Marca en los paneles que el cliente NO está viendo. Sin esto, el superadmin apaga el interruptor, sigue viendo la sección y no tiene forma de saber si funcionó. */ .oculto-cliente { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 2px 10px; margin-left: 10px; white-space: nowrap; } /* Invitación: el enlace generado, a la vista y seleccionable. Copiarlo al portapapeles puede fallar fuera de HTTPS, así que siempre se muestra. */ #invite-box { margin-top: 14px; padding: 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; } #invite-box .invite-title { font-size: 13px; font-weight: 600; } #invite-box input { width: 100%; font-family: var(--mono); font-size: 12px; } .badge-warn { background: rgba(217, 160, 60, 0.18); color: var(--amber); } /* Pastillas de rol. El superadmin usa el acento de la marca; el admin, azul; el miembro, gris. Distinto color y no solo distinto texto, para que la lista se lea de un vistazo cuando hay varias personas. */ .badge-admin { background: rgba(96, 140, 255, 0.16); color: #8fb0ff; border-color: rgba(96, 140, 255, 0.32); } /* ---------- Barra lateral contraíble ---------- */ /* Botón para contraer a mano, no solo cuando la ventana se hace chica. En una pantalla ancha el panel gana 156 px de contenido, que en las tablas de Seguimiento y Consumos se notan. */ .sidebar-toggle { align-self: flex-end; width: 26px; height: 26px; margin: -12px 2px -8px 0; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev-2); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; transition: color 0.15s ease, border-color 0.15s ease; } .sidebar-toggle::before { content: "«"; } .sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); } /* Contraída a mano: las mismas reglas que aplica la pantalla estrecha. Va dentro de un min-width porque en móvil la barra es una cinta horizontal: estas reglas tienen más especificidad que las de la media query de móvil y, si el usuario dejó guardado "contraída" en su escritorio, le romperían el teléfono al abrirlo. */ @media (min-width: 701px) { .app.sidebar-mini .sidebar { width: 60px; flex-basis: 60px; padding: 18px 8px; } .app.sidebar-mini .tab { justify-content: center; padding: 10px 0; } .app.sidebar-mini .tab-label, .app.sidebar-mini .brand-text, .app.sidebar-mini .user-menu #current-user { display: none; } .app.sidebar-mini .brand { justify-content: center; padding: 4px 0; } .app.sidebar-mini .user-menu .btn { padding: 7px 4px; font-size: 11px; } .app.sidebar-mini .view-as { padding: 0; } .app.sidebar-mini .view-as > span { display: block; font-size: 0; line-height: 1; } .app.sidebar-mini .view-as > span::before { content: attr(data-icono); font-size: 14px; } } /* Y el mismo recorte cuando la ventana se encoge sola. Sin esconder estas etiquetas, "IDIOMA · LANGUAGE" no cabe en 60 px y se sale del margen. */ @media (max-width: 1100px) { .sidebar .view-as > span { display: none; } .sidebar .view-as { padding: 0; } .sidebar-toggle { display: none; } } /* Con la barra en 60 px, "Powered by GreamSpot" no cabe en una línea y se desborda. Se parte en dos y se recorta a lo ancho disponible. */ .app.sidebar-mini .sidebar .powered, .sidebar .powered { word-break: break-word; max-width: 100%; } @media (max-width: 1100px) { .sidebar .powered { font-size: 9px; letter-spacing: 0; line-height: 1.35; } } @media (min-width: 701px) { .app.sidebar-mini .sidebar .powered { font-size: 9px; letter-spacing: 0; line-height: 1.35; } .app.sidebar-mini .sidebar-toggle { align-self: center; margin: -6px 0 0; } .app.sidebar-mini .sidebar-toggle::before { content: "»"; } } /* Con la barra estrecha, tres desplegables seguidos sin etiqueta no dicen nada: hay que abrirlos para saber cuál es cuál. En vez de esconder el texto del todo, se sustituye por su icono, que sí cabe en 60 px. El title de cada uno da el nombre completo al pasar el ratón. */ .sidebar .view-as > span { text-align: center; } @media (max-width: 1100px) { .sidebar .view-as > span { display: block; font-size: 0; line-height: 1; } .sidebar .view-as > span::before { content: attr(data-icono); font-size: 14px; } } /* =========================================================================== Arreglos de teléfono --------------------------------------------------------------------------- Va al final a propósito: son correcciones sobre reglas que ya existen más arriba y el orden es lo que decide cuál gana. =========================================================================== */ /* ---------- Casillas de verificación ---------- Una casilla del tamaño que trae el navegador mide 13 px. En un teléfono eso no es un control: es un punto que no se ve y que no se acierta con el dedo. Se le da tamaño propio en todas partes, no solo en móvil — en el escritorio también costaba encontrarlas dentro de un bloque de texto. */ .check input[type="checkbox"], .check input[type="radio"], .cf-item input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); cursor: pointer; } /* En las grandes el texto arranca con un , así que la casilla se alinea con esa primera línea en vez de pegarse al borde de arriba. */ .check.big input[type="checkbox"] { margin-top: 1px; } @media (max-width: 700px) { .check input[type="checkbox"], .check input[type="radio"], .cf-item input[type="checkbox"] { width: 22px; height: 22px; } /* El bloque entero es el área de toque; con la casilla suelta a la izquierda hay que atinarle a 22 px. */ .check.big { padding: 13px; gap: 11px; } } @media (max-width: 700px) { /* ---------- Cabeceras de panel ---------- El título y los botones iban en una sola fila. Cuando no caben, flexbox no los apila: los encoge, y el texto de cada uno se sale de su caja y se pinta encima del de al lado. Eso es lo que se veía al abrir una conversación — "Tomar la conversación", "Continuar en Test" y "Borrar" superpuestos sobre el identificador del lead. Se deja que caigan a la línea siguiente. La lista de conversaciones se queda como estaba: ahí la fila es buscador + desplegable + refrescar, y esos tres sí caben. */ .panel-head { flex-wrap: wrap; row-gap: 8px; } .list-panel .panel-head { flex-wrap: nowrap; } .head-left { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; } /* El identificador es `wa:51969841770`, sin espacios donde partir. Sin esto estira la fila y vuelve a empujar los botones fuera. */ .head-left > strong { min-width: 0; overflow-wrap: anywhere; } .head-right { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; row-gap: 6px; } .head-right .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 12.5px; } /* Borrar no se estira: un botón sin vuelta atrás ocupando la fila entera, justo encima del historial, se pulsa sin querer. Los de icono tampoco: estirados son una caja enorme con una flecha diminuta en medio. */ .head-right .btn.danger { flex: 0 0 auto; } .head-right .btn.icon { flex: 0 0 auto; width: 40px; padding: 8px 0; } /* ---------- Botones que no se encogen ---------- La raíz de casi todo lo que se veía pisado: un botón dentro de una fila flex se encoge por debajo de su texto, y el texto no se recorta —se sale de la caja y se pinta encima del vecino—. En la lista de usuarios, "Leidy Rodas" y su pastilla de rol acababan sobre "Nuevo enlace". Ningún botón se encoge; las filas que los llevan bajan de línea. */ .btn { flex-shrink: 0; } .user-item { flex-wrap: wrap; row-gap: 8px; } .user-info { flex: 1 1 150px; } .fup-test-row { flex-wrap: wrap; row-gap: 8px; } /* ---------- Filas de botones ---------- Dos botones seguidos no caben en 340 px: el segundo se salía del panel y quedaba cortado contra el borde —"Enviar a revisión" a medias— sin que nada indicara que había que desplazar a un lado para verlo entero. (Las tablas sí siguen desplazando el panel a lo ancho. Sacar el desplazamiento a la tabla pide `display: block`, y con eso la cabecera y el cuerpo dejan de compartir columnas: se descuadra sola.) */ .copy-row { flex-wrap: wrap; row-gap: 8px; } } /* Pantalla completa del editor. En escritorio también: un prompt de miles de caracteres se revisa mejor a página entera que en una columna. */ .editor-panel.editor-full { position: fixed; inset: 0; /* Por debajo del asistente (95) a propósito: se le puede pedir un cambio con el editor abierto a pantalla completa y hay que ver la hoja del asistente por encima, no debajo. El botón ✨ (90) también sigue a la vista. */ z-index: 60; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .editor-panel.editor-full #prompt-editor { min-height: 0; } /* ---------- El asistente del prompt, como ventana ---------- Ocupaba la pantalla entera de borde a borde. Sin nada visible detrás no se lee como una ventana abierta sino como otra sección del panel, y la ✕ de cerrar quedaba fuera del área visible: había que alejar la vista con los dedos para encontrarla. Pasa a ser una hoja que sube desde abajo, con el panel a la vista por detrás y su propio fondo para cerrarla al tocar fuera. */ .drawer-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, 0.55); display: none; } @media (max-width: 700px) { .drawer-backdrop:not(.hidden) { display: block; } .drawer { top: auto; left: 10px; right: 10px; bottom: 0; width: auto; max-width: none; height: 82dvh; border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.6); padding-bottom: env(safe-area-inset-bottom); } /* Los dos botones de la cabecera son el único modo de salir o de empezar de cero: no se encogen, y con 40 px se aciertan con el dedo. */ .drawer-head { gap: 8px; padding: 12px; } .drawer-head .btn.icon { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 16px; } .drawer-title { min-width: 0; } .drawer-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-body { padding: 14px; } .drawer-welcome h2 { font-size: 19px; } } /* ---------- Sección de arriba y sección de abajo, repartidas a mano ---------- En el escritorio las dos mitades van lado a lado y el reparto no importa: sobra ancho. En el teléfono van una encima de la otra, y ahí el reparto es la diferencia entre poder leer algo y no. La rejilla pasa a tener tres filas —mitad, tirador, mitad— y el tirador mueve `--split-top`. El tirador no existe en escritorio: `display: none` lo saca de la rejilla y las dos columnas de siempre quedan intactas. */ .split-grip { display: none; } @media (max-width: 700px) { .split { grid-template-columns: 1fr; grid-template-rows: var(--split-top, 38%) 26px minmax(0, 1fr); gap: 0; } /* El reparto de salida de cada sección. Lo que se mira primero, arriba y grande: en Prompt es el editor; en Conversaciones, la lista —hasta que se elige una, que entonces se aparta sola—. */ .builder-split { --split-top: 72%; } .test-split { --split-top: 56%; } .analysis-split, .sim-split { --split-top: 46%; } .split-grip { display: grid; place-items: center; cursor: row-resize; /* El navegador entendería el arrastre como desplazamiento de la página. */ touch-action: none; } .split-grip::before { content: ""; width: 52px; height: 4px; border-radius: 999px; background: var(--border); transition: background 0.12s ease, width 0.12s ease; } .split-grip.dragging::before { background: var(--accent); width: 72px; } /* Análisis y Simulación se quedaban en dos columnas —320 px fijos más el resto— porque su regla vive más abajo en la hoja que la que apila el resto de pantallas. En 375 px eso es una columna montada sobre la otra. */ .analysis-split, .sim-split { grid-template-columns: 1fr; } /* Su columna izquierda no es una lista: es lista + controles + otra lista. Con el alto acotado hay que poder recorrerla entera, y de una sola vez: tres zonas de desplazamiento anidadas dentro de un panel no se manejan con el dedo. */ .analysis-split .list-panel, .sim-split .list-panel { overflow-y: auto; } .audit-list, .run-list, .profile-list { max-height: none; /* Con `overflow-y: auto` y sin alto propio, un hijo flex se encoge a cero: la lista de perfiles desaparecía y el panel arrancaba en los controles. Aquí miden su contenido y quien desplaza es el panel. */ overflow-y: visible; flex: 0 0 auto; } } /* ---------- Inicio ---------- La pantalla de llegada. Reusa `.stats` y `.panel` a propósito: el Inicio no es un lenguaje visual nuevo, es el resumen de lo que ya hay. */ .home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; } .home-title { margin: 0; font-size: 22px; letter-spacing: -0.02em; } .home-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); } .home-head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* La pastilla de etapa no se encoge: recortada dice "ETAPA DEMI", que además de feo es exactamente el dato que no se puede perder. */ #home-etapa { flex: 0 0 auto; margin-left: 0; } /* Los tiles del Inicio no son cuatro fijos: el asesor ve menos y el administrador cinco. Con una rejilla de cuatro, el quinto caía solo a una fila entera. Se reparten por ancho. */ #home-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .home-head-right select { width: auto; padding: 7px 10px; font-size: 13px; } /* Cuatro tarjetas que se reparten el ancho y caen a dos columnas, y a una, según lo que haya. Sin número de columnas fijo: los tiles cambian con el rol —el asesor ve menos— y una rejilla de cuatro le dejaría dos huecos. */ .home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-content: start; grid-auto-rows: min-content; overflow-y: auto; flex: 1; min-height: 0; } .home-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; } /* La nota bajo un tile: el número grande dice cuánto, la nota dice de qué está hecho. Es lo que evita que "5 conversaciones" se lea como cinco clientes. */ .stat-note { font-size: 11px; color: var(--text-faint); margin-top: 3px; } /* Barra proporcional. Sin ejes ni rejilla: en un resumen lo que se compara es una fila contra otra, y para eso basta el largo. */ .hbar { display: flex; flex-direction: column; gap: 5px; } .hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .hbar-label { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; } .hbar-val { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-dim); } .hbar-track { height: 7px; border-radius: 999px; background: var(--bg-input); overflow: hidden; } .hbar-fill { height: 100%; border-radius: 999px; background: linear-gradient( 90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--grad-a)) ); } .hbar-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; } .home-sep { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); border-top: 1px solid var(--border-soft); padding-top: 11px; margin-top: 3px; } .home-gap { display: flex; flex-direction: column; gap: 4px; } .home-gap-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .home-gap-q { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .home-gap-meta { font-size: 11.5px; color: var(--text-faint); } @media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } .home-head-right { width: 100%; } .home-head-right select { flex: 1; } /* De dos en dos: uno por fila obliga a desplazar cinco pantallas para leer cinco números, que es justo lo contrario de un resumen. */ #home-stats { grid-template-columns: repeat(2, 1fr); } #home-stats .stat-value { font-size: 21px; } } /* El nombre del lead en la lista. Va con el peso del contenido, no en la fuente monoespaciada del identificador: es una persona, no un código. */ .conv-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* Marca de prueba del equipo en la tabla de escalados. Va junto al nombre porque el nombre es justo lo que tapaba el prefijo `test:`. */ .seg-prueba { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } /* Horas de silencio del re-enganche. Dos campos de hora, uno al lado del otro. */ .fup-quiet-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .fup-quiet-row .field { flex: 0 1 150px; } /* Prueba de QStash: botón y resultado en la misma línea. */ .wh-qcheck { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; } .wh-qcheck .muted { font-size: 13px; } /* Un indicador que dice que algo va mal tiene que verse que va mal. */ #wh-qstash.bad { color: var(--red); } /* --------------------------------------------------------------------------- Conversaciones: sin leer y cerradas. --------------------------------------------------------------------------- */ /* Sin leer: una barra a la izquierda y el texto en firme. Se ve de reojo recorriendo la lista, que es como se mira una bandeja. */ .conv-item.unread { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .conv-item.unread .conv-name, .conv-item.unread .conv-id, .conv-item.unread .conv-preview { font-weight: 600; } /* Cerrada: sigue ahí pero no reclama nada. */ .conv-item.cerrada { opacity: 0.62; } .conv-outcome { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); } /* Diálogo de finalizar. */ .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); z-index: 60; padding: 20px; } .modal-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; } .modal-card h3 { margin: 0; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* --------------------------------------------------------------------------- La cabecera de la lista se quedó estrecha al añadir el segundo filtro: tres controles y un buscador no caben en una línea de 300 px. El buscador ocupa su propia fila, que es el que necesita sitio para leerse mientras se escribe. --------------------------------------------------------------------------- */ .list-panel .panel-head { flex-wrap: wrap; row-gap: 8px; } .list-panel .panel-head #conv-search { flex: 1 0 100%; min-width: 0; } .list-panel .panel-head select { flex: 1 1 auto; min-width: 0; } /* Los pulgares comparten línea con "Cami · hora", pegados a la burbuja. Colgando debajo quedaban a media distancia de la burbuja siguiente y parecían suyos. Discretos hasta que pasas por encima del mensaje: valorar es opcional y no debe pesar en la lectura. */ .chat .msg.ai .msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; } .chat .msg.ai .msg-meta .rate-bar { margin-top: 0; order: -1; opacity: 0; transition: opacity 0.15s; } .chat .msg.ai:hover .msg-meta .rate-bar, .chat .msg.ai .msg-meta .rate-bar.rated, .chat .msg.ai .msg-meta .rate-bar:focus-within { opacity: 1; } .chat .msg.ai .msg-meta .rate-btn { font-size: 12px; line-height: 1; padding: 0 2px; } /* --------------------------------------------------------------------------- Etiquetas en la cabecera de la conversación. Las que pone un asesor se ven distintas de las que deduce la IA: saber quién la puso cambia cuánto te puedes fiar del dato. --------------------------------------------------------------------------- */ .tag-chip.manual { border-color: var(--accent); color: var(--accent); } .tag-chip .tag-x { margin-left: 4px; border: 0; background: none; color: inherit; font-size: 10px; line-height: 1; padding: 0 1px; cursor: pointer; opacity: 0; } .tag-chip:hover .tag-x { opacity: 0.7; } .tag-chip .tag-x:hover { opacity: 1; } .tag-chip.add { border-style: dashed; color: var(--text-dim); cursor: pointer; background: none; font: inherit; font-size: 11px; } .tag-chip.add:hover { color: var(--accent); border-color: var(--accent); } /* --------------------------------------------------------------------------- Reasignar en bloque. La barra solo aparece con algo seleccionado: una fila de controles siempre visible para una acción que casi nunca se usa es ruido. --------------------------------------------------------------------------- */ .seg-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-size: 13px; } .seg-bulk select { max-width: 200px; } th.seg-check, td.seg-check { width: 32px; text-align: center; padding-left: 8px; padding-right: 0; } /* --------------------------------------------------------------------------- Reglas por canal. Cada una es una tarjeta con todo lo suyo dentro: repartir los campos por la pantalla obligaría a recordar a qué canal pertenece cada cosa mientras se edita. --------------------------------------------------------------------------- */ .canal-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .canal-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-elev-2); } .canal-head { display: flex; align-items: center; gap: 8px; } .canal-head .head-right { margin-left: auto; } .canal-extra { min-height: 68px; resize: vertical; } .canal-skills { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 0 0; border-top: 1px dashed var(--border); } .canal-skill { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); } .canal-card > .btn { align-self: flex-start; } /* Horario: siete filas iguales. Un día por línea se lee de un vistazo; una plantilla "de lunes a viernes" obligaría a mentir a quien cierra el sábado a la una. */ .hora-dia { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .hora-nombre { width: 92px; font-size: 13px; color: var(--text-dim); } .hora-tramo { flex: 0 1 160px; } /* Reglas del negocio: una línea por regla, con su interruptor. Apagar sin borrar importa — una regla que se quita para una campaña suele volver. */ .regla-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .regla-texto { flex: 1; font-size: 13.5px; } .regla-texto.off { color: var(--text-faint); text-decoration: line-through; } .hora-tramo { flex: 1 1 240px; max-width: 320px; } /* Decisión de un hallazgo. Los botones van dentro de la tarjeta y no en una barra aparte: la decisión pertenece a ESE hallazgo, y separarla obligaría a recordar cuál se estaba mirando. */ .decision { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .decision-estado { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); } .decision-estado.aplicado { border-color: var(--accent); color: var(--accent); } .decision-estado.descartado { color: var(--text-faint); text-decoration: line-through; } .decision-texto { font-size: 12px; color: var(--text-dim); flex: 1; min-width: 0; } .decision-estado.enviado { border-color: var(--amber); color: var(--amber); } /* Vuelta al análisis desde el Prompt Builder. */ .volver-analisis { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-size: 13px; } /* Un análisis con todo decidido ya no reclama nada. */ .audit-item.cerrado { opacity: 0.55; } /* Aviso de sugerencia que repite un problema ya decidido. */ .decision-repetido { font-size: 11px; color: var(--amber); border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 999px; padding: 1px 8px; } /* Números de WhatsApp: cada línea es una tarjeta, porque lleva más de un dato y el alcance es un texto que se edita ahí mismo. */ .wanum-item { padding: 12px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; } .wanum-item:last-child { border-bottom: 0; } .wanum-head { display: flex; align-items: center; gap: 8px; } .wanum-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-soft); color: var(--text-faint); } .wanum-datos { font-size: 12.5px; margin: 0; } .wanum-label { font-size: 12px; } .wanum-scope { width: 100%; resize: vertical; } .wanum-item > .btn { align-self: flex-start; } .wanum-contador { align-self: flex-end; font-size: 11.5px; } .wanum-contador.wanum-pasado { color: var(--red); font-weight: 600; } .wanum-aviso { margin: 0; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--amber); color: var(--text-faint); } /* Conversaciones que se pasaron del tope: señal de calidad, no de cobro. */ .larga-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .larga-item:last-child { border-bottom: 0; } .larga-quien { font-size: 13.5px; text-align: left; } .larga-datos { font-size: 12.5px; margin-left: auto; } .chip.larga-ok { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-soft); color: var(--text-faint); } /* El veredicto de la charla larga. El color es el mensaje: verde es que la charla valía la pena, ámbar que falta material, rojo que el agente falló. */ .chip.veredicto { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-soft); color: var(--text-dim); } .chip.veredicto.avance { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); } .chip.veredicto.falta_info { color: var(--amber); border-color: var(--amber); background: rgba(224, 179, 65, 0.12); } .chip.veredicto.perdido { color: var(--red); border-color: var(--red); background: rgba(255, 107, 107, 0.12); }