:root {
    --tb-ink: #07111f;
    --tb-navy: #0b1c33;
    --tb-blue: #1268ff;
    --tb-blue-2: #3b82f6;
    --tb-cyan: #22d3ee;
    --tb-surface: #ffffff;
    --tb-canvas: #f3f6fb;
    --tb-muted: #64748b;
    --tb-line: #e5ebf3;
    --tb-radius: 18px;
    --tb-sidebar: 260px;
}

* { box-sizing: border-box; }
body.platform-body { margin: 0; background: var(--tb-canvas); color: #172033; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.platform-shell { min-height: 100vh; }
.platform-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--tb-sidebar); display: flex; flex-direction: column; padding: 22px 16px; overflow-y: auto; color: #d7e2f0; background: linear-gradient(180deg, #081426 0%, #0d2039 54%, #0a192d 100%); border-right: 1px solid rgba(255,255,255,.07); transition: transform .25s ease; }
.platform-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 24px; color: #fff; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--tb-blue), #14b8d4); box-shadow: 0 10px 28px rgba(18,104,255,.35); }
.brand-word { display: block; font-weight: 800; letter-spacing: .11em; line-height: 1; }
.brand-product { display: block; margin-top: 5px; color: #8da5c2; font-size: .76rem; }
.nav-caption { margin: 16px 12px 8px; color: #67809e; font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.platform-nav { display: grid; gap: 4px; }
.platform-nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; color: #aebed1; border: 1px solid transparent; border-radius: 12px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: .18s ease; }
.platform-nav-link svg { width: 19px; height: 19px; opacity: .82; }
.platform-nav-link:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.platform-nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(18,104,255,.26), rgba(34,211,238,.08)); border-color: rgba(91,155,255,.18); box-shadow: inset 3px 0 0 var(--tb-blue-2); }
.platform-nav-link.active svg { color: #66a4ff; opacity: 1; }
.sidebar-footer { margin-top: auto; padding-top: 24px; }
.sidebar-environment { display: flex; align-items: center; gap: 9px; margin: 0 8px 12px; color: #7890ad; font-size: .72rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45,212,191,.1); }
.logout-link { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #8ea3bd; border: 0; border-radius: 11px; background: transparent; font-size: .82rem; font-weight: 600; text-align: left; }
.logout-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.logout-link svg { width: 17px; }

.platform-main { min-height: 100vh; margin-left: var(--tb-sidebar); }
.platform-topbar { position: sticky; top: 0; z-index: 1020; height: 78px; display: flex; align-items: center; gap: 20px; padding: 0 30px; background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(226,232,240,.85); backdrop-filter: blur(16px); }
.sidebar-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--tb-line); border-radius: 12px; background: #fff; color: var(--tb-navy); }
.topbar-search { position: relative; width: min(340px, 32vw); margin-left: auto; }
.topbar-search svg { position: absolute; top: 50%; left: 14px; width: 17px; color: #94a3b8; transform: translateY(-50%); }
.topbar-search input { width: 100%; height: 42px; padding: 0 14px 0 41px; border: 1px solid var(--tb-line); border-radius: 12px; background: #f8fafc; color: #94a3b8; font-size: .84rem; }
.topbar-user { display: flex; align-items: center; gap: 11px; padding-left: 6px; }
.user-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #111827, #2563eb); font-size: .88rem; font-weight: 800; box-shadow: 0 6px 16px rgba(30,64,175,.22); }
.user-meta { line-height: 1.15; }
.user-name { color: #162033; font-size: .84rem; font-weight: 700; }
.user-role { margin-top: 4px; color: var(--tb-blue); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.platform-content { width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px 30px 42px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--tb-muted); font-size: .76rem; font-weight: 700; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--tb-blue); border-radius: 9px; }
.page-title { margin: 0; color: var(--tb-ink); font-size: clamp(1.55rem, 2.2vw, 2rem); font-weight: 780; letter-spacing: -.035em; }
.page-subtitle { max-width: 650px; margin: 7px 0 0; color: var(--tb-muted); font-size: .9rem; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-techbot { --bs-btn-color:#fff; --bs-btn-bg:var(--tb-blue); --bs-btn-border-color:var(--tb-blue); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#0759e2; --bs-btn-hover-border-color:#0759e2; border-radius: 11px; box-shadow: 0 8px 20px rgba(18,104,255,.22); font-weight: 700; }
.btn-soft { border: 1px solid var(--tb-line); border-radius: 11px; background: #fff; color: #334155; font-weight: 650; }
.btn-soft:hover { border-color: #c8d5e5; background: #f8fafc; color: var(--tb-blue); }
.btn-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--tb-line); border-radius: 10px; background: #fff; color: #64748b; }
.btn-icon:hover { color: var(--tb-blue); border-color: #bfd2f5; background: #f6f9ff; }

.panel-card { background: var(--tb-surface); border: 1px solid rgba(225,232,241,.9); border-radius: var(--tb-radius); box-shadow: 0 8px 30px rgba(15,31,55,.055); }
.panel-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 22px; border-bottom: 1px solid #edf1f6; }
.panel-card-title { margin: 0; color: var(--tb-ink); font-size: 1rem; font-weight: 750; }
.panel-card-copy { margin: 5px 0 0; color: var(--tb-muted); font-size: .78rem; }
.panel-card-body { padding: 22px; }

.metric-card { position: relative; min-height: 155px; overflow: hidden; padding: 20px; background: #fff; border: 1px solid var(--tb-line); border-radius: 17px; box-shadow: 0 8px 25px rgba(15,31,55,.045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.metric-card::after { content:""; position:absolute; right:-36px; bottom:-52px; width:110px; height:110px; border-radius:50%; background:var(--metric-soft,#edf5ff); }
.metric-card:hover { transform: translateY(-3px); border-color: #ccdbef; box-shadow: 0 15px 35px rgba(15,31,55,.09); }
.metric-top { display:flex; align-items:center; justify-content:space-between; }
.metric-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--metric,#1268ff); background:var(--metric-soft,#edf5ff); }
.metric-icon svg { width:20px; height:20px; }
.metric-trend { color:#94a3b8; font-size:.67rem; font-weight:700; }
.metric-value { position:relative; z-index:1; margin-top:18px; color:var(--tb-ink); font-size:2rem; line-height:1; font-weight:800; letter-spacing:-.04em; }
.metric-label { position:relative; z-index:1; margin-top:7px; color:#475569; font-size:.81rem; font-weight:650; }

.saas-table { margin:0; }
.saas-table > :not(caption) > * > * { padding: 15px 20px; border-bottom-color: #edf1f6; vertical-align: middle; }
.saas-table thead th { color:#8491a5; background:#fbfcfe; font-size:.68rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; white-space:nowrap; }
.saas-table tbody tr { transition: background .15s ease; }
.saas-table tbody tr:hover { background:#f9fbff; }
.org-cell { display:flex; align-items:center; gap:12px; min-width:190px; }
.org-avatar { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:#fff; background:linear-gradient(145deg,#172a46,#2877ff); font-size:.8rem; font-weight:800; box-shadow:0 6px 16px rgba(37,99,235,.18); }
.org-name { color:#172033; font-size:.86rem; font-weight:750; text-decoration:none; }
.org-name:hover { color:var(--tb-blue); }
.org-type,.table-secondary { margin-top:3px; color:#8491a5; font-size:.72rem; }
.domain-pill { display:inline-flex; align-items:center; gap:6px; color:#475569; font-size:.77rem; }
.domain-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:#38bdf8; }
.status-badge,.plan-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; font-size:.68rem; font-weight:800; }
.status-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-activo { color:#087b5a; background:#e7faf4; }
.status-suspendido { color:#b45309; background:#fff7df; }
.status-archivado { color:#64748b; background:#eef2f6; }
.plan-badge { color:#315fae; background:#edf4ff; }
.date-main { color:#334155; font-size:.79rem; font-weight:650; }
.date-hint { color:#94a3b8; font-size:.68rem; }

.filters-panel { padding:16px; }
.filter-control { height:42px; border-color:var(--tb-line); border-radius:11px; background-color:#fbfcfe; font-size:.82rem; }
.filter-control:focus { border-color:#8ab5ff; box-shadow:0 0 0 .2rem rgba(18,104,255,.1); }
.empty-state { padding:60px 24px; text-align:center; }
.empty-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 18px; border-radius:20px; color:var(--tb-blue); background:#edf4ff; }
.empty-icon svg { width:29px; height:29px; }

.detail-hero { position:relative; overflow:hidden; padding:26px; color:#fff; background:linear-gradient(125deg,#071525 0%,#102a4c 68%,#104da5 100%); border-radius:22px; box-shadow:0 18px 45px rgba(7,21,37,.19); }
.detail-hero::after { content:""; position:absolute; width:260px; height:260px; top:-150px; right:-60px; border-radius:50%; border:45px solid rgba(58,144,255,.12); }
.detail-org { position:relative; z-index:1; display:flex; align-items:center; gap:17px; }
.detail-avatar { width:64px; height:64px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.2); border-radius:19px; background:rgba(255,255,255,.11); font-size:1.25rem; font-weight:800; backdrop-filter:blur(8px); }
.detail-slug { color:#9eb5d2; font-size:.8rem; }
.detail-actions { position:relative; z-index:1; display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.detail-actions .btn { border-radius:10px; font-size:.78rem; font-weight:700; }
.detail-actions .btn-light { color:#12315a; }
.detail-metric { padding:18px; }
.detail-metric .metric-icon { width:37px; height:37px; }
.detail-metric .metric-value { margin-top:13px; font-size:1.65rem; }
.info-list { margin:0; }
.info-row { display:grid; grid-template-columns:145px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid #edf1f6; }
.info-row:last-child { border-bottom:0; }
.info-label { color:#8a97a9; font-size:.74rem; font-weight:700; }
.info-value { color:#273449; font-size:.82rem; font-weight:600; }
.danger-zone { border-color:#f5d7d7; box-shadow:none; }
.danger-zone .panel-card-header { background:#fffafa; border-radius:18px 18px 0 0; }
.danger-title { color:#991b1b; }
.critical-action { padding:18px 0; border-bottom:1px solid #f2e8e8; }
.critical-action:last-child { padding-bottom:0; border-bottom:0; }

.form-section { padding:24px; border-bottom:1px solid #edf1f6; }
.form-section:last-child { border-bottom:0; }
.form-section-head { display:flex; gap:13px; margin-bottom:20px; }
.form-section-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:var(--tb-blue); background:#edf4ff; }
.form-section-icon svg { width:18px; }
.form-section h2 { margin:0; color:var(--tb-ink); font-size:.95rem; font-weight:760; }
.form-section p { margin:4px 0 0; color:var(--tb-muted); font-size:.75rem; }
.form-label { color:#344258; font-size:.76rem; font-weight:700; }
.form-control,.form-select { min-height:44px; border-color:#dce4ee; border-radius:11px; font-size:.84rem; }
.form-control:focus,.form-select:focus { border-color:#78a9ff; box-shadow:0 0 0 .2rem rgba(18,104,255,.1); }
.form-help { margin-top:6px; color:#8c99aa; font-size:.69rem; }
.invalid-feedback.d-block { font-size:.7rem; }
.form-footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; background:#fbfcfe; border-top:1px solid #edf1f6; border-radius:0 0 18px 18px; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.module-check { display:flex; align-items:flex-start; gap:11px; padding:14px; border:1px solid #dfe7f1; border-radius:13px; background:#fff; cursor:pointer; }
.module-check:hover { border-color:#94b8ef; background:#f8fbff; }
.module-check input { margin-top:3px; accent-color:var(--tb-blue); }
.module-check span { display:grid; gap:3px; }
.module-check strong { color:var(--tb-ink); font-size:.82rem; }
.module-check small { color:var(--tb-muted); font-size:.7rem; line-height:1.4; }
.plan-card .info-row { grid-template-columns:1fr auto; }

.platform-alert { border:0; border-left:4px solid; border-radius:12px; font-size:.82rem; box-shadow:0 7px 20px rgba(15,31,55,.05); }
.platform-placeholder { min-height:420px; display:grid; place-items:center; padding:50px; text-align:center; }
.placeholder-orbit { position:relative; width:100px; height:100px; display:grid; place-items:center; margin:0 auto 24px; color:var(--tb-blue); background:#edf4ff; border-radius:30px; }
.placeholder-orbit::after { content:""; position:absolute; inset:-10px; border:1px dashed #b9cef3; border-radius:36px; }
.placeholder-orbit svg { width:38px; }
.coming-badge { display:inline-flex; padding:6px 10px; color:#315fae; background:#edf4ff; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.login-body { min-height:100vh; margin:0; background:#07111f; color:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); }
.login-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(35px,5vw,74px); background:radial-gradient(circle at 75% 20%,rgba(18,104,255,.28),transparent 32%),linear-gradient(145deg,#07111f,#0c2442); }
.login-visual::before,.login-visual::after { content:""; position:absolute; border:1px solid rgba(69,145,255,.18); border-radius:50%; }
.login-visual::before { width:520px;height:520px;right:-210px;bottom:-160px; }
.login-visual::after { width:360px;height:360px;right:-130px;bottom:-80px; }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:13px; color:#fff; }
.login-brand .brand-mark { width:46px;height:46px; }
.login-message { position:relative; z-index:1; max-width:590px; padding:70px 0; }
.login-kicker { color:#62a2ff; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-message h1 { max-width:560px; margin:16px 0; font-size:clamp(2.4rem,5vw,4.7rem); line-height:1.02; font-weight:800; letter-spacing:-.055em; }
.login-message p { max-width:470px; color:#9eb3ca; font-size:1rem; line-height:1.7; }
.login-foot { position:relative; z-index:1; color:#66809e; font-size:.72rem; }
.login-panel { display:grid; place-items:center; padding:40px; background:#fff; color:#172033; }
.login-card { width:100%; max-width:430px; }
.login-card h2 { margin:0 0 8px; color:var(--tb-ink); font-size:1.75rem; font-weight:800; letter-spacing:-.035em; }
.login-card-copy { margin-bottom:30px; color:var(--tb-muted); font-size:.88rem; }
.login-security { display:flex; align-items:center; gap:9px; margin-top:24px; color:#94a3b8; font-size:.7rem; }
.login-security svg { width:16px; }
.mobile-brand { display:none; }

.sidebar-backdrop { display:none; position:fixed; inset:0; z-index:1035; background:rgba(3,10,22,.55); backdrop-filter:blur(2px); }
@media (max-width: 991.98px) {
    .platform-sidebar { transform:translateX(-100%); }
    body.sidebar-open .platform-sidebar { transform:translateX(0); }
    body.sidebar-open .sidebar-backdrop { display:block; }
    .platform-main { margin-left:0; }
    .sidebar-toggle { display:grid; }
    .platform-topbar { padding:0 20px; }
    .platform-content { padding:24px 20px 36px; }
    .topbar-search { display:none; }
    .page-head { align-items:flex-start; }
    .detail-actions { justify-content:flex-start; margin-top:20px; }
    .login-shell { grid-template-columns:1fr; }
    .login-visual { display:none; }
    .login-panel { min-height:100vh; background:radial-gradient(circle at 90% 5%,#e5efff,transparent 38%),#fff; }
    .mobile-brand { display:flex; align-items:center; gap:10px; margin-bottom:40px; color:var(--tb-ink); }
}
@media (max-width: 575.98px) {
    .platform-topbar { height:68px; padding:0 14px; }
    .platform-content { padding:20px 14px 30px; }
    .user-meta { display:none; }
    .page-head { display:block; }
    .page-actions { margin-top:18px; }
    .page-actions .btn { flex:1; }
    .metric-card { min-height:137px; padding:17px; }
    .saas-table > :not(caption) > * > * { padding:13px 15px; }
    .detail-hero { padding:21px; }
    .detail-org { align-items:flex-start; }
    .detail-avatar { width:52px;height:52px;border-radius:15px; }
    .info-row { grid-template-columns:1fr; gap:4px; }
    .form-section { padding:20px 17px; }
    .form-footer { padding:16px 17px; }
    .login-panel { padding:28px 22px; }
}