:root {
  color-scheme: light;
  --ink: #191917;
  /* WCAG AA: 6,0:1 sobre --paper. El valor anterior (#74736d) daba 4,33:1 y
     no alcanzaba el mínimo de 4,5:1 exigido para texto normal. */
  --muted: #5f5e58;
  --line: #e6e3dc;
  --paper: #f6f4ee;
  --white: #fffefa;
  --dark: #171715;
  --lime: #d9ff62;
  --lime-dark: #a9d31f;
  --blue: #244df0;
  --danger: #c64531;
  --shadow: 0 22px 60px rgba(42, 39, 30, .1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); }
.boot span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); background: var(--dark); }
.auth-story { min-width: 0; padding: clamp(42px, 7vw, 110px); color: white; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-story::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--lime); filter: blur(1px); right: -280px; bottom: -280px; opacity: .9; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--dark); background: var(--lime); font-weight: 900; }
.auth-copy { position: relative; z-index: 1; max-width: 620px; }
.eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 760; text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.auth-copy h1 { margin: 0; font-size: clamp(42px, 5.4vw, 78px); line-height: .98; letter-spacing: -.065em; max-width: 760px; }
.auth-copy p { color: #b9b8b1; max-width: 520px; font-size: 18px; line-height: 1.6; }
.auth-panel { min-width: 0; background: var(--white); display: grid; place-items: center; padding: 40px; border-radius: 34px 0 0 34px; }
.auth-card { min-width: 0; width: min(100%, 460px); }
.auth-card h2 { font-size: 32px; letter-spacing: -.045em; margin: 0 0 8px; }
.auth-card > p { margin: 0 0 32px; color: var(--muted); line-height: 1.55; }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 720; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 13px 14px; outline: none; transition: .2s; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(25,25,23,.08); }
.form-error { min-height: 22px; margin: 4px 0 12px; color: var(--danger); font-size: 13px; }
.primary-button, .secondary-button, .ghost-button, .danger-button { border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 720; transition: transform .15s, opacity .15s, background .15s; }
.primary-button { color: var(--dark); background: var(--lime); }
.primary-button:hover { background: #cffa40; transform: translateY(-1px); }
.primary-button:disabled, .secondary-button:disabled, .ghost-button:disabled, .danger-button:disabled { opacity: .45; cursor: default; transform: none; }
.secondary-button { color: white; background: var(--dark); }
.ghost-button { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.danger-button { color: var(--danger); background: #fff0ed; }
.report-error-button { color: var(--ink); background: #fff8e7; border: 1px solid #ead8aa; }
.auth-card .primary-button { width: 100%; padding: 14px 18px; }
.auth-switch { width: 100%; margin-top: 10px; padding: 10px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch:hover { color: var(--ink); }
.auth-switch strong { color: var(--ink); }
.auth-free-pill { display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 18px; padding: 5px 10px; border: 1px solid #cfe986; border-radius: 999px; color: #526918; background: #f4ffcf; font-size: 11px; font-weight: 800; }
.auth-credit-gift { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; width: fit-content; max-width: 100%; margin-top: 28px; padding: 12px 16px 12px 12px; border: 1px solid rgba(217,255,98,.3); border-radius: 16px; background: rgba(255,255,255,.07); backdrop-filter: blur(10px); }
.auth-credit-gift > span { min-width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--dark); background: var(--lime); font-size: 20px; font-weight: 900; }
.auth-credit-gift strong, .auth-credit-gift small { display: block; }
.auth-credit-gift strong { color: white; font-size: 13px; }
.auth-credit-gift small { margin-top: 3px; color: #b9b8b1; font-size: 11px; line-height: 1.4; }
.field-hint { margin-top: -2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.google-auth-wrap { min-height: 48px; }
#google-signin-button { width: 100%; min-height: 44px; display: flex; justify-content: center; overflow: hidden; }
#google-signin-button > div, #google-signin-button iframe { max-width: 100%; }
.google-auth-status { min-height: 18px; margin: 6px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.google-auth-status.is-danger { color: var(--danger); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; color: #96948d; font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
/* Texto legal: 12px y 5,3:1 de contraste. Antes 10px sobre #8a8982 (3,47:1),
   por debajo del mínimo legible exigido justo en el texto que debe leerse. */
.auth-legal { margin: 12px 12px 2px !important; color: #6b6a63 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center; }
.verification-card { text-align: center; }
.verification-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 18px; color: var(--dark); background: var(--lime); font-size: 27px; }
.verification-card > p strong { color: var(--ink); overflow-wrap: anywhere; }
.verification-credit { display: flex; align-items: center; gap: 12px; margin: 22px 0; padding: 14px; border: 1px solid #d7e9a4; border-radius: 15px; background: #f7ffe1; text-align: left; }
.verification-credit > span { min-width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: white; background: #68871d; font-size: 19px; font-weight: 900; }
.verification-credit strong, .verification-credit small { display: block; }
.verification-credit strong { font-size: 13px; }
.verification-credit small { margin-top: 3px; color: #647047; font-size: 11px; line-height: 1.4; }
.verification-message { margin: 0 0 12px; padding: 10px 12px; border-radius: 11px; font-size: 12px; line-height: 1.45; text-align: left; }
.verification-message.is-error { border: 1px solid #efb2a8; color: #923121; background: #fff1ee; }
.verification-message.is-success { border: 1px solid #cfe39a; color: #526918; background: #f5ffdb; }
.verification-resend { width: 100%; min-height: 44px; margin-top: 10px; }
.verification-help { margin-top: 20px !important; font-size: 11px !important; text-align: center; }
.auth-card button:focus-visible, .auth-card input:focus-visible { outline: 3px solid rgba(36,77,240,.22); outline-offset: 2px; }

.onboarding-page { min-height: 100dvh; padding: 24px; color: white; background: var(--dark); }
.onboarding-header { width: min(100%, 1320px); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto 20px; }
.onboarding-optional { padding: 7px 11px; border: 1px solid #41413b; border-radius: 999px; color: #aaa9a2; font-size: 11px; font-weight: 800; }
.onboarding-layout { width: min(100%, 1320px); min-height: calc(100dvh - 120px); display: grid; grid-template-columns: minmax(310px, .78fr) minmax(560px, 1.22fr); margin: auto; border: 1px solid #34342f; border-radius: 28px; overflow: hidden; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.onboarding-welcome { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 76px); background: #1f1f1c; }
.onboarding-welcome::after { content: ""; position: absolute; right: -180px; bottom: -210px; width: 420px; height: 420px; border-radius: 50%; background: var(--lime); opacity: .96; }
.onboarding-welcome > * { position: relative; z-index: 1; }
.onboarding-success-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 14px; color: var(--dark); background: var(--lime); font-size: 20px; font-weight: 900; }
.onboarding-welcome h1 { max-width: 480px; margin: 0; font-size: clamp(38px, 4.2vw, 62px); line-height: 1; letter-spacing: -.06em; }
.onboarding-welcome > p:not(.eyebrow) { max-width: 510px; margin: 20px 0 0; color: #b9b8b1; font-size: 16px; line-height: 1.6; }
.onboarding-credit-card { width: fit-content; display: flex; align-items: baseline; gap: 9px; margin-top: 28px; padding: 14px 18px; border: 1px solid rgba(217,255,98,.28); border-radius: 15px; background: rgba(255,255,255,.07); }
.onboarding-credit-card strong { color: var(--lime); font-size: 30px; line-height: 1; }
.onboarding-credit-card span { color: white; font-size: 12px; font-weight: 750; }
.onboarding-benefits { display: grid; gap: 13px; margin: 34px 0 0; padding: 0; list-style: none; }
.onboarding-benefits li { display: flex; align-items: center; gap: 11px; color: #d2d1ca; font-size: 12px; line-height: 1.4; }
.onboarding-benefits li span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #51514a; border-radius: 8px; color: var(--lime); font-size: 10px; font-weight: 900; }
.onboarding-company { padding: clamp(30px, 4vw, 58px); color: var(--ink); background: var(--white); }
.onboarding-company-heading { max-width: 690px; }
.onboarding-company-heading .eyebrow { margin-bottom: 10px; color: #6b841f; }
.onboarding-company-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.onboarding-company-heading > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.onboarding-company-heading > p strong { color: var(--ink); }
.onboarding-error { display: grid; gap: 3px; margin-top: 20px; padding: 12px 14px; border: 1px solid #efb2a8; border-radius: 13px; color: #923121; background: #fff1ee; font-size: 12px; line-height: 1.45; }
.onboarding-form { margin-top: 26px; }
.onboarding-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.onboarding-field { min-width: 0; display: grid; align-content: start; gap: 7px; }
.onboarding-field-wide { grid-column: 1 / -1; }
.onboarding-field > span { color: #42413d; font-size: 12px; font-weight: 780; }
.onboarding-field small { color: var(--muted); font-size: 10px; font-weight: 600; }
.onboarding-field input, .onboarding-field select { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; color: var(--ink); background: white; font-size: 16px; outline: 0; }
.onboarding-field input:focus, .onboarding-field select:focus { border-color: #7c9d27; box-shadow: 0 0 0 3px rgba(169,211,31,.2); }
.onboarding-privacy { margin: 19px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.onboarding-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.onboarding-actions button { min-height: 46px; }
.onboarding-actions .primary-button { flex: 1; }
.onboarding-actions .ghost-button { white-space: nowrap; }
.onboarding-actions button:focus-visible { outline: 3px solid rgba(36,77,240,.22); outline-offset: 2px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { background: var(--dark); color: white; padding: 24px 18px; display: flex; flex-direction: column; min-height: 100vh; }
.sidebar .brand { padding: 2px 8px 28px; }
.workspace-label { color: #6b6a63; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; padding: 0 10px 10px; }
.site-list { display: grid; gap: 6px; }
.site-button { width: 100%; border: 0; background: transparent; color: #c7c6c0; padding: 10px; border-radius: 12px; text-align: left; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.site-button:hover, .site-button.is-active { background: #292925; color: white; }
.site-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--dark); background: var(--lime); font-weight: 850; text-transform: uppercase; }
.site-copy { min-width: 0; }
.site-copy strong, .site-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.site-copy strong { font-size: 13px; }
.site-copy span { color: #6b6a63; font-size: 11px; margin-top: 2px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #77766e; box-shadow: 0 0 0 3px rgba(119,118,110,.12); }
.status-dot.online { background: var(--lime); box-shadow: 0 0 0 3px rgba(217,255,98,.14); }
.add-site { width: 100%; border: 1px dashed #45443f; color: #c7c6c0; background: transparent; border-radius: 12px; margin-top: 10px; padding: 12px; text-align: left; }
.add-site:hover { border-color: var(--lime); color: var(--lime); }
.billing-entry { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: auto 0 12px; padding: 10px; border: 1px solid #3b3b35; border-radius: 12px; color: white; background: #242421; text-align: left; }
.billing-entry:hover { border-color: #68733e; background: #2b2c26; }
.billing-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--dark); background: var(--lime); font-size: 15px; font-weight: 900; }
.billing-entry > span:nth-child(2) { min-width: 0; }
.billing-entry strong, .billing-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-entry strong { font-size: 11px; }
.billing-entry small { margin-top: 3px; color: #929188; font-size: 9px; }
.billing-entry > b { color: #88877f; font-size: 19px; font-weight: 500; }
.sidebar-footer { margin-top: 0; border-top: 1px solid #302f2b; padding: 18px 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agency-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--dark); font-weight: 850; }
.agency-meta { min-width: 0; flex: 1; }
.agency-meta strong, .agency-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agency-meta strong { font-size: 12px; }
.agency-meta span { font-size: 10px; color: #6b6a63; }
.logout { border: 0; background: transparent; color: #6b6a63; font-size: 17px; }

.main { min-width: 0; padding: 22px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 auto 20px; max-width: 1480px; }
.topbar h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.activity-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: #34332e; background: var(--white); font-size: 11px; font-weight: 800; }
.activity-button:hover { border-color: #aacd49; background: #f8ffe7; }
.credit-balance { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 12px; border: 1px solid #cfe986; border-radius: 999px; color: var(--dark); background: #f4ffcf; cursor: pointer; }
.credit-balance strong { font-size: 13px; }
.credit-balance span { color: #5f6f33; font-size: 10px; font-weight: 750; }
.site-health { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); background: var(--white); border-radius: 999px; color: var(--muted); font-size: 12px; }

.empty-dashboard { min-height: calc(100vh - 120px); max-width: 1480px; margin: auto; display: grid; place-items: center; border: 1px solid var(--line); background: var(--white); border-radius: 24px; box-shadow: var(--shadow); text-align: center; padding: 50px; }
.empty-orbit { width: 100px; height: 100px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; margin: 0 auto 22px; }
.empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.empty-orbit::before { inset: 12px; }.empty-orbit::after { inset: 27px; background: var(--lime); border: 0; }
.empty-dashboard h2 { font-size: 34px; letter-spacing: -.045em; margin: 0 0 10px; }
.empty-dashboard p { color: var(--muted); line-height: 1.6; max-width: 520px; margin: 0 auto 24px; }

.workspace { max-width: 1480px; margin: auto; min-height: calc(100vh - 104px); display: grid; grid-template-columns: minmax(460px, 1fr) 330px; gap: 18px; }
.chat-panel, .history-panel { border: 1px solid var(--line); background: var(--white); border-radius: 22px; box-shadow: 0 14px 45px rgba(42,39,30,.06); min-height: 0; }
.chat-panel { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto; overflow: hidden; }
.panel-header { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.panel-header h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.new-request { border: 0; background: var(--paper); border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 700; }
.conversation { padding: 24px; overflow: auto; max-height: calc(100vh - 290px); }
.welcome { max-width: 600px; margin: 9vh auto 0; text-align: center; }
.rembro-badge { width: 54px; height: 54px; margin: auto; border-radius: 17px; display: grid; place-items: center; color: var(--dark); background: var(--lime); font-weight: 900; box-shadow: 0 12px 26px rgba(169,211,31,.2); }
.plugin-download { display: inline-flex; text-decoration: none; }
.welcome h3 { margin: 22px 0 8px; font-size: 30px; letter-spacing: -.045em; }
.welcome p { margin: 0; color: var(--muted); line-height: 1.6; }
.message { display: flex; gap: 10px; margin: 0 0 16px; align-items: flex-start; }
.message.user { justify-content: flex-end; }
.message-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--lime); display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.message-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; min-width: 0; }
.message.user .message-content { align-items: flex-end; }
.bubble { max-width: 78%; background: var(--paper); border-radius: 5px 15px 15px 15px; padding: 12px 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.message-content .bubble { max-width: 100%; }
.user .bubble { color: white; background: var(--dark); border-radius: 15px 5px 15px 15px; }
.message-attachments { display: grid; gap: 6px; max-width: 100%; margin-top: 7px; }
.message-attachments > a,
.message-attachments > div { display: flex; gap: 9px; align-items: center; min-width: 210px; max-width: 100%; padding: 7px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.message-attachments > a:hover { border-color: #b8c68b; }
.message-attachments img { width: 54px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: 7px; background: var(--paper); }
.message-file-icon { width: 54px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #425109; background: #eaffaa; font-size: 9px; font-weight: 900; }
.message-attachments span:not(.message-file-icon) { display: grid; min-width: 0; line-height: 1.25; }
.message-attachments strong { font-size: 11px; }
.message-attachments small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message.assistant:has(.progress-bubble) { margin-bottom: 9px; }
.progress-bubble { width: min(620px, calc(100% - 40px)); min-width: 0; padding: 16px 18px; white-space: normal; }
.working { display: flex; min-height: 0; gap: 9px; align-items: center; color: var(--ink); line-height: 1.45; }
.working-dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.working > span:last-child { display: -webkit-box; min-height: 2.9em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.working i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.1s infinite; }
.working i:nth-child(2) { animation-delay: .15s; }.working i:nth-child(3) { animation-delay: .3s; }
.task-progress { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(18, 18, 17, .1); }
.task-progress-head, .task-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-progress-head strong { min-width: 0; font-size: 12px; line-height: 1.35; }
.task-progress-head > span { flex: 0 0 4ch; min-width: 4ch; color: #4d6812; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.task-progress-track { position: relative; isolation: isolate; height: 12px; margin-top: 10px; overflow: hidden; border: 1px solid #d2d3c9; border-radius: 999px; background: #e4e4dc; box-shadow: inset 0 1px 2px rgba(18, 18, 17, .1); }
.task-progress-fill { position: absolute; z-index: 1; inset: 0 auto 0 0; display: block; min-width: 3px; overflow: hidden; border-radius: inherit; background-color: #9fc923; background-image: linear-gradient(90deg, #92bd1b, #cfff49); box-shadow: 0 0 12px rgba(159,201,35,.38), inset 0 1px rgba(255,255,255,.35); will-change: width; }
.task-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.7) 45%, transparent 75%); transform: translateX(-110%); animation: task-progress-sheen 1.8s ease-in-out infinite; }
.task-progress-foot { margin-top: 9px; color: var(--muted); }
.task-progress-foot small { font-size: 10px; line-height: 1.4; }
.task-progress-activity { display: inline-flex; flex: 0 0 auto; gap: 6px; align-items: center; color: #5d702b; font-weight: 750; }
.task-progress-activity::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8eb81b; box-shadow: 0 0 0 0 rgba(142,184,27,.4); animation: task-progress-pulse 1.6s ease-out infinite; }
.task-progress-activity.is-complete::before { content: "✓"; display: grid; place-items: center; width: 14px; height: 14px; color: #314504; background: #cefa50; font-size: 9px; font-weight: 900; animation: none; }
.task-progress.is-retrying .task-progress-fill { background-color: #d9a82b; background-image: linear-gradient(90deg, #d99b22, var(--lime)); }
.task-progress.is-retrying .task-progress-head strong::before { content: "↻"; display: inline-block; margin-right: 5px; color: #8b6816; animation: retry-spin 1.8s linear infinite; }
.progress-complete { margin-bottom: 8px; opacity: .7; }
.progress-complete .bubble { padding: 9px 12px; color: var(--muted); }
.progress-check { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; color: #476412; background: #eaffaa; font-size: 10px; font-weight: 900; }
.stalled-notice { display: flex; align-items: flex-start; gap: 11px; margin: 8px 0 18px 40px; padding: 13px 14px; border: 1px solid #e7c979; border-radius: 13px; color: #5c4512; background: #fff9e8; }
.stalled-notice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #6a4c00; background: #ffe7a0; font-size: 15px; font-weight: 900; animation: retry-spin 1.8s linear infinite; }
.stalled-notice strong { display: block; font-size: 11px; }
.stalled-notice p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
.failure-notice { display: flex; align-items: flex-start; gap: 11px; margin: 8px 0 18px 40px; padding: 13px 14px; border: 1px solid #e1a79f; border-radius: 13px; color: #6b2018; background: #fff3f1; }
.failure-notice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: #bd3c2e; font-size: 14px; font-weight: 900; }
.failure-notice strong { display: block; font-size: 11px; }
.failure-notice p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
.failure-notice small { display: block; margin-top: 6px; color: #83534c; font-size: 9px; line-height: 1.4; }
.human-review-notice { display: flex; align-items: flex-start; gap: 11px; margin: 8px 0 18px 40px; padding: 13px 14px; border: 1px solid #cfd8a5; border-radius: 13px; color: #3f4d18; background: #f8ffe3; }
.human-review-notice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #1b1d13; background: var(--lime); font-size: 14px; font-weight: 900; }
.human-review-notice strong { display: block; font-size: 11px; }
.human-review-notice p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
/* Resultado indeterminado: ni éxito ni error, y el usuario no debe hacer nada.
   Sin color propio se confundía con el aviso que sí le pide una indicación. */
.human-review-notice.is-internal-review { border-color: #ead8aa; color: #6b4c07; background: #fff8e7; }
.human-review-notice.is-internal-review .human-review-notice-icon { color: #fff8e7; background: #a9741a; animation: spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .human-review-notice.is-internal-review .human-review-notice-icon { animation: none; }
}
@keyframes pulse { 50% { opacity: .25; transform: translateY(-3px); } }
@keyframes retry-spin { to { transform: rotate(360deg); } }
@keyframes task-progress-sheen { 55%, 100% { transform: translateX(110%); } }
@keyframes task-progress-pulse { 70% { box-shadow: 0 0 0 5px rgba(142,184,27,0); } 100% { box-shadow: 0 0 0 0 rgba(142,184,27,0); } }
.proposal { margin: 18px 0 18px 40px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.proposal-head { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.proposal-kind { color: #1731a5; background: #e9eeff; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.proposal-head strong { font-size: 12px; }
.proposal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.proposal-cell { padding: 14px; min-width: 0; }
.proposal-cell + .proposal-cell { border-left: 1px solid var(--line); background: #f8ffe3; }
.proposal-cell span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.proposal-cell p { margin: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.proposal-change-list { background: #fff; }
.proposal-change { border-bottom: 1px solid var(--line); }
.proposal-change:last-child { border-bottom: 0; }
.proposal-change-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: #faf9f6; }
.proposal-change-head > span { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #1731a5; background: #e9eeff; font-size: 9px; font-weight: 850; }
.proposal-change-head strong { font-size: 11px; }
.proposal-change .proposal-cell { padding: 11px 14px; }
.proposal-change .proposal-cell:first-child p { color: #7f332e; }
.proposal-change .proposal-cell:last-child p { color: #37540d; }
.batch-summary { margin: 0; padding: 13px 14px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
.batch-list { list-style: none; padding: 0; margin: 0; }
.batch-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.batch-list li:last-child { border-bottom: 0; }
.batch-list li > span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #476412; background: #eaffaa; font-size: 9px; font-weight: 850; }
.batch-list strong, .batch-list small { display: block; }
.batch-list strong { font-size: 11px; }
.batch-list small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.batch-list em { min-width: 22px; padding: 4px 6px; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 9px; font-style: normal; text-align: center; }
.job-quote { margin: 18px 0 20px 40px; overflow: hidden; border: 1px solid #cfe986; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px rgba(70, 91, 16, .07); }
.job-quote > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 16px; border-bottom: 1px solid #dcecb2; background: #f8ffe3; }
.job-quote > header div { display: grid; gap: 4px; }
.job-quote > header span, .job-quote-scope > span, .job-quote-metrics span { color: #587414; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.job-quote > header strong { font-size: 14px; letter-spacing: -.015em; }
.job-quote > header small { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #587414; background: #eaffaa; font-size: 8px; font-weight: 800; }
.job-quote-body { padding: 15px 16px; }
.job-quote-metrics { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.2fr); gap: 9px; }
.job-quote-metrics > div { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.job-quote-metrics strong { display: block; margin: 5px 0 2px; font-size: 20px; line-height: 1.1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.job-quote-metrics small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.job-quote-scope { margin-top: 11px; padding: 12px 13px; border-radius: 11px; background: #faf9f6; }
.job-quote-scope p { margin: 5px 0 0; color: var(--ink); font-size: 11px; line-height: 1.55; }
.job-quote-breakdown { margin-top: 9px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.job-quote-breakdown > span { color: #587414; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.job-quote-breakdown ul { display: grid; gap: 1px; margin: 7px 0 0; padding: 0; list-style: none; }
.job-quote-breakdown li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 11px; line-height: 1.5; }
.job-quote-breakdown li + li { border-top: 1px solid #f2f0e9; }
.job-quote-breakdown li > span { color: var(--muted); }
.job-quote-breakdown li small { color: #6b6a63; font-size: 11px; }
.job-quote-breakdown li > strong { flex: 0 0 auto; color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.job-quote-breakdown-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; }
.job-quote-breakdown-total span { font-weight: 800; }
.job-quote-breakdown-total span small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.job-quote-breakdown-total strong { color: #587414; font-size: 12px; font-variant-numeric: tabular-nums; }
.job-quote-review { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.job-quote-review-heading { display: grid; gap: 3px; padding: 0 2px; }
.job-quote-review-heading span { color: #587414; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.job-quote-review-heading strong { font-size: 12px; line-height: 1.4; }
.job-quote-review .proposal { margin: 0; box-shadow: none; }
.job-quote > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border-top: 1px solid var(--line); background: #fff; }
.job-quote > footer p { max-width: 440px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.job-quote-consent-copy { display: grid; gap: 6px; max-width: 480px; }
.job-quote > footer .job-quote-consent {
  color: #536b1b;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}
.job-quote > footer > .job-quote-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.job-quote > footer button { padding: 9px 12px; border-radius: 10px; font-size: 10px; }
.job-quote.is-accepted { border-color: #b9d868; box-shadow: 0 8px 24px rgba(70, 91, 16, .05); }
.quote-accepted { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 11px; border-radius: 10px; color: #476412; background: #eaffaa; font-size: 10px; font-weight: 850; }
.job-pricing { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px 40px; padding: 18px 20px; border: 1px solid #dcecb2; border-radius: 17px; background: #f8ffe3; box-shadow: 0 10px 28px rgba(70, 91, 16, .06); }
.job-pricing > div { display: grid; gap: 3px; }
.job-pricing span:not(.pricing-spinner) { color: #587414; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.job-pricing strong { font-size: 14px; letter-spacing: -.015em; }
.job-pricing p { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.pricing-spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 3px solid #dcecb2; border-top-color: #587414; border-radius: 50%; animation: atlas-spin .8s linear infinite; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
.microtask-plan { margin: 18px 0 18px 40px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.microtask-plan > header { padding: 15px; border-bottom: 1px solid var(--line); }
.microtask-plan > header > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.microtask-plan > header span { color: #1731a5; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.microtask-plan > header strong { font-size: 11px; }
.microtask-plan > header p { margin: 7px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.microtask-progress { height: 5px; overflow: hidden; border-radius: 999px; background: #eceae4; }
.microtask-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transition: width .25s ease; }
.microtask-rule { display: block; margin-top: 9px; color: #777167; font-size: 9px; line-height: 1.45; }
.microtask-plan ol { list-style: none; margin: 0; padding: 0; }
.microtask { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.microtask:last-child { border-bottom: 0; }
.microtask.is-active { background: #f6f8ff; box-shadow: inset 3px 0 #1731a5; }
.microtask.is-complete { background: #fbffef; }
.microtask.is-skipped { background: #faf9f5; opacity: .76; }
.microtask-marker { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--muted); background: var(--paper); font-size: 10px; font-weight: 900; }
.microtask.is-active .microtask-marker { color: white; background: #1731a5; }
.microtask.is-complete .microtask-marker { color: #476412; background: #eaffaa; }
.microtask-copy strong, .microtask-copy small { display: block; }
.microtask-copy strong { font-size: 11px; }
.microtask-copy p { margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.microtask-copy small { color: #777167; font-size: 9px; font-weight: 750; }
.microtask-question { margin-top: 10px; padding: 11px 12px; border: 1px solid #c9d5ff; border-radius: 11px; background: #fff; }
.microtask-question > span { display: block; color: #1731a5; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.microtask-question > p { margin: 6px 0 9px; color: var(--dark); font-size: 10px; line-height: 1.55; }
.microtask-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.microtask-title > span { flex: 0 0 auto; color: #777167; font-size: 9px; font-weight: 750; }
.microtask-title > span b { color: #587414; }
.microtask-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.microtask-primary, .microtask-link { min-height: 30px; border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.microtask-primary { border: 1px solid var(--dark); color: #fff; background: var(--dark); }
.microtask-link { border: 1px solid var(--line); color: var(--dark); background: #fff; text-decoration: none; }
.microtask-link.is-danger { color: #bd362b; background: #fff5f2; }
.microtask-primary:disabled, .microtask-link:disabled { opacity: .45; cursor: wait; }
.microtask-plan > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-top: 1px solid var(--line); background: #fbfaf7; }
.microtask-plan > footer span { color: var(--muted); font-size: 10px; font-weight: 750; }
.microtask-plan > footer.is-automatic { justify-content: flex-start; background: #f8ffe3; }
.microtask-plan > footer.is-automatic span { color: #587414; }
.visual-validation { margin: 18px 0 18px 40px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.visual-validation > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.visual-validation > header > div { display: flex; align-items: center; gap: 9px; }
.visual-validation > header strong { font-size: 12px; }
.visual-validation > p { margin: 0; padding: 13px 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.visual-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #acaaa2; box-shadow: 0 0 0 4px rgba(172,170,162,.14); }
.visual-validation.working .visual-status-dot { background: #1731a5; box-shadow: 0 0 0 4px rgba(23,49,165,.12); animation: pulse 1.1s infinite; }
.visual-validation.passed { border-color: #b6d66a; }
.visual-validation.passed .visual-status-dot { background: #79a61f; box-shadow: 0 0 0 4px rgba(121,166,31,.14); }
.visual-validation.warning { border-color: #e0be68; }
.visual-validation.warning .visual-status-dot { background: #cf8b16; box-shadow: 0 0 0 4px rgba(207,139,22,.14); }
.visual-validation.review .visual-status-dot { background: #7c7466; }
.visual-confidence { padding: 5px 7px; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 750; }
.visual-target { padding: 0 14px 14px; }
.visual-target h4 { margin: 0 0 9px; font-size: 11px; }
.visual-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.visual-device > strong { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.visual-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.visual-pair a, .visual-missing { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); text-decoration: none; }
.visual-pair a > span, .visual-missing > span { display: block; padding: 5px 6px; color: var(--muted); background: white; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.visual-pair img { display: block; width: 100%; height: 116px; object-fit: cover; object-position: top; background: var(--paper); }
.visual-missing { display: grid; grid-template-rows: auto 1fr; }
.visual-missing small { display: grid; place-items: center; min-height: 116px; padding: 8px; color: var(--muted); font-size: 8px; text-align: center; }
.visual-issues { list-style: none; display: grid; gap: 7px; margin: 0 14px 14px; padding: 0; }
.visual-issues li { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 9px; border-radius: 9px; background: #fff8e7; font-size: 10px; line-height: 1.45; }
.visual-issues li strong { color: #8a5b08; }
.visual-retry { margin: 0 14px 14px !important; padding: 10px 11px !important; border-radius: 9px; color: #5f4a1e !important; background: #fff8e7; }
.functional-validation { margin: 18px 0 18px 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.functional-validation > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.functional-validation > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.functional-validation > header strong { font-size: 12px; line-height: 1.35; }
.functional-status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #acaaa2; box-shadow: 0 0 0 4px rgba(172,170,162,.14); }
.functional-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 800; }
.functional-validation.working .functional-status-dot { background: #1731a5; box-shadow: 0 0 0 4px rgba(23,49,165,.12); animation: pulse 1.1s infinite; }
.functional-validation.passed { border-color: #b6d66a; }
.functional-validation.passed .functional-status-dot { background: #79a61f; box-shadow: 0 0 0 4px rgba(121,166,31,.14); }
.functional-validation.passed .functional-status { color: #476412; background: #efffc0; }
.functional-validation.warning { border-color: #e0be68; }
.functional-validation.warning .functional-status-dot { background: #cf8b16; box-shadow: 0 0 0 4px rgba(207,139,22,.14); }
.functional-validation.warning .functional-status { color: #76500b; background: #fff4cf; }
.functional-validation.failed { border-color: #dfa39a; }
.functional-validation.failed .functional-status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(198,69,49,.12); }
.functional-validation.failed .functional-status { color: #8a2d22; background: #fff0ed; }
.functional-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 14px 9px; }
.functional-summary > div { min-width: 0; }
.functional-summary strong { display: block; font-size: 11px; }
.functional-summary p { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.5; }
.functional-summary > span { flex: 0 0 auto; color: #4d6812; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.functional-progress { height: 6px; margin: 0 14px 13px; overflow: hidden; border-radius: 999px; background: #e5e3dd; }
.functional-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8eb37, var(--lime)); transition: width .4s ease; }
.functional-validation.failed .functional-progress i { background: #d76a5a; }
.functional-validation.skipped .functional-progress i { background: #aaa79e; }
.functional-error { margin: 0 14px 13px; padding: 9px 10px; overflow-wrap: anywhere; border-radius: 9px; color: #76271e; background: #fff3f1; font-size: 9px; line-height: 1.5; }
.functional-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; padding: 0 14px 14px; }
.functional-device { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #faf9f6; }
.functional-device > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 6px; }
.functional-device > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.functional-device > header span { flex: 0 0 auto; color: var(--muted); font-size: 8px; font-weight: 800; }
.functional-device.passed > header span { color: #527515; }
.functional-device.warning > header span { color: #865c0f; }
.functional-device.failed > header span { color: var(--danger); }
.functional-device > p { margin: 0; padding: 0 10px 9px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.functional-details { border-top: 1px solid var(--line); background: #fff; }
.functional-details summary { padding: 8px 10px; color: #4f4d46; font-size: 8px; font-weight: 800; cursor: pointer; }
.functional-details summary:focus-visible, .functional-artifact:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.functional-steps, .functional-issues { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0 10px 9px; }
.functional-steps li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 7px; align-items: flex-start; }
.functional-steps li > span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; color: #476412; background: #efffc0; font-size: 8px; font-weight: 900; }
.functional-steps li.failed > span { color: #fff; background: var(--danger); }
.functional-steps strong, .functional-steps small { display: block; }
.functional-steps strong { font-size: 8px; line-height: 1.4; }
.functional-steps small { margin-top: 2px; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; line-height: 1.4; }
.functional-issues li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 7px; padding: 7px; border-radius: 8px; color: #664810; background: #fff7df; font-size: 8px; line-height: 1.4; }
.functional-issues li.high { color: #76271e; background: #fff0ed; }
.functional-issues li.low { color: #55534d; background: var(--paper); }
.functional-issues li strong { font-size: 8px; }
.functional-issues li span { min-width: 0; overflow-wrap: anywhere; }
.functional-empty { margin: 0; padding: 0 10px 9px; color: var(--muted); font-size: 8px; }
.functional-global-issues { padding: 0 14px 14px; }
.functional-artifacts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 14px; }
.functional-artifact { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 8px; font-weight: 800; text-decoration: none; }
.functional-artifact:hover { border-color: #b8c68b; background: #f4ffcf; }
.version-history { margin: 16px 0 18px 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.version-history > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.version-history > header strong { font-size: 11px; }
.version-history > header span { color: var(--muted); font-size: 9px; font-weight: 750; }
.version-history ol { list-style: none; margin: 0; padding: 0; }
.version-history li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.version-history li:last-child { border-bottom: 0; }
.version-history li > div { min-width: 0; }
.version-history li strong, .version-history li small { display: block; }
.version-history li strong { font-size: 10px; }
.version-history li small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.version-history li em { padding: 4px 7px; border-radius: 999px; color: #716d64; background: var(--paper); font-size: 8px; font-style: normal; font-weight: 800; }
.version-history li.is-current { background: #fbffef; }
.version-history li.is-current em { color: #476412; background: #eaffaa; }
.version-history li.is-reverted { opacity: .58; }
.version-dot { width: 8px; height: 8px; border: 2px solid #b9b5aa; border-radius: 50%; background: #fff; }
.version-history li.is-current .version-dot { border-color: #7ba51f; background: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,70,.2); }
.version-history > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); background: #faf9f6; }
.version-history.is-compact { margin: 10px 0 0; border-radius: 11px; }
.version-history.is-compact > header { padding: 9px 10px; }
.version-history.is-compact li { padding: 8px 10px; }
.version-history.is-compact > footer { padding: 9px 10px; }
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px 40px; }
.job-actions button { padding: 9px 12px; font-size: 11px; }
.execution-actions { min-height: 38px; margin-top: 0; margin-bottom: 16px; align-items: center; }
.execution-actions button { min-width: 142px; }
.execution-action-note { flex: 1 1 260px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.composer { padding: 16px; border-top: 1px solid var(--line); }
.composer-box { border: 1px solid var(--line); border-radius: 16px; background: white; padding: 12px; transition: .2s; }
.composer-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(25,25,23,.06); }
.composer textarea { width: 100%; resize: none; min-height: 54px; max-height: 150px; border: 0; outline: 0; padding: 2px; color: var(--ink); background: transparent; line-height: 1.45; }
.composer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.composer-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.composer-hint { color: var(--muted); font-size: 10px; }
.send-button { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--dark); color: white; font-size: 17px; }
.attach-button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; color: var(--ink); background: var(--paper); font-size: 10px; font-weight: 750; cursor: pointer; }
.attach-button input { display: none; }
.attach-button.is-disabled { opacity: .45; cursor: default; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.attachment-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 6px 8px; border-radius: 9px; color: var(--ink); background: #f0f5df; font-size: 10px; }
.attachment-chip > span { color: #587414; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.attachment-chip button { border: 0; padding: 0 2px; color: var(--muted); background: transparent; font-size: 14px; }

.history-panel { padding: 18px; overflow: hidden; }
.history-title { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 14px; }
.history-title h2 { margin: 0; font-size: 14px; }
.history-count { color: var(--muted); background: var(--paper); padding: 4px 7px; border-radius: 999px; font-size: 10px; }
.job-list { display: grid; gap: 8px; max-height: calc(100vh - 175px); overflow: auto; padding-right: 2px; }
.history-more { width: 100%; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 11px 14px; font-weight: 800; }
.history-more:hover:not(:disabled) { border-color: var(--ink); }
.history-more:disabled { cursor: wait; opacity: .6; }
.archived-job-notice { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--muted); background: var(--paper); font-size: 12px; font-weight: 800; }
.conversation.is-archived button { pointer-events: none; opacity: .65; }
.job-item { width: 100%; border: 1px solid transparent; background: #f7f5ef; border-radius: 13px; padding: 12px; text-align: left; }
.job-item:hover, .job-item.is-active { border-color: var(--ink); background: white; }
/* Encargo archivado: sigue consultable, pero sus adjuntos ya no se conservan.
   Se distingue sin ocultarlo para que nadie crea que perdió un archivo. */
.job-item.is-archived { background: transparent; border-style: dashed; border-color: var(--line); }
.job-item.is-archived:hover, .job-item.is-archived.is-active { border-style: solid; background: white; }
.job-archived-tag { padding: 2px 6px; border-radius: 999px; color: #6b6a63; background: #eeece5; font-size: 9px; font-weight: 800; }
.job-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.45; }
.job-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.job-status { font-weight: 800; color: #635e52; }
.job-status.pricing, .job-status.quoted { color: #587414; }.job-status.awaiting_approval { color: #1731a5; }.job-status.applied, .job-status.accepted { color: #4e7414; }.job-status.failed { color: var(--danger); }
.history-empty { color: var(--muted); font-size: 12px; line-height: 1.5; padding: 20px 8px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(17,17,15,.66); backdrop-filter: blur(7px); }
.modal { width: min(100%, 550px); border-radius: 22px; background: var(--white); box-shadow: 0 28px 90px rgba(0,0,0,.25); overflow: hidden; }
.modal-header { padding: 22px 24px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.modal-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.modal-close { border: 0; background: transparent; font-size: 22px; color: var(--muted); }
.modal-body { padding: 24px; }
.credits-modal { width: min(100%, 620px); }
.credits-modal .modal-body { max-height: min(65vh, 580px); overflow: auto; }
.telemetry-modal { width: min(100%, 1120px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.telemetry-modal > .modal-header { flex: 0 0 auto; }
.telemetry-modal-body { min-height: 260px; overflow: auto; }
.telemetry-eyebrow { display: block; margin-bottom: 5px; color: #668815; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.telemetry-loading { padding: 60px 20px; color: var(--muted); text-align: center; }
.telemetry-summary, .telemetry-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.telemetry-summary > div, .telemetry-details > div { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #faf9f6; }
.telemetry-summary span, .telemetry-summary strong, .telemetry-summary small,
.telemetry-details span, .telemetry-details strong, .telemetry-details small { display: block; }
.telemetry-summary span, .telemetry-details span { color: #657533; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.telemetry-summary strong { margin-top: 8px; font-size: 25px; letter-spacing: -.04em; }
.telemetry-details { margin-top: 10px; }
.telemetry-details strong { margin-top: 6px; font-size: 17px; }
.telemetry-summary small, .telemetry-details small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.telemetry-environment, .telemetry-requests { margin-top: 22px; }
.telemetry-environment h3, .telemetry-requests h3 { margin: 0 0 10px; font-size: 12px; }
.telemetry-environment > div { display: flex; flex-wrap: wrap; gap: 8px; }
.telemetry-environment span { padding: 8px 10px; border-radius: 10px; color: var(--muted); background: var(--paper); font-size: 9px; }
.telemetry-environment strong { margin-left: 3px; color: #34332e; }
.telemetry-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.telemetry-table-wrap table { width: 100%; border-collapse: collapse; font-size: 9px; }
.telemetry-table-wrap th, .telemetry-table-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.telemetry-table-wrap th { color: var(--muted); background: #faf9f6; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.telemetry-table-wrap tr:last-child td { border-bottom: 0; }
.telemetry-table-wrap td:first-child { width: 45%; min-width: 220px; white-space: normal; }
.telemetry-table-wrap td strong, .telemetry-table-wrap td small { display: block; }
.telemetry-table-wrap td small { margin-top: 3px; color: var(--muted); }
.telemetry-status, .telemetry-error { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #efeee9; font-size: 8px; font-weight: 850; }
.telemetry-status.is-applied, .telemetry-status.is-accepted { color: #42620c; background: #eaffaa; }
.telemetry-status.is-failed, .telemetry-status.is-human_review { color: #a33120; background: #ffe8e3; }
.telemetry-error { color: #a33120; background: #fff0ed; }
.telemetry-empty { padding: 30px !important; color: var(--muted); text-align: center !important; }
.credit-summary { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.credit-summary > div { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.credit-summary > div:first-child { border-color: #cfe986; background: #f4ffcf; }
.credit-summary span, .credit-summary small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; }
.credit-summary strong { display: block; margin: 5px 0 2px; font-size: 30px; letter-spacing: -.04em; }
.credit-reference { margin: 12px 0 22px; color: var(--muted); font-size: 10px; }
.credits-modal h3 { margin: 0 0 9px; font-size: 12px; }
.credit-prices { display: grid; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.credit-prices > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 11px; font-size: 10px; }
.credit-prices > div + div { border-top: 1px solid var(--line); }
.credit-prices span { color: var(--muted); }
.credit-prices strong { flex: 0 0 auto; }
.credit-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; }
.credit-packs > div { display: grid; gap: 4px; padding: 12px; border: 1px solid #cfe986; border-radius: 11px; background: #f8ffe3; text-align: center; }
.credit-packs strong { font-size: 11px; }
.credit-packs span { color: #587414; font-size: 10px; font-weight: 800; }
.credit-movements { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.credit-movements li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; }
.credit-movements li div { display: grid; gap: 3px; }
.credit-movements li strong { font-size: 11px; }
.credit-movements li span { color: var(--muted); font-size: 9px; }
.credit-movements li > b { font-size: 12px; }
.credit-movements li > b.is-charge { color: #bd362b; }
.credit-movements li > b.is-grant { color: #587414; }
.credit-movements .credit-empty { justify-content: center; color: var(--muted); font-size: 11px; }
.billing-modal { width: min(100%, 1080px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.billing-modal > .modal-header { flex: 0 0 auto; padding: 26px 30px; color: white; border-color: #363630; background: radial-gradient(circle at 82% -20%, rgba(217,255,98,.17), transparent 38%), #191917; }
.billing-modal > .modal-header h2 { margin-top: 5px; font-size: 27px; }
.billing-modal > .modal-header p { max-width: 640px; color: #b8b7b0; line-height: 1.45; }
.billing-modal > .modal-header .modal-close { color: #b8b7b0; }
.billing-eyebrow, .billing-plans-heading > div:first-child > span, .billing-packs-section > div:first-child > span { color: #76911c; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.billing-modal .billing-eyebrow { color: var(--lime); }
.billing-modal-body { min-height: 280px; overflow: auto; padding: 24px 30px 30px; }
.billing-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 9px; align-items: stretch; margin-bottom: 18px; }
.billing-overview > div { min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px; background: #f8f7f2; }
.billing-overview > div > span, .billing-overview > div > small { display: block; color: var(--muted); font-size: 9px; }
.billing-overview > div > strong { display: block; margin: 6px 0 4px; font-size: 16px; letter-spacing: -.02em; }
.billing-status.is-success { color: #4f7414; }
.billing-status.is-danger { color: #b53227; }
.billing-status.is-warning { color: #94620b; }
.billing-status.is-muted { color: #625f57; }
.billing-portal-action { align-self: stretch; min-width: 142px; background: white; }
.billing-payment-alert, .billing-setup-note { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 13px 14px; border-radius: 13px; }
.billing-payment-alert { color: #762b22; border: 1px solid #efb5aa; background: #fff1ed; }
.billing-payment-alert > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: white; background: #c63f31; font-weight: 900; }
.billing-payment-alert > div { flex: 1; min-width: 0; }
.billing-payment-alert strong, .billing-setup-note strong { display: block; font-size: 11px; }
.billing-payment-alert p { margin: 3px 0 0; font-size: 10px; line-height: 1.4; }
.billing-payment-alert .ghost-button { flex: 0 0 auto; color: #762b22; border-color: #dda89f; background: rgba(255,255,255,.55); }
.billing-setup-note { display: grid; gap: 3px; color: #6f531d; border: 1px solid #ead398; background: #fff8e4; }
.billing-setup-note span { font-size: 10px; line-height: 1.4; }
.billing-plans-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 23px 0 13px; }
.billing-plans-heading h3, .billing-packs-section h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.03em; }
.billing-interval { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #f5f3ed; }
.billing-interval button { border: 0; padding: 8px 11px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }
.billing-interval button small { margin-left: 4px; color: #6d841e; font-size: 8px; }
.billing-interval button.is-active { color: white; background: var(--dark); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.billing-interval button.is-active small { color: var(--lime); }
.billing-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.billing-plan { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.billing-plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: transparent; }
.billing-plan.is-recommended { border-color: #aeca52; box-shadow: 0 12px 30px rgba(101,127,28,.1); }
.billing-plan.is-recommended::before { background: var(--lime); }
.billing-plan.is-current { background: #fbfff0; }
.billing-plan-badges { min-height: 20px; display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.billing-badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.billing-badge.recommended { color: #3d4d0b; background: #e6ff92; }
.billing-badge.current { color: white; background: var(--dark); }
.billing-badge.pending { color: #762b22; background: #ffe0d9; }
.billing-badge.activating { color: #78550d; background: #fff0bd; }
.billing-plan h3 { margin: 8px 0 7px; font-size: 17px; letter-spacing: -.025em; }
.billing-plan-price { display: flex; align-items: baseline; gap: 5px; }
.billing-plan-price strong { font-size: 26px; letter-spacing: -.05em; }
.billing-plan-price span { color: var(--muted); font-size: 10px; }
.billing-plan-billing { min-height: 27px; margin: 4px 0 14px; color: #69733e; font-size: 9px; line-height: 1.45; }
.billing-plan ul { display: grid; gap: 9px; margin: 0 0 17px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.billing-plan li { position: relative; padding-left: 17px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.billing-plan li::before { content: "✓"; position: absolute; left: 0; color: #6c8b15; font-weight: 900; }
.billing-plan li strong { color: var(--ink); }
.billing-plan-action { width: 100%; margin-top: auto; padding-block: 10px; font-size: 10px; }
.billing-packs-section { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--line); }
.billing-packs-section > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.billing-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.billing-pack { min-width: 0; display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #faf9f5; }
.billing-pack > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.billing-pack > div:first-child { display: grid; justify-content: stretch; gap: 3px; }
.billing-pack strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.billing-pack span { color: var(--muted); font-size: 9px; }
.billing-pack b { font-size: 13px; }
.billing-pack .ghost-button { padding: 7px 9px; background: white; font-size: 9px; }
.billing-packs-section.is-locked .billing-pack { color: #77746c; background: #f5f4ef; }
.billing-packs-section.is-locked .billing-pack .ghost-button { color: #77746c; background: #ebe9e2; }
.billing-empty-packs { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 10px; text-align: center; }
.billing-loading, .billing-error { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.billing-loading > span { width: 36px; height: 36px; margin-bottom: 15px; border: 3px solid #e2e0d9; border-top-color: #7c9d20; border-radius: 50%; animation: billing-spin .8s linear infinite; }
.billing-loading strong, .billing-error strong { font-size: 14px; }
.billing-loading small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.billing-error p { max-width: 440px; margin: 7px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
@keyframes billing-spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.billing-entry.is-active { border-color: #93ad3c; background: #303426; box-shadow: inset 3px 0 0 var(--lime); }
.billing-main { padding: 18px; background: #efede6; }
.billing-page { max-width: 1480px; min-height: calc(100vh - 36px); margin: 0 auto; overflow: hidden; border: 1px solid #dedbd2; border-radius: 24px; background: var(--white); box-shadow: 0 18px 55px rgba(42,39,30,.08); }
.billing-page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 30px 34px; color: white; background: radial-gradient(circle at 82% -20%, rgba(217,255,98,.17), transparent 38%), var(--dark); }
.billing-page-hero .eyebrow { margin-bottom: 10px; color: var(--lime); }
.billing-page-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; }
.billing-page-hero p { max-width: 720px; margin: 8px 0 0; color: #b9b8b1; font-size: 15px; line-height: 1.55; }
.billing-page-hero .ghost-button { flex: 0 0 auto; color: white; border-color: #45443f; }
.billing-page-hero .ghost-button:hover { color: var(--lime); border-color: var(--lime); }
.billing-tabs { display: flex; gap: 4px; padding: 8px 30px 0; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.billing-tabs button { position: relative; flex: 0 0 auto; min-width: 120px; padding: 14px 16px 15px; border: 0; color: var(--muted); background: transparent; font-size: 13px; font-weight: 850; }
.billing-tabs button::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; border-radius: 4px 4px 0 0; background: transparent; }
.billing-tabs button:hover { color: var(--ink); }
.billing-tabs button.is-active { color: var(--ink); }
.billing-tabs button.is-active::after { background: var(--lime); }
.billing-tabs button:focus-visible, .billing-invoice-download:focus-visible { outline: 3px solid rgba(95,126,18,.3); outline-offset: 2px; }
.billing-page-content { min-height: 460px; padding: 28px 30px 34px; outline: none; }
.billing-page-content:focus-visible { outline: 3px solid rgba(95,126,18,.45); outline-offset: -3px; }
.billing-page .billing-page-hero .ghost-button,
.billing-page .billing-section-heading .ghost-button,
.billing-page .billing-form-footer .primary-button,
.billing-page .billing-invoice-download { min-height: 44px; }
.billing-page .billing-eyebrow,
.billing-page .billing-plans-heading > div:first-child > span,
.billing-page .billing-packs-section > div:first-child > span { font-size: 11px; }
.billing-page .billing-overview > div > span,
.billing-page .billing-overview > div > small { font-size: 12px; line-height: 1.45; }
.billing-page .billing-overview > div > strong { font-size: 20px; }
.billing-page .billing-portal-action { font-size: 13px; }
.billing-page .billing-payment-alert strong,
.billing-page .billing-setup-note strong { font-size: 14px; }
.billing-page .billing-payment-alert p,
.billing-page .billing-setup-note span { font-size: 12px; line-height: 1.5; }
.billing-page .billing-interval button { font-size: 12px; }
.billing-page .billing-interval button small { font-size: 10px; }
.billing-page .billing-plan h3 { font-size: 20px; }
.billing-page .billing-plan-price strong { font-size: 30px; }
.billing-page .billing-plan-price span,
.billing-page .billing-plan-billing { font-size: 12px; }
.billing-page .billing-plan li { font-size: 13px; line-height: 1.5; }
.billing-page .billing-plan-action { font-size: 13px; }
.billing-page .billing-packs-section > div:first-child p { font-size: 12px; line-height: 1.5; }
.billing-page .billing-pack strong { font-size: 14px; }
.billing-page .billing-pack span { font-size: 12px; }
.billing-page .billing-pack b { font-size: 16px; }
.billing-page .billing-pack .ghost-button { font-size: 12px; }
.billing-page .billing-empty-packs { font-size: 13px; }
.billing-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.billing-section-heading h2 { margin: 4px 0 0; font-size: 25px; letter-spacing: -.04em; }
.billing-section-heading p { max-width: 700px; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.billing-soft-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: #587414; background: #efffc0; font-size: 11px; font-weight: 850; }
.billing-summary-body > .billing-overview { margin-top: 0; }
.billing-summary-body .billing-loading, .billing-summary-body .billing-error { min-height: 360px; }
.billing-account-form { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.billing-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 22px; }
.billing-field { min-width: 0; display: grid; gap: 7px; margin: 0; }
.billing-field-wide { grid-column: 1 / -1; }
.billing-field > span { font-size: 13px; font-weight: 800; }
.billing-field > span small { color: var(--muted); font-size: 11px; font-weight: 600; }
.billing-field input, .billing-field select { width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #fbfaf7; font: inherit; font-size: 16px; transition: border-color .16s, box-shadow .16s, background .16s; }
.billing-field input:focus, .billing-field select:focus { border-color: #839d2f; background: white; box-shadow: 0 0 0 3px rgba(131,157,47,.13); }
.billing-field-help { grid-column: 1 / -1; margin: -10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.billing-field-help.is-danger { color: var(--danger); }
.billing-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 22px; border-top: 1px solid var(--line); background: #fbfaf7; }
.billing-form-footer > p { max-width: 580px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.billing-form-footer > div { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.billing-save-status { min-height: 18px; color: #587414; font-size: 12px; font-weight: 750; text-align: right; }
.billing-inline-alert { display: grid; gap: 3px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #efb5aa; border-radius: 12px; color: #762b22; background: #fff1ed; }
.billing-inline-alert strong { font-size: 14px; }
.billing-inline-alert span { font-size: 12px; line-height: 1.5; }
.billing-panel-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; background: #fbfaf7; }
.billing-panel-state strong { font-size: 17px; }
.billing-panel-state p { max-width: 520px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.billing-panel-state .ghost-button { margin-top: 16px; background: white; }
.billing-panel-state.is-error { border-color: #e5b5ac; background: #fff7f5; }
.billing-panel-state.is-empty { background: linear-gradient(145deg, #fbfaf7, #f7fce9); }
.billing-spinner { width: 34px; height: 34px; margin-bottom: 14px; border: 3px solid #e2e0d9; border-top-color: #7c9d20; border-radius: 50%; animation: billing-spin .8s linear infinite; }
.billing-invoice-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.billing-invoice { min-width: 0; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(130px, .35fr) auto auto; align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.billing-invoice-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.billing-invoice-icon { width: 42px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #5b7217; background: #efffc0; font-size: 10px; font-weight: 900; }
.billing-invoice-main > div { min-width: 0; display: grid; gap: 3px; }
.billing-invoice-main strong, .billing-invoice-main span, .billing-invoice-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-invoice-main strong { font-size: 15px; }
.billing-invoice-main span { color: var(--ink); font-size: 13px; }
.billing-invoice-main small { color: var(--muted); font-size: 12px; }
.billing-invoice-amount { display: grid; gap: 3px; text-align: right; }
.billing-invoice-amount strong { font-size: 16px; }
.billing-invoice-amount small { color: var(--muted); font-size: 11px; }
.billing-invoice-status { display: inline-flex; justify-content: center; min-width: 78px; padding: 7px 9px; border-radius: 999px; font-size: 11px; font-weight: 850; }
.billing-invoice-status.is-success { color: #4f7414; background: #efffc0; }
.billing-invoice-status.is-warning { color: #8b5b08; background: #fff0bd; }
.billing-invoice-status.is-danger { color: #a93127; background: #ffe0d9; }
.billing-invoice-status.is-muted { color: #625f57; background: #efede7; }
.billing-invoice-download { flex: 0 0 auto; padding: 10px 12px; background: #fbfaf7; font-size: 12px; text-decoration: none; }
.billing-invoice-unavailable { color: var(--muted); font-size: 12px; }
.billing-load-more { display: flex; justify-content: center; padding-top: 18px; }
.pair-code { display: flex; align-items: center; justify-content: center; min-height: 78px; border: 1px dashed #bbb7ac; border-radius: 15px; background: var(--paper); font: 800 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: 12px; line-height: 1.5; }
.steps li::before { content: counter(step); width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; color: var(--dark); background: var(--lime); font-weight: 850; }
.modal-note { margin: 20px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.issue-modal textarea { resize: vertical; min-height: 125px; line-height: 1.5; }
.issue-cost-note { margin: -4px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; display: grid; gap: 10px; max-width: 420px; padding: 13px 16px; border-radius: 12px; color: white; background: var(--dark); box-shadow: var(--shadow); font-size: 12px; }
.toast button { justify-self: start; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 9px; color: white; background: rgba(255, 255, 255, .12); font: inherit; font-weight: 800; cursor: pointer; }
.toast button:hover { background: rgba(255, 255, 255, .2); }

.owner-entry { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: auto 0 8px; padding: 10px; border: 1px solid #4b5730; border-radius: 12px; color: white; background: #20231b; text-align: left; }
.owner-entry:hover, .owner-entry.is-active { border-color: var(--lime); background: #292e1d; }
.owner-entry + .billing-entry { margin-top: 0; }
.owner-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--dark); background: var(--lime); font-size: 16px; font-weight: 900; }
.owner-entry > span:nth-child(2) { min-width: 0; }
.owner-entry strong, .owner-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-entry strong { font-size: 11px; }
.owner-entry small { margin-top: 3px; color: #a7ad93; font-size: 9px; }
.owner-entry > b { color: #929a79; font-size: 19px; font-weight: 500; }

.owner-main { padding: 18px; background: #efede6; }
.owner-panel { position: relative; max-width: 1600px; min-height: calc(100vh - 36px); margin: 0 auto; overflow: hidden; border: 1px solid #dedbd2; border-radius: 24px; background: var(--white); box-shadow: 0 18px 55px rgba(42, 39, 30, .08); }
.owner-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 30px 34px; color: white; background: var(--dark); }
.owner-hero .eyebrow { margin-bottom: 10px; }
.owner-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; }
.owner-hero p { margin: 8px 0 0; color: #b9b8b1; font-size: 13px; line-height: 1.5; }
.owner-hero small { display: block; margin-top: 10px; color: #8e8d86; font-size: 10px; }
.owner-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.owner-hero .ghost-button { color: white; border-color: #45443f; }
.owner-hero .ghost-button:hover { border-color: var(--lime); color: var(--lime); }
.owner-export { text-decoration: none; }

.owner-filters { display: grid; grid-template-columns: repeat(6, minmax(125px, 1fr)); gap: 12px; align-items: end; padding: 20px 26px; border-bottom: 1px solid var(--line); background: #faf9f5; }
.owner-filters label { min-width: 0; display: grid; gap: 6px; }
.owner-filters label > span, .owner-period-filter legend { color: #62615b; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.owner-filters select, .owner-filters input[type="search"], .owner-filters input[type="date"] { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dedbd3; border-radius: 10px; color: var(--ink); background: white; outline: none; font-size: 11px; }
.owner-filters select:focus, .owner-filters input:focus { border-color: #9fbd45; box-shadow: 0 0 0 3px rgba(169, 211, 31, .15); }
.owner-period-filter { grid-column: span 2; display: flex; align-items: center; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.owner-period-filter legend { width: 100%; margin-bottom: 6px; }
.owner-period-filter button { flex: 1; min-height: 38px; padding: 7px 8px; border: 1px solid #dedbd3; color: #64635d; background: white; font-size: 10px; font-weight: 800; }
.owner-period-filter button:first-of-type { border-radius: 10px 0 0 10px; }
.owner-period-filter button:last-of-type { border-radius: 0 10px 10px 0; }
.owner-period-filter button + button { margin-left: -6px; }
.owner-period-filter button.is-active { position: relative; z-index: 1; border-color: #9fbd45; color: #263006; background: var(--lime); }
.owner-search { grid-column: span 2; }
.owner-error-filter { display: flex !important; min-height: 38px; padding: 9px 10px; border: 1px solid #dedbd3; border-radius: 10px; background: white; align-items: center; grid-template-columns: auto 1fr !important; }
.owner-error-filter input { accent-color: #7a9d19; }
.owner-error-filter span { color: var(--ink) !important; font-size: 10px !important; letter-spacing: 0 !important; text-transform: none !important; }
.owner-filter-actions { grid-column: span 2; display: flex; justify-content: flex-end; gap: 7px; }
.owner-filter-actions button { min-height: 38px; padding: 8px 13px; font-size: 10px; }

.owner-qa-baseline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 26px; border-bottom: 1px solid #d7e9a4; background: #f7ffe5; }
.owner-qa-baseline div { display: grid; gap: 4px; }
.owner-qa-baseline strong { font-size: 11px; }
.owner-qa-baseline p { margin: 0; color: var(--muted); font-size: 10px; }
.owner-qa-baseline small { font-size: 9px; font-weight: 750; }
.owner-qa-baseline small.is-success { color: #527410; }
.owner-qa-baseline small.is-error { color: #a13226; }
.owner-qa-baseline .primary-button { flex: 0 0 auto; min-width: 190px; }

.owner-tabs { display: flex; gap: 4px; padding: 14px 26px 0; border-bottom: 1px solid var(--line); overflow-x: auto; background: white; }
.owner-tabs button { flex: 0 0 auto; padding: 11px 15px 13px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 850; }
.owner-tabs button:hover { color: var(--ink); }
.owner-tabs button.is-active { border-bottom-color: var(--lime-dark); color: var(--ink); }
.owner-content { padding: 26px; }
.owner-tab-panel { display: grid; gap: 20px; }
.owner-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; }
.owner-section-heading .eyebrow { margin: 0 0 5px; color: #60771f; font-size: 9px; }
.owner-section-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.owner-section-heading > span { color: var(--muted); font-size: 10px; }
.owner-metric-group { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 3px; padding-top: 16px; border-top: 1px solid var(--line); }
.owner-section-heading + .owner-metric-group { padding-top: 0; border-top: 0; }
.owner-metric-group h3 { margin: 0; font-size: 14px; }
.owner-metric-group p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: right; }

.owner-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 10px; }
.owner-kpi { min-width: 0; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #faf9f5; }
.owner-kpi > span { color: #67665f; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.owner-kpi > strong { margin: 10px 0 5px; font-size: clamp(21px, 2vw, 29px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.owner-kpi > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.owner-kpi.is-success { border-color: #cde785; background: #f7ffe1; }
.owner-kpi.is-danger { border-color: #efb1a8; background: #fff4f2; }
.owner-kpi.is-warning { border-color: #ead092; background: #fff9e9; }
.owner-data-quality { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #e7cb81; border-radius: 12px; color: #654c10; background: #fff9e9; font-size: 10px; line-height: 1.5; }
.owner-data-quality strong { flex: 0 0 auto; }

.owner-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.owner-chart-card { min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.owner-chart-card figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.owner-chart-card figcaption div { display: grid; gap: 3px; }
.owner-chart-card figcaption strong { font-size: 13px; }
.owner-chart-card figcaption span { color: var(--muted); font-size: 9px; }
.owner-chart-card figcaption > b { color: #526719; font-size: 11px; }
.owner-chart-card svg { display: block; width: 100%; height: auto; min-height: 180px; overflow: visible; }
.owner-chart-grid line { stroke: #e3e0d8; stroke-width: 1; }
.owner-chart-grid text { fill: #88867f; font-size: 9px; }
.owner-chart-area { fill: rgba(217, 255, 98, .26); stroke: none; }
.owner-chart-line { fill: none; stroke: #22221f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.owner-chart-points circle { fill: var(--lime); stroke: #22221f; stroke-width: 2; }
.owner-chart-points circle:focus { outline: none; stroke: var(--blue); stroke-width: 4; }
.owner-bar-success { fill: #9fc923; }
.owner-bar-failed { fill: var(--danger); }
.owner-result-chart g[role="img"]:focus rect { stroke: var(--blue); stroke-width: 2; }
.owner-chart-legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.owner-chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.owner-chart-legend i.success { background: #9fc923; }
.owner-chart-legend i.failed { margin-left: 4px; background: var(--danger); }
.owner-chart-details { margin-top: 7px; border-top: 1px solid var(--line); }
.owner-chart-details summary { padding-top: 10px; color: #667331; font-size: 9px; font-weight: 800; cursor: pointer; }
.owner-chart-details .owner-table-wrap { max-height: 210px; margin-top: 8px; }
.owner-empty-chart { min-height: 260px; display: grid; place-items: center; padding: 24px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); font-size: 11px; text-align: center; }

.owner-latency-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.owner-latency-grid article { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #faf9f5; }
.owner-latency-grid span { color: #67665f; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.owner-latency-grid strong { font-size: 26px; letter-spacing: -.04em; }
.owner-latency-grid small { color: #536a18; font-size: 10px; font-weight: 750; }
.owner-breakdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.owner-breakdown { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.owner-breakdown h3 { margin: 0 0 15px; font-size: 13px; }
.owner-breakdown ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.owner-breakdown li { display: grid; gap: 5px; }
.owner-breakdown li > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.owner-breakdown li span { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.owner-breakdown li strong { flex: 0 0 auto; font-size: 9px; font-variant-numeric: tabular-nums; }
.owner-horizontal-track { display: block; height: 7px; border-radius: 999px; background: #ebe9e2; }
.owner-horizontal-track i { display: block; height: 100%; border-radius: inherit; background: #242421; }
.owner-empty-inline { margin: 0; padding: 28px 10px; color: var(--muted); font-size: 10px; text-align: center; }

.owner-table-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; }
.owner-table-wrap { width: 100%; overflow: auto; }
.owner-table-wrap table { width: 100%; border-collapse: collapse; font-size: 10px; }
.owner-table-wrap th { position: sticky; z-index: 1; top: 0; padding: 11px 12px; color: #6d6b65; background: #f4f2ec; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.owner-table-wrap td { padding: 12px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.owner-table-wrap td strong, .owner-table-wrap td small, .owner-table-wrap td > span { display: block; }
.owner-table-wrap td small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.owner-agencies-table { min-width: 1050px; }
.owner-logs-table { min-width: 1550px; table-layout: fixed; }
.owner-logs-table th:nth-child(1) { width: 135px; }
.owner-logs-table th:nth-child(2) { width: 160px; }
.owner-logs-table th:nth-child(3) { width: 250px; }
.owner-logs-table th:nth-child(4) { width: 120px; }
.owner-logs-table th:nth-child(5) { width: 100px; }
.owner-logs-table th:nth-child(6), .owner-logs-table th:nth-child(7) { width: 135px; }
.owner-logs-table th:nth-child(8) { width: 145px; }
.owner-logs-table th:nth-child(9) { width: 100px; }
.owner-log-request span, .owner-log-error { overflow-wrap: anywhere; }
.owner-log-error { color: #8a291f; background: #fff7f5; }
.owner-internal-badge { display: inline-flex !important; width: max-content; margin-top: 5px; padding: 3px 6px; border: 1px solid #c8d7ff; border-radius: 999px; color: #244aa5; background: #eef3ff; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.owner-status { display: inline-flex !important; width: max-content; padding: 4px 7px; border: 1px solid #d8d5cc; border-radius: 999px; color: #5f5d57; background: #f5f3ed; font-size: 8px; font-weight: 850; white-space: nowrap; }
.owner-status.is-active, .owner-status.is-applied, .owner-status.is-accepted, .owner-status.is-trialing { border-color: #c5df79; color: #47600b; background: #f2ffd0; }
.owner-status.is-failed, .owner-status.is-past_due { border-color: #efb1a8; color: #982f22; background: #fff0ed; }
.owner-status.is-processing, .owner-status.is-queued, .owner-status.is-waiting_user { border-color: #ecd18d; color: #785b14; background: #fff9e7; }
.owner-empty-cell { padding: 35px !important; color: var(--muted); text-align: center; }
.owner-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; border-top: 1px solid var(--line); background: #faf9f5; }
.owner-pagination > span { color: var(--muted); font-size: 9px; }
.owner-pagination > div { display: flex; align-items: center; gap: 5px; }
.owner-pagination button { min-height: 30px; padding: 6px 9px; border: 1px solid #dedbd3; border-radius: 8px; color: var(--ink); background: white; font-size: 9px; font-weight: 750; }
.owner-pagination button:disabled { opacity: .4; cursor: default; }
.owner-pagination strong { padding: 0 5px; font-size: 9px; }

.owner-loading { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--muted); text-align: center; }
.owner-loading > span { width: 34px; height: 34px; margin-bottom: 8px; border: 3px solid #e2e0d9; border-top-color: #7c9d20; border-radius: 50%; animation: billing-spin .8s linear infinite; }
.owner-loading strong { color: var(--ink); font-size: 13px; }
.owner-loading small { font-size: 9px; }
.owner-refreshing { position: fixed; z-index: 20; right: 26px; bottom: 22px; padding: 9px 12px; border-radius: 999px; color: white; background: var(--dark); box-shadow: var(--shadow); font-size: 9px; font-weight: 800; }
.owner-error { margin: 24px 26px 0; padding: 15px; border: 1px solid #efb1a8; border-radius: 13px; color: #7c291f; background: #fff3f1; }
.owner-error strong { font-size: 12px; }
.owner-error p { margin: 5px 0 10px; font-size: 10px; }
.owner-error button { padding: 7px 10px; background: white; font-size: 9px; }
.owner-privacy { margin: 0 26px 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #faf9f5; font-size: 9px; line-height: 1.5; }
.owner-privacy strong { color: var(--ink); }

/* Rango tablet. Entre 1100px y 860px el panel lateral completo roba demasiado
   espacio al chat, pero pasar a una sola columna todavía es prematuro: la barra
   se estrecha y conserva iconos y nombre en una línea. */
@media (max-width: 1100px) and (min-width: 861px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { padding: 18px 12px; }
  .site-button { padding-left: 10px; padding-right: 10px; }
  .site-copy span { display: none; }
  .workspace-label { padding-left: 6px; padding-right: 6px; }
  .agency-meta span { display: none; }
}

@media (max-width: 1100px) {
  .onboarding-layout { grid-template-columns: 1fr; }
  .onboarding-welcome { padding: 42px; }
  .onboarding-welcome::after { right: -210px; bottom: -240px; }
  .onboarding-welcome h1 { max-width: 680px; font-size: 46px; }
  .onboarding-welcome > p:not(.eyebrow) { max-width: 720px; }
  .onboarding-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 1fr; }
  .history-panel { min-height: auto; }
  .job-list { max-height: 280px; }
  .conversation { max-height: 620px; }
  .billing-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-portal-action { grid-column: 1 / -1; min-height: 42px; }
  .billing-plan-grid, .billing-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-packs-section { grid-template-columns: 1fr; gap: 13px; }
  .billing-invoice { grid-template-columns: minmax(0, 1fr) auto; }
  .billing-invoice-status { justify-self: start; }
  .billing-invoice-download, .billing-invoice-unavailable { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .owner-filters { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .owner-kpi-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .owner-chart-grid { grid-template-columns: 1fr; }
  .owner-latency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .auth-page { width: 100%; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
  .auth-story { min-height: 340px; padding: 40px 26px; }
  .auth-copy h1 { font-size: 45px; }
  .auth-panel { border-radius: 26px 26px 0 0; padding: 34px 22px; }
  .auth-credit-gift { margin-top: 20px; }
  .onboarding-page { padding: 0; }
  .onboarding-header { min-height: 68px; margin: 0; padding: 12px 18px; }
  .onboarding-layout { min-height: calc(100dvh - 68px); border-width: 1px 0 0; border-radius: 0; }
  .onboarding-welcome { padding: 34px 22px 38px; }
  .onboarding-welcome::after { right: -250px; bottom: -290px; }
  .onboarding-success-mark { margin-bottom: 22px; }
  .onboarding-welcome h1 { font-size: 39px; }
  .onboarding-welcome > p:not(.eyebrow) { font-size: 14px; }
  .onboarding-benefits { grid-template-columns: 1fr; margin-top: 28px; }
  .onboarding-company { padding: 31px 20px 38px; }
  .onboarding-form-grid { grid-template-columns: 1fr; }
  .onboarding-field-wide { grid-column: auto; }
  .onboarding-actions { align-items: stretch; flex-direction: column; }
  .onboarding-actions .ghost-button { width: 100%; white-space: normal; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; padding: 16px; }
  .sidebar .brand { padding-bottom: 16px; }
  /* La lista pasa a deslizamiento horizontal. Sin señal visual nadie descubre
     que hay más webs a la derecha, así que se marca el borde con un degradado
     que desaparece al llegar al final y se fija el ajuste por elemento. */
  .site-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  .site-list:not([data-scrollable="true"]) { mask-image: none; }
  .site-button { min-width: 210px; scroll-snap-align: start; }
  .billing-entry { margin: 12px 0 0; }
  .owner-entry { margin: 12px 0 0; }
  .owner-entry + .billing-entry { margin-top: 8px; }
  .sidebar-footer { display: none; }
  .main { padding: 12px; }
  .topbar { align-items: flex-start; }
  .topbar-actions { align-items: flex-end; flex-direction: column-reverse; }
  .telemetry-modal { width: 100%; max-height: 100dvh; border-radius: 20px; }
  .telemetry-modal-body { padding: 16px; }
  .telemetry-summary, .telemetry-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-summary { grid-template-columns: 1fr; }
  .credit-packs { grid-template-columns: 1fr; }
  .billing-backdrop { place-items: end center; padding: 0; }
  .billing-modal { width: 100%; max-height: 100dvh; border-radius: 20px 20px 0 0; }
  .billing-modal > .modal-header { padding: 20px; }
  .billing-modal > .modal-header h2 { font-size: 21px; }
  .billing-modal > .modal-header p { font-size: 10px; }
  .billing-modal-body { padding: 18px; }
  .billing-overview { grid-template-columns: 1fr; }
  .billing-portal-action { grid-column: auto; min-height: 42px; }
  .billing-payment-alert { align-items: flex-start; flex-wrap: wrap; }
  .billing-payment-alert > div { flex-basis: calc(100% - 42px); }
  .billing-payment-alert .ghost-button { width: 100%; }
  .billing-plans-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .billing-interval { display: grid; grid-template-columns: 1fr 1fr; }
  .billing-plan-grid { grid-template-columns: 1fr; }
  .billing-plan { padding: 17px; }
  .billing-packs-section { grid-template-columns: 1fr; }
  .billing-pack-grid { grid-template-columns: 1fr; }
  .billing-main { padding: 0; }
  .billing-page { min-height: 100dvh; border: 0; border-radius: 0; }
  .billing-page-hero { align-items: flex-start; flex-direction: column; gap: 18px; padding: 23px 18px; }
  .billing-page-hero .ghost-button { width: 100%; }
  .billing-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 7px 12px 0; overflow: visible; }
  .billing-tabs button { min-width: 0; min-height: 48px; padding: 11px 6px; line-height: 1.2; }
  .billing-page-content { min-height: 420px; padding: 21px 16px 28px; }
  .billing-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .billing-section-heading h2 { font-size: 22px; }
  .billing-form-grid { grid-template-columns: 1fr; padding: 17px; }
  .billing-field-wide, .billing-field-help { grid-column: auto; }
  .billing-form-footer { align-items: stretch; flex-direction: column; padding: 15px 17px; }
  .billing-form-footer > div { align-items: stretch; flex-direction: column; }
  .billing-save-status { text-align: left; }
  .billing-form-footer .primary-button { width: 100%; }
  .billing-panel-state { min-height: 330px; padding: 24px 18px; }
  .billing-invoice { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .billing-invoice-amount { text-align: left; }
  .billing-invoice-status { justify-self: start; }
  .billing-invoice-download, .billing-invoice-unavailable { grid-column: auto; width: 100%; justify-self: stretch; text-align: center; }
  .workspace { min-height: auto; }
  .chat-panel, .history-panel { border-radius: 17px; }
  .conversation { padding: 20px 16px; }
  .message-content { max-width: 88%; }
  .bubble { max-width: 88%; }
  .message.assistant:has(.progress-bubble) { width: 100%; }
  .message.assistant:has(.progress-bubble) .message-content { width: 100%; max-width: 100%; }
  .progress-bubble { width: 100%; min-width: 0; max-width: 100%; }
  .task-progress-head, .task-progress-foot { align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; }
  .task-progress-foot small:first-child { flex: 1 1 190px; }
  .proposal { margin-left: 0; }
  .job-quote { margin-left: 0; }
  .job-pricing { margin-left: 0; }
  .job-quote > header, .job-quote > footer { align-items: stretch; flex-direction: column; }
  .job-quote > header small { align-self: flex-start; }
  .job-quote-metrics { grid-template-columns: 1fr; }
  .job-quote > footer > .job-quote-actions { flex-wrap: wrap; }
  .stalled-notice { margin-left: 0; }
  .failure-notice,
  .human-review-notice { margin-left: 0; }
  .proposal-change .proposal-grid { grid-template-columns: 1fr; }
  .proposal-change .proposal-cell + .proposal-cell { border-top: 1px solid var(--line); border-left: 0; }
  .microtask-plan { margin-left: 0; }
  .visual-validation { margin-left: 0; }
  .functional-validation { margin-left: 0; }
  .version-history { margin-left: 0; }
  .visual-devices { grid-template-columns: 1fr; }
  .functional-devices { grid-template-columns: 1fr; }
  .job-actions { margin-left: 0; }
  .owner-main { padding: 0; }
  .owner-panel { min-height: 100dvh; border: 0; border-radius: 0; }
  .owner-hero { align-items: flex-start; flex-direction: column; padding: 23px 18px; }
  .owner-hero-actions { width: 100%; justify-content: flex-start; }
  .owner-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .owner-period-filter, .owner-search, .owner-filter-actions { grid-column: 1 / -1; }
  .owner-filter-actions { justify-content: stretch; }
  .owner-filter-actions button { flex: 1; }
  .owner-qa-baseline { align-items: stretch; flex-direction: column; padding: 14px 16px; }
  .owner-qa-baseline .primary-button { width: 100%; min-width: 0; }
  .owner-tabs { padding-inline: 12px; }
  .owner-content { padding: 18px 14px; }
  .owner-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .owner-metric-group { align-items: flex-start; flex-direction: column; gap: 5px; }
  .owner-metric-group p { text-align: left; }
  .owner-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-kpi { min-height: 108px; padding: 14px; }
  .owner-chart-card { padding: 12px; }
  .owner-chart-card svg { min-height: 140px; }
  .owner-latency-grid, .owner-breakdown-grid { grid-template-columns: 1fr; }
  .owner-pagination { align-items: flex-start; flex-direction: column; }
  .owner-pagination > div { width: 100%; overflow-x: auto; }
  .owner-privacy { margin: 0 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .task-progress-fill { transition: none; }
  .functional-progress i { transition: none; }
  .task-progress-fill::after,
  .task-progress-activity::before,
  .task-progress.is-retrying .task-progress-head strong::before,
  .functional-validation.working .functional-status-dot,
  .billing-loading > span { animation: none; }
  .billing-spinner { animation: none; }
  .owner-loading > span { animation: none; }
}

/* Bandeja unificada: el mismo componente sirve al propietario y a cada agencia. */
.inbox-entry { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: auto 0 8px; padding: 10px; border: 1px solid #3b3b35; border-radius: 12px; color: white; background: #242421; text-align: left; }
.inbox-entry:hover, .inbox-entry.is-active { border-color: var(--lime); background: #2b2e21; }
.inbox-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--dark); background: var(--lime); font-size: 16px; font-weight: 900; }
.inbox-entry > span:nth-child(2) { min-width: 0; }
.inbox-entry strong, .inbox-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-entry strong { font-size: 11px; }
.inbox-entry small { margin-top: 3px; color: #a7ad93; font-size: 9px; }
.inbox-entry > b { color: #929a79; font-size: 19px; font-weight: 500; }
.inbox-entry + .owner-entry, .inbox-entry + .billing-entry { margin-top: 0; }
.inbox-main { padding: 20px; overflow: hidden; }
.inbox-page { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fffefb; box-shadow: 0 22px 70px rgba(36, 35, 29, .06); }
.inbox-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #151612 0%, #242b18 100%); color: white; }
.inbox-page-header > div > span, .inbox-detail-header > div > span, .inbox-action-card > div > span { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.inbox-page-header h1 { margin: 7px 0 5px; font-size: clamp(25px, 3vw, 38px); line-height: 1; }
.inbox-page-header p { max-width: 680px; margin: 0; color: #d3d6c8; font-size: 13px; }
.inbox-page-header .ghost-button { color: white; border-color: #5b624d; background: rgba(255,255,255,.06); }
.inbox-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); }
.inbox-list { min-height: 0; padding: 14px; overflow-y: auto; border-right: 1px solid var(--line); background: #f6f5f0; }
.inbox-list-item { position: relative; width: 100%; display: grid; gap: 5px; margin-bottom: 9px; padding: 15px; border: 1px solid transparent; border-radius: 15px; color: var(--dark); background: #fffefb; text-align: left; box-shadow: 0 4px 15px rgba(30, 30, 24, .025); }
.inbox-list-item:hover, .inbox-list-item.is-active { border-color: #aacb45; background: #f6ffdc; }
.inbox-list-item > span { color: #688027; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.inbox-list-item strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list-item small { display: -webkit-box; overflow: hidden; color: #74746d; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inbox-list-item time { color: #a09f96; font-size: 9px; }
.inbox-detail { min-width: 0; min-height: 0; padding: 25px 28px 34px; overflow-y: auto; }
.inbox-detail.is-empty { display: grid; place-items: center; text-align: center; }
.inbox-detail.is-empty > div { max-width: 380px; }
.inbox-empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: var(--lime); font-size: 24px; font-weight: 900; }
.inbox-empty-copy { padding: 20px; color: #8b8a83; font-size: 12px; text-align: center; }
.inbox-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.inbox-detail-header h2 { margin: 7px 0 6px; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.08; }
.inbox-detail-header p { max-width: 760px; margin: 0; color: #686861; font-size: 12px; line-height: 1.55; }
.inbox-status { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: #4d6018; background: #e8ff9f; font-size: 9px; text-transform: uppercase; }
.inbox-status.is-payment_pending { color: #8f3f28; background: #ffe3d7; }
.inbox-status.is-completed, .inbox-status.is-resolved { color: #34713b; background: #dcf7df; }
.inbox-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0; padding: 12px 0; border-block: 1px solid var(--line); color: #77766f; font-size: 10px; }
.inbox-thread { display: grid; gap: 10px; margin: 22px 0; }
.inbox-message { max-width: 82%; padding: 13px 15px; border-radius: 15px; background: #f1f0eb; }
.inbox-message.is-client { justify-self: end; color: white; background: #171714; }
.inbox-message.is-owner { justify-self: start; border: 1px solid #c8e86b; background: #f4ffda; }
.inbox-message.is-system { max-width: 100%; border: 1px dashed #d6d4ca; background: #fbfaf6; }
.inbox-message header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 6px; font-size: 9px; }
.inbox-message time { opacity: .65; }
.inbox-message p { margin: 0; font-size: 12px; line-height: 1.55; }
.inbox-attachment { width: fit-content; display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 10px; border: 1px solid currentColor; border-radius: 9px; color: inherit; font-size: 10px; font-weight: 800; text-decoration: none; }
.inbox-action-card { display: grid; gap: 15px; margin: 20px 0; padding: 19px; border: 1px solid #b9dc51; border-radius: 17px; background: #f7ffe4; }
.inbox-action-card h3 { margin: 5px 0; font-size: 18px; }
.inbox-action-card p { margin: 0; color: #626b4c; font-size: 11px; line-height: 1.5; }
.inbox-action-card label, .inbox-refund-form label { display: grid; gap: 6px; color: #5e6650; font-size: 10px; font-weight: 800; }
.inbox-action-card input, .inbox-action-card select, .inbox-action-card textarea, .inbox-refund-form input, .inbox-composer textarea { width: 100%; padding: 11px 12px; border: 1px solid #d2d4c8; border-radius: 10px; color: var(--dark); background: white; font: inherit; font-size: 12px; resize: vertical; }
.inbox-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inbox-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inbox-file-label, .inbox-file-button { position: relative; overflow: hidden; cursor: pointer; }
.inbox-file-label input[type="file"], .inbox-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.inbox-file-button { display: inline-flex; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; font-weight: 800; background: white; }
.inbox-file-selection { display: flex; flex-wrap: wrap; gap: 7px; }
.inbox-file-selection:empty { display: none; }
.inbox-inline-actions, .inbox-owner-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.inbox-composer { display: grid; gap: 10px; margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--line); }
.inbox-composer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inbox-composer .primary-button { margin-left: auto; }
.inbox-owner-tools { justify-content: flex-end; margin: 18px 0; }
.inbox-refund-form { display: flex; align-items: end; gap: 9px; margin-right: auto; }
.inbox-refund-form input { max-width: 130px; }
.inbox-technical { margin-top: 20px; border: 1px solid var(--line); border-radius: 13px; background: #f8f7f2; }
.inbox-technical summary { padding: 12px 14px; cursor: pointer; font-size: 11px; font-weight: 800; }
.inbox-technical pre { max-height: 320px; margin: 0; padding: 14px; overflow: auto; border-top: 1px solid var(--line); font-size: 9px; white-space: pre-wrap; }
.inbox-debt { margin: 15px 0; padding: 13px 15px; border: 1px solid #ecb28f; border-radius: 13px; color: #7e3c28; background: #fff1e8; }
.inbox-debt p { margin: 3px 0 0; font-size: 10px; }
.inbox-capacity { margin: 14px 18px 0; padding: 12px 15px; border: 1px solid #d9e9a9; border-radius: 14px; background: #f9ffe8; }
.inbox-capacity summary { cursor: pointer; color: #587018; font-size: 11px; font-weight: 900; }
.inbox-capacity > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid #e4edc6; font-size: 10px; }
.inbox-capacity > div:first-of-type { margin-top: 9px; }
.human-work-offer { margin-top: 10px; }

@media (max-width: 900px) {
  .inbox-main { padding: 0; }
  .inbox-page { min-height: 100dvh; border: 0; border-radius: 0; }
  .inbox-layout { grid-template-columns: minmax(200px, 35%) minmax(0, 1fr); }
  .inbox-detail { padding: 20px; }
}

@media (max-width: 760px) {
  .inbox-entry { margin: 12px 0 0; }
  .inbox-entry + .owner-entry, .inbox-entry + .billing-entry { margin-top: 8px; }
  .inbox-page-header { align-items: stretch; flex-direction: column; padding: 22px 18px; }
  .inbox-page-header .ghost-button { width: 100%; }
  .inbox-layout { display: block; }
  .inbox-list { display: flex; max-height: none; padding: 11px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .inbox-list-item { min-width: 250px; margin: 0 8px 0 0; }
  .inbox-detail { min-height: 520px; padding: 19px 15px 30px; overflow: visible; }
  .inbox-detail-header { flex-direction: column; gap: 12px; }
  .inbox-message { max-width: 92%; }
  .inbox-form-grid, .inbox-form-row { grid-template-columns: 1fr; }
  .inbox-owner-tools, .inbox-refund-form { align-items: stretch; flex-direction: column; }
  .inbox-refund-form, .inbox-refund-form input, .inbox-owner-tools .ghost-button { width: 100%; max-width: none; }
  .inbox-composer > div { align-items: stretch; }
  .inbox-composer .primary-button { width: 100%; margin-left: 0; }
}