/*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ /* ==================================================================== UPICO V5 — The Company Brain Ported from docs/mockup-brain-ui.html. One set of components, two palettes driven by [data-theme] on : night (default) + day. ==================================================================== */ /* ---------------- THEME PALETTES ---------------- */ /* NIGHT — the original mockup, warm-dark. */ :root, [data-theme="night"] { --bg: #0a0a0c; --surface: #101013; --surface-2: #16161b; --surface-3: #1c1c23; --border: #26262e; --border-soft: #1e1e25; --text: #ece9e3; --strong: #ffffff; --dim: #8b8b95; --faint: #55555f; --accent: #ff7a45; --accent-ink: #1a0d06; /* texto sobre el naranja */ --accent-soft: rgba(255, 122, 69, 0.12); --accent-line: rgba(255, 122, 69, 0.3); --mint: #5eead4; --l1: #ff7a45; /* operativo */ --l2: #5eead4; /* terreno */ --l3: #a78bfa; /* politicas */ --l4: #fbbf24; /* coordinacion */ --l5: #f472b6; /* estrategico */ --shadow-cmd: 0 8px 40px rgba(0, 0, 0, 0.4); --shadow-card: 0 0 18px rgba(255, 122, 69, 0.25); --topbar-bg: rgba(16, 16, 19, 0.6); --bg-glow-1: rgba(255, 122, 69, 0.06); --bg-glow-2: rgba(94, 234, 212, 0.05); --scroll-thumb: var(--border); color-scheme: dark; } /* DAY — warm off-white, light elevated surfaces, dark readable ink. Brand orange deepened to #e85d2c for AA contrast as text/links; the solid-orange button keeps a vivid #f2683a fill with dark ink. Lóbulo hues are pulled toward jewel tones so they read on a light bg. */ [data-theme="day"] { --bg: #faf6f1; /* warm off-white */ --surface: #ffffff; /* elevated cards */ --surface-2: #f4eee7; /* warm panel / rails */ --surface-3: #ece4da; /* user bubble / chips */ --border: #e0d6ca; /* soft warm border */ --border-soft: #ebe2d8; --text: #2b2622; /* dark warm ink (AA on bg) */ --strong: #18130f; --dim: #6f6459; /* muted but AA on surface */ --faint: #9a8d7e; --accent: #e85d2c; /* deepened orange for text/links (AA) */ --accent-ink: #ffffff; /* texto sobre el naranja sólido */ --accent-soft: rgba(232, 93, 44, 0.1); --accent-line: rgba(232, 93, 44, 0.28); --mint: #0d9488; /* teal, AA on light */ --l1: #d9531f; /* operativo */ --l2: #0d9488; /* terreno */ --l3: #7c5cff; /* politicas */ --l4: #c08407; /* coordinacion */ --l5: #d6447f; /* estrategico */ --shadow-cmd: 0 10px 34px rgba(60, 40, 20, 0.12); --shadow-card: 0 6px 22px rgba(216, 83, 31, 0.18); --topbar-bg: rgba(255, 255, 255, 0.7); --bg-glow-1: rgba(232, 93, 44, 0.08); --bg-glow-2: rgba(13, 148, 136, 0.06); --scroll-thumb: #d8ccbe; color-scheme: light; } /* The accent button keeps a vivid fill in day mode (deepened var is for ink). */ [data-theme="day"] { --accent-fill: #f2683a; } :root, [data-theme="night"] { --accent-fill: var(--accent); } /* ---------------- RESET / BASE ---------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; overflow: hidden; -webkit-font-smoothing: antialiased; background-image: radial-gradient( circle at 20% -10%, var(--bg-glow-1), transparent 45% ), radial-gradient(circle at 90% 110%, var(--bg-glow-2), transparent 45%); transition: background-color 0.3s ease, color 0.3s ease; } ::selection { background: var(--accent-soft); color: var(--strong); } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } button { font-family: inherit; } input, textarea { font-family: inherit; } /* ============ SHELL ============ */ .shell { display: grid; grid-template-columns: 248px 1fr 320px; grid-template-rows: 48px 1fr; height: 100vh; /* fallback */ height: 100dvh; /* viewport dinámico: respeta la barra del navegador en mobile */ } /* topbar */ .topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 5; } .logo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; } .logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2.4s infinite; } .logo small { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--faint); font-weight: 500; letter-spacing: 0.04em; margin-left: 2px; align-self: flex-start; margin-top: 1px; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .tenant { display: flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; cursor: pointer; transition: 0.15s; background: var(--surface-2); color: var(--text); } .tenant:hover { border-color: var(--faint); } .tenant .chip { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } .tenant b { font-weight: 600; } .tenant .caret { color: var(--faint); font-size: 10px; } .brain-status { margin-left: auto; display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--dim); } .sync { display: flex; align-items: center; gap: 6px; } .sync .live { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 1.6s infinite; } .sync .live.off { background: var(--faint); box-shadow: none; animation: none; } .sync b { color: var(--mint); font-weight: 500; } .brain-status .sep-dot { color: var(--faint); } /* theme toggle */ .theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--dim); cursor: pointer; transition: 0.15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); } .theme-toggle svg { width: 16px; height: 16px; } /* ============ LEFT: LÓBULOS ============ */ .rail-left { border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 16px 0; } .rail-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0 18px; margin-bottom: 11px; display: flex; justify-content: space-between; align-items: center; } .lobes { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; } .lobe { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 8px; cursor: pointer; transition: 0.15s; position: relative; } .lobe:hover { background: var(--surface-2); } .lobe.active { background: var(--surface-2); } .lobe .ring { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; position: relative; display: grid; place-items: center; } .lobe .core { width: 9px; height: 9px; border-radius: 50%; animation: breathe 3s infinite; } .lobe .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.25; } .lobe .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.5; animation: ripple 3s infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } @keyframes ripple { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } } .lobe .meta { flex: 1 1; min-width: 0; } .lobe .name { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text); } .lobe .src { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobe .cnt { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--dim); font-weight: 500; } .l1 { color: var(--l1); } .l2 { color: var(--l2); } .l3 { color: var(--l3); } .l4 { color: var(--l4); } .l5 { color: var(--l5); } .bg-l1 { background: var(--l1); } .bg-l2 { background: var(--l2); } .bg-l3 { background: var(--l3); } .bg-l4 { background: var(--l4); } .bg-l5 { background: var(--l5); } .skills-list { padding: 0 10px; display: flex; flex-direction: column; gap: 1px; margin-top: 6px; } .skill-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--dim); cursor: pointer; transition: 0.12s; } .skill-row:hover { background: var(--surface-2); color: var(--text); } .skill-row .ic { color: var(--accent); font-size: 11px; } .sep { height: 1px; background: var(--border-soft); margin: 16px 18px; } /* ============ CENTER ============ */ .center { display: flex; flex-direction: column; overflow: hidden; position: relative; } .canvas { flex: 1 1; overflow-y: auto; padding: 34px 40px 20px; } .hero { text-align: center; margin-top: 42px; animation: rise 0.6s ease both; } .hero h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.025em; line-height: 1.1; } .hero h1 .grad { background: linear-gradient(95deg, var(--accent), #ffb088); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="day"] .hero h1 .grad { background: linear-gradient(95deg, var(--accent), #f59e6b); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--dim); font-size: 14px; margin-top: 12px; max-width: 430px; margin-inline: auto; line-height: 1.55; } .suggest { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; max-width: 560px; margin: 30px auto 0; } .scard { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 11px; padding: 13px 15px; cursor: pointer; transition: 0.18s; position: relative; overflow: hidden; font: inherit; color: inherit; } .scard:hover { border-color: var(--faint); transform: translateY(-2px); background: var(--surface-2); } .scard:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .scard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c, var(--accent)); opacity: 0; transition: 0.18s; } .scard:hover::before { opacity: 1; } .scard .tag { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--accent)); margin-bottom: 6px; display: block; } .scard .q { font-size: 13px; color: var(--text); line-height: 1.4; font-weight: 500; } /* feed de respuesta del agente */ .thread { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .msg-user { align-self: flex-end; max-width: 80%; background: var(--surface-3); border: 1px solid var(--border); padding: 11px 15px; border-radius: 13px 13px 3px 13px; font-size: 13.5px; line-height: 1.45; color: var(--text); } .agent { display: flex; gap: 13px; animation: rise 0.4s ease both; } .agent .av { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #cc4d1f); display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 14px; color: var(--accent-ink); box-shadow: var(--shadow-card); } .agent .body { flex: 1 1; min-width: 0; } .thinking { display: flex; align-items: center; gap: 9px; color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: 11.5px; } .thinking .spin { width: 12px; height: 12px; border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .retrieval { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 4px; } .rchip { font-family: "JetBrains Mono", monospace; font-size: 10.5px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--dim); display: flex; align-items: center; gap: 6px; animation: rise 0.3s ease both; background: var(--surface); } .rchip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .atext { font-size: 13.5px; line-height: 1.6; color: var(--text); margin-bottom: 4px; } .atext b, .atext strong { color: var(--strong); font-weight: 600; } /* ---------- markdown rendering inside agent answers ---------- */ .md { font-size: 13.5px; line-height: 1.6; color: var(--text); } .md > *:first-child { margin-top: 0; } .md > *:last-child { margin-bottom: 0; } .md p { margin: 0 0 9px; } .md strong, .md b { color: var(--strong); font-weight: 600; } .md em { font-style: italic; } .md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .md ul, .md ol { margin: 0 0 9px; padding-left: 20px; } .md li { margin: 3px 0; } .md li::marker { color: var(--accent); } .md h1, .md h2, .md h3, .md h4 { font-family: "Bricolage Grotesque", sans-serif; color: var(--strong); line-height: 1.25; margin: 14px 0 8px; } .md h1 { font-size: 18px; } .md h2 { font-size: 16px; } .md h3 { font-size: 14.5px; } .md code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; } .md pre { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 12px 14px; overflow-x: auto; margin: 0 0 10px; } .md pre code { background: none; border: 0; padding: 0; } .md blockquote { border-left: 2px solid var(--accent-line); padding-left: 11px; color: var(--dim); margin: 0 0 9px; } .md hr { border: 0; border-top: 1px solid var(--border-soft); margin: 12px 0; } /* markdown tables → styled like the mockup's data table */ .md table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 4px 0 12px; font-size: 12.5px; } .md thead th { background: var(--surface-2); text-align: left; font-weight: 600; color: var(--text); padding: 10px 13px; border-bottom: 1px solid var(--border-soft); } .md tbody td { padding: 9px 13px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .md tbody tr:last-child td { border-bottom: 0; } .md tbody tr:hover { background: var(--surface-2); } /* skill execution card */ .exec { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); margin-top: 12px; overflow: hidden; animation: rise 0.45s ease both; } .exec-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } .exec-head .ic { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; } .exec-head .t { font-weight: 600; font-size: 13px; color: var(--text); } .exec-head .badge { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); } .exec-head .badge.read { color: var(--mint); border-color: var(--mint); background: transparent; } .steps { padding: 6px 15px 12px; } .step { display: flex; gap: 11px; padding: 8px 0; font-size: 12.5px; } .step .n { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--accent); width: 16px; flex-shrink: 0; padding-top: 1px; } .step .txt { color: var(--text); line-height: 1.45; flex: 1 1; } .step .txt small { display: block; color: var(--faint); font-family: "JetBrains Mono", monospace; font-size: 10px; margin-top: 3px; } .step.done .n::after { content: "✓"; color: var(--mint); } .step.done .n span { display: none; } /* human in the loop confirm */ .hitl { margin: 13px 15px; padding: 13px; border: 1px solid rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.04); border-radius: 10px; } [data-theme="day"] .hitl { border-color: rgba(192, 132, 7, 0.3); background: rgba(192, 132, 7, 0.07); } .hitl .warn { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--l4); font-weight: 600; margin-bottom: 7px; } .hitl .source { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--dim); line-height: 1.5; border-left: 2px solid var(--l4); padding-left: 9px; margin-bottom: 12px; white-space: pre-wrap; } .hitl .source b { color: var(--text); } .hitl .ask { font-size: 12.5px; margin-bottom: 10px; color: var(--text); line-height: 1.5; } .hitl .ask b { color: var(--strong); } .hitl-btns { display: flex; gap: 8px; } .btn { font-family: "Hanken Grotesk", sans-serif; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); transition: 0.15s; background: transparent; color: var(--text); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); } .btn.primary:hover:not(:disabled) { filter: brightness(1.08); } .btn.ghost { background: transparent; color: var(--dim); } .btn.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--faint); } /* parameters / display preformatted block */ .params { margin: 0 15px 13px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 11px 13px; font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.65; color: var(--dim); white-space: pre-wrap; word-break: break-word; } /* result / success state */ .exec-result { margin: 0 15px 14px; padding: 12px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; } .exec-result.ok { border: 1px solid var(--mint); background: rgba(94, 234, 212, 0.06); } [data-theme="day"] .exec-result.ok { background: rgba(13, 148, 136, 0.07); } .exec-result.ok .head { color: var(--mint); font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .exec-result.cancel { border: 1px solid var(--border); color: var(--faint); font-family: "JetBrains Mono", monospace; font-size: 11px; } .exec-result.err { border: 1px solid #ef4444; background: rgba(239, 68, 68, 0.06); color: var(--text); } .exec-result .body { color: var(--text); } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* command bar */ .cmdwrap { padding: 14px 40px 22px; border-top: 1px solid var(--border); background: linear-gradient(0deg, var(--bg), transparent); } .cmdbar { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; padding: 4px 4px 4px 16px; transition: 0.2s; box-shadow: var(--shadow-cmd); } .cmdbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-cmd); } .cmdbar .pre { color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 15px; } .cmdbar input { flex: 1 1; background: none; border: 0; outline: 0; color: var(--text); font-family: "Hanken Grotesk", sans-serif; font-size: 14.5px; padding: 11px 0; } .cmdbar input::placeholder { color: var(--faint); } .cmdbar input:disabled { color: var(--faint); } .cmdbar .send { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-fill); color: var(--accent-ink); border: 0; cursor: pointer; display: grid; place-items: center; font-size: 16px; transition: 0.15s; flex-shrink: 0; } .cmdbar .send:hover:not(:disabled) { filter: brightness(1.08); } .cmdbar .send:disabled { opacity: 0.5; cursor: not-allowed; } .cmd-hint { max-width: 620px; margin: 9px auto 0; display: flex; align-items: center; gap: 16px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--faint); } .cmd-hint span { display: flex; align-items: center; gap: 5px; } .cmd-hint kbd { border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--surface); } .cmd-hint .live-tag { margin-left: auto; color: var(--mint); } /* ============ RIGHT: INGESTA ETL ============ */ .rail-right { border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 16px 0; } .rail-right .demo-pill { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .etl { padding: 0 14px; display: flex; flex-direction: column; gap: 11px; } .etl-card { border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); padding: 0; overflow: hidden; animation: slidein 0.5s ease both; } @keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .etl-raw { padding: 10px 12px; border-bottom: 1px dashed var(--border); } .etl-raw .from { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--faint); display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .etl-raw .from .wa { width: 5px; height: 5px; border-radius: 50%; background: #25d366; } .etl-raw .body { font-size: 12px; color: var(--dim); line-height: 1.4; font-style: italic; } .etl-arrow { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 0; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; } .etl-arrow .line { height: 1px; flex: 1 1; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; } .etl-json { padding: 10px 12px; } .etl-json .kv { font-family: "JetBrains Mono", monospace; font-size: 10.5px; line-height: 1.65; } .etl-json .k { color: var(--l3); } .etl-json .v { color: var(--text); } .etl-foot { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--border-soft); font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--dim); } .etl-foot .into { display: flex; align-items: center; gap: 5px; color: var(--text); } .etl-foot .into .d { width: 6px; height: 6px; border-radius: 50%; } .etl-foot .imp { margin-left: auto; color: var(--faint); } /* ============ TEACH / UPLOAD AFFORDANCE (left rail) ============ */ .teach-wrap { padding: 0 10px; } .teach-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px dashed var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: 0.15s; text-align: left; } .teach-btn:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); filter: brightness(1.05); } .teach-btn .ic { font-size: 13px; line-height: 1; } .teach-btn .ext { margin-left: auto; font-size: 9.5px; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; background: var(--surface); } .teach-hint { font-size: 10.5px; color: var(--faint); line-height: 1.45; padding: 8px 4px 0; } /* attach (clip) button inside the command bar */ .cmdbar .attach { width: 34px; height: 34px; border-radius: 9px; background: transparent; border: 1px solid var(--border); color: var(--dim); cursor: pointer; display: grid; place-items: center; transition: 0.15s; flex-shrink: 0; } .cmdbar .attach:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .cmdbar .attach svg { width: 16px; height: 16px; } /* ============ UPLOAD MODAL ============ */ .upmodal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: rise 0.18s ease both; } [data-theme="day"] .upmodal-overlay { background: rgba(40, 28, 16, 0.32); } .upmodal { width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-cmd); overflow: hidden; animation: modalpop 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes modalpop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .upmodal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } .upmodal-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .upmodal-ic svg { width: 18px; height: 18px; } .upmodal-titles { flex: 1 1; min-width: 0; } .upmodal-titles h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--strong); line-height: 1.2; } .upmodal-titles p { font-size: 12px; color: var(--dim); line-height: 1.45; margin-top: 4px; } .upmodal-close { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--dim); cursor: pointer; display: grid; place-items: center; transition: 0.15s; } .upmodal-close:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); } .upmodal-close:disabled { opacity: 0.4; cursor: not-allowed; } .upmodal-close svg { width: 15px; height: 15px; } .upmodal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .upmodal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-2); } /* dropzone */ .dropzone { position: relative; display: block; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--surface-2); padding: 22px 16px; cursor: pointer; transition: 0.15s; } .dropzone:hover { border-color: var(--accent-line); background: var(--accent-soft); } .dropzone.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); } .dropzone.has-file { padding: 14px; border-style: solid; cursor: default; } .dz-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dropzone.has-file .dz-input { cursor: default; } .dz-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; } .dz-glyph { color: var(--accent); display: grid; place-items: center; } .dz-glyph svg { width: 26px; height: 26px; } .dz-text { font-size: 13px; color: var(--text); line-height: 1.4; } .dz-text b { color: var(--strong); font-weight: 600; } .dz-hint { font-size: 10px; color: var(--faint); letter-spacing: 0.04em; } .dz-file { display: flex; align-items: center; gap: 11px; pointer-events: none; } .dz-file-ic { font-size: 22px; flex-shrink: 0; } .dz-file-meta { flex: 1 1; min-width: 0; } .dz-file-name { font-size: 13px; font-weight: 600; color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-file-sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; } .dz-file-swap { font-size: 10px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 6px; padding: 3px 8px; flex-shrink: 0; } /* preview */ .up-preview { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 10px 12px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; line-height: 1.55; color: var(--dim); white-space: pre-wrap; word-break: break-word; max-height: 110px; overflow: hidden; margin: 0; } /* fields */ .up-field { display: flex; flex-direction: column; gap: 7px; } .up-field > label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .up-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); font-family: "Hanken Grotesk", sans-serif; font-size: 13.5px; outline: 0; transition: 0.15s; } .up-input::placeholder { color: var(--faint); } .up-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .up-input:disabled { opacity: 0.6; } .up-fieldnote { font-size: 11px; color: var(--dim); line-height: 1.45; } .up-fieldnote b { color: var(--text); font-weight: 600; } .up-fieldnote.err { color: #ef4444; } [data-theme="day"] .up-fieldnote.err { color: #c33; } /* lobe selector */ .up-lobes { display: flex; flex-wrap: wrap; gap: 7px; } .up-lobe { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--dim); font-family: "Hanken Grotesk", sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: 0.15s; } .up-lobe .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); flex-shrink: 0; } .up-lobe:hover:not(:disabled) { border-color: var(--c, var(--accent)); color: var(--text); } .up-lobe.sel { border-color: var(--c, var(--accent)); color: var(--strong); background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); box-shadow: 0 0 0 1px var(--c, var(--accent)) inset; } .up-lobe:disabled { cursor: not-allowed; opacity: 0.6; } /* result blocks */ .up-result { border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.5; } .up-result.ok { border: 1px solid var(--mint); background: rgba(94, 234, 212, 0.07); } [data-theme="day"] .up-result.ok { background: rgba(13, 148, 136, 0.08); } .up-result-head { color: var(--mint); font-weight: 600; font-size: 13px; margin-bottom: 8px; } .up-result.err { border: 1px solid #ef4444; background: rgba(239, 68, 68, 0.07); color: var(--text); } /* progress in footer */ .up-progress { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: 11.5px; } .up-progress .spin { width: 13px; height: 13px; border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } /* scrollbars */ .scrollbar::-webkit-scrollbar { width: 7px; } .scrollbar::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; } .scrollbar::-webkit-scrollbar-track { background: transparent; } /* ============ RESPONSIVE (keep it from breaking on a laptop) ============ */ @media (max-width: 1180px) { .shell { grid-template-columns: 220px 1fr 280px; } .canvas { padding: 30px 26px 18px; } .cmdwrap { padding: 14px 26px 20px; } } @media (max-width: 980px) { .shell { grid-template-columns: 200px 1fr; } .rail-right { display: none; } } /* Tablet / mobile: UNA columna en FLUJO DE DOCUMENTO (no app-shell fijo). Clave: el documento (body) scrollea → el navegador puede hacer pull-to-refresh y overscroll. Topbar pegada arriba (sticky), command bar fija abajo. */ @media (max-width: 720px) { html, body { height: auto; min-height: 100%; overflow: visible; /* desbloquea el scroll del documento → arrastrar para refrescar */ overscroll-behavior-y: auto; } .shell { display: block; /* sin grid 100dvh fijo */ height: auto; min-height: 100dvh; } .rail-left, .rail-right { display: none; } .center { display: block; overflow: visible; } .canvas { overflow: visible; /* scrollea el documento, no el canvas */ padding: 18px 16px 104px; /* el padding-bottom deja lugar para la cmdbar fija */ } .topbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; gap: 10px; padding: 0 12px; } .cmdwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); } .brain-status { display: none; /* secundario: libera ancho en la topbar */ } .theme-toggle { margin-left: auto; /* queda a la derecha al ocultar brain-status */ } .hero { margin-top: 22px; } .hero h1 { font-size: 24px; } .hero p { font-size: 13px; margin-top: 10px; } .suggest { grid-template-columns: 1fr; gap: 9px; margin-top: 22px; } .thread, .cmdbar, .cmd-hint { max-width: 100%; } .msg-user { max-width: 90%; } .cmd-hint { display: none; /* atajos de teclado: desktop only */ } /* tablas markdown anchas → scroll horizontal en vez de desbordar la pantalla */ .md table { display: block; overflow-x: auto; white-space: nowrap; } /* el modal de upload es un overlay fixed: encaja sin romper el flujo del documento. lo alineamos arriba y dejamos aire abajo para la command bar fija. */ .upmodal-overlay { align-items: flex-start; padding: 14px 12px; } .upmodal { max-height: calc(100dvh - 28px); } } /* Teléfonos angostos */ @media (max-width: 460px) { .logo { font-size: 15px; } .logo small { display: none; } .tenant { max-width: 44vw; } .tenant b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero h1 { font-size: 21px; } .cmdbar { padding-left: 12px; } .cmdbar input { font-size: 14px; } .exec-head, .steps, .hitl { padding-left: 12px; padding-right: 12px; } } /* ==================================================================== AUTH — splash de carga, pantalla de login (Google) y menú de usuario. Reusa los mismos custom props/glows que la app → day & night coherentes. ==================================================================== */ /* el body ya pinta los radial-glows; estas pantallas viven full-viewport */ .auth-splash, .auth-screen { min-height: 100vh; min-height: 100dvh; width: 100%; display: flex; flex-direction: column; color: var(--text); } /* ---------------- Splash (loading) ---------------- */ .auth-splash { align-items: center; justify-content: center; } .auth-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .auth-logo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; } .auth-logo small { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--faint); font-weight: 500; letter-spacing: 0.04em; align-self: flex-start; margin-top: 2px; } .auth-spin { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } .auth-splash-txt { font-size: 11px; letter-spacing: 0.04em; color: var(--dim); } /* ---------------- Login screen ---------------- */ .auth-screen { align-items: center; justify-content: center; position: relative; padding: 24px; } .auth-topbar { position: absolute; top: 16px; right: 16px; z-index: 2; } .auth-card { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 32px 32px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-cmd); } /* halo sutil alrededor de la card, en la marca */ .auth-card::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: linear-gradient( 140deg, var(--accent-line), transparent 40%, transparent 60%, var(--accent-line) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.7; pointer-events: none; } .auth-card .auth-logo { font-size: 24px; margin-bottom: 2px; } .auth-card .auth-logo .dot { width: 11px; height: 11px; } .auth-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--strong); } .auth-title .grad { background: linear-gradient(90deg, var(--accent), var(--l3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .auth-tagline { font-size: 14px; color: var(--dim); line-height: 1.5; max-width: 320px; } /* Botón Google: superficie clara/elevada, "G" multicolor, label. */ .google-btn { margin-top: 6px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; color: #1f1f1f; font-family: "Hanken Grotesk", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .google-btn:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); transform: translateY(-1px); } .google-btn:active { transform: translateY(0); } .google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .google-g { flex-shrink: 0; } .auth-foot { margin-top: 4px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } /* ---------------- Topbar: acciones (tema + usuario) ---------------- */ .topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* cuando NO hay brain-status (mobile), las acciones se van a la derecha */ @media (max-width: 720px) { .topbar-actions { margin-left: auto; } } /* ---------------- User menu ---------------- */ .usermenu { position: relative; } .usermenu-trigger { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 2px 8px 2px 2px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: 0.15s; max-width: 220px; } .usermenu-trigger:hover { border-color: var(--faint); } .usermenu-email { font-size: 12px; color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .usermenu-caret { color: var(--faint); font-size: 10px; } .avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface-3); } .avatar-fallback { background: linear-gradient(135deg, var(--accent), #cc4d1f); color: var(--accent-ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 12px; border: none; } .avatar-lg { width: 38px; height: 38px; } .avatar-lg.avatar-fallback { font-size: 16px; } .usermenu-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 230px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-cmd); animation: usermenu-in 0.12s ease; } @keyframes usermenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .usermenu-id { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; } .usermenu-id-meta { min-width: 0; } .usermenu-id-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usermenu-id-email { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .usermenu-logout { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.12s; } .usermenu-logout:hover { background: var(--accent-soft); color: var(--accent); } .usermenu-logout svg { width: 15px; height: 15px; flex-shrink: 0; } /* en pantallas chicas el trigger colapsa al avatar (email/caret van con hide-sm) */ @media (max-width: 720px) { .usermenu .hide-sm { display: none; } .usermenu-trigger { padding: 2px; border-color: transparent; background: transparent; } .usermenu-trigger:hover { border-color: var(--border); } } /* login screen en mobile: card a ancho completo, padding cómodo */ @media (max-width: 460px) { .auth-card { padding: 32px 22px 26px; border-radius: 16px; } .auth-title { font-size: 22px; } } /* ==================================================================== PLATFORM PANEL — dashboard de super admin (administración de tenants). Reusa custom props, .btn, .spin, .scrollbar, .upmodal, .up-field, glows. Layout: topbar pegada + área scrolleable. Day & night coherentes. ==================================================================== */ .pf { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } /* topbar reusa .topbar; estos overrides adaptan el grid → flex simple */ .pf-topbar { grid-column: auto; flex-shrink: 0; } .pf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--surface-2); color: var(--text); } .pf-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .pf-chip b { font-weight: 600; } .pf-chip-role { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 5px; padding: 2px 6px; background: var(--accent-soft); } .pf-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pf-refresh { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--dim); cursor: pointer; transition: 0.15s; } .pf-refresh:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); } .pf-refresh:disabled { opacity: 0.5; cursor: not-allowed; } .pf-refresh svg { width: 15px; height: 15px; } /* área scrolleable */ .pf-scroll { flex: 1 1; overflow-y: auto; } .pf-body { max-width: 1040px; margin: 0 auto; padding: 28px 32px 60px; display: flex; flex-direction: column; gap: 22px; } /* header */ .pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .pf-head-titles h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; color: var(--strong); } .pf-head-titles p { color: var(--dim); font-size: 13.5px; line-height: 1.5; margin-top: 6px; max-width: 540px; } .pf-new { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } /* stats row */ .pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; } .pf-stat { position: relative; display: flex; align-items: center; gap: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 16px 17px; overflow: hidden; transition: 0.18s; } .pf-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--accent)); } .pf-stat:hover { border-color: var(--faint); transform: translateY(-2px); } .pf-stat-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); } .pf-stat-meta { min-width: 0; } .pf-stat-num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--strong); letter-spacing: -0.02em; } .pf-stat-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; } /* error banner */ .pf-error { display: flex; align-items: center; gap: 12px; border: 1px solid #ef4444; background: rgba(239, 68, 68, 0.07); border-radius: 11px; padding: 12px 15px; font-size: 13px; color: var(--text); } .pf-error span { flex: 1 1; } .pf-retry { flex-shrink: 0; padding: 6px 13px; font-size: 12px; } /* section */ .pf-section { display: flex; flex-direction: column; gap: 12px; } .pf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pf-section-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; color: var(--strong); display: flex; align-items: baseline; gap: 11px; } .pf-count { font-size: 10.5px; color: var(--faint); letter-spacing: 0.04em; } /* table */ .pf-table-wrap { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .pf-trow { display: grid; grid-template-columns: 1fr 110px 130px 130px 130px; align-items: center; grid-gap: 12px; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); } .pf-table-body .pf-trow:last-child { border-bottom: 0; } .pf-thead { background: var(--surface-2); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 11px; padding-bottom: 11px; } .pf-trow:not(.pf-thead):hover { background: var(--surface-2); } .pf-trow.off { opacity: 0.62; } .pf-tc-act { display: flex; justify-content: flex-end; } .pf-tc-plan, .pf-tc-state { display: flex; } /* tenant name cell */ .pf-tn { display: flex; align-items: center; gap: 11px; min-width: 0; } .pf-tn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--faint); } .pf-tn-dot[data-on="1"] { background: var(--mint); box-shadow: 0 0 8px var(--mint); } .pf-tn-meta { min-width: 0; } .pf-tn-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-tn-sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* plan pill */ .pf-plan { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; background: var(--surface-2); } /* state badge */ .pf-badge { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--border); } .pf-badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pf-badge.on { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 45%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); } .pf-badge.off { color: var(--faint); } .pf-tc-date { font-size: 11px; color: var(--dim); } /* row toggle button */ .pf-toggle { padding: 6px 14px; font-size: 12px; min-width: 104px; display: inline-flex; align-items: center; justify-content: center; } .pf-spin { width: 13px; height: 13px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; opacity: 0.85; } /* empty state */ .pf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 46px 24px; } .pf-empty-glyph { font-size: 34px; color: var(--faint); opacity: 0.7; line-height: 1; } .pf-empty-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; color: var(--strong); } .pf-empty-sub { font-size: 13px; color: var(--dim); max-width: 320px; line-height: 1.5; margin-bottom: 6px; } /* skeletons */ .pf-skel { display: inline-block; border-radius: 6px; background: linear-gradient( 90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100% ); background-size: 200% 100%; animation: pf-shimmer 1.3s ease-in-out infinite; } @keyframes pf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .pf-skel-num { width: 42px; height: 24px; } .pf-skel-line { width: 60%; height: 13px; vertical-align: middle; } .pf-skel-line.short { width: 70px; } .pf-skel-pill { width: 64px; height: 18px; border-radius: 20px; } .pf-skel-btn { width: 100px; height: 30px; border-radius: 8px; } .pf-trow-skel { pointer-events: none; } /* ---- create-tenant modal extras (reuses .upmodal / .up-field) ---- */ .pf-modal { max-width: 560px; } .pf-modal form { display: contents; } .pf-form-section { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-top: 4px; border-top: 1px solid var(--border-soft); margin-top: 2px; } .pf-form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; } .pf-plan-opt { flex: 1 0 auto; } /* ---- responsive ---- */ @media (max-width: 880px) { .pf-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .pf { height: auto; min-height: 100dvh; overflow: visible; } html, body { /* el panel scrollea el documento como el chat en mobile (pull-to-refresh) */ } .pf-topbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; gap: 10px; padding: 0 12px; } .pf-scroll { overflow: visible; } .pf-body { padding: 20px 16px 48px; gap: 18px; } .pf-head-titles h1 { font-size: 21px; } .pf-new { width: 100%; justify-content: center; } /* la tabla se vuelve tarjetas apiladas: cada fila es un bloque legible */ .pf-thead { display: none; } .pf-table-wrap { border: 0; background: transparent; display: flex; flex-direction: column; gap: 10px; overflow: visible; } .pf-table-body { display: flex; flex-direction: column; gap: 10px; } .pf-trow { grid-template-columns: 1fr auto; grid-template-areas: "name state" "plan act" "date act"; gap: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px; } .pf-trow:not(.pf-thead):hover { background: var(--surface); } .pf-tc-name { grid-area: name; } .pf-tc-state { grid-area: state; justify-content: flex-end; align-self: center; } .pf-tc-plan { grid-area: plan; } .pf-tc-date { grid-area: date; align-self: center; } .pf-tc-act { grid-area: act; align-self: center; } .pf-toggle { width: 100%; } } @media (max-width: 460px) { .pf-stats { grid-template-columns: 1fr; } .pf-grid-2 { grid-template-columns: 1fr; } .pf-chip-role { display: none; } .pf-head-titles h1 { font-size: 19px; } } /* ==================================================================== PLATFORM PANEL v2 — navegación lateral + secciones (usuarios, clientes, servicios) además de tenants. Reusa los pf-* base (tabla, badge, skel). Los grids por-tabla y los overrides mobile van DESPUÉS del .pf-trow base para ganar por orden de fuente. ==================================================================== */ /* stat cards convertidas en botones de navegación */ .pf-stat-btn { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; } .pf-stat-btn.sel { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); } /* shell: nav lateral pegada + contenido */ .pf-shell { display: grid; grid-template-columns: 196px 1fr; grid-gap: 22px; gap: 22px; align-items: start; } .pf-nav { position: -webkit-sticky; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; } .pf-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 13.5px; transition: 0.14s; } .pf-nav-item:hover { background: var(--surface-2); color: var(--text); } .pf-nav-item.active { background: var(--surface); border-color: var(--border); color: var(--strong); font-weight: 600; } .pf-nav-glyph { width: 18px; text-align: center; color: var(--faint); flex-shrink: 0; } .pf-nav-item.active .pf-nav-glyph { color: var(--accent); } .pf-nav-label { flex: 1 1; } .pf-nav-count { font-size: 11px; color: var(--faint); } .pf-content { min-width: 0; } /* tabs (usuarios ERP / portal) */ .pf-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); } .pf-tab { padding: 6px 13px; border-radius: 6px; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 12.5px; cursor: pointer; transition: 0.14s; } .pf-tab:hover { color: var(--text); } .pf-tab.active { background: var(--surface); color: var(--strong); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } /* hint */ .pf-hint { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin: -2px 0 2px; } .pf-hint .mono { color: var(--text); } /* search */ .pf-searchbar { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0 12px; height: 40px; } .pf-searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pf-search-ic { display: grid; place-items: center; color: var(--faint); } .pf-search-ic svg { width: 15px; height: 15px; } .pf-search-input { flex: 1 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; } .pf-search-count { flex-shrink: 0; } /* avatar (iniciales o foto de Google) */ .pf-avatar { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); object-fit: cover; } .pf-avatar-img { background: var(--surface-2); } .pf-avatar-lg { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; } /* role pill */ .pf-role { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; background: var(--surface-2); } .pf-role-super { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .pf-role-grid { flex-wrap: wrap; } /* celdas suaves */ .pf-tc-soft { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-tc-contact { display: flex; flex-direction: column; gap: 2px; } /* acciones por fila */ .pf-actions { gap: 7px; } .pf-mini { padding: 5px 11px; font-size: 11.5px; min-width: 84px; display: inline-flex; align-items: center; justify-content: center; } /* status pill (clientes/servicios) — SOLO LECTURA */ .pf-statuspill { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--dim); } .pf-statuspill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pf-statuspill.st-active { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 45%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); } .pf-statuspill.st-suspended { color: var(--l4); border-color: color-mix(in srgb, var(--l4) 45%, transparent); background: color-mix(in srgb, var(--l4) 10%, transparent); } .pf-statuspill.st-retired { color: var(--faint); } /* grids por-tabla (desktop) — ganan sobre .pf-trow base */ @media (min-width: 721px) { .pf-trow-tenant { grid-template-columns: 1fr 110px 140px 130px 130px; } .pf-trow-user { grid-template-columns: minmax(0, 1.5fr) 1fr 116px 116px 104px 184px; } .pf-trow-portal { grid-template-columns: minmax(0, 1.7fr) 140px 130px 130px 92px; } .pf-trow-customer { grid-template-columns: minmax(0, 1.5fr) 1fr minmax(0, 1.2fr) 92px 158px; } .pf-trow-service { grid-template-columns: minmax(0, 1.3fr) 1fr 110px 140px minmax(0, 1fr) 158px; } } /* mobile: nav horizontal + tarjetas apiladas para las tablas nuevas */ @media (max-width: 720px) { .pf-shell { grid-template-columns: 1fr; gap: 14px; } .pf-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; } .pf-nav-item { flex-shrink: 0; } .pf-nav-count { display: none; } .pf-tabs { width: 100%; } .pf-trow-user, .pf-trow-portal, .pf-trow-customer, .pf-trow-service { grid-template-columns: 1fr auto; grid-template-areas: none; gap: 8px 12px; } .pf-trow-user .pf-tc-act, .pf-trow-portal .pf-tc-act, .pf-trow-customer .pf-tc-act, .pf-trow-service .pf-tc-act { grid-area: auto; justify-content: flex-start; align-self: center; } } /* ==================================================================== TENANT CONFIG — botón gear en la topbar + modal de configuración. Reusa .upmodal / .up-field / .up-input / .btn / .spin / .pf-skel y las custom props (day & night coherentes). Sólo se monta en BrainApp (tenant_admin); nunca en el panel super-admin ni en el thread del chat. ==================================================================== */ /* Botón gear: mismo molde que .theme-toggle (32×32, surface-2, hover acento). */ .tc-gear { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--dim); cursor: pointer; transition: 0.15s; flex-shrink: 0; } .tc-gear:hover { color: var(--accent); border-color: var(--accent-line); } .tc-gear svg { width: 16px; height: 16px; } /* El modal usa el ancho cómodo del de "nuevo tenant". */ .tc-modal { max-width: 480px; } /* Bloque de identidad read-only (slug / plan / id). */ .tc-meta { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); overflow: hidden; } .tc-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; } .tc-meta-row + .tc-meta-row { border-top: 1px solid var(--border-soft); } .tc-meta-k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .tc-meta-v { font-size: 12.5px; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-meta-id { font-size: 11px; color: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } /* Plan como pill/badge (mismo estilo que .pf-plan). */ .tc-plan-pill { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; background: var(--surface); } /* Color: swatch (con el embebido) + hex. */ .tc-color-row { display: flex; align-items: center; gap: 10px; } .tc-swatch { position: relative; width: 42px; height: 38px; border-radius: 9px; border: 1px solid var(--border); flex-shrink: 0; overflow: hidden; /* checkerboard de fondo por si el color es inválido/transparente */ background-image: linear-gradient(45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-3) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-3) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0; } .tc-color-input { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); padding: 0; border: 0; cursor: pointer; background: transparent; } .tc-color-input::-webkit-color-swatch-wrapper { padding: 0; } .tc-color-input::-webkit-color-swatch { border: 0; } .tc-color-input::-moz-color-swatch { border: 0; } .tc-color-input:disabled { cursor: not-allowed; } .tc-hex { flex: 1 1; min-width: 0; text-transform: lowercase; } /* Banner de guardado: micro-margen para no pegarse al botón. */ .tc-saved div:last-child { font-size: 12.5px; color: var(--text); margin-top: 2px; } /* Spinner dentro del botón "Guardar". */ .tc-save { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; justify-content: center; } .tc-btn-spin { width: 12px; height: 12px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; opacity: 0.85; } /* Estado de error de carga + reintentar. */ .tc-loaderr { display: flex; flex-direction: column; gap: 12px; } .tc-retry { align-self: flex-start; } /* Skeleton de carga (reusa .pf-skel shimmer). */ .tc-skel-wrap { display: flex; flex-direction: column; gap: 14px; } .tc-skel-k { width: 46px; height: 11px; } .tc-skel-v { width: 110px; height: 13px; } .tc-skel-label { width: 120px; height: 11px; } .tc-skel-field { width: 100%; height: 38px; border-radius: 9px; } @media (max-width: 460px) { .tc-meta-id { max-width: 52%; } } /* ==================================================================== LANDING DE VENTA (apex upico.io) — página de producto scrolleable. Reusa los custom props de marca (--accent, --l1..--l5, surfaces) → día & noche coherentes con la app. Prefijo .lp-*. ==================================================================== */ /* El .lp escapa del shell app (overflow:hidden en body) → permite scroll del documento en una sola columna. */ .lp { min-height: 100vh; min-height: 100dvh; overflow-y: auto; color: var(--text); } /* En la landing el documento scrollea (la app fija body a overflow:hidden). */ body:has(.lp) { overflow: auto; } html:has(.lp), body:has(.lp) { height: auto; min-height: 100%; } .lp a { color: inherit; text-decoration: none; } /* ---------------- Topbar ---------------- */ .lp-topbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .lp-topbar-inner { max-width: 1120px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 24px; } .lp-logo { flex-shrink: 0; } .lp-nav { display: flex; align-items: center; gap: 24px; margin-left: 18px; font-size: 13.5px; font-weight: 500; } .lp-nav a { color: var(--dim); transition: 0.15s; } .lp-nav a:hover { color: var(--text); } .lp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* ---------------- Botones ---------------- */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "Hanken Grotesk", sans-serif; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: 0.15s ease; white-space: nowrap; } .lp-btn-lg { font-size: 15px; padding: 13px 24px; border-radius: 12px; } .lp-btn-primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); box-shadow: var(--shadow-card); } .lp-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .lp-btn-soft { background: var(--surface-2); color: var(--text); } .lp-btn-soft:hover { border-color: var(--faint); background: var(--surface-3); } .lp-btn-ghost { background: transparent; color: var(--text); } .lp-btn-ghost:hover { border-color: var(--faint); } /* ---------------- Hero ---------------- */ .lp-hero { max-width: 760px; margin: 0 auto; padding: 72px 24px 40px; text-align: center; animation: rise 0.6s ease both; } .lp-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 20px; padding: 5px 12px; margin-bottom: 22px; } .lp-hero-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; color: var(--strong); } .lp-hero-title .grad, .lp-h2 .grad { background: linear-gradient(95deg, var(--accent), var(--l5)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lp-hero-sub { font-size: 17px; line-height: 1.55; color: var(--dim); max-width: 580px; margin: 20px auto 0; } .lp-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .lp-hero-note { font-size: 11px; letter-spacing: 0.04em; color: var(--faint); margin-top: 18px; } /* mock de conversación bajo el hero */ .lp-hero-mock { margin: 46px auto 0; max-width: 560px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-cmd); overflow: hidden; text-align: left; } .lp-mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } .lp-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .lp-mock-host { margin-left: auto; font-size: 10.5px; color: var(--faint); } .lp-mock-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .lp-mock-user { align-self: flex-end; max-width: 80%; background: var(--surface-3); border: 1px solid var(--border); padding: 10px 14px; border-radius: 13px 13px 3px 13px; font-size: 13px; line-height: 1.45; } .lp-mock-agent { display: flex; gap: 11px; } .lp-mock-av { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #cc4d1f); display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; color: var(--accent-ink); } .lp-mock-agent-body { flex: 1 1; min-width: 0; } .lp-mock-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .lp-mock-chip { font-family: "JetBrains Mono", monospace; font-size: 9.5px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--dim); background: var(--surface); } .lp-mock-card { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; } .lp-mock-card-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); font-size: 12px; color: var(--text); } .lp-mock-badge { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; } .lp-mock-params { margin: 0; padding: 11px 13px; font-size: 11px; line-height: 1.6; color: var(--dim); white-space: pre-wrap; } /* ---------------- Secciones genéricas ---------------- */ .lp-section { max-width: 1120px; margin: 0 auto; padding: 64px 24px; } .lp-section-alt { max-width: none; background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .lp-section-alt > * { max-width: 1120px; margin-inline: auto; } .lp-section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; } .lp-kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .lp-h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; color: var(--strong); } .lp-lead { font-size: 15.5px; line-height: 1.55; color: var(--dim); margin-top: 12px; } .lp-price-note { display: inline-block; color: var(--faint); font-size: 13px; } /* ---------------- Features ---------------- */ .lp-features { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; } .lp-feat { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 22px 20px; position: relative; overflow: hidden; transition: 0.18s; } .lp-feat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--accent)); opacity: 0; transition: 0.18s; } .lp-feat:hover { border-color: var(--faint); transform: translateY(-3px); } .lp-feat:hover::before { opacity: 1; } .lp-feat-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; font-size: 22px; background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); margin-bottom: 14px; } .lp-feat-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--strong); margin-bottom: 7px; } .lp-feat-body { font-size: 13.5px; line-height: 1.55; color: var(--dim); } /* ---------------- Cómo funciona (pasos) ---------------- */ .lp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; gap: 18px; counter-reset: step; } .lp-step { display: flex; gap: 14px; align-items: flex-start; } .lp-step-n { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 16px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); } .lp-step-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 700; color: var(--strong); margin-bottom: 5px; } .lp-step-body { font-size: 13.5px; line-height: 1.55; color: var(--dim); } /* ---------------- Pricing ---------------- */ .lp-plans { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; gap: 16px; align-items: stretch; } .lp-plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 24px 20px; position: relative; } .lp-plan.featured { border-color: var(--accent); box-shadow: var(--shadow-card); } .lp-plan-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-fill); border-radius: 20px; padding: 4px 12px; white-space: nowrap; } .lp-plan-name { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 800; color: var(--strong); } .lp-plan-price { display: flex; align-items: baseline; gap: 5px; margin: 10px 0 4px; } .lp-plan-amount { font-family: "Bricolage Grotesque", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--strong); } .lp-plan-period { font-size: 12.5px; color: var(--faint); } .lp-plan-tagline { font-size: 12.5px; line-height: 1.45; color: var(--dim); min-height: 36px; } .lp-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 16px 0 20px; flex: 1 1; } .lp-plan-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; color: var(--text); } .lp-check { flex-shrink: 0; color: var(--mint); font-weight: 700; font-size: 12px; margin-top: 1px; } .lp-plan-cta { width: 100%; } /* ---------------- FAQ ---------------- */ .lp-faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .lp-faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; } .lp-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 14.5px; font-weight: 600; color: var(--strong); cursor: pointer; list-style: none; } .lp-faq-q::-webkit-details-marker { display: none; } .lp-faq-caret { color: var(--faint); font-size: 12px; transition: 0.18s; flex-shrink: 0; } .lp-faq-item[open] .lp-faq-caret { transform: rotate(180deg); } .lp-faq-a { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.6; color: var(--dim); } /* ---------------- CTA final ---------------- */ .lp-cta-final { max-width: 720px; margin: 0 auto; padding: 72px 24px 80px; text-align: center; } /* ---------------- Footer ---------------- */ .lp-footer { border-top: 1px solid var(--border); background: var(--surface); } .lp-footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 24px 32px; display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; } .lp-footer-brand { max-width: 280px; } .lp-footer-tag { font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 12px; } .lp-footer-cols { display: flex; gap: 48px; flex-wrap: wrap; } .lp-footer-col { display: flex; flex-direction: column; gap: 9px; } .lp-footer-col-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; } .lp-footer-col a { font-size: 13px; color: var(--dim); transition: 0.12s; } .lp-footer-col a:hover { color: var(--text); } .lp-footer-bottom { max-width: 1120px; margin: 0 auto; padding: 16px 24px 28px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--faint); } .lp-footer-bottom b { color: var(--dim); } /* ---------------- Landing responsive ---------------- */ @media (max-width: 900px) { .lp-features, .lp-plans { grid-template-columns: repeat(2, 1fr); } .lp-steps { grid-template-columns: 1fr; gap: 14px; } .lp-hero-title { font-size: 40px; } } @media (max-width: 620px) { .lp-nav { display: none; } .lp-features, .lp-plans { grid-template-columns: 1fr; } .lp-hero { padding-top: 48px; } .lp-hero-title { font-size: 32px; } .lp-hero-sub { font-size: 15px; } .lp-h2 { font-size: 27px; } .lp-section { padding: 48px 20px; } .lp-plan.featured { order: -1; /* el destacado primero en mobile */ } .lp-footer-bottom { flex-direction: column; gap: 6px; text-align: center; } } /* ==================================================================== SIGNUP — wizard de alta self-service + pantallas pending / active. Vive dentro de .auth-card (reusa halo, surfaces, día/noche). Prefijo .su-*. ==================================================================== */ .su-card { max-width: 460px; align-items: stretch; text-align: left; } .su-card .auth-logo, .su-card .auth-title, .su-card .auth-tagline { align-self: center; text-align: center; } .su-card .auth-tagline { margin-bottom: 4px; } .su-form { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; } .su-field { display: flex; flex-direction: column; gap: 7px; } .su-field > label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } /* input de slug con sufijo + estado */ .su-slug-wrap { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; transition: 0.15s; } .su-slug-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .su-slug-wrap.ok { border-color: var(--mint); } .su-slug-wrap.err { border-color: #ef4444; } .su-slug-input { flex: 1 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 14px; padding: 11px 0; } .su-slug-input::placeholder { color: var(--faint); } .su-slug-suffix { font-size: 13px; color: var(--dim); flex-shrink: 0; } .su-slug-icon { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; margin-left: 2px; } .su-slug-icon.ok { color: var(--accent-ink); background: var(--mint); } .su-slug-icon.err { color: #fff; background: #ef4444; } .su-slug-spin { flex-shrink: 0; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } .su-note { font-size: 11.5px; line-height: 1.45; color: var(--dim); } .su-note b { color: var(--text); } .su-note.ok { color: var(--mint); } .su-note.ok b { color: var(--mint); } .su-note.err { color: #ef4444; } [data-theme="day"] .su-note.err { color: #c33; } /* selección de plan */ .su-plans { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 9px; gap: 9px; } .su-plan { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--border); background: var(--surface-2); border-radius: 11px; padding: 12px 13px; cursor: pointer; transition: 0.15s; color: var(--text); font: inherit; } .su-plan:hover:not(:disabled) { border-color: var(--faint); } .su-plan.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } .su-plan:disabled { cursor: not-allowed; opacity: 0.6; } .su-plan-top { display: flex; align-items: center; justify-content: space-between; } .su-plan-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 14.5px; color: var(--strong); } .su-plan-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; transition: 0.15s; } .su-plan.sel .su-plan-radio { border-color: var(--accent); background: radial-gradient( circle, var(--accent) 0 4px, transparent 5px ); } .su-plan-price { font-size: 11.5px; color: var(--accent); } .su-plan-blurb { font-size: 11px; line-height: 1.4; color: var(--dim); } .su-error { border: 1px solid #ef4444; background: rgba(239, 68, 68, 0.07); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; } .su-submit { width: 100%; justify-content: center; padding: 12px 18px; font-size: 14.5px; text-decoration: none; text-align: center; } .su-back { width: 100%; margin-top: 4px; } .su-logout { align-self: center; margin-top: 12px; background: none; border: 0; color: var(--faint); font-family: "JetBrains Mono", monospace; font-size: 11px; cursor: pointer; transition: 0.12s; } .su-logout:hover { color: var(--accent); } /* badge de estado (pending / active) en las pantallas de cierre */ .su-badge { align-self: center; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; margin-bottom: 2px; } .su-badge.pending { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); } .su-badge.active { background: rgba(94, 234, 212, 0.12); border: 1px solid var(--mint); color: var(--mint); font-weight: 800; } [data-theme="day"] .su-badge.active { background: rgba(13, 148, 136, 0.1); } @media (max-width: 460px) { .su-plans { grid-template-columns: 1fr; } }