: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; } .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; } /* ---------- 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; } /* ---------- Webhook ---------- */ .webhook-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 14px; flex: 1; min-height: 0; align-items: start; overflow-y: auto; } .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-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; } .subview.active { display: block; } .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; } .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 ---------- */ .users-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 14px; flex: 1; min-height: 0; } .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; } } @media (max-width: 700px) { .app { flex-direction: column; } .sidebar { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border); } .tabs { flex-direction: row; flex: 1; overflow-x: auto; } .tab { padding: 8px 12px; } .user-menu { flex-direction: row; margin-top: 0; padding-top: 0; border-top: 0; } .split, .builder-split, .test-split, .users-wrap { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .view { padding: 10px; overflow-y: auto; } } /* ---------- Configuración del agente ---------- */ .settings-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; } .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); }