:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #070b08; color: #f7f7ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0, rgba(242,138,23,.16), transparent 34%), linear-gradient(135deg, #070b08, #101712); }
button, input { font: inherit; }
.hidden { display: none !important; }
.connect-header { width: min(1180px, calc(100% - 32px)); margin: auto; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.connect-brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.connect-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; }
.connect-brand strong, .connect-brand small { display: block; }
.connect-brand small { margin-top: 2px; color: #9eaa9f; }
main { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 40px 0 80px; }
.auth-layout { min-height: calc(100vh - 170px); display: grid; grid-template-columns: 1.2fr minmax(300px, 440px); align-items: center; gap: clamp(36px, 8vw, 110px); }
.intro h1, .dashboard-title h1 { margin: 10px 0 18px; max-width: 760px; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.045em; }
.intro p, .dashboard-title p { color: #aeb9b0; font-size: 1.1rem; line-height: 1.65; }
.eyebrow { color: #f6bd31; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; font-size: .76rem; }
.panel { border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(20,29,22,.82); box-shadow: 0 24px 70px rgba(0,0,0,.3); padding: clamp(22px, 4vw, 34px); }
.panel h2 { margin: 7px 0 24px; }
label { display: grid; gap: 8px; margin: 0 0 17px; color: #d5ddd6; font-size: .9rem; font-weight: 750; }
input { width: 100%; min-height: 52px; border: 1px solid #415046; border-radius: 13px; background: #ebe3cf; color: #172018; padding: 0 15px; outline: none; }
input:focus { border-color: #f28a17; box-shadow: 0 0 0 3px rgba(242,138,23,.17); }
button { min-height: 48px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #fde047, #fb923c); color: #111713; padding: 0 20px; font-weight: 900; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button.secondary { border: 1px solid rgba(255,255,255,.15); background: #18221a; color: #f3f5ed; }
.status { min-height: 24px; margin: 14px 0 0; color: #bdc8be; line-height: 1.45; }
.status.error { color: #ffb4ab; }
.dashboard-title { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.dashboard-title h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.metrics article { min-height: 138px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.055); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.metrics span { color: #aeb9b0; font-weight: 750; }
.metrics strong { color: #fde047; font-size: 2.45rem; }
.metrics .metric-label { font-size: 1rem; color: #e7ece7; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; }
.organization-list { display: grid; gap: 12px; }
.organization-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.035); padding: 16px; }
.organization-card strong, .organization-card small { display: block; }
.organization-card small { margin-top: 5px; color: #9eaa9f; }
.badge { align-self: start; border-radius: 999px; background: #173c25; color: #a6f2ba; padding: 7px 10px; font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.badge.suspended { background: #422420; color: #ffc1b8; }
.badge.requested, .badge.in_review, .badge.configuring, .badge.testing, .badge.pending_approval { background: #413613; color: #ffe58a; }
.badge.revoked { background: #302f31; color: #c9c5cb; }
.organization-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.organization-actions button { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: .78rem; }
.organization-actions button.danger { background: #422420; color: #ffc1b8; }
.empty { color: #aeb9b0; padding: 26px 0; line-height: 1.6; }
.test-requests-panel { margin: 0 0 48px; }
.request-metrics { grid-template-columns: repeat(4, 1fr); }
.secondary-section-heading { margin: 0 0 18px; }
.secondary-section-heading h2 { margin: 6px 0 0; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.test-request-list, .request-history-list { display: grid; gap: 14px; }
.test-request-card { min-width: 0; border: 1px solid #414346; border-radius: 18px; background: #111315; padding: 18px; }
.test-request-card.pendiente { border-color: rgba(239,189,88,.55); }
.test-request-card.aprobado { border-color: rgba(97,205,133,.36); }
.test-request-card.incomplete { border-color: rgba(239,189,88,.78); }
.test-request-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.test-request-header h3 { margin: 0; color: #fffdf7; font-size: 1.18rem; }
.request-date { margin: 5px 0 0; color: #aeb0b3; font-size: .85rem; }
.request-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 15px; }
.request-contacts a { color: #efbd58; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.request-details { margin-top: 15px; border-left: 3px solid #4a4c4f; padding-left: 13px; color: #d2d3d5; }
.request-details p { margin: 0 0 8px; line-height: 1.55; white-space: pre-wrap; }
.request-details small { color: #aeb0b3; }
.request-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.request-proof span { border-radius: 999px; padding: 7px 10px; font-size: .78rem; font-weight: 850; }
.request-proof .done { background: #173c25; color: #a6f2ba; }
.request-proof .missing { background: #413613; color: #ffe58a; }
.test-request-actions { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.test-request-actions button { min-height: 58px; font-size: 1rem; }
.test-request-actions .approve { background: linear-gradient(135deg, #f6cf67, #efbd58); color: #151515; }
.test-request-actions .reject { border: 1px solid #74443f; background: #352321; color: #ffc2bb; }
.automation-note { margin: -8px 0 22px; border-radius: 13px; padding: 12px 14px; line-height: 1.5; }
.automation-note.ready { background: #173421; color: #b9f4c7; }
.automation-note.pending { background: #3b321c; color: #f9dc91; }
.request-processing, .request-setup-pending { margin: 16px 0 0; border-radius: 12px; background: #2c2d30; color: #d6d7d9; padding: 12px 14px; line-height: 1.45; }
.request-history { margin-top: 8px; border-top: 1px solid #383a3d; padding-top: 12px; }
.request-history > summary { min-height: 48px; display: flex; align-items: center; color: #efbd58; font-weight: 900; cursor: pointer; }
.request-history-list { padding-top: 10px; }
.badge.request-pendiente { background: #413613; color: #ffe58a; }
.badge.request-procesando_aprobacion { background: #273852; color: #c9dcff; }
.badge.request-aprobado { background: #173c25; color: #a6f2ba; }
.badge.request-incomplete { background: #413613; color: #ffe58a; }
.badge.request-rechazado { background: #422420; color: #ffc1b8; }
.status.success { color: #a6f2ba; }
.status.warning { color: #ffe58a; }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .auth-layout, .content-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, 1fr); } .dashboard-title { align-items: start; flex-direction: column; } }
@media (max-width: 480px) { main { width: min(100% - 20px, 1180px); padding-top: 24px; } .connect-header { width: min(100% - 20px, 1180px); } .metrics { grid-template-columns: 1fr 1fr; gap: 9px; } .metrics article { min-height: 106px; padding: 14px; } .metrics strong { font-size: 2rem; } .metrics span { font-size: .83rem; } .panel { padding: 18px 14px; border-radius: 18px; } .organization-card { grid-template-columns: 1fr; } .test-request-card { padding: 16px 13px; } .test-request-header { align-items: flex-start; } .test-request-actions { grid-template-columns: 1fr; } .test-request-actions button { min-height: 58px; width: 100%; } .request-contacts { display: grid; gap: 10px; } }
:root{background:#101112;color:#f6f3ec}
body{background:#101112;overflow-wrap:anywhere}
.panel{background:#191b1e;border-color:#343537;box-shadow:none}
.eyebrow{color:#efbd58;font-size:.875rem}
.intro h1,.dashboard-title h2{line-height:1.12}
.dashboard-title h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.03em;margin:10px 0 18px}
.intro p,.dashboard-title p,.connect-brand small,.status{color:#babbbd}
input{background:#101112;color:#f6f3ec;border-color:#6e7073;min-width:0}
button{background:#efbd58;color:#141414}
button.secondary{background:#191b1e}
.badge,.organization-actions button{font-size:.875rem}
.organization-card{min-width:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #efbd58;outline-offset:4px}
.connect-footer{max-width:1180px;margin:auto;padding:28px 16px;display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid #343537}
.connect-footer a{color:#efbd58}
.skip-link{position:absolute;top:-100px;left:16px;background:#efbd58;color:#111;padding:12px;z-index:10}
.skip-link:focus{top:8px}