@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap"); :root { color-scheme: light; --bg: #ffffff; --login-bg: #f7f7f4; --panel: #ffffff; --panel-soft: #f6f6f6; --panel-strong: #eeeeee; --border: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.2); --text: #000000; --muted: #4f4f4f; --muted-soft: #767676; --accent: #000000; --accent-ink: #ffffff; --danger: #b42318; --pending: #7a2e0e; --pending-bg: rgba(181, 71, 8, 0.12); --shadow: none; --login-shadow: 0 22px 70px rgba(0, 0, 0, 0.08); --portal-ui-scale: 0.8; --c-input: #2f6f4f; --c-cache: #b8862b; --c-output: #3457b2; --c-input-bg: rgba(47, 111, 79, 0.12); --c-cache-bg: rgba(184, 134, 43, 0.14); --c-output-bg: rgba(52, 87, 178, 0.12); --chart-grid: rgba(20, 18, 12, 0.09); } /* Modo oscuro. Fuente de verdad unica: el script inline de server.mjs resuelve la preferencia (elección guardada, o el SO si no hay ninguna) y estampa data-theme en antes del primer pintado. No hace falta duplicar los tokens bajo prefers-color-scheme: sin JS el portal no renderiza nada. El login se queda siempre en claro. */ html[data-theme="dark"] body:not([data-view="login"]) { color-scheme: dark; --bg: #121110; --panel: #1b1917; --panel-soft: #232120; --panel-strong: #2c2926; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --text: #f4f2ec; --muted: #b6b0a6; --muted-soft: #8a857d; --accent: #f4f2ec; --accent-ink: #121110; --danger: #f28b82; --pending: #f0a882; --pending-bg: rgba(240, 168, 130, 0.16); --c-input: #5fbd8f; --c-cache: #e2b451; --c-output: #87a1f2; --c-input-bg: rgba(95, 189, 143, 0.16); --c-cache-bg: rgba(226, 180, 81, 0.16); --c-output-bg: rgba(135, 161, 242, 0.18); --chart-grid: rgba(255, 255, 255, 0.09); } html[data-theme="dark"] body:not([data-view="login"]) .admin-transcript-panel { background: var(--panel-soft); } html[data-theme="dark"] body:not([data-view="login"]) .admin-message.is-assistant { color: var(--text); } /* Burbujas de chat y badges de canal llevan color propio pensado para fondo claro; en oscuro se atenuan para no deslumbrar. */ html[data-theme="dark"] body:not([data-view="login"]) .admin-message.is-user { background: #1f3d28; border-color: rgba(37, 211, 102, 0.32); color: #d7f5de; } html[data-theme="dark"] body:not([data-view="login"]) .admin-message.is-user .admin-message-header span { color: rgba(215, 245, 222, 0.62); } html[data-theme="dark"] body:not([data-view="login"]) .admin-channel-badge { background: rgba(135, 161, 242, 0.18); color: #bccdf8; } html[data-theme="dark"] body:not([data-view="login"]) .admin-channel-badge.is-whatsapp { background: rgba(95, 189, 143, 0.18); color: #b6e6cd; } html[data-theme="dark"] body:not([data-view="login"]) .admin-conversation-state.is-active { background: rgba(95, 189, 143, 0.18); color: #b6e6cd; } html[data-theme="dark"] body:not([data-view="login"]) .admin-conversation-state.is-archived { background: rgba(220, 171, 78, 0.18); color: #f0d49a; } .theme-toggle { min-width: 38px; padding: 0 12px; font-size: 1rem; line-height: 1; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif; } body[data-view="login"] { background: #f6f6f0; color: #10110f; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } code { font-family: "IBM Plex Mono", "SFMono-Regular", monospace; font-size: 0.92em; } .shell { width: min(1080px, calc(100vw - 40px)); margin: 34px auto; } body[data-view="portal"], body[data-view="dashboards"], body[data-view="admin"] { overflow-x: hidden; } .shell-portal, .shell-dashboards, .shell-admin { zoom: var(--portal-ui-scale); } body[data-view="admin"] { --portal-ui-scale: 1; height: 100vh; overflow: hidden; } body[data-view="admin"] .shell-admin { width: min(1760px, calc(100vw - 28px)); display: flex; height: calc(100vh - 24px); min-height: 0; flex-direction: column; margin: 12px auto; } body[data-view="admin"] .panel-admin { display: flex; min-height: 0; flex: 1; flex-direction: column; } body[data-view="admin"] .portal-header { flex: 0 0 auto; } body[data-view="admin"] .portal-header { align-items: center; margin-bottom: 8px; } body[data-view="admin"] .eyebrow { margin-bottom: 4px; font-size: 0.64rem; letter-spacing: 0.12em; } body[data-view="admin"] h1 { font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; line-height: 1.05; } body[data-view="admin"] .lead { margin-top: 3px; font-size: 0.84rem; line-height: 1.28; } @supports not (zoom: 1) { .shell-portal, .shell-dashboards, .shell-admin { transform: scale(var(--portal-ui-scale)); transform-origin: top center; } } .panel { padding: 0; background: transparent; border: 0; box-shadow: none; } .shell-login { display: grid; min-height: 100vh; width: 100%; margin: 0; padding: 16px; place-items: center; } .panel-login { display: grid; width: min(1400px, 100%); min-height: calc(100vh - 32px); grid-template-columns: minmax(0, 1.12fr) minmax(430px, 0.88fr); overflow: hidden; border: 1px solid #dadcd3; border-radius: 28px; background: #ffffff; box-shadow: 0 30px 90px rgba(25, 29, 20, 0.1); } .login-showcase { position: relative; z-index: 0; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid #dadcd3; background: #f6f6f0; padding: clamp(34px, 4.5vw, 68px); isolation: isolate; } .login-showcase::before { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(26, 28, 23, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 28, 23, 0.045) 1px, transparent 1px); background-size: 72px 72px; content: ""; } .login-showcase::after { position: absolute; z-index: -1; top: 2%; right: -18%; width: min(38vw, 520px); height: min(38vw, 520px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 61, 0.42) 0, rgba(255, 107, 61, 0.18) 48%, rgba(255, 107, 61, 0) 72%); filter: blur(2px); content: ""; } .login-brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 12px; color: #10110f; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.06em; text-decoration: none; } .login-brand__word > span { color: #e94b22; } .login-brand__arrow { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #10110f; color: #ffffff; font-size: 0.82rem; letter-spacing: 0; transition: transform 180ms ease; } .login-brand:hover .login-brand__arrow { transform: rotate(45deg); } .login-showcase__copy { position: relative; z-index: 1; max-width: 650px; margin-top: clamp(70px, 12vh, 150px); } .login-showcase__title { margin: 0; font-size: clamp(2.7rem, 4.5vw, 5.15rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.98; } .login-showcase__title em { color: #797c73; font-style: normal; font-weight: 400; } .login-showcase__copy > p:last-child { max-width: 520px; margin: 24px 0 0; color: #555950; font-size: clamp(0.96rem, 1.25vw, 1.08rem); line-height: 1.65; } .login-flow { position: relative; z-index: 1; width: min(620px, 100%); margin-top: clamp(48px, 8vh, 96px); border: 1px solid #d6d8cf; border-radius: 24px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 20px 58px rgba(25, 29, 20, 0.11); padding: 18px; backdrop-filter: blur(12px); } .login-flow__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; color: #666960; font-family: "DM Mono", monospace; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; } .login-flow__status { display: inline-flex; align-items: center; gap: 7px; color: #53651b; } .login-flow__status i { width: 7px; height: 7px; border-radius: 50%; background: #7da611; box-shadow: 0 0 0 5px rgba(125, 166, 17, 0.13); } .login-flow__card { display: grid; min-height: 66px; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #e2e4dc; border-radius: 16px; background: #ffffff; padding: 11px 13px; } .login-flow__card--agent { border-color: #ff9a78; background: linear-gradient(110deg, #fff0e9, #fffaf7); box-shadow: 0 8px 26px rgba(226, 75, 34, 0.09); } .login-flow__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #ff6b3d; font-size: 1rem; } .login-flow__icon--entry { background: #e7e6ff; } .login-flow__icon--result { background: #d9ff63; } .login-flow__card small, .login-flow__card strong { display: block; } .login-flow__card small { margin-bottom: 2px; color: #7a7e73; font-family: "DM Mono", monospace; font-size: 0.59rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .login-flow__card strong { overflow: hidden; font-size: 0.82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .login-flow__card time, .login-flow__ready { color: #8c9085; font-family: "DM Mono", monospace; font-size: 0.61rem; } .login-flow__check { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #10110f; color: #ff6b3d; font-size: 0.78rem; } .login-flow__ready { border-radius: 999px; background: #f4fadf; color: #53651b; padding: 6px 9px; text-transform: uppercase; } .login-flow__connector { position: relative; width: 2px; height: 13px; margin-left: 32px; background: #cfd1ca; } .login-flow__connector i { position: absolute; bottom: -1px; left: -2px; width: 6px; height: 6px; transform: rotate(45deg); border-right: 2px solid #cfd1ca; border-bottom: 2px solid #cfd1ca; } .login-showcase__footer { position: relative; z-index: 1; margin: auto 0 0; padding-top: 34px; color: #666960; font-family: "DM Mono", monospace; font-size: 0.68rem; } .login-access { display: grid; min-width: 0; place-items: center; background: #ffffff; padding: clamp(42px, 5vw, 82px); } .login-access__inner { width: min(430px, 100%); } .login-header { margin-bottom: 34px; } .panel-login h1 { max-width: none; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(2.4rem, 3.3vw, 3.45rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1.02; } .panel-login .lead { margin-top: 14px; color: #666960; font-size: 0.98rem; line-height: 1.6; } .login-form { max-width: none; gap: 18px; margin-top: 0; } .login-form .field { gap: 9px; } .login-form .field > span:first-child { color: #30322d; font-size: 0.82rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .login-form input { min-height: 56px; border: 1px solid #d6d8cf; border-radius: 14px; background: #fbfbf8; padding: 15px 17px; color: #10110f; font-family: inherit; font-size: 0.96rem; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .login-form input::placeholder { color: #979b91; } .login-form input:hover { border-color: #bfc2b8; background: #ffffff; } .login-form input:focus { border-color: #ff6b3d; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.14); } .login-password-field { position: relative; display: block; } .login-password-field input { padding-right: 54px; } .login-password-toggle { position: absolute; top: 50%; right: 9px; display: grid; width: 38px; height: 38px; transform: translateY(-50%); place-items: center; border: 0; border-radius: 10px; background: transparent; color: #666960; padding: 0; } .login-password-toggle:hover { background: #f0f0eb; color: #10110f; } .login-password-toggle:focus-visible { outline: 2px solid #ff6b3d; outline-offset: 2px; } .login-password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; } .login-password-toggle[aria-pressed="true"]::after { position: absolute; width: 21px; height: 1.5px; transform: rotate(-45deg); background: currentColor; content: ""; } .login-submit { width: 100%; min-height: 58px; justify-content: space-between; margin-top: 5px; border-radius: 999px; background: #10110f; color: #ffffff; padding: 8px 9px 8px 24px; font-family: inherit; font-size: 0.94rem; font-weight: 600; transition: background 180ms ease, transform 180ms ease; } .login-submit:hover { background: #2b2d28; transform: translateY(-2px); } .login-submit:focus-visible { outline: 3px solid rgba(255, 107, 61, 0.42); outline-offset: 3px; } .login-submit__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #ff6b3d; color: #10110f; font-size: 1.05rem; transition: transform 180ms ease; } .login-submit:hover .login-submit__icon { transform: rotate(45deg); } .panel-login .feedback { min-height: 0; margin-top: 16px; text-align: center; } .panel-login .feedback:empty { margin-top: 0; } .login-help { margin: 28px 0 0; color: #777b72; font-size: 0.82rem; line-height: 1.55; text-align: center; } .login-help a { color: #30322d; font-weight: 600; text-underline-offset: 3px; } @media (max-width: 960px) { .shell-login { min-height: 100svh; padding: 0; } .panel-login { min-height: 100svh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; } .login-showcase { min-height: 245px; border-right: 0; border-bottom: 1px solid #dadcd3; padding: 28px 34px 34px; } .login-showcase::after { top: -55%; right: -6%; width: 420px; height: 420px; } .login-showcase__copy { max-width: 680px; margin-top: 54px; } .login-showcase__title { max-width: 720px; font-size: clamp(2.35rem, 7vw, 3.6rem); line-height: 1; } .login-showcase__copy > p:last-child, .login-flow, .login-showcase__footer { display: none; } .login-access { place-items: start center; padding: 48px 34px 56px; } .login-access__inner { width: min(520px, 100%); } } /* Keep the login within one viewport on laptops with a short usable height. */ @media (min-width: 961px) and (max-height: 860px) { .login-showcase { padding: clamp(28px, 3vw, 44px); } .login-showcase__copy { margin-top: clamp(28px, 5vh, 44px); } .login-showcase__copy > p:last-child { margin-top: 16px; } .login-flow { margin-top: clamp(24px, 4vh, 34px); border-radius: 20px; padding: 12px; } .login-flow__header { margin-bottom: 10px; } .login-flow__card { min-height: 52px; padding: 7px 10px; } .login-flow__connector { height: 8px; } .login-showcase__footer { display: none; } .login-access { padding: 36px; } } @media (min-width: 961px) and (max-height: 700px) { .login-showcase__copy { margin-top: 26px; } .login-showcase__title { font-size: clamp(2.65rem, 4.2vw, 4rem); } .login-flow { display: none; } } @media (prefers-reduced-motion: reduce) { .login-brand__arrow, .login-submit, .login-submit__icon { transition: none; } .login-brand:hover .login-brand__arrow, .login-submit:hover, .login-submit:hover .login-submit__icon { transform: none; } } .eyebrow, .card-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .eyebrow { margin-bottom: 10px; } h1, h2, h3 { margin: 0; color: var(--text); } h1 { max-width: none; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 4.2vw, 3.35rem); line-height: 1; } h2 { margin-top: 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.08; } h3 { font-size: 1.05rem; } .lead, .muted, .action-card p, .dashboard-row p, .dashboard-empty { color: var(--muted); } .lead { max-width: 54ch; margin: 12px 0 0; font-size: 1rem; line-height: 1.55; } .stack { display: grid; max-width: 520px; gap: 16px; margin-top: 28px; } .field { display: grid; gap: 8px; } .field span { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } input { width: 100%; border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; background: var(--panel-soft); color: var(--text); font: inherit; } input:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04); } button, .link-button, .secondary-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; border: 0; border-radius: 999px; padding: 12px 18px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } .ghost { background: var(--panel-soft); color: var(--text); } .secondary-link { min-height: 34px; padding: 0 13px; background: var(--panel-strong); color: var(--text); font-size: 0.86rem; } .portal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .action-card, .dashboard-panel, .note, .card { border: 1px solid var(--border); border-radius: 24px; background: var(--panel); } .action-card { display: flex; min-height: 156px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px; } .action-card p { max-width: 42ch; margin: 10px 0 0; line-height: 1.55; } .action-card.is-disabled { background: var(--panel-soft); } .dashboard-section { margin-top: 22px; } .section-heading { margin-bottom: 14px; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .dashboard-panel { min-height: 210px; padding: 20px; } .dashboard-panel h3 { margin-bottom: 16px; } .dashboard-list { display: grid; gap: 10px; } .dashboard-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 18px; background: var(--panel-soft); padding: 14px; } .dashboard-row strong { display: block; margin-bottom: 4px; } .dashboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .dashboard-row p, .dashboard-empty { margin: 0; line-height: 1.5; } .dashboard-empty { display: flex; min-height: 130px; align-items: center; border-radius: 18px; background: var(--panel-soft); padding: 16px; } .shared-dashboard-groups { display: grid; gap: 10px; } .shared-dashboard-group { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--panel-soft); } .shared-dashboard-group summary { display: flex; min-height: 62px; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; } .shared-dashboard-group summary::-webkit-details-marker { display: none; } .shared-dashboard-group summary::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.16s ease; } .shared-dashboard-group[open] summary::before { transform: rotate(45deg); } .shared-dashboard-person { display: grid; min-width: 0; flex: 1; gap: 3px; } .shared-dashboard-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shared-dashboard-person span, .shared-dashboard-count { color: var(--muted); font-size: 0.84rem; line-height: 1.35; } .shared-dashboard-count { flex: 0 0 auto; border-radius: 999px; background: var(--panel); padding: 6px 10px; font-weight: 700; } .shared-dashboard-list { border-top: 1px solid var(--border); padding: 10px; } .shared-dashboard-list .dashboard-row { background: var(--panel); } .card, .note { padding: 20px; } .card strong { display: block; margin: 12px 0 8px; font-size: 1.3rem; } .badge { display: inline-flex; align-items: center; min-height: 38px; border-radius: 999px; padding: 0 14px; font-size: 0.84rem; font-weight: 700; } .badge-pending { color: var(--pending); background: var(--pending-bg); } .share-panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.32); } .share-panel[hidden] { display: none; } .share-panel-card { width: min(680px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); padding: 22px; } .share-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .share-panel-header h2 { margin-top: 0; } .share-form { display: grid; gap: 14px; margin: 18px 0; } .share-feedback { min-height: 22px; font-weight: 700; } .share-feedback[data-type="error"] { color: var(--danger); } .share-empty { margin: 8px 0 0; color: var(--muted); } .grant-list h3 { margin: 16px 0 10px; } .grant-rows { display: grid; gap: 10px; } .grant-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 18px; background: var(--panel-soft); padding: 14px; } .grant-row strong { display: block; margin-bottom: 4px; } .grant-row p { margin: 0; color: var(--muted); } .admin-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; flex: 1; } .admin-shell.is-reader-open { grid-template-rows: minmax(0, 1fr); } .admin-shell.is-reader-open .admin-toolbar, .admin-shell.is-reader-open .admin-usage-panel { display: none; } .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 10px 12px; } .admin-date-field { width: auto; } .admin-toolbar .field { display: flex; align-items: center; gap: 8px; } .admin-toolbar .field span { min-width: 44px; } .admin-toolbar input { width: 158px; min-height: 38px; border-radius: 8px; padding: 8px 11px; } .admin-toolbar button { min-height: 38px; padding: 0 16px; } .admin-reader-shell { display: none; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); align-items: stretch; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .admin-shell.is-reader-open .admin-reader-shell { display: grid; } .admin-panel { display: flex; min-height: 0; min-width: 0; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 14px 16px; } .admin-reader-shell > .admin-panel { min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; padding: 0; } .admin-reader-sidebar { border-right: 1px solid var(--border); } .admin-panel-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .admin-panel-header h2 { margin: 0; font-size: 1.08rem; line-height: 1.18; } .admin-panel-header p { margin: 6px 0 0; color: var(--muted); } .admin-panel-header p > span { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: middle; } .admin-panel-header select { min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); color: var(--text); font: inherit; padding: 0 10px; } .admin-reader-shell .admin-panel-header { align-items: center; margin: 0; border-bottom: 1px solid var(--border); padding: 12px 14px; } .admin-reader-shell .admin-panel-header h2 { font-size: 0.98rem; } .admin-reader-shell .admin-panel-header p { margin-top: 4px; font-size: 0.78rem; } .admin-reader-actions { display: flex; align-items: center; gap: 8px; } .admin-reader-actions select { min-height: 34px; } .admin-reader-sidebar .admin-panel-header { flex-wrap: wrap; align-items: flex-start; } .admin-reader-sidebar .admin-reader-actions { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .admin-reader-sidebar .admin-reader-actions select { width: 100%; min-width: 0; } .admin-reader-back { min-height: 34px; padding: 0 11px; } .admin-table-wrap { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 8px; } .admin-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; } .admin-table th, .admin-table td { border-bottom: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: middle; } .admin-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-soft); color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .admin-table th:nth-child(1), .admin-table td:nth-child(1) { width: 18%; } .admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 12%; } .admin-table th:nth-child(3), .admin-table td:nth-child(3), .admin-table th:nth-child(5), .admin-table td:nth-child(5), .admin-table th:nth-child(6), .admin-table td:nth-child(6), .admin-table th:nth-child(7), .admin-table td:nth-child(7) { width: 12%; } .admin-table th:nth-child(4), .admin-table td:nth-child(4) { width: 8%; } .admin-table th:nth-child(8), .admin-table td:nth-child(8) { width: 14%; } .admin-table td { overflow: hidden; text-overflow: ellipsis; } .admin-table tr { cursor: pointer; } .admin-table tr:hover, .admin-table tr.is-selected { background: var(--panel-soft); } .admin-usage-panel { overflow: hidden; } .admin-table td strong, .admin-table td span { display: block; } .admin-table td span { margin-top: 3px; color: var(--muted); font-size: 0.78rem; } .admin-conversation-list { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 10px; } .admin-conversation-row { appearance: none; -webkit-appearance: none; display: flex; min-height: 82px; width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); padding: 10px; text-align: left; overflow: hidden; cursor: pointer; } .admin-conversation-row > * { min-width: 0; max-width: 100%; } .admin-conversation-row:hover, .admin-conversation-row.is-selected { background: var(--panel-soft); } .admin-conversation-row:focus-visible { outline: 2px solid var(--border-strong); outline-offset: -2px; background: var(--panel-soft); } .admin-conversation-row.is-selected { box-shadow: inset 3px 0 0 var(--accent); } .admin-conversation-row.is-archived:not(.is-selected) { box-shadow: inset 3px 0 0 rgba(184, 126, 28, 0.35); } .admin-conversation-row p { min-height: calc(1.38em * 2); max-height: calc(1.38em * 2); margin: 0; overflow: hidden; font-size: 0.9rem; line-height: 1.38; overflow-wrap: anywhere; word-break: break-word; } .admin-conversation-topline, .admin-conversation-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; } .admin-conversation-topline time, .admin-conversation-meta { color: var(--muted); font-size: 0.8rem; } .admin-conversation-badges { display: inline-flex; min-width: 0; align-items: center; gap: 5px; } .admin-conversation-meta { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; } .admin-conversation-meta span { white-space: nowrap; } .admin-conversation-meta strong { border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; color: var(--text); font-size: 0.76rem; } .admin-channel-badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 9px; background: #e8eef8; color: #183b66; font-size: 0.75rem; font-weight: 700; } .admin-channel-badge.is-whatsapp { background: #e7f5ec; color: #17613a; } .admin-conversation-state { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 9px; font-size: 0.75rem; font-weight: 700; } .admin-conversation-state.is-active { background: #e7f5ec; color: #17613a; } .admin-conversation-state.is-archived { background: #f8edd6; color: #70480d; } .admin-conversation-footer { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 7px; justify-content: center; border-top: 1px solid var(--border); padding: 10px 14px; } .admin-conversation-footer button { width: 100%; } .admin-conversation-footer button[hidden] { display: none; } .admin-conversation-footer button:disabled { cursor: wait; opacity: 0.72; } .admin-conversation-footer button.is-loading::before { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: admin-conversation-spin 0.75s linear infinite; } .admin-conversation-load-status { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; text-align: center; } .admin-conversation-load-status[data-tone="success"] { color: var(--c-input); } .admin-conversation-load-status[data-tone="error"] { color: var(--danger); } .admin-conversation-load-status[hidden] { display: none; } @keyframes admin-conversation-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .admin-conversation-footer button.is-loading::before { animation: none; } } .admin-transcript-panel { min-height: 0; background: #fbfbfb; } .admin-transcript-panel .admin-panel-header h2 { max-height: 2.5em; overflow: hidden; font-size: 1.04rem; } .admin-transcript { display: grid; min-height: 0; flex: 1; align-content: start; gap: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 20px; } .admin-message { width: fit-content; max-width: min(78ch, 78%); border: 1px solid transparent; border-radius: 18px; background: var(--panel-soft); padding: 12px 14px; font-size: 0.94rem; } .admin-message.is-user { justify-self: end; background: #d9fdd3; border-color: rgba(37, 211, 102, 0.38); color: #173820; } .admin-message.is-assistant { justify-self: start; background: var(--panel-soft); } .admin-message.is-system { justify-self: center; max-width: min(70ch, 94%); } .admin-message-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .admin-message-header span { color: var(--muted); font-size: 0.82rem; } .admin-message.is-user .admin-message-header span { color: rgba(23, 56, 32, 0.62); } .admin-message pre { overflow: visible; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: inherit; line-height: 1.5; } .admin-message-error { margin: 10px 0 0; color: var(--danger); font-weight: 700; } @media (max-width: 900px) { .admin-reader-shell { grid-template-columns: 1fr; min-height: 0; } .admin-reader-shell > .admin-panel { min-height: 360px; } .admin-reader-sidebar { border-right: 0; border-bottom: 1px solid var(--border); } } .feedback { min-height: 24px; flex: 0 0 auto; margin-top: 10px; font-weight: 600; } .feedback[data-type="error"] { color: var(--danger); } .feedback[data-type="info"] { color: var(--text); } @media (max-width: 760px) { body[data-view="admin"] { height: 100vh; overflow: hidden; } .shell { width: min(100%, calc(100vw - 24px)); margin: 24px auto; } body[data-view="admin"] .shell-admin { width: min(100%, calc(100vw - 12px)); height: calc(100vh - 12px); margin: 6px auto; } body[data-view="admin"] .portal-header { gap: 8px; margin-bottom: 8px; } body[data-view="admin"] h1 { max-width: none; font-size: 1.32rem; } body[data-view="admin"] .lead { font-size: 0.8rem; } .shell-login { width: 100%; min-height: 100svh; margin: 0; padding: 0; } .panel-login { min-height: 100svh; padding: 0; } .panel-login h1 { max-width: none; font-size: clamp(2rem, 10vw, 2.6rem); } .login-showcase { min-height: 190px; padding: 22px 24px 28px; } .login-showcase::before { background-size: 54px 54px; } .login-showcase::after { top: -68%; right: -34%; width: 390px; height: 390px; } .login-brand { gap: 9px; font-size: 1.12rem; } .login-brand__arrow { width: 25px; height: 25px; font-size: 0.72rem; } .login-showcase__copy { margin-top: 36px; } .login-showcase__title { font-size: clamp(2rem, 10.8vw, 2.8rem); letter-spacing: -0.065em; } .login-access { padding: 36px 24px 32px; } .login-header { margin-bottom: 28px; } .panel-login .lead { margin-top: 11px; font-size: 0.92rem; } .login-form { gap: 16px; } .login-form input { min-height: 54px; } .login-submit { min-height: 56px; } .login-help { margin-top: 24px; } .portal-header, .action-grid, .dashboard-grid, .admin-reader-shell { grid-template-columns: 1fr; } .admin-shell { grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .admin-shell.is-reader-open { grid-template-rows: minmax(0, 1fr); } .admin-shell.is-reader-open .admin-reader-shell { grid-template-rows: minmax(180px, 38%) minmax(0, 1fr); } .admin-reader-shell > .admin-panel { min-height: 0; } .portal-header, .dashboard-row, .grant-row, .share-panel-header, .admin-panel-header { flex-direction: column; } .admin-date-field { width: 100%; } .admin-reader-shell .admin-panel-header { flex-direction: row; align-items: center; } .admin-reader-actions { flex-wrap: wrap; justify-content: flex-end; } .shared-dashboard-group summary { align-items: flex-start; flex-wrap: wrap; } .shared-dashboard-count { margin-left: 23px; } .admin-transcript { padding: 14px; } .admin-message { max-width: 92%; } .admin-table-wrap { overflow-x: auto; } .admin-table { min-width: 820px; table-layout: auto; } .header-actions { width: 100%; } .ghost { width: 100%; } h1 { max-width: 10ch; } } /* ===== Rediseño panel de uso: theme toggle, presets, KPIs, gráfica, tabla ===== */ .admin-theme-toggle { min-width: 38px; padding: 0 10px; font-size: 1rem; line-height: 1; } .admin-presets { display: inline-flex; gap: 6px; } .admin-chip { min-height: 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-soft); color: var(--muted); font: inherit; font-size: 0.78rem; padding: 0 12px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .admin-chip:hover { color: var(--text); border-color: var(--border-strong); } .admin-chip.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .admin-usage-legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 0.76rem; } .admin-usage-legend span { display: inline-flex; align-items: center; gap: 6px; } .admin-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .admin-swatch.sw-in { background: var(--c-input); } .admin-swatch.sw-ca { background: var(--c-cache); } .admin-swatch.sw-ou { background: var(--c-output); } .admin-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; margin-bottom: 10px; } .admin-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); padding: 9px 11px; } .admin-kpi .kpi-label { color: var(--muted-soft); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .admin-kpi .kpi-value { font-size: 1.28rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .admin-kpi .kpi-sub { color: var(--muted); font-size: 0.72rem; } .admin-kpi.is-top .kpi-value { font-size: 1.02rem; } @media (max-width: 1100px) { .admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .admin-chart-card { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); padding: 10px 12px 6px; margin-bottom: 10px; } .admin-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .admin-chart-title { font-size: 0.82rem; font-weight: 700; } .admin-chart-sub { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .admin-chart-wrap { width: 100%; height: 118px; } .admin-chart { display: block; width: 100%; height: 100%; } .admin-chart .bar-in { fill: var(--c-input); } .admin-chart .bar-ca { fill: var(--c-cache); } .admin-chart .bar-ou { fill: var(--c-output); } .admin-chart .chart-grid { stroke: var(--chart-grid); stroke-width: 1; } .admin-chart .chart-axis { fill: var(--muted-soft); font-size: 11px; font-family: inherit; } /* Celdas enriquecidas de la tabla de uso */ .admin-runtime-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-top: 4px; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .admin-runtime-badge .rt-dot { width: 6px; height: 6px; border-radius: 50%; } .admin-runtime-badge.rt-codex .rt-dot { background: var(--c-output); } .admin-runtime-badge.rt-pi .rt-dot { background: var(--c-cache); } .admin-runtime-badge.rt-other .rt-dot { background: var(--muted-soft); } .admin-total-cell { display: flex; flex-direction: column; gap: 5px; } .admin-total-cell .total-num { font-weight: 700; font-variant-numeric: tabular-nums; } .admin-share-bar { width: 100%; max-width: 120px; height: 5px; border-radius: 3px; background: var(--panel-strong); overflow: hidden; } .admin-share-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .admin-tok { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .admin-tok .admin-swatch { margin-top: 0; } .admin-cache-split { display: block; margin-top: 3px; color: var(--muted-soft); font-size: 0.68rem; font-variant-numeric: tabular-nums; } /* Blindaje de especificidad frente a `.admin-table td span { display:block }` */ .admin-table td .admin-tok, .admin-table td .admin-runtime-badge { display: inline-flex; } .admin-table td .admin-total-cell { display: flex; } .admin-table td .admin-total-cell .total-num { color: var(--text); font-size: 0.86rem; } .admin-table td .admin-cache-split { color: var(--muted-soft); font-size: 0.68rem; } /* Compact stacked composition for short tablets and phones. It preserves normal document scrolling when the on-screen keyboard reduces the viewport. */ @media (max-width: 960px) and (max-height: 720px) { .login-showcase { min-height: 0; padding: 14px 24px 16px; } .login-showcase::after { top: -110%; right: -12%; width: 330px; height: 330px; } .login-brand { gap: 8px; font-size: 1rem; } .login-brand__arrow { width: 24px; height: 24px; font-size: 0.68rem; } .login-showcase__copy { margin-top: 14px; } .login-showcase__title { font-size: clamp(1.85rem, 8.8vw, 2.2rem); line-height: 0.96; } .login-access { padding: 20px 24px 18px; } .login-header { margin-bottom: 18px; } .panel-login h1 { font-size: clamp(1.9rem, 8.8vw, 2.2rem); } .panel-login .lead { margin-top: 7px; font-size: 0.84rem; line-height: 1.4; } .login-form { gap: 11px; } .login-form .field { gap: 6px; } .login-form input { min-height: 48px; padding-top: 11px; padding-bottom: 11px; } .login-submit { min-height: 52px; margin-top: 2px; } .login-submit__icon { width: 36px; height: 36px; } .login-help { margin-top: 14px; font-size: 0.76rem; line-height: 1.35; } }