*{box-sizing:border-box}body{margin:0;background:#f4f6f9;color:#19243a;font-family:Inter,Segoe UI,Arial,sans-serif}a{color:var(--accent)}.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:#fff;border-right:1px solid #e6e8ee;padding:18px 12px;overflow:auto}.brand-wrap{display:flex;gap:12px;align-items:center;padding:8px 10px 18px}.brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#42111c);color:#fff;display:grid;place-items:center;font-weight:800}.brand{font-weight:800;font-size:17px}.brand-wrap small{font-size:11px;color:#78849a}.side-search{margin:4px 6px 14px;padding:11px 12px;background:#f7f8fa;border:1px solid #e4e8ef;border-radius:10px;color:#8a94a6;font-size:13px}.nav-label{font-size:10px;letter-spacing:1.5px;color:#a1aabb;font-weight:800;margin:18px 10px 8px}.sidebar nav a{display:block;padding:11px 12px;margin:3px 0;border-radius:10px;text-decoration:none;color:#465268;font-weight:600;font-size:14px}.sidebar nav a:hover{background:#f8eaea;color:var(--accent)}.app-main{margin-left:245px;padding:30px 34px;min-height:100vh}.login-main{min-height:100vh;display:grid;place-items:center}.topbar,.page-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar h1,.page-head h1{font-size:34px;margin:6px 0}.topbar p,.page-head p{margin:0;color:#69758b}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:900}.eyebrow.accent{color:var(--accent)}.top-actions{display:flex;gap:8px}.btn,.button-link{display:inline-block;border:0;background:var(--accent);color:#fff!important;padding:11px 16px;border-radius:10px;text-decoration:none;font-weight:700}.btn.secondary{background:#fff;color:var(--accent)!important;border:1px solid #e5e7eb}.hero-strip{margin:24px 0;display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(115deg,#2a1420,var(--accent));border-radius:22px;padding:22px;color:#fff;gap:14px;box-shadow:0 14px 40px rgba(60,20,30,.12)}.hero-strip div{padding:10px 16px;border-right:1px solid rgba(255,255,255,.18)}.hero-strip div:last-child{border:0}.hero-strip small{display:block;font-size:10px;letter-spacing:1px;opacity:.78}.hero-strip strong{display:block;font-size:23px;margin-top:7px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.kpi-card{background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 4px 18px rgba(23,33,52,.03)}.kpi-icon{width:42px;height:42px;border-radius:12px;background:#f8eaea;display:grid;place-items:center;font-size:19px}.kpi-card small{display:block;color:#79859b;font-size:10px;font-weight:800;letter-spacing:.7px}.kpi-card b{display:block;font-size:23px;margin-top:5px}.dash-grid,.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin:18px 0}section{background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(23,33,52,.025)}section h2{margin-top:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 9px;border-bottom:1px solid #edf0f4;font-size:14px}th{font-size:11px;color:#6d7890;text-transform:uppercase;letter-spacing:.4px}.bar-chart{height:270px;display:flex;align-items:flex-end;gap:16px;padding:30px 8px 0}.bar-col{flex:1;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end}.bar-track{height:180px;background:#f1f3f6;border-radius:10px 10px 4px 4px;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;background:linear-gradient(var(--accent),#d85b5b);border-radius:10px 10px 0 0;min-height:3px}.bar-col span{font-size:11px;color:#7b8596;margin-top:8px}.bar-value{font-size:10px;margin-bottom:5px;color:#6f7a8d}.alert{padding:12px 16px;border-radius:10px;margin-bottom:14px}.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.alert.warning{background:#fef3c7;color:#92400e}form label{display:block;font-weight:700;font-size:13px;margin:10px 0}input,select,textarea{width:100%;padding:11px;border:1px solid #d9dee7;border-radius:9px;margin-top:6px;background:#fff}button{border:0;background:var(--accent);color:#fff;padding:11px 15px;border-radius:9px;font-weight:700;cursor:pointer}.search-form{display:flex;gap:8px;align-items:center}.search-form input{min-width:220px;margin:0}.search-form button{width:auto}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge.active{background:#dcfce7;color:#166534}.badge.warning{background:#fff3cd;color:#8a6200}.badge.expired{background:#fee2e2;color:#991b1b}.badge.blocked{background:#e5e7eb;color:#4b5563}.summary-pill,.info-box{background:#fff;border:1px solid #e7eaf0;border-radius:14px;padding:15px 18px;margin:18px 0}.mini{padding:6px 9px;font-size:11px}.danger-soft{background:#fff0f0;color:#a61b1b}.danger-btn{background:#b91c1c}.renew-form{display:grid;grid-template-columns:110px 100px 100px 120px auto;gap:6px}.renew-form input,.renew-form select{margin:0;padding:7px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.secret-box{padding:28px;border:1px dashed #94a3b8;border-radius:8px;text-align:center;background:#f8fafc}.inline-actions{display:flex;gap:8px;margin-top:10px}@media(max-width:1100px){.hero-strip{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:repeat(2,1fr)}.dash-grid,.grid2{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:relative;width:100%;height:auto}.app-main{margin-left:0;padding:18px}.hero-strip,.kpi-grid{grid-template-columns:1fr}.topbar,.page-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}}
.brand-img{width:42px;height:42px;object-fit:cover;border-radius:12px;border:1px solid #e6e8ee}
.sidebar nav a{display:flex!important;align-items:center;gap:10px}
.nav-icon{width:18px;height:18px;display:inline-flex;flex:0 0 18px;color:currentColor}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-preview{text-align:center;padding:28px}.brand-preview img{width:120px;height:120px;object-fit:cover;border-radius:24px;border:1px solid #e5e7eb}.brand-preview-empty{width:120px;height:120px;border-radius:24px;background:var(--accent);color:#fff;display:grid;place-items:center;margin:auto;font-size:34px;font-weight:800}
.company-cell{display:flex;align-items:center;gap:10px}.company-logo-mini{width:38px;height:38px;border-radius:9px;object-fit:cover;border:1px solid #e5e7eb}.company-logo-mini.placeholder{display:grid;place-items:center;background:var(--accent);color:#fff;font-size:11px;font-weight:800}.master-logo-form{margin-top:7px}.master-logo-form input[type=file]{font-size:10px;padding:4px}

.company-details{margin-top:8px}.company-details summary{cursor:pointer;font-weight:700;font-size:12px;color:var(--accent);margin-bottom:8px}
.company-info-form{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px;min-width:300px}
.company-info-form label{font-size:11px}.company-info-form input{padding:7px;font-size:12px}

/* V3.1.10 - control estricto de logos */
.commercial-login{width:min(430px,92vw)!important;max-width:430px!important;padding:34px!important;overflow:hidden!important}
.login-brand{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
.login-logo-wrap{width:92px!important;height:92px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:22px!important;margin:0 auto 12px!important;background:#fff!important}
.login-logo{display:block!important;width:86px!important;height:86px!important;max-width:86px!important;max-height:86px!important;object-fit:contain!important;object-position:center!important;border-radius:18px!important;border:1px solid #e5e7eb!important}
.login-logo-fallback{width:86px!important;height:86px!important;max-width:86px!important;max-height:86px!important;display:grid!important;place-items:center!important;border-radius:18px!important;margin:0!important;background:var(--accent)!important;color:#fff!important}
.login-brand h1{margin:10px 0 6px!important}
.login-brand p{max-width:320px!important;margin:0 auto 18px!important}

.brand-img-wrap{width:42px!important;height:42px!important;flex:0 0 42px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:12px!important}
.brand-img{display:block!important;width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:contain!important;object-position:center!important;border-radius:12px!important}

.brand-preview img{width:120px!important;height:120px!important;max-width:120px!important;max-height:120px!important;object-fit:contain!important;object-position:center!important}
.company-logo-mini{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;object-position:center!important}

.master-kpis{grid-template-columns:repeat(5,1fr)}
.company-list{display:flex;flex-direction:column;gap:10px}.company-row{display:flex;align-items:center;justify-content:space-between;gap:18px;text-decoration:none;color:inherit;border:1px solid #e7eaf0;border-radius:13px;padding:13px 14px;background:#fff}.company-row:hover{border-color:var(--accent);box-shadow:0 7px 20px rgba(0,0,0,.05)}
.company-main{display:flex;align-items:center;gap:12px}.company-main small{display:block;color:#7a8497;margin-top:3px}.company-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.company-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(115deg,#28141e,var(--accent));color:#fff;border-radius:20px;padding:22px 26px;margin:20px 0}.company-identity{display:flex;align-items:center;gap:15px}.company-identity h2{margin:0}.company-identity p{margin:4px 0 0;opacity:.8}.company-detail-logo{width:72px;height:72px;object-fit:contain;border-radius:16px;background:#fff}.company-detail-logo.placeholder{display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);font-weight:800}.license-box{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.license-box strong{font-size:20px}.license-box small{opacity:.8}
.renew-license-form{display:flex;gap:8px}.renew-license-form select{margin:0}.renew-license-form button{white-space:nowrap}.secondary-action{background:#fff!important;color:var(--accent)!important;border:1px solid #d9dee7!important}
.license-blocked-wrap{min-height:70vh;display:grid;place-items:center}.license-blocked-card{max-width:620px;text-align:center;padding:44px}.lock-mark{font-size:52px}
@media(max-width:1200px){.master-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.company-hero{align-items:flex-start;flex-direction:column}.license-box{align-items:flex-start}.company-row{align-items:flex-start;flex-direction:column}.company-meta{align-items:flex-start}.master-kpis{grid-template-columns:1fr}}

.support-exit-form{margin:0 3px 8px}.support-exit-btn{width:100%;background:#fff!important;color:var(--accent)!important;border:1px solid #e3e6eb!important;text-align:left!important;padding:10px 12px!important}
.support-exit-btn:hover{background:#f8eaea!important}
.danger-zone{border:1px solid #fecaca;background:#fff7f7;border-radius:12px;padding:16px}.danger-zone h3{color:#991b1b;margin-top:0}.danger-zone p{color:#7f1d1d}

.migration-note{display:block;text-align:center;color:#8a94a6;margin-top:12px}
.support-widget{position:fixed;right:24px;bottom:24px;z-index:9999}.support-fab{display:flex;align-items:center;gap:8px;border-radius:999px;padding:13px 17px;box-shadow:0 12px 30px rgba(0,0,0,.18)}.support-dot{width:9px;height:9px;border-radius:50%;background:#9ca3af}.support-dot.online{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15)}.support-fab b{background:#fff;color:var(--accent);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px}
.support-panel{position:absolute;right:0;bottom:58px;width:min(380px,90vw);height:500px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.22);overflow:hidden}.support-panel-head{height:70px;padding:15px 16px;background:linear-gradient(115deg,#28141e,var(--accent));color:#fff;display:flex;justify-content:space-between;align-items:center}.support-panel-head small{display:block;opacity:.8;margin-top:3px}.support-panel-head button{background:transparent;font-size:24px;padding:0 5px}
.chat-messages{height:365px;overflow:auto;padding:14px;background:#f7f8fa;display:flex;flex-direction:column;gap:9px}.chat-msg{max-width:82%;padding:9px 11px;border-radius:13px;background:#fff;border:1px solid #e5e7eb;align-self:flex-start}.chat-msg.mine{align-self:flex-end;background:#fbe8e8;border-color:#f4caca}.chat-msg small{display:block;color:#8b94a6;font-size:9px;margin-top:5px}.chat-compose{display:flex;gap:7px;padding:10px;background:#fff;border-top:1px solid #e5e7eb}.chat-compose input{margin:0}.chat-compose button{white-space:nowrap}
.support-admin-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}.support-company-list{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;height:600px;overflow:auto}.support-company-list a{display:flex;justify-content:space-between;text-decoration:none;color:inherit;padding:11px;border-radius:9px}.support-company-list a.selected,.support-company-list a:hover{background:#f8eaea;color:var(--accent)}.support-company-list b{background:var(--accent);color:#fff;border-radius:999px;padding:2px 7px;font-size:10px}.support-admin-chat{padding:0;overflow:hidden}.support-admin-chat .chat-messages{height:530px}
@media(max-width:800px){.support-admin-layout{grid-template-columns:1fr}.support-company-list{height:auto;max-height:200px}.support-widget{right:14px;bottom:14px}}

.support-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 14px}.support-search{display:flex;gap:8px;max-width:520px;width:100%}.support-search input{margin:0}.sound-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b}.sound-toggle input{width:auto}
.support-company-list a{align-items:flex-start;gap:10px}.inbox-company-main{min-width:0;flex:1}.inbox-company-main span{font-weight:700}.inbox-company-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7b8495;margin-top:4px;max-width:150px}.inbox-company-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.inbox-company-meta em{font-style:normal;font-size:9px;border-radius:999px;padding:3px 7px}.inbox-company-meta em.open{background:#dcfce7;color:#166534}.inbox-company-meta em.resolved{background:#e5e7eb;color:#475569}.inbox-company-meta small{font-size:9px;color:#94a3b8}
.chat-thread-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#fff;border-bottom:1px solid #e5e7eb}.chat-thread-head h3{margin:0}.chat-thread-head small{color:#7b8495}.chat-thread-head form{margin:0}.chat-thread-head button{margin:0}
.empty-inbox,.empty-chat-state{padding:30px;text-align:center;color:#7b8495}.empty-chat-state{display:grid;place-items:center;height:560px}.empty-chat-state h3{margin-bottom:5px;color:#334155}
.nav-unread{margin-left:auto;background:var(--accent);color:#fff;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:10px;padding:0 6px}

.notification-list{display:flex;flex-direction:column;gap:12px;max-width:980px}.notification-card{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:15px;padding:15px 16px}.notification-card.unread{border-left:4px solid var(--accent);box-shadow:0 7px 22px rgba(0,0,0,.04)}.notification-card.warning .notification-icon{background:#fff7d6;color:#a16207}.notification-card.danger .notification-icon{background:#fee2e2;color:#991b1b}.notification-card.support .notification-icon{background:#e0f2fe;color:#075985}.notification-icon{width:40px;height:40px;border-radius:11px;background:#f1f5f9;display:grid;place-items:center;font-weight:900}.notification-body h3{margin:0}.notification-body p{margin:5px 0;color:#475569}.notification-body small{color:#94a3b8}.notification-title-row{display:flex;align-items:center;gap:8px}.new-pill{font-size:9px;background:var(--accent);color:#fff;border-radius:999px;padding:3px 7px;font-weight:800}.empty-notifications{background:#fff;border:1px dashed #d7dce5;border-radius:16px;padding:45px;text-align:center;color:#64748b}.admin-notice-box{margin-top:24px;border:1px solid #e5e7eb;background:#f8fafc;border-radius:14px;padding:16px}.admin-notice-box h3{margin-top:0}

/* V3.4.1 - Metodos de pago */
.payment-method-list{display:flex;flex-direction:column;gap:12px}
.payment-method-card{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fff}
.payment-method-card.inactive{opacity:.65;background:#f8fafc}
.payment-method-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.payment-method-top strong{font-size:16px;margin-right:8px}
.payment-method-actions{display:flex;gap:8px;margin-top:10px}
.payment-method-actions form{margin:0;flex:1}
.payment-method-actions button{width:100%}

/* V3.5 - Cuentas de cobro */
.payment-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.payment-new-box{background:#fff;border:1px solid #e5e7eb;border-radius:15px;padding:14px 18px;margin-bottom:18px}
.payment-new-box summary{cursor:pointer;font-size:16px;font-weight:800;color:var(--accent)}
.payment-new-box[open] summary{margin-bottom:16px}
.payment-account-list{display:flex;flex-direction:column;gap:16px}
.payment-account-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px}
.payment-account-card.inactive{opacity:.68}
.payment-account-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.payment-avatar{width:44px;height:44px;border-radius:12px;background:#f8e5e5;color:var(--accent);display:grid;place-items:center;font-weight:900}
.payment-account-name{flex:1}.payment-account-name h2{margin:0;font-size:19px}.payment-account-name small{color:#7b8495}
.payment-account-layout{display:grid;grid-template-columns:1fr 260px;gap:18px}
.payment-editor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.payment-qr-box{border:1px solid #e5e7eb;border-radius:14px;padding:14px;text-align:center;background:#fafbfc}
.payment-qr-box h3{margin-top:0}.payment-qr-img{width:190px;height:190px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid #e5e7eb}
.qr-empty{width:190px;height:190px;margin:auto;display:grid;place-items:center;border:1px dashed #cbd5e1;border-radius:12px;color:#94a3b8}
.binance-config{margin-top:18px;border:1px solid #f0dca7;background:#fffdf5;border-radius:15px;padding:16px}
.binance-config-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.binance-config-head h3{margin:0}.binance-config-head p{margin:4px 0 12px;color:#7b8495}
.switch-row{display:flex!important;align-items:center;gap:8px;margin-bottom:12px}.switch-row input{width:auto!important;margin:0!important}
.secure-note{font-size:11px;color:#64748b;margin-top:10px}
.payment-card-actions{display:flex;gap:8px;margin-top:14px;border-top:1px solid #eef0f3;padding-top:14px}.payment-card-actions form{margin:0}
@media(max-width:900px){.payment-account-layout{grid-template-columns:1fr}.payment-summary{grid-template-columns:1fr}.payment-editor .form-grid{grid-template-columns:1fr}}

/* V3.5.1 - Campos dinamicos por metodo de pago */
.dynamic-payment-form [class^="field-"]{transition:opacity .15s ease}
.dynamic-payment-form label{min-width:0}
.payment-account-card .form-grid{align-items:end}

/* V3.6 - Cobros y transacciones */
.sale-payment-preview{display:flex;justify-content:space-between;gap:14px;border:1px solid #e5e7eb;background:#f8fafc;border-radius:13px;padding:12px;margin:8px 0 14px}
.sale-payment-preview div{display:flex;flex-direction:column;gap:3px}.sale-payment-preview small{color:#64748b}.sale-payment-preview span{font-size:11px;color:#475569}
.sale-payment-preview img{width:105px;height:105px;object-fit:contain;border-radius:9px;background:#fff;border:1px solid #e5e7eb}
.collection-filter{display:flex;gap:8px}.collection-filter input,.collection-filter select{margin:0}.collection-kpis{grid-template-columns:repeat(4,1fr)}
.collection-grid{grid-template-columns:2fr 1fr}.collection-grid section{overflow:hidden}.table-scroll{overflow:auto}.status-inline{margin:0}.status-inline select{margin:0;min-width:105px;padding:6px}
.renew-form{display:grid!important;grid-template-columns:90px 100px 100px minmax(130px,1fr) 120px 110px auto;gap:6px;align-items:center}.renew-form input,.renew-form select,.renew-form button{margin:0!important}
@media(max-width:1100px){.collection-grid{grid-template-columns:1fr}.renew-form{grid-template-columns:1fr 1fr}.collection-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.collection-kpis{grid-template-columns:1fr}.collection-filter{flex-direction:column}.sale-payment-preview{flex-direction:column}}

/* V3.6.1 - Caja y comprobantes */
.checkout-help{margin-top:-8px;color:#64748b}
.receipt-link{display:inline-flex;padding:6px 9px;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;font-weight:700;font-size:12px}
.receipt-link:hover{background:#f8fafc}
input[type=file]{background:#fff}

/* V3.6.2 - Referencias editables y cobros confirmados */
.reference-inline{display:flex;gap:6px;min-width:235px;margin:0}
.reference-inline input{min-width:150px;margin:0;padding:7px 8px}
.reference-inline button{margin:0;padding:7px 9px;font-size:11px}
.payment-status-paid{display:inline-flex;padding:6px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-weight:800;font-size:11px}
.collection-kpis-simple{grid-template-columns:repeat(2,minmax(0,1fr))}

/* V3.6.3 - referencia editable en la venta */
.checkout-reference-block{margin:12px 0}
.checkout-reference-block label{display:block;font-weight:700;margin-bottom:6px}
.checkout-reference-block input{
  width:100%;
  pointer-events:auto!important;
  user-select:text!important;
  -webkit-user-select:text!important;
  position:relative;
  z-index:3;
}
.checkout-reference-block small{display:block;margin-top:6px;color:#64748b}

.team-list{display:grid;gap:14px}.team-card{border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff}.team-card-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.team-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.team-actions{display:flex;gap:8px;margin-top:8px}.team-actions form{margin:0}.user-state{font-size:12px;padding:4px 8px;border-radius:999px}.user-state.on{background:#dcfce7;color:#166534}.user-state.off{background:#fee2e2;color:#991b1b}.danger-btn{background:#991b1b!important}.secondary{background:#475569!important}

/* V3.7 vendedor + wallet */
.wallet-balance-card,.wallet-sale-banner{background:linear-gradient(135deg,#18181b,#7f1d1d);color:white;border-radius:18px;padding:20px;margin-bottom:18px;display:flex;align-items:center;gap:18px}.wallet-balance-card{flex-direction:column;align-items:flex-start}.wallet-balance-card strong{font-size:34px}.wallet-sale-banner strong{font-size:24px}.wallet-sale-banner a{margin-left:auto;color:#fff;font-weight:800}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.catalog-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}.catalog-card>span{font-size:10px;font-weight:900;color:#991b1b}.catalog-card b{font-size:24px}@media(max-width:900px){.catalog-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.catalog-grid{grid-template-columns:1fr}}

/* V3.7.1 tasa y conversión */
.wallet-top-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}.rate-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}.rate-card strong{font-size:28px}.rate-card span{color:#64748b}.conversion-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px;margin:8px 0 14px;display:flex;flex-direction:column;gap:5px}.conversion-box strong{font-size:26px}.rate-admin-card{display:flex;justify-content:space-between;gap:20px;align-items:end}.rate-admin-actions{display:flex;gap:8px;align-items:end}.rate-admin-actions form{margin:0}.rate-admin-actions input{margin:0}@media(max-width:850px){.wallet-top-grid{grid-template-columns:1fr}.rate-admin-card,.rate-admin-actions{flex-direction:column;align-items:stretch}}

/* V3.7.3 - tasa dashboard, reloj y horario de soporte */
.dashboard-topbar{align-items:flex-start}
.dashboard-rate{margin-top:8px;font-size:15px;color:#64748b}
.dashboard-rate strong{color:#991b1b;margin-left:6px;font-size:17px}
.dashboard-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dashboard-clock{display:flex;gap:8px;align-items:center;color:#334155;font-size:13px}
.dashboard-clock strong{font-size:14px}
.admin-schedule-status{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:12px;font-weight:800}
.admin-schedule-status .status-dot{width:9px;height:9px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.10)}
.admin-schedule-status.online{background:#ecfdf5;color:#166534}
.admin-schedule-status.online .status-dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.admin-schedule-status.offline{background:#fef2f2;color:#991b1b}
.weekday-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 16px}
.weekday-grid label{display:flex;align-items:center;gap:7px;border:1px solid #e2e8f0;border-radius:10px;padding:9px;background:#f8fafc}
.weekday-grid input{width:auto;margin:0}
@media(max-width:800px){
  .dashboard-side{align-items:flex-start;width:100%}
  .dashboard-clock{flex-wrap:wrap}
  .weekday-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* V3.7.3.2 - aviso de recargas pendientes */
.wallet-pending-alert{
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:12px;
  background:#fff7ed;border:1px solid #fed7aa;
  color:#9a3412;text-decoration:none;font-size:13px;font-weight:700;
  box-shadow:0 6px 18px rgba(154,52,18,.08);
}
.wallet-pending-alert:hover{background:#ffedd5;color:#7c2d12}
.wallet-pending-icon{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#ea580c;color:white;font-weight:900;
  box-shadow:0 0 0 4px rgba(234,88,12,.10);
}

/* V3.7.4 */
.table-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:9px;background:#b31217;color:#fff!important;text-decoration:none;font-weight:800;font-size:12px}.table-action-btn:hover{filter:brightness(.92)}
.phone-row{display:grid;grid-template-columns:minmax(180px,.65fr) 1fr;gap:8px;margin-bottom:12px}.phone-row select,.phone-row input{margin:0}
.service-price-card{border:1px solid #e2e8f0;border-radius:14px;padding:14px;margin-bottom:12px}.service-price-card h3{margin:0 0 10px}.price-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.price-tags>span{display:inline-flex;gap:6px;align-items:center;background:#f1f5f9;border-radius:999px;padding:6px 10px}.price-tags form{display:inline;margin:0}.tag-delete{background:transparent!important;color:#b31217!important;padding:0!important;border:0!important;font-size:18px;line-height:1}.price-add-form{display:grid;grid-template-columns:1fr 140px auto;gap:8px;align-items:end}.price-add-form input{margin:0}@media(max-width:750px){.phone-row,.price-add-form{grid-template-columns:1fr}}

/* V3.7.6.1 - ajustes manuales de wallet */
.wallet-adjust-wrap{display:flex;flex-direction:column;gap:8px;min-width:390px}
.wallet-adjust-form{display:grid;grid-template-columns:95px 1fr 115px;gap:7px;align-items:center;margin:0}
.wallet-adjust-form input{margin:0;min-width:0}
.wallet-adjust-form button{margin:0;white-space:nowrap}
.wallet-plus{background:#15803d!important}
.wallet-minus{background:#b91c1c!important}
@media(max-width:900px){.wallet-adjust-wrap{min-width:260px}.wallet-adjust-form{grid-template-columns:1fr}.wallet-adjust-form button{width:100%}}

/* V3.7.6.2 - botones de navegación y ajuste wallet compacto */
.mini-action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 12px;border-radius:9px;
  border:1px solid #fecaca;background:#fff;color:#b91c1c!important;
  text-decoration:none!important;font-weight:800;font-size:13px;
}
.mini-action-btn:hover{background:#fef2f2;border-color:#fca5a5}
.wallet-adjust-inline{
  display:grid;grid-template-columns:110px minmax(180px,1fr) 118px 105px;
  gap:8px;align-items:center;margin:0;
}
.wallet-adjust-inline input,.wallet-adjust-inline button{margin:0}
.wallet-adjust-inline .wallet-plus,.wallet-adjust-inline .wallet-minus{
  white-space:nowrap;height:38px;padding:0 12px
}
@media(max-width:1000px){
  .wallet-adjust-inline{grid-template-columns:1fr 1fr}
}

/* V3.7.6.3 - saldo disponible visible en dashboard para cada usuario */
.dashboard-balance-chip{
 display:inline-flex;align-items:center;gap:8px;margin:6px 0 12px 14px;
 padding:7px 12px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;
 color:#475569!important;text-decoration:none!important;font-size:14px;
}
.dashboard-balance-chip strong{color:#b91c1c;font-size:16px}
.dashboard-balance-chip:hover{border-color:#fca5a5;background:#fff7f7}


/* =========================================================
   V3.7.7 - MODO OSCURO STREAMDESK
   ========================================================= */
:root{
  --sd-bg:#f4f7fb;
  --sd-panel:#ffffff;
  --sd-panel-2:#f8fafc;
  --sd-text:#0f2748;
  --sd-muted:#64748b;
  --sd-border:#dbe3ee;
  --sd-input:#ffffff;
  --sd-input-text:#0f172a;
  --sd-sidebar:#ffffff;
  --sd-shadow:0 10px 26px rgba(15,23,42,.06);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --sd-bg:#0d1117;
  --sd-panel:#151b23;
  --sd-panel-2:#10161e;
  --sd-text:#f4f7fb;
  --sd-muted:#9aa7b8;
  --sd-border:#293241;
  --sd-input:#111820;
  --sd-input-text:#f8fafc;
  --sd-sidebar:#0f151d;
  --sd-shadow:0 10px 28px rgba(0,0,0,.28);
}

html[data-theme="dark"] body{
  background:var(--sd-bg)!important;
  color:var(--sd-text)!important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page,
html[data-theme="dark"] .main-content{
  background:var(--sd-bg)!important;
  color:var(--sd-text)!important;
}

html[data-theme="dark"] aside,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .side,
html[data-theme="dark"] nav.sidebar{
  background:var(--sd-sidebar)!important;
  border-color:var(--sd-border)!important;
}

html[data-theme="dark"] section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .team-card{
  background:var(--sd-panel)!important;
  border-color:var(--sd-border)!important;
  box-shadow:var(--sd-shadow)!important;
  color:var(--sd-text)!important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] label{
  color:var(--sd-text)!important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .subtitle{
  color:var(--sd-muted)!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--sd-input)!important;
  color:var(--sd-input-text)!important;
  border-color:#354052!important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#738095!important;
}

html[data-theme="dark"] table{
  color:var(--sd-text)!important;
  background:transparent!important;
}

html[data-theme="dark"] th{
  color:#a9b5c6!important;
  border-color:var(--sd-border)!important;
}

html[data-theme="dark"] td{
  color:var(--sd-text)!important;
  border-color:var(--sd-border)!important;
}

html[data-theme="dark"] tr{
  border-color:var(--sd-border)!important;
}

html[data-theme="dark"] a:not(.btn):not(.mini-action-btn):not(.wallet-pending-alert){
  color:#ff7b7f;
}

html[data-theme="dark"] .mini-action-btn{
  background:#171e27!important;
  border-color:#5b3033!important;
  color:#ff9a9d!important;
}

html[data-theme="dark"] .mini-action-btn:hover{
  background:#24181b!important;
  border-color:#a63c42!important;
}

html[data-theme="dark"] .dashboard-balance-chip{
  background:#161d26!important;
  border-color:#374151!important;
  color:#cbd5e1!important;
}

html[data-theme="dark"] .dashboard-balance-chip strong{
  color:#ff7b7f!important;
}

html[data-theme="dark"] .admin-schedule-status.online{
  background:#0f2b1e!important;
  color:#7ee2a8!important;
}

html[data-theme="dark"] .admin-schedule-status.offline{
  background:#2b1517!important;
  color:#ff9a9d!important;
}

html[data-theme="dark"] .wallet-pending-alert{
  background:#2a1d11!important;
  border-color:#6b4a26!important;
  color:#f5bd7b!important;
}

html[data-theme="dark"] .flash,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .notification{
  border-color:var(--sd-border)!important;
}

html[data-theme="dark"] .hero-strip,
html[data-theme="dark"] .wallet-balance-card,
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .balance-card{
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
}

html[data-theme="dark"] .theme-toggle-link{
  color:#d7deea!important;
}
.theme-toggle-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  margin:4px 8px;
  font-weight:700;
}
.theme-toggle-link:hover{background:rgba(148,163,184,.10)}
.theme-toggle-link .theme-icon{
  width:22px;
  display:inline-flex;
  justify-content:center;
  font-size:16px;
}

html[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0d1117}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4556;border-radius:10px;border:2px solid #0d1117}
html[data-theme="dark"] ::selection{background:#8f1e26;color:#fff}

/* Mantener identidad roja del producto */
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.secondary):not(.wallet-plus):not(.wallet-minus),
html[data-theme="dark"] .danger-btn{
  box-shadow:none;
}

/* V3.7.8 - Ajuste visual de KPIs en modo oscuro */
html[data-theme="dark"] .kpi-card{
  background:#151b23!important;
  border-color:#293241!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .kpi-card small{color:#9aa7b8!important;}
html[data-theme="dark"] .kpi-card b,
html[data-theme="dark"] .kpi-card strong{color:#f4f7fb!important;}
html[data-theme="dark"] .kpi-icon{
  background:#2a2024!important;
  border:1px solid #493036!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] a.btn.secondary{
  background:#273241!important;
  border-color:#657187!important;
  color:#ff7b7f!important;
}
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] a.btn.secondary:hover{
  background:#313d4d!important;
  border-color:#8290a6!important;
}


/* =========================================================
   V3.7.9 - AJUSTES COMPLETOS DE MODO OSCURO
   ========================================================= */
html[data-theme="dark"] .summary-pill,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .payment-new-box,
html[data-theme="dark"] .admin-notice-box,
html[data-theme="dark"] .empty-notifications,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .secret-box,
html[data-theme="dark"] .qr-empty,
html[data-theme="dark"] .secure-note {
  background:var(--sd-panel)!important;
  border-color:var(--sd-border)!important;
  color:var(--sd-text)!important;
}
html[data-theme="dark"] .summary-pill b,
html[data-theme="dark"] .info-box b,
html[data-theme="dark"] .empty-notifications h3 {color:var(--sd-text)!important}
html[data-theme="dark"] .empty-notifications p,
html[data-theme="dark"] .admin-notice-box p {color:var(--sd-muted)!important}

html[data-theme="dark"] .payment-new-box summary {color:#ff7b7f!important}
html[data-theme="dark"] .payment-editor,
html[data-theme="dark"] .payment-account-layout,
html[data-theme="dark"] .payment-qr-box,
html[data-theme="dark"] .binance-config {background:transparent!important;color:var(--sd-text)!important}

html[data-theme="dark"] .weekday-grid label {
  background:var(--sd-panel-2)!important;
  border-color:var(--sd-border)!important;
  color:var(--sd-text)!important;
}
html[data-theme="dark"] .weekday-grid label:has(input:checked) {
  background:#18231e!important;border-color:#31533d!important;
}

html[data-theme="dark"] .admin-notice-box input,
html[data-theme="dark"] .admin-notice-box textarea {
  background:var(--sd-input)!important;color:var(--sd-input-text)!important;
}

html[data-theme="dark"] .support-panel,
html[data-theme="dark"] .support-company-list,
html[data-theme="dark"] .support-admin-chat,
html[data-theme="dark"] .chat-thread-head,
html[data-theme="dark"] .chat-messages,
html[data-theme="dark"] .chat-compose,
html[data-theme="dark"] .empty-chat-state {
  background:var(--sd-panel)!important;border-color:var(--sd-border)!important;color:var(--sd-text)!important;
}
html[data-theme="dark"] .chat-messages {background:var(--sd-panel-2)!important}
html[data-theme="dark"] .chat-msg {background:#1a222d!important;border-color:#303b4b!important;color:var(--sd-text)!important}
html[data-theme="dark"] .chat-msg.mine {background:#35181d!important;border-color:#643038!important}
html[data-theme="dark"] .chat-msg small,
html[data-theme="dark"] .chat-thread-head small,
html[data-theme="dark"] .inbox-company-main small {color:var(--sd-muted)!important}
html[data-theme="dark"] .support-company-list a.selected,
html[data-theme="dark"] .support-company-list a:hover {background:#29181c!important;color:#ff8d91!important}
html[data-theme="dark"] .empty-chat-state h3 {color:var(--sd-text)!important}

html[data-theme="dark"] .notification-card.unread {background:#181f29!important}
html[data-theme="dark"] .notification-body p {color:var(--sd-muted)!important}
html[data-theme="dark"] .notification-icon {background:#202a36!important;color:#dbe6f3!important}
html[data-theme="dark"] .notification-card.warning .notification-icon {background:#332b15!important;color:#f9cc66!important}
html[data-theme="dark"] .notification-card.danger .notification-icon {background:#35181d!important;color:#ff9a9d!important}
html[data-theme="dark"] .notification-card.support .notification-icon {background:#142838!important;color:#7cc8ff!important}

html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .support-exit-btn {
  background:#18212c!important;color:#ff8d91!important;border-color:#3b4656!important;
}
html[data-theme="dark"] .secondary-action:hover,
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .support-exit-btn:hover {
  background:#24191d!important;border-color:#71343b!important;
}

.reference-readonly {
  display:inline-block;min-width:110px;max-width:190px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600;
}
html[data-theme="dark"] .reference-readonly {color:#e5eaf1!important}


/* =========================================================
   V3.7.10 - SEMÁFORO DE VENCIMIENTOS
   Verde: 3 días o más | Amarillo: 2 o 1 día | Rojo: hoy/vencido
   ========================================================= */
.expiry-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1px;
  border:1px solid transparent;
  white-space:nowrap;
}
.expiry-green{
  background:#16a34a!important;
  border-color:#15803d!important;
  color:#ffffff!important;
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}
.expiry-yellow{
  background:#facc15!important;
  border-color:#eab308!important;
  color:#422006!important;
  box-shadow:0 0 0 3px rgba(250,204,21,.16);
}
.expiry-red{
  background:#ef4444!important;
  border-color:#dc2626!important;
  color:#ffffff!important;
  box-shadow:0 0 0 3px rgba(239,68,68,.14);
}

html[data-theme="dark"] .expiry-green{
  background:#22c55e!important;
  border-color:#4ade80!important;
  color:#06150b!important;
  box-shadow:0 0 14px rgba(34,197,94,.28);
}
html[data-theme="dark"] .expiry-yellow{
  background:#facc15!important;
  border-color:#fde047!important;
  color:#2b2100!important;
  box-shadow:0 0 14px rgba(250,204,21,.28);
}
html[data-theme="dark"] .expiry-red{
  background:#f43f5e!important;
  border-color:#fb7185!important;
  color:#ffffff!important;
  box-shadow:0 0 14px rgba(244,63,94,.28);
}

/* V3.7.11 - Dashboard/Renovaciones comparten el mismo semáforo */
.expiry-badge{min-width:78px}


/* =========================================================
   V3.7.13 - AJUSTES VISUALES VENTAS / CUENTAS
   ========================================================= */
html[data-theme="dark"] .sale-payment-preview{
  background:var(--sd-panel-2)!important;
  border-color:var(--sd-border)!important;
  color:var(--sd-text)!important;
}
html[data-theme="dark"] .sale-payment-preview strong{
  color:var(--sd-text)!important;
}
html[data-theme="dark"] .sale-payment-preview small,
html[data-theme="dark"] .sale-payment-preview span{
  color:var(--sd-muted)!important;
}
html[data-theme="dark"] .sale-payment-preview img{
  background:var(--sd-input)!important;
  border-color:var(--sd-border)!important;
}


/* =========================================================
   V3.7.14 - RENOVACIONES CONTENIDAS + ACCIONES COMO BOTONES
   ========================================================= */

/* Botones de navegación/acción: no más enlaces sueltos en cabeceras */
.nav-action-btn,
.wallet-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:9px 14px;
  border:1px solid #f0a6aa;
  border-radius:10px;
  background:#fff;
  color:var(--accent)!important;
  text-decoration:none!important;
  font-weight:800;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.nav-action-btn:hover,
.wallet-action-btn:hover{
  background:#fef2f2;
  border-color:#ef777d;
}
.nav-action-btn.compact{min-height:36px;padding:8px 12px}

/* Cualquier enlace directo de acción situado en una cabecera toma aspecto de botón. */
.head > a:not(.btn):not(.nav-action-btn),
.page-head > a:not(.btn):not(.nav-action-btn),
.section-head > a:not(.btn):not(.mini-action-btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border:1px solid #f0a6aa;
  border-radius:10px;
  background:#fff;
  color:var(--accent)!important;
  text-decoration:none!important;
  font-weight:800;
}

/* Renovaciones: la tarjeta contiene completamente tabla, líneas y controles. */
.renewals-section{
  overflow:hidden!important;
  width:100%;
}
.renewals-table-wrap{
  width:100%;
  overflow:hidden;
}
.renewals-table{
  width:100%!important;
  table-layout:fixed;
}
.renewals-table th,
.renewals-table td{
  overflow:hidden;
  vertical-align:middle;
}
.profiles-renewals th:nth-child(1), .profiles-renewals td:nth-child(1){width:7%}
.profiles-renewals th:nth-child(2), .profiles-renewals td:nth-child(2){width:6%}
.profiles-renewals th:nth-child(3), .profiles-renewals td:nth-child(3){width:10%}
.profiles-renewals th:nth-child(4), .profiles-renewals td:nth-child(4){width:10%}
.profiles-renewals th:nth-child(5), .profiles-renewals td:nth-child(5){width:10%}
.profiles-renewals th:nth-child(6), .profiles-renewals td:nth-child(6){width:57%}

.accounts-renewals th:nth-child(1), .accounts-renewals td:nth-child(1){width:14%}
.accounts-renewals th:nth-child(2), .accounts-renewals td:nth-child(2){width:14%}
.accounts-renewals th:nth-child(3), .accounts-renewals td:nth-child(3){width:12%}
.accounts-renewals th:nth-child(4), .accounts-renewals td:nth-child(4){width:12%}
.accounts-renewals th:nth-child(5), .accounts-renewals td:nth-child(5){width:48%}

/* Formulario compacto en dos filas para que nunca sobresalga. */
.renew-form{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:82px 86px 86px minmax(135px,1fr) 86px!important;
  grid-template-areas:
    "months price cost method renew"
    "reference reference receipt receipt receipt";
  gap:7px!important;
  align-items:center!important;
}
.renew-form > select[name="months"]{grid-area:months}
.renew-form > input[name="price"]{grid-area:price}
.renew-form > input[name="cost"]{grid-area:cost}
.renew-form > select[name="payment_method"]{grid-area:method}
.renew-form > input[name="payment_reference"]{grid-area:reference}
.renew-form > input[type="file"]{grid-area:receipt;min-width:0!important;width:100%!important}
.renew-form > button{grid-area:renew;width:100%!important;padding:10px 8px!important}
.renew-form input,
.renew-form select,
.renew-form button{
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
}
.renew-form input[type="file"]{
  padding:6px!important;
  font-size:12px;
}

/* Oscuro */
html[data-theme="dark"] .nav-action-btn,
html[data-theme="dark"] .wallet-action-btn,
html[data-theme="dark"] .head > a:not(.btn):not(.nav-action-btn),
html[data-theme="dark"] .page-head > a:not(.btn):not(.nav-action-btn),
html[data-theme="dark"] .section-head > a:not(.btn):not(.mini-action-btn){
  background:#151b23!important;
  border-color:#5a3037!important;
  color:#ff7b7f!important;
}
html[data-theme="dark"] .nav-action-btn:hover,
html[data-theme="dark"] .wallet-action-btn:hover{
  background:#25181c!important;
  border-color:#8a3d47!important;
}

/* Pantallas más estrechas: el formulario se apila sin sacar la página de ancho. */
@media(max-width:1150px){
  .renewals-table{table-layout:auto}
  .renewals-table-wrap{overflow-x:auto}
  .renew-form{
    min-width:520px!important;
    grid-template-columns:80px 82px 82px minmax(130px,1fr) 82px!important;
  }
}


/* =========================================================
   V3.7.16 - WALLET: TARJETAS CORRECTAS EN MODO OSCURO
   Corrige bloques blancos de tasa y cálculo de acreditación.
   ========================================================= */

/* Tarjetas/resúmenes internos del wallet */
html[data-theme="dark"] .wallet-rate-card,
html[data-theme="dark"] .wallet-conversion-card,
html[data-theme="dark"] .wallet-credit-preview,
html[data-theme="dark"] .rate-card,
html[data-theme="dark"] .conversion-card,
html[data-theme="dark"] .credit-preview,
html[data-theme="dark"] .wallet-summary-card{
  background:#151b23 !important;
  border-color:#334155 !important;
  color:#f8fafc !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .wallet-rate-card *,
html[data-theme="dark"] .wallet-conversion-card *,
html[data-theme="dark"] .wallet-credit-preview *,
html[data-theme="dark"] .rate-card *,
html[data-theme="dark"] .conversion-card *,
html[data-theme="dark"] .credit-preview *,
html[data-theme="dark"] .wallet-summary-card *{
  color:inherit;
}

/* Compatibilidad con las tarjetas blancas actuales del wallet,
   aunque no tengan una clase específica. */
html[data-theme="dark"] body .card[style*="background:#fff"],
html[data-theme="dark"] body .card[style*="background: #fff"],
html[data-theme="dark"] body .card[style*="background:white"],
html[data-theme="dark"] body .card[style*="background: white"],
html[data-theme="dark"] body div[style*="background:#fff"],
html[data-theme="dark"] body div[style*="background: #fff"],
html[data-theme="dark"] body div[style*="background:white"],
html[data-theme="dark"] body div[style*="background: white"]{
  background:#151b23 !important;
  border-color:#334155 !important;
  color:#f8fafc !important;
}

/* Texto secundario dentro de esas tarjetas */
html[data-theme="dark"] .wallet-rate-card small,
html[data-theme="dark"] .wallet-conversion-card small,
html[data-theme="dark"] .wallet-credit-preview small,
html[data-theme="dark"] .rate-card small,
html[data-theme="dark"] .conversion-card small,
html[data-theme="dark"] .credit-preview small{
  color:#94a3b8 !important;
}

/* Números principales con contraste real */
html[data-theme="dark"] .wallet-rate-card strong,
html[data-theme="dark"] .wallet-conversion-card strong,
html[data-theme="dark"] .wallet-credit-preview strong,
html[data-theme="dark"] .rate-card strong,
html[data-theme="dark"] .conversion-card strong,
html[data-theme="dark"] .credit-preview strong{
  color:#ffffff !important;
}


/* =========================================================
   V3.7.17 - WALLET / CUADRO DE SALDO A ACREDITAR
   Clase real: .conversion-box
   ========================================================= */

/* Modo claro */
html[data-theme="light"] .conversion-box{
  background:#f3f6fa !important;
  border:1px solid #d7dee8 !important;
  color:#0f2747 !important;
  box-shadow:none !important;
}
html[data-theme="light"] .conversion-box span,
html[data-theme="light"] .conversion-box strong{
  color:#0f2747 !important;
}
html[data-theme="light"] .conversion-box small{
  color:#60738f !important;
}

/* Modo oscuro */
html[data-theme="dark"] .conversion-box{
  background:#151b23 !important;
  border:1px solid #334155 !important;
  color:#f8fafc !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .conversion-box span,
html[data-theme="dark"] .conversion-box strong{
  color:#f8fafc !important;
}
html[data-theme="dark"] .conversion-box small{
  color:#94a3b8 !important;
}


/* =========================================================
   V3.7.18 - CUENTAS / CLIENTES / IMAGEN DE SERVICIO
   ========================================================= */
.accounts-head{align-items:flex-end}
.accounts-actions{display:flex;gap:10px;align-items:center;flex:1;justify-content:flex-end}
.accounts-actions .search-form{flex:1;max-width:none}
.primary-action-btn{
  border:0!important;background:var(--accent)!important;color:#fff!important;
  border-radius:10px!important;padding:12px 18px!important;font-weight:800!important;
  white-space:nowrap;cursor:pointer
}
.account-create-panel{margin-top:12px}
.account-create-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start}
.account-create-form .full{grid-column:1/-1}
.service-image-preview{border:1px solid #dfe5ee;border-radius:14px;padding:14px;text-align:center;background:#f8fafc}
.service-image-frame{height:210px;border:1px dashed #cbd5e1;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#fff}
.service-image-frame img{width:100%;height:100%;object-fit:contain;padding:12px}
.service-image-frame div{color:#8a94a6;font-size:13px}
.service-image-preview small{display:block;margin-top:10px;color:#7b8799}
.accounts-list-card{margin-top:14px}
.service-card-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.service-thumb{width:86px;height:86px;border:1px solid #dfe5ee;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#f8fafc;flex:0 0 86px}
.service-thumb img{width:100%;height:100%;object-fit:cover}
.service-thumb span{font-size:11px;color:#8a94a6}
.service-image-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.service-image-form input[type=file]{max-width:220px}
.service-image-form button{padding:8px 10px;font-size:12px}

html[data-theme="dark"] .service-image-preview,
html[data-theme="dark"] .service-thumb{
  background:#151b23!important;border-color:#334155!important
}
html[data-theme="dark"] .service-image-frame{
  background:#0f151d!important;border-color:#405069!important
}
html[data-theme="dark"] .service-image-frame div,
html[data-theme="dark"] .service-image-preview small,
html[data-theme="dark"] .service-thumb span{color:#94a3b8!important}

@media(max-width:980px){
  .accounts-actions{flex-direction:column;align-items:stretch}
  .account-create-layout{grid-template-columns:1fr}
  .service-image-preview{max-width:320px}
}


/* =========================================================
   V3.7.19 - AGREGAR PERFIL LIMPIO
   ========================================================= */
.profile-form-help{
  margin:-6px 0 14px;
  font-size:13px;
  line-height:1.45;
}
html[data-theme="dark"] .profile-form-help{color:#94a3b8!important;}


/* =========================================================
   V3.7.20 - VENTAS DEL VENDEDOR PAGADAS CON MI WALLET
   ========================================================= */
.seller-wallet-checkout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:16px;
  margin:14px 0 16px;
  border:1px solid #d9e1eb;
  border-radius:14px;
  background:#f7f9fc;
}
.seller-wallet-checkout-main,
.seller-wallet-checkout-balance{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.seller-wallet-checkout span,
.seller-wallet-checkout small{
  color:#68778d;
}
.seller-wallet-checkout-main strong{
  font-size:20px;
}
.seller-wallet-checkout-balance{
  min-width:175px;
  align-items:flex-end;
}
.seller-wallet-checkout-balance strong{
  font-size:24px;
}
.seller-wallet-checkout-balance .table-action-btn{
  margin-top:5px;
}

html[data-theme="dark"] .seller-wallet-checkout{
  background:#151b23!important;
  border-color:#334155!important;
  color:#f8fafc!important;
}
html[data-theme="dark"] .seller-wallet-checkout span,
html[data-theme="dark"] .seller-wallet-checkout small{
  color:#94a3b8!important;
}

@media(max-width:720px){
  .seller-wallet-checkout{grid-template-columns:1fr}
  .seller-wallet-checkout-balance{align-items:flex-start;min-width:0}
}


/* =========================================================
   V3.7.21 - WALLET PARA TODOS
   ========================================================= */
.renewals-wallet-summary{
  display:inline-flex;align-items:center;gap:10px;
  margin:4px 0 12px;padding:9px 12px;
  border:1px solid #d9e1eb;border-radius:11px;background:#f7f9fc;
}
.renewals-wallet-summary span{color:#68778d;font-size:13px}
.renewals-wallet-summary strong{font-size:18px}
.renew-wallet-pay{
  display:flex;flex-direction:column;justify-content:center;
  min-width:92px;padding:7px 9px;border:1px solid #d9e1eb;
  border-radius:9px;background:#f7f9fc;
}
.renew-wallet-pay span{font-size:10px;color:#68778d}
.renew-wallet-pay strong{font-size:12px}
html[data-theme="dark"] .renewals-wallet-summary,
html[data-theme="dark"] .renew-wallet-pay{
  background:#151b23!important;border-color:#334155!important;color:#f8fafc!important;
}
html[data-theme="dark"] .renewals-wallet-summary span,
html[data-theme="dark"] .renew-wallet-pay span{color:#94a3b8!important;}


/* =========================================================
   V3.7.23 - BANDERAS REALES + CATÁLOGO PARA TODOS
   ========================================================= */
.phone-country-row{
  display:grid!important;
  grid-template-columns:190px minmax(0,1fr)!important;
  gap:10px!important;
}
.country-code-control{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  border:1px solid #d7deea;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.phone-country-flag{
  width:30px;
  height:20px;
  object-fit:cover;
  margin-left:10px;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.country-code-control select{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding-left:6px!important;
  min-width:0!important;
}
html[data-theme="dark"] .country-code-control{
  background:#111923!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .country-code-control select{
  color:#f8fafc!important;
}
@media(max-width:640px){
  .phone-country-row{grid-template-columns:150px minmax(0,1fr)!important;}
}


/* =========================================================
   V3.7.24 - TELÉFONO UNIFICADO + CATÁLOGO CLARO/OSCURO
   ========================================================= */
.phone-unified-control{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:stretch;
  width:100%;
  margin:6px 0 4px;
  border:1px solid #d9dee7;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.phone-unified-control .country-code-control{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  border:0!important;
  border-right:1px solid #d9dee7!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:hidden;
}
.phone-unified-control .phone-country-flag{
  width:26px;height:18px;margin-left:9px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.phone-unified-control select,
.phone-unified-control input{
  height:42px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.phone-unified-control select{padding:0 22px 0 4px!important;cursor:pointer}
.phone-unified-control input{padding:10px 12px!important}
.phone-unified-control:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent);
}
.phone-help{display:block;margin:-1px 0 10px;color:#738096;font-size:11px;line-height:1.35}

html[data-theme="dark"] .phone-unified-control{
  background:#111923!important;border-color:#334155!important;color:#f8fafc!important;
}
html[data-theme="dark"] .phone-unified-control .country-code-control{border-right-color:#334155!important}
html[data-theme="dark"] .phone-unified-control select,
html[data-theme="dark"] .phone-unified-control input{color:#f8fafc!important;background:transparent!important}
html[data-theme="dark"] .phone-unified-control input::placeholder{color:#708096!important}
html[data-theme="dark"] .phone-help{color:#94a3b8!important}

/* El catálogo debe respetar el tema completo, no mezclar tarjeta clara con texto oscuro. */
html[data-theme="light"] .catalog-card{
  background:#fff!important;
  border-color:#e5e7eb!important;
  color:#19243a!important;
}
html[data-theme="light"] .catalog-card h3,
html[data-theme="light"] .catalog-card b{color:#19243a!important}
html[data-theme="light"] .catalog-card>span{color:#991b1b!important}
html[data-theme="light"] .catalog-card small{color:#69758b!important}

html[data-theme="dark"] .catalog-card{
  background:#151b23!important;
  border-color:#334155!important;
  color:#f4f7fb!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] .catalog-card h3,
html[data-theme="dark"] .catalog-card b{color:#f4f7fb!important}
html[data-theme="dark"] .catalog-card>span{color:#ff7b7f!important}
html[data-theme="dark"] .catalog-card small{color:#94a3b8!important}

@media(max-width:640px){
  .phone-unified-control{grid-template-columns:108px minmax(0,1fr)}
}

/* V3.7.5 - selector persistente de tasa manual / Binance USDT */
.rate-mode-card{align-items:stretch;gap:24px}.rate-mode-info{min-width:260px;flex:1}.rate-mode-actions{flex:1.55;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}.rate-choice-form{border:1px solid var(--sd-border,#d7dde7);border-radius:14px;padding:14px;background:var(--sd-card,#fff);display:flex;flex-direction:column;gap:10px}.rate-choice-form.is-active{box-shadow:inset 0 0 0 2px #b91c1c}.rate-choice-form label{display:flex;flex-direction:column;gap:5px}.rate-choice-form label small{font-weight:400;line-height:1.35;color:var(--sd-muted,#64748b)}.rate-choice-form input{width:100%}.rate-choice-form button{margin-top:auto}.rate-current-line{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rate-current-line>span:first-child{color:var(--sd-muted,#64748b)}.rate-current-line>strong{padding:5px 9px;border-radius:999px;background:rgba(185,28,28,.12);color:#b91c1c}.rate-current-value{font-weight:800}.binance-rate-preview{font-size:13px;color:var(--sd-muted,#64748b)}.dashboard-rate-source{display:inline-flex;margin-left:7px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(148,163,184,.14);color:var(--sd-muted,#64748b);vertical-align:middle}
html[data-theme="dark"] .rate-choice-form{background:var(--sd-card,#151c25);border-color:var(--sd-border,#344154)}html[data-theme="dark"] .rate-choice-form.is-active{box-shadow:inset 0 0 0 2px #ef4444}html[data-theme="dark"] .rate-current-line>strong{color:#ff7b7b}
@media(max-width:950px){.rate-mode-actions{grid-template-columns:1fr}.rate-mode-card{flex-direction:column}}


/* V3.7.6 - Ventas/Renovaciones: tasa visible, resumen y costos internos */
.operation-rate-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0 10px;padding:9px 12px;border:1px solid var(--sd-border,#d7dde7);border-radius:10px;background:var(--sd-card,#fff);font-size:13px}.operation-rate-strip span{color:var(--sd-muted,#64748b)}.operation-rate-strip strong{padding:3px 8px;border-radius:999px;background:rgba(185,28,28,.12);color:#b91c1c}.operation-rate-strip b{font-size:13px}.operation-rate-strip a{margin-left:auto}.checkout-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.checkout-preview>div{border:1px solid var(--sd-border,#d7dde7);border-radius:10px;padding:10px;background:var(--sd-card,#fff)}.checkout-preview span{display:block;font-size:11px;color:var(--sd-muted,#64748b);margin-bottom:4px}.checkout-preview strong{font-size:15px}.is-negative{color:#dc2626!important}.renew-mini-preview{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--sd-muted,#64748b);padding:5px 0}.renew-mini-preview b{color:inherit}.enhanced-renew-form{min-width:255px}html[data-theme="dark"] .operation-rate-strip,html[data-theme="dark"] .checkout-preview>div{background:var(--sd-card,#151c25);border-color:var(--sd-border,#344154)}html[data-theme="dark"] .operation-rate-strip strong{color:#ff7b7b}@media(max-width:900px){.checkout-preview{grid-template-columns:1fr 1fr}}@media(max-width:560px){.checkout-preview{grid-template-columns:1fr}.operation-rate-strip a{margin-left:0;width:100%}}


/* Modal de confirmación de venta */
.sale-confirm-overlay{position:fixed;inset:0;background:rgba(3,8,15,.72);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.sale-confirm-overlay.is-open{opacity:1;visibility:visible}
.sale-confirm-modal{width:min(520px,100%);background:var(--panel,#151d27);border:1px solid var(--border,#334155);border-radius:22px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.42);transform:translateY(10px) scale(.98);transition:transform .18s ease}
.sale-confirm-overlay.is-open .sale-confirm-modal{transform:translateY(0) scale(1)}
.sale-confirm-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(220,38,38,.14);border:1px solid rgba(239,68,68,.35);color:#ff5b62;font-size:24px;font-weight:900;margin-bottom:14px}
.sale-confirm-modal h3{font-size:26px;margin:0 0 5px}.sale-confirm-subtitle{margin:0 0 18px;color:var(--muted,#9fb0c5)}
.sale-confirm-product{padding:13px 15px;border:1px solid var(--border,#334155);background:var(--bg,#0d131b);border-radius:12px;font-weight:750;margin-bottom:14px;line-height:1.35}
.sale-confirm-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.sale-confirm-summary>div{border:1px solid var(--border,#334155);border-radius:12px;padding:12px;background:rgba(255,255,255,.02)}.sale-confirm-summary span{display:block;color:var(--muted,#9fb0c5);font-size:12px;margin-bottom:5px}.sale-confirm-summary strong{font-size:17px}.sale-confirm-summary .is-negative{color:#ff5b62}
.sale-confirm-actions{display:flex;gap:10px;justify-content:flex-end}.sale-confirm-actions button{min-width:120px;padding:11px 16px;border-radius:10px;font-weight:800;cursor:pointer}.sale-confirm-cancel{background:transparent;color:var(--text,#fff);border:1px solid var(--border,#475569)}.sale-confirm-accept{background:#d5111b;color:#fff;border:1px solid #d5111b}.sale-confirm-accept:hover{filter:brightness(1.08)}.sale-confirm-cancel:hover{background:rgba(255,255,255,.06)}
body.sale-modal-open{overflow:hidden}
@media(max-width:620px){.sale-confirm-summary{grid-template-columns:1fr}.sale-confirm-actions{flex-direction:column-reverse}.sale-confirm-actions button{width:100%}}
[data-theme="light"] .sale-confirm-overlay{background:rgba(15,23,42,.38)}
[data-theme="light"] .sale-confirm-modal{background:#fff;color:#111827;box-shadow:0 24px 70px rgba(15,23,42,.22)}
[data-theme="light"] .sale-confirm-product,[data-theme="light"] .sale-confirm-summary>div{background:#f8fafc}
.client-actions,.client-quick-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.client-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}.client-kpis>div{background:var(--panel,#151d27);border:1px solid var(--line,#304052);border-radius:14px;padding:16px}.client-kpis small{display:block;opacity:.72;margin-bottom:6px}.client-kpis b{font-size:1.35rem}.client-info-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:16px}.client-info-summary p{margin:5px 0}.table-wrap{overflow-x:auto}.confirm-overlay[hidden]{display:none!important}.confirm-overlay{position:fixed;inset:0;z-index:9999;background:rgba(3,8,14,.78);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:22px}.confirm-modal{width:min(520px,100%);background:var(--panel,#151d27);border:1px solid var(--line,#3c4a5c);border-radius:20px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.45)}.confirm-icon{width:46px;height:46px;border:1px solid #a33;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.4rem;margin-bottom:16px}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}@media(max-width:900px){.client-kpis{grid-template-columns:1fr}.client-info-summary{grid-template-columns:1fr}}

.renew-price-stack{min-width:112px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2,#111923);display:flex;flex-direction:column;gap:2px;white-space:nowrap}.renew-monthly-label{font-size:12px;color:var(--muted)}.renew-total-price{font-size:13px;color:var(--text)}

/* Renovaciones: aviso de saldo insuficiente */
.renew-insufficient-icon{color:#ff5b67;border-color:rgba(255,91,103,.5);background:rgba(255,91,103,.12)}
.renew-insufficient-modal .sale-confirm-summary strong{font-size:1.08rem}
.renew-recharge-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* V3.7.28 - saldo insuficiente + estados de recarga */
.renew-recharge-link{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  min-width:170px;padding:12px 18px;border-radius:11px;
  background:#d5111b!important;color:#fff!important;border:1px solid #d5111b!important;
  text-decoration:none!important;font-weight:800;line-height:1;box-shadow:0 8px 20px rgba(213,17,27,.18);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.renew-recharge-link:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 24px rgba(213,17,27,.24)}
.renew-recharge-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.16);font-size:16px;font-weight:900}
html[data-theme="dark"] .renew-recharge-link{color:#fff!important;background:#d5111b!important;border-color:#d5111b!important}
.topup-status{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.topup-status-approved{background:#dcfce7;color:#166534}
.topup-status-pending{background:#fef3c7;color:#92400e}
.topup-status-rejected{background:#fee2e2;color:#991b1b}
html[data-theme="dark"] .topup-status-approved{background:rgba(34,197,94,.16);color:#86efac!important}
html[data-theme="dark"] .topup-status-pending{background:rgba(245,158,11,.16);color:#fcd34d!important}
html[data-theme="dark"] .topup-status-rejected{background:rgba(239,68,68,.16);color:#fca5a5!important}

/* Admin renewals cleanup */
.renew-admin-field{margin:0!important;display:flex!important;flex-direction:column;gap:4px;min-width:125px;font-weight:600!important}
.renew-admin-field span{font-size:10px;color:var(--muted,#94a3b8);white-space:nowrap}
.renew-admin-field input{margin:0!important;width:100%!important}
.admin-renew-btn{min-width:135px}
.client-detail-edit-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.client-detail-edit-actions form{margin:0}

#client-edit-form button{margin-top:12px}#delete-client-btn{margin-top:14px}


/* V3.7.29 - Renovaciones admin: layout limpio y sin confusión con wallet */
.admin-renew-mode-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 14px;padding:10px 12px;border:1px solid var(--border,#334155);
  border-radius:10px;background:rgba(59,130,246,.06);font-size:12px;
}
.admin-renew-mode-note strong{font-size:12px;color:var(--text,#e5e7eb)}
.admin-renew-mode-note span{color:var(--muted,#94a3b8)}

.renew-form.enhanced-renew-form{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  gap:12px!important;width:100%!important;min-width:0!important;
}
.renew-form.enhanced-renew-form > input[type="hidden"]{display:none!important}
.renew-form.enhanced-renew-form > select[name="months"]{flex:0 0 82px!important;width:82px!important}
.renew-form.enhanced-renew-form .renew-price-stack{flex:0 0 82px;min-width:0}
.renew-form.enhanced-renew-form .renew-price-stack span,
.renew-form.enhanced-renew-form .renew-price-stack strong{white-space:nowrap;display:block}
.renew-form.enhanced-renew-form .renew-admin-field{flex:0 0 126px!important;min-width:126px!important;max-width:126px!important}
.renew-form.enhanced-renew-form .renew-admin-field input{width:126px!important;box-sizing:border-box}
.renew-form.enhanced-renew-form .renew-mini-preview{flex:0 0 112px;min-width:112px;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.renew-form.enhanced-renew-form .renew-wallet-pay{flex:0 0 88px;min-width:88px}
.renew-form.enhanced-renew-form > button{flex:0 0 110px!important;width:110px!important;min-width:110px!important}

@media (max-width:1180px){
  .renew-form.enhanced-renew-form{flex-wrap:wrap!important;row-gap:8px!important}
  .renew-form.enhanced-renew-form .renew-mini-preview{flex-basis:105px}
}

/* V3.7.30 - Renovaciones: corrección modo claro + acciones como botones */
.rate-change-btn{margin-left:auto!important;width:auto!important;padding:8px 13px!important;border-radius:9px!important;background:#c81018!important;color:#fff!important;border:1px solid #c81018!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important;box-shadow:none!important}
.rate-change-btn:hover{filter:brightness(1.06)}
html[data-theme="light"] .renew-price-stack{background:#f8fafc!important;border-color:#d7dee8!important}
html[data-theme="light"] .renew-monthly-label{color:#475569!important}
html[data-theme="light"] .renew-total-price{color:#0f172a!important}
html[data-theme="light"] .admin-renew-mode-note{background:#f7f9fc!important;border-color:#cbd5e1!important}
html[data-theme="light"] .admin-renew-mode-note strong{color:#334155!important}
html[data-theme="light"] .admin-renew-mode-note span{color:#64748b!important}
html[data-theme="light"] .renew-admin-field span{color:#64748b!important}
html[data-theme="light"] .renew-mini-preview{color:#475569!important}
html[data-theme="light"] .operation-rate-strip{background:#fff!important;border-color:#d7dee8!important}
@media(max-width:560px){.rate-change-btn{margin-left:0!important;width:100%!important}}


/* =========================================================
   V3.7.22 - SERVICIOS: TIPOS DE ENTREGA + EDICION
   ========================================================= */
.services-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);gap:18px;margin-top:18px;align-items:start}
.service-create-card,.services-manager-card{margin:0}
.delivery-type-box{border:1px solid #dfe5ee;background:#f8fafc;border-radius:13px;padding:14px;margin:14px 0}
.delivery-type-box>strong{display:block;margin-bottom:4px}.delivery-type-box>small{display:block;color:#64748b;margin-bottom:12px;line-height:1.35}
.delivery-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.delivery-check{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:9px 10px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-weight:650!important;cursor:pointer}
.delivery-check input{width:auto!important;margin:0!important}.delivery-check span{font-size:12px}
.services-card-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.service-admin-card{border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff}
.service-admin-card.service-inactive{opacity:.7;background:#f8fafc}
.service-admin-head{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:14px;align-items:center}
.service-admin-title h3{margin:0;font-size:20px}.service-admin-title>small{display:block;color:#64748b;margin-top:3px}
.service-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.delivery-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.delivery-badges span{font-size:10px;font-weight:800;background:#eef2f7;border:1px solid #dde4ed;border-radius:999px;padding:5px 8px;color:#42526a}
.service-admin-actions{display:flex;gap:7px;align-items:center}.service-admin-actions button{white-space:nowrap}
.service-prices-zone{border-top:1px solid #edf0f4;margin-top:14px;padding-top:14px}.service-prices-zone>strong{display:block;font-size:12px;margin-bottom:9px;color:#526076}
.service-inline-editor{margin-top:14px;border-top:1px solid #edf0f4;padding-top:14px;background:#f8fafc;border-radius:12px;padding:14px}
.service-inline-editor[hidden]{display:none!important}.delivery-type-box.compact{margin:8px 0 12px}.service-active-check{display:flex!important;align-items:center;gap:8px}.service-active-check input{width:auto!important;margin:0!important}
.service-image-form-edit{margin-top:12px;border-top:1px dashed #d9dee7;padding-top:12px}
.stream-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}.stream-modal.open{display:flex}.stream-modal-backdrop{position:absolute;inset:0;background:rgba(4,10,18,.68);backdrop-filter:blur(3px)}.stream-modal-card{position:relative;width:min(520px,94vw);background:#fff;border:1px solid #dfe5ee;border-radius:20px;padding:26px;box-shadow:0 26px 80px rgba(0,0,0,.28)}.stream-modal-card h2{margin:12px 0 8px}.stream-modal-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;font-weight:900}.stream-modal-icon.danger{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}.stream-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
html[data-theme="dark"] .delivery-type-box,html[data-theme="dark"] .service-inline-editor{background:#121922!important;border-color:#334155!important}html[data-theme="dark"] .delivery-check,html[data-theme="dark"] .service-admin-card,html[data-theme="dark"] .stream-modal-card{background:#151d27!important;border-color:#334155!important;color:#f8fafc!important}html[data-theme="dark"] .service-admin-card.service-inactive{background:#111821!important}html[data-theme="dark"] .delivery-badges span{background:#202b38!important;border-color:#344256!important;color:#dbe7f5!important}html[data-theme="dark"] .service-admin-title>small,html[data-theme="dark"] .delivery-type-box>small{color:#94a3b8!important}
@media(max-width:1050px){.services-layout{grid-template-columns:1fr}.service-admin-head{grid-template-columns:70px 1fr}.service-admin-actions{grid-column:1/-1}.service-thumb{width:70px;height:70px;flex-basis:70px}.price-add-form{grid-template-columns:1fr 120px auto}}
@media(max-width:700px){.delivery-check-grid{grid-template-columns:1fr}.service-admin-head{grid-template-columns:1fr}.service-admin-actions,.stream-modal-actions{flex-direction:column}.service-admin-actions button,.stream-modal-actions button{width:100%}.price-add-form{grid-template-columns:1fr}}
/* V3.7.23 Plataformas: configuracion por modalidad */
.platform-manage-btn{text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.platform-mode-shell{margin-top:18px}.platform-mode-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.platform-mode-tab{padding:14px 20px;border-radius:12px;border:1px solid #d8e0ea;background:#fff;color:#172033;font-weight:800;cursor:pointer}.platform-mode-tab.active{background:#c4141c;color:#fff;border-color:#c4141c}.platform-mode-panel{display:none}.platform-mode-panel.active{display:block}.platform-config-card{background:#fff;border:1px solid #dfe5ee;border-radius:18px;padding:22px}.platform-config-card h2{margin-top:0}.platform-economics-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(190px,.8fr) auto;gap:14px;align-items:end;margin-top:20px}.platform-economics-form small{display:block;color:#64748b;margin-top:5px}.profit-preview{border:1px solid #dfe5ee;border-radius:12px;padding:11px 14px;min-height:72px}.profit-preview span,.profit-preview small{display:block}.profit-preview strong{display:block;font-size:22px;margin:2px 0}.service-admin-actions{flex-wrap:wrap;gap:10px}
html[data-theme="dark"] .platform-mode-tab,html[data-theme="dark"] .platform-config-card,html[data-theme="dark"] .profit-preview{background:#151d27!important;border-color:#334155!important;color:#f8fafc!important}html[data-theme="dark"] .platform-mode-tab.active{background:#d81720!important;border-color:#d81720!important}
@media(max-width:1100px){.platform-economics-form{grid-template-columns:1fr 1fr}.platform-economics-form .primary-action-btn{width:100%}}@media(max-width:650px){.platform-economics-form{grid-template-columns:1fr}}

/* V3.7.24 Plataformas: flujo simplificado, categorias propias y tarjetas */
.platform-create-card,.platforms-gallery-section,.platform-general-card,.platform-modes-config{background:var(--panel,#fff);border:1px solid var(--border,#dfe5ee);border-radius:18px;padding:20px;margin-top:18px}
.platform-create-grid,.platform-general-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.category-select-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.category-select-row .btn{white-space:nowrap;height:100%}
.platforms-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}.platform-tile{border:1px solid var(--border,#dfe5ee);border-radius:16px;overflow:hidden;background:var(--panel,#fff);transition:transform .15s ease,box-shadow .15s ease}.platform-tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.08)}.platform-tile-image{height:130px;display:grid;place-items:center;background:rgba(148,163,184,.08);overflow:hidden}.platform-tile-image img{width:100%;height:100%;object-fit:contain;padding:14px}.platform-tile-image span{font-size:12px;color:var(--muted,#64748b)}.platform-tile-body{padding:15px}.platform-tile-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.platform-tile-title h3{margin:0;font-size:20px}.platform-tile-body>small{display:block;margin-top:4px;color:var(--muted,#64748b)}.platform-tile-actions{display:flex;gap:9px;margin-top:14px}.platform-tile-actions .primary-action-btn,.platform-tile-actions .danger-btn{flex:1;text-align:center;justify-content:center;text-decoration:none}
.platform-general-card{position:relative}.platform-general-form{padding-right:230px}.platform-image-update{position:absolute;right:20px;top:78px;width:190px;display:flex;flex-direction:column;gap:9px}.platform-image-preview{height:100px;border:1px dashed var(--border,#dfe5ee);border-radius:12px;display:grid;place-items:center;overflow:hidden;background:rgba(148,163,184,.06)}.platform-image-preview img{width:100%;height:100%;object-fit:contain;padding:8px}.platform-image-preview span{font-size:11px;color:var(--muted,#64748b)}
.platform-modes-config .platform-mode-shell{margin-top:10px}.platform-config-card h3{font-size:22px;margin:0 0 8px}
html[data-theme="dark"] .platform-create-card,html[data-theme="dark"] .platforms-gallery-section,html[data-theme="dark"] .platform-general-card,html[data-theme="dark"] .platform-modes-config,html[data-theme="dark"] .platform-tile{background:#151d27!important;border-color:#334155!important}.stream-modal-icon:not(.danger){background:rgba(196,20,28,.12);color:#d81720;border:1px solid rgba(196,20,28,.25)}
@media(max-width:980px){.platform-create-grid{grid-template-columns:1fr 1fr}.platform-general-form{padding-right:0}.platform-image-update{position:static;width:auto;margin-top:18px;display:grid;grid-template-columns:110px 1fr auto;align-items:end}.platform-image-preview{height:80px}.platform-general-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.platform-create-grid,.platform-general-grid{grid-template-columns:1fr}.category-select-row{grid-template-columns:1fr}.platform-image-update{grid-template-columns:1fr}.platform-tile-actions{flex-direction:column}.platforms-gallery{grid-template-columns:1fr}}


/* V3.7.25 - Plataformas: importes limpios y consistencia visual */
/* Quita los controles +/- de todos los campos numericos en admin y vendedor. */
input[type="number"]{-moz-appearance:textfield!important;appearance:textfield!important}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}

.platform-economics-form{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:14px!important;
}
.platform-economics-form>div,
.platform-economics-form>.profit-preview{
  min-width:0;
}
.platform-economics-form>div:not(.profit-preview){
  border:1px solid var(--border,#dfe5ee);
  border-radius:12px;
  padding:11px 14px;
  min-height:102px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.platform-economics-form label,
.profit-preview>span{
  display:block!important;
  margin:0 0 7px!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.25!important;
  color:var(--text,#172033)!important;
}
.platform-economics-form input{
  width:100%!important;
  min-height:40px!important;
  margin:0!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.2!important;
  box-sizing:border-box!important;
}
.platform-economics-form small,
.profit-preview small{
  margin-top:7px!important;
  font-size:12px!important;
  line-height:1.3!important;
}
.profit-preview{
  min-height:102px!important;
  box-sizing:border-box!important;
  padding:11px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.profit-preview strong{
  font-size:22px!important;
  line-height:1.2!important;
  margin:0!important;
}
.platform-economics-form>.primary-action-btn{
  grid-column:1/-1!important;
  justify-self:center!important;
  align-self:center!important;
  width:auto!important;
  min-width:220px!important;
  margin:2px auto 0!important;
}
html[data-theme="dark"] .platform-economics-form>div:not(.profit-preview){
  background:#151d27!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .platform-economics-form label,
html[data-theme="dark"] .profit-preview>span{color:#f8fafc!important}

@media(max-width:900px){
  .platform-economics-form{grid-template-columns:1fr!important}
  .platform-economics-form>.primary-action-btn{grid-column:1!important;width:100%!important;min-width:0!important}
}

/* Ajuste de edición de cuentas: acción compacta y centrada */
.account-save-btn{
  grid-column:1/-1!important;
  justify-self:center!important;
  width:auto!important;
  min-width:180px!important;
  padding:11px 22px!important;
  margin:4px auto 0!important;
}
@media(max-width:760px){
  .account-save-btn{grid-column:1!important;min-width:0!important;width:auto!important;}
}

/* V3.7.22 - Perfiles e interfaz administrativa */
.profiles-management-card{margin-top:18px}
.profiles-table td,.profiles-table th{vertical-align:middle}
.profile-pin{font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.profile-status{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid transparent}
.profile-status.available{background:#dcfce7;color:#15803d;border-color:#86efac}
.profile-status.occupied{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.profile-status.blocked{background:#fef3c7;color:#a16207;border-color:#fde68a}
.profile-actions-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.profile-actions-row .primary-action-btn,.profile-actions-row .btn{width:auto!important;margin:0!important}
.profile-inline-form{margin-top:16px;padding:18px;border:1px solid var(--sd-border,#d7dde7);border-radius:14px;background:var(--sd-card,#fff)}
.profile-inline-form[hidden]{display:none!important}
.profile-inline-form h3{margin:0 0 13px}
.profile-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-notes-field{grid-column:1/-1}
.profile-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px}
.profile-form-actions .btn,.profile-form-actions .primary-action-btn{width:auto!important;margin:0!important}
.profile-edit-card label{display:block;margin-top:11px}
.profile-edit-card .stream-modal-actions{margin-top:16px}
html[data-theme="dark"] .profile-status.available{background:rgba(34,197,94,.16);color:#7cf3a2;border-color:rgba(34,197,94,.45)}
html[data-theme="dark"] .profile-status.occupied{background:rgba(239,68,68,.16);color:#ff9292;border-color:rgba(239,68,68,.45)}
html[data-theme="dark"] .profile-status.blocked{background:rgba(245,158,11,.16);color:#ffd277;border-color:rgba(245,158,11,.45)}
html[data-theme="dark"] .profile-inline-form{background:var(--sd-card,#151c25);border-color:var(--sd-border,#344154)}
.category-open-btn{background:#c81018!important;color:#fff!important;border:1px solid #c81018!important;font-weight:800!important;box-shadow:none!important;white-space:nowrap}
.category-open-btn:hover{filter:brightness(1.07)}
html[data-theme="light"] .category-open-btn,html[data-theme="dark"] .category-open-btn{background:#c81018!important;color:#fff!important;border-color:#c81018!important}
@media(max-width:700px){.profile-editor-grid{grid-template-columns:1fr}.profile-notes-field,.profile-form-actions{grid-column:1}.profile-form-actions{justify-content:flex-start}}

/* Cuenta: acción destructiva separada y centrada */
.account-delete-zone{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:22px 0 8px;
}
.account-delete-zone .danger-btn{
  width:auto!important;
  min-width:170px;
  margin:0!important;
}


/* V3.7.34 - Botones secundarios claros + modulo Inventario */
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] a.btn.secondary,
html[data-theme="light"] button.secondary,
html[data-theme="light"] .secondary-action{
  background:#fff!important;
  color:var(--accent)!important;
  border:1px solid color-mix(in srgb,var(--accent) 45%,#d9dee7)!important;
  box-shadow:none!important;
}
html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] a.btn.secondary:hover,
html[data-theme="light"] button.secondary:hover,
html[data-theme="light"] .secondary-action:hover{
  background:#fff5f5!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}

/* Catalog cards with platform image + stock */
.catalog-grid-rich{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:stretch}
.catalog-product-card{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center;min-height:190px;overflow:hidden}
.catalog-product-copy{min-width:0}
.catalog-product-copy h3{margin:12px 0 14px}
.catalog-stock{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:800;margin-bottom:14px}
.catalog-stock.available{background:rgba(34,197,94,.14);color:#15803d;border:1px solid rgba(34,197,94,.35)}
.catalog-stock.sold-out{background:rgba(239,68,68,.12);color:#b91c1c;border:1px solid rgba(239,68,68,.28)}
.catalog-price-label{font-size:.78rem;opacity:.68;margin-bottom:2px}
.catalog-product-image-wrap{height:150px;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;background:var(--panel-2,#f6f8fb);border:1px solid var(--border,#dbe3ef)}
.catalog-product-image{width:100%;height:100%;object-fit:cover;transition:filter .2s ease,opacity .2s ease}
.catalog-product-image.placeholder{display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:.6}
.catalog-product-card.is-sold-out .catalog-product-image{filter:grayscale(1);opacity:.46}
.catalog-product-card.is-sold-out{opacity:.88}
@media(max-width:700px){.catalog-product-card{grid-template-columns:1fr 110px}.catalog-product-image-wrap{height:110px}}

/* Catalogo clickeable y ventas en flujo vertical */
.catalog-card-link{display:block;text-decoration:none;color:inherit}
.catalog-product-card.is-clickable{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.catalog-product-card.is-clickable:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.10);border-color:rgba(190,20,30,.35)}
.sales-page-stack{display:grid;grid-template-columns:1fr;gap:18px;margin:18px 0}
.sale-main-panel{width:100%;max-width:none}
.sale-history-panel{width:100%;overflow-x:auto}
.sale-period-grid{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(280px,1fr);gap:14px;align-items:end}
.sale-total-strip{margin:14px 0;border:1px solid #dfe4ec;border-radius:13px;padding:14px 16px;display:flex;align-items:center;gap:14px;background:#f8fafc}
.sale-total-strip span{font-size:13px;color:#6d7890}
.sale-total-strip strong{font-size:22px;margin-left:auto}
.sale-total-strip small{font-size:12px;color:#6d7890;min-width:155px;text-align:right}
[data-theme="dark"] .sale-total-strip{background:#111923;border-color:#334155}
[data-theme="dark"] .catalog-product-card.is-clickable:hover{box-shadow:0 10px 28px rgba(0,0,0,.28)}
@media(max-width:760px){.sale-period-grid{grid-template-columns:1fr}.sale-total-strip{align-items:flex-start;flex-direction:column}.sale-total-strip strong{margin-left:0}.sale-total-strip small{text-align:left}}

/* Venta: selección limpia desde catálogo y resumen de período */
.sale-hidden-select{display:none!important}
.sale-selected-product{margin-top:6px;width:100%;padding:13px 14px;border:1px solid #d9dee7;border-radius:10px;background:#f8fafc;font-weight:800;color:#111827}
.sale-period-grid-centered{grid-template-columns:minmax(220px,320px) minmax(220px,320px);justify-content:center;gap:28px;margin:16px auto 4px}
.sale-monthly-price{margin-top:6px;min-height:43px;display:flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid #d9dee7;border-radius:10px;background:#f8fafc;font-size:16px;font-weight:850;color:#111827}
.sale-expiration-badge{margin-left:20px;min-width:190px;padding:8px 14px;border:1px solid #b91c1c;border-radius:999px;background:#fff5f5;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.sale-expiration-badge span{font-size:11px;font-weight:800;color:#991b1b;text-transform:uppercase;letter-spacing:.35px}
.sale-expiration-badge b{font-size:14px;color:#7f1d1d;white-space:nowrap}
[data-theme="dark"] .sale-selected-product,[data-theme="dark"] .sale-monthly-price{background:#111923;border-color:#334155;color:#f8fafc}
[data-theme="dark"] .sale-expiration-badge{background:rgba(185,28,28,.13);border-color:#ef4444}
[data-theme="dark"] .sale-expiration-badge span,[data-theme="dark"] .sale-expiration-badge b{color:#fecaca}
@media(max-width:760px){.sale-period-grid-centered{grid-template-columns:1fr;gap:10px}.sale-expiration-badge{margin-left:0;width:100%;border-radius:12px}.sale-total-strip{width:100%}}

/* Catálogo compacto: 4 tarjetas por fila en escritorio */
.catalog-grid.catalog-grid-rich{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.catalog-grid-rich .catalog-card-link{min-width:0;height:100%}
.catalog-grid-rich .catalog-product-card{
  grid-template-columns:minmax(0,1fr) 88px;
  gap:12px;
  align-items:center;
  min-height:138px;
  height:100%;
  padding:14px 14px 14px 16px;
  border-radius:15px;
}
.catalog-grid-rich .catalog-product-copy h3{margin:7px 0 9px;font-size:1.05rem;line-height:1.15}
.catalog-grid-rich .catalog-product-copy>span{font-size:.72rem;line-height:1.1}
.catalog-grid-rich .catalog-stock{padding:4px 8px;font-size:.74rem;margin-bottom:8px}
.catalog-grid-rich .catalog-price-label{font-size:.72rem;margin-bottom:1px}
.catalog-grid-rich .catalog-product-copy b{font-size:1.28rem;line-height:1.05}
.catalog-grid-rich .catalog-product-image-wrap{height:88px;width:88px;border-radius:13px}
.catalog-grid-rich .catalog-product-image.placeholder{font-size:.7rem;text-align:center;padding:6px}
@media(max-width:1280px){
  .catalog-grid.catalog-grid-rich{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:960px){
  .catalog-grid.catalog-grid-rich{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .catalog-grid.catalog-grid-rich{grid-template-columns:1fr}
  .catalog-grid-rich .catalog-product-card{grid-template-columns:minmax(0,1fr) 82px}
  .catalog-grid-rich .catalog-product-image-wrap{width:82px;height:82px}
}

/* Planes y precios */
.pricing-help{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 0 18px;padding:16px 18px;border:1px solid var(--border,#dbe2ea);border-radius:16px;background:var(--card,#fff)}
.pricing-help>b{grid-column:1/-1;font-size:17px}.pricing-help span{font-size:14px}
.pricing-service-card{background:var(--card,#fff);border:1px solid var(--border,#dbe2ea);border-radius:18px;padding:20px;margin-bottom:20px}.pricing-service-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border,#e5e7eb);padding-bottom:14px}.pricing-service-head h2{margin:3px 0}.pricing-service-head img{width:64px;height:64px;object-fit:cover;border-radius:14px}.pricing-mode{padding-top:18px}.pricing-mode h3{margin-bottom:4px}.pricing-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.pricing-plan{border:1px solid var(--border,#dbe2ea);border-radius:15px;padding:14px;background:var(--panel,#fafbfc)}.pricing-month{font-size:18px;font-weight:800;margin-bottom:12px}.pricing-plan label{display:block;font-size:12px;font-weight:700;margin-top:9px}.pricing-plan input{width:100%;margin-top:5px}.pricing-plan .primary-action-btn{width:100%;margin-top:13px}.empty-card{padding:30px;border:1px solid var(--border,#ddd);border-radius:16px}
@media(max-width:1100px){.pricing-plan-grid{grid-template-columns:repeat(2,1fr)}.pricing-help{grid-template-columns:1fr}}@media(max-width:650px){.pricing-plan-grid{grid-template-columns:1fr}}

/* Planes y precios: campos monetarios claros y faciles de sobrescribir */
.pricing-mode-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}.pricing-mode-title h3{margin:0}.pricing-mode-title span{font-size:13px;color:var(--muted,#64748b)}
.pricing-plan{padding:16px}.pricing-month{display:flex;align-items:baseline;gap:6px}.pricing-month strong{font-size:23px}.pricing-month span{font-size:14px;color:var(--muted,#64748b);font-weight:700}
.pricing-plan label>span{display:block;margin-bottom:6px;font-size:13px;font-weight:800}.money-input-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border,#dbe2ea);border-radius:11px;background:var(--card,#fff);padding:0 12px;height:48px}.money-input-wrap:focus-within{border-color:#c51018;box-shadow:0 0 0 2px rgba(197,16,24,.10)}.money-input-wrap>b{font-size:18px}.money-input-wrap .money-plan-input{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;height:auto!important;font-size:18px;font-weight:800;font-family:Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;min-width:0}.money-input-wrap .money-plan-input:focus{outline:none}.pricing-plan .primary-action-btn{height:44px;font-size:14px}
@media(max-width:800px){.pricing-mode-title{align-items:flex-start;flex-direction:column;gap:4px}}
/* Planes y precios - lista y editor */
.pricing-list-card{border:1px solid var(--border,#dbe2ea);border-radius:18px;background:var(--card,#fff);overflow:hidden}.pricing-list-head,.pricing-list-row{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(180px,.7fr) minmax(360px,1fr);gap:18px;align-items:center;padding:15px 18px}.pricing-list-head{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#64748b);background:var(--panel,#f8fafc);font-weight:700}.pricing-list-row{border-top:1px solid var(--border,#e5e7eb)}.pricing-platform-info{display:flex;align-items:center;gap:14px}.pricing-platform-info img,.pricing-platform-placeholder{width:58px;height:58px;border-radius:12px;object-fit:cover;border:1px solid var(--border,#e5e7eb)}.pricing-platform-placeholder{display:grid;place-items:center;font-size:10px;color:var(--muted,#64748b)}.pricing-platform-info h3{margin:0 0 3px;font-size:18px}.pricing-platform-info small,.pricing-status-wrap small{color:var(--muted,#64748b)}.pricing-status-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.pricing-status{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.pricing-status.is-ready{background:#dcfce7;color:#15803d}.pricing-status.is-empty{background:#f1f5f9;color:#64748b}.pricing-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.pricing-row-actions form{margin:0}.secondary-action-btn,.danger-outline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:700;cursor:pointer}.secondary-action-btn{border:1px solid #d8a0a3;color:#b51219;background:transparent}.danger-outline-btn{border:1px solid #efb0b3;color:#b51219;background:transparent}.pricing-help.clean{grid-template-columns:repeat(3,1fr)}.pricing-help.clean>b{display:none}.pricing-help.clean span{display:flex;flex-direction:column;gap:3px}.pricing-help.clean strong{font-size:14px;font-weight:700}.pricing-help.clean small{font-size:12px;color:var(--muted,#64748b)}.pricing-mode-title h2{margin:3px 0 0}.pricing-plan.is-unconfigured{opacity:.78}.pricing-month em{margin-left:auto;font-size:10px;font-style:normal;padding:4px 7px;border-radius:999px;background:#dcfce7;color:#15803d}.pricing-plan label,.pricing-plan label>span{font-weight:600}.money-input-wrap .money-plan-input{font-weight:600}.custom-pricing-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--border,#e5e7eb)}.custom-pricing-head h3{margin:0 0 4px}.custom-pricing-head p{margin:0;color:var(--muted,#64748b);font-size:13px}.custom-option-list{margin-top:14px;display:grid;gap:8px}.custom-option-row{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:11px 13px;border:1px solid var(--border,#e5e7eb);border-radius:12px}.custom-option-row>div:first-child{display:flex;flex-direction:column}.custom-option-row small{color:var(--muted,#64748b)}.custom-option-row>div:nth-child(2){display:flex;gap:15px;font-size:13px}.custom-option-form{display:grid;grid-template-columns:1.5fr .6fr .8fr .8fr .8fr auto;gap:10px;align-items:end;margin-top:14px}.custom-option-form label{font-size:12px;font-weight:600}.custom-option-form input{margin-top:5px}.simple-money{font-size:14px!important;font-weight:500!important}@media(max-width:1100px){.pricing-list-head{display:none}.pricing-list-row{grid-template-columns:1fr}.pricing-row-actions{justify-content:flex-start}.custom-option-form{grid-template-columns:repeat(2,1fr)}.pricing-help.clean{grid-template-columns:1fr}.custom-option-row{grid-template-columns:1fr}}@media(max-width:650px){.custom-option-form{grid-template-columns:1fr}}


/* V3.10 - ventas: selector consistente claro/oscuro + precio sugerido para vendedor */
#sale-months{color-scheme:light;background:#fff;color:#111827;border-color:#d9dee7}
#sale-months option{background:#fff!important;color:#111827!important}
html[data-theme="dark"] #sale-months{color-scheme:dark;background:#111923!important;color:#f8fafc!important;border-color:#334155!important}
html[data-theme="dark"] #sale-months option{background:#111923!important;color:#f8fafc!important}
.sale-suggested-price{margin-top:6px;min-height:43px;display:flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid #d9dee7;border-radius:10px;background:#fffaf0;font-size:16px;font-weight:700;color:#7c4a03;text-align:center}
.sale-suggested-help{display:block;margin-top:6px;color:#64748b;font-size:11px;line-height:1.35;text-align:center}
.sale-period-grid-centered.seller-price-grid{grid-template-columns:minmax(190px,280px) minmax(220px,300px) minmax(260px,340px);max-width:980px}
html[data-theme="dark"] .sale-suggested-price{background:#1c1912!important;border-color:#574c2b!important;color:#fde68a!important}
html[data-theme="dark"] .sale-suggested-help{color:#94a3b8!important}
@media(max-width:900px){.sale-period-grid-centered.seller-price-grid{grid-template-columns:1fr 1fr}.sale-period-grid-centered.seller-price-grid label:last-child{grid-column:1/-1}}
@media(max-width:650px){.sale-period-grid-centered.seller-price-grid{grid-template-columns:1fr}.sale-period-grid-centered.seller-price-grid label:last-child{grid-column:auto}}

/* Plataforma: la configuración económica vive solo en Planes y precios */
.platform-pricing-note{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:18px 20px;border:1px solid var(--border,#d8dee8);border-radius:16px;background:var(--card,#fff)}
.platform-pricing-note p{margin:4px 0 0}
@media(max-width:720px){.platform-pricing-note{align-items:stretch;flex-direction:column}.platform-pricing-note .btn{width:100%;text-align:center}}


/* V3.11 - Planes y precios: contraste completo en modo oscuro */
html[data-theme="dark"] .pricing-list-card,
html[data-theme="dark"] .pricing-service-card,
html[data-theme="dark"] .pricing-help,
html[data-theme="dark"] .pricing-help.clean{
  background:#151c25!important;
  border-color:#334155!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .pricing-list-head{
  background:#111923!important;
  color:#aebbd0!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .pricing-list-row{
  background:#151c25!important;
  border-color:#334155!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .pricing-platform-info h3,
html[data-theme="dark"] .pricing-mode-title h2,
html[data-theme="dark"] .pricing-service-card h2,
html[data-theme="dark"] .pricing-service-card h3,
html[data-theme="dark"] .pricing-help strong,
html[data-theme="dark"] .pricing-plan label,
html[data-theme="dark"] .pricing-plan label>span,
html[data-theme="dark"] .pricing-month strong,
html[data-theme="dark"] .custom-option-row strong{
  color:#f4f7fb!important;
}
html[data-theme="dark"] .pricing-platform-info small,
html[data-theme="dark"] .pricing-status-wrap small,
html[data-theme="dark"] .pricing-mode-title small,
html[data-theme="dark"] .pricing-help small,
html[data-theme="dark"] .pricing-month span,
html[data-theme="dark"] .custom-pricing-head p,
html[data-theme="dark"] .custom-option-row small{
  color:#9fb0c6!important;
}
html[data-theme="dark"] .pricing-plan{
  background:#18212c!important;
  border-color:#3a4759!important;
  opacity:1!important;
}
html[data-theme="dark"] .pricing-plan.is-unconfigured{
  background:#131a23!important;
  border-color:#2c3746!important;
  opacity:.72!important;
}
html[data-theme="dark"] .money-input-wrap{
  background:#0f1720!important;
  border-color:#3a4759!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .money-input-wrap>b,
html[data-theme="dark"] .money-input-wrap .money-plan-input,
html[data-theme="dark"] .custom-option-form input{
  color:#f4f7fb!important;
}
html[data-theme="dark"] .custom-option-form input{
  background:#0f1720!important;
  border-color:#3a4759!important;
}
html[data-theme="dark"] .custom-option-row{
  background:#18212c!important;
  border-color:#3a4759!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .pricing-status.is-empty{background:#202a36!important;color:#b8c5d8!important}
html[data-theme="dark"] .pricing-status.is-ready{background:#123824!important;color:#7ee2a8!important}
html[data-theme="dark"] .pricing-platform-placeholder{background:#101720!important;border-color:#334155!important;color:#9fb0c6!important}
html[data-theme="dark"] .secondary-action-btn,
html[data-theme="dark"] .danger-outline-btn{background:#151c25!important;color:#ff8589!important;border-color:#7b353a!important}

/* Ventas de vendedor: tres bloques alineados y referencia sugerida visible */
.sale-period-grid-centered.seller-price-grid{
  grid-template-columns:repeat(3,minmax(220px,1fr));
  max-width:980px;
  align-items:start;
  gap:18px;
}
.sale-period-grid-centered.seller-price-grid>label{
  display:flex;
  flex-direction:column;
  margin:0;
  min-width:0;
}
.sale-period-grid-centered.seller-price-grid>label>select,
.sale-period-grid-centered.seller-price-grid .sale-monthly-price,
.sale-period-grid-centered.seller-price-grid .sale-suggested-price{
  min-height:45px;
  height:45px;
  margin-top:6px;
  box-sizing:border-box;
}
.sale-period-grid-centered.seller-price-grid .sale-suggested-help{
  min-height:30px;
}
html[data-theme="dark"] .sale-suggested-price{
  background:#2a2314!important;
  border-color:#6a5728!important;
  color:#ffe28a!important;
}
@media(max-width:900px){
  .sale-period-grid-centered.seller-price-grid{grid-template-columns:1fr 1fr}
  .sale-period-grid-centered.seller-price-grid>label:last-child{grid-column:1/-1}
}
@media(max-width:650px){
  .sale-period-grid-centered.seller-price-grid{grid-template-columns:1fr}
  .sale-period-grid-centered.seller-price-grid>label:last-child{grid-column:auto}
}

/* V3.7.36 - Detalle completo de inventario y credenciales */
.account-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.account-detail-head h1{margin:6px 0 4px!important}
.account-detail-head p{margin:0;color:#64748b}
.account-back-link{display:inline-flex;color:var(--accent);font-weight:800;text-decoration:none;font-size:13px}
.account-main-status{display:inline-flex;align-items:center;justify-content:center;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}
.account-main-status.is-active{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.account-main-status.is-warning{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.account-access-card{border:1px solid #dce3ec;border-radius:16px;background:#fff;padding:20px;margin-bottom:18px;box-shadow:0 8px 26px rgba(15,23,42,.04)}
.account-access-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.account-access-title h2{margin:2px 0 2px}
.account-access-title p{margin:0;color:#64748b}
.account-kicker{display:block;color:#8b98aa;font-size:11px;font-weight:900;letter-spacing:.12em}
.account-edit-toggle{width:auto!important;margin:0!important;background:#fff!important;color:var(--accent)!important;border:1px solid rgba(200,16,24,.35)!important;border-radius:10px!important;padding:10px 13px!important;font-weight:800!important}
.account-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.account-credential-box,.account-info-box{border:1px solid #e0e6ee;border-radius:13px;background:#f8fafc;padding:14px 15px;min-width:0}
.account-credential-box>span,.account-info-box>span{display:block;color:#718096;font-size:12px;margin-bottom:7px}
.account-credential-value{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.account-credential-value strong,.account-info-box strong{font-size:15px;color:#0f2747;overflow-wrap:anywhere}
.credential-actions{display:flex;gap:6px;flex:0 0 auto}
.credential-mini-btn{width:auto!important;margin:0!important;padding:6px 9px!important;border-radius:8px!important;background:#fff!important;color:var(--accent)!important;border:1px solid #d9dee7!important;font-size:11px!important;font-weight:800!important}
.account-edit-panel{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}
.account-edit-panel[hidden]{display:none!important}
.profiles-card-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px}
.profiles-card-heading h2{margin-top:0}
.profiles-card-heading .profile-actions-row{margin-top:0;justify-content:flex-end}
html[data-theme="dark"] .account-detail-head p{color:#94a3b8!important}
html[data-theme="dark"] .account-main-status.is-active{background:rgba(34,197,94,.16);color:#7cf3a2;border-color:rgba(34,197,94,.45)}
html[data-theme="dark"] .account-main-status.is-warning{background:rgba(239,68,68,.16);color:#ff9292;border-color:rgba(239,68,68,.45)}
html[data-theme="dark"] .account-access-card{background:#141c25!important;border-color:#334155!important;box-shadow:none!important}
html[data-theme="dark"] .account-access-title p,html[data-theme="dark"] .account-kicker{color:#94a3b8!important}
html[data-theme="dark"] .account-edit-toggle,html[data-theme="dark"] .credential-mini-btn{background:#111923!important;color:#ff7a80!important;border-color:#455268!important}
html[data-theme="dark"] .account-credential-box,html[data-theme="dark"] .account-info-box{background:#101821!important;border-color:#334155!important}
html[data-theme="dark"] .account-credential-box>span,html[data-theme="dark"] .account-info-box>span{color:#94a3b8!important}
html[data-theme="dark"] .account-credential-value strong,html[data-theme="dark"] .account-info-box strong{color:#f8fafc!important}
html[data-theme="dark"] .account-edit-panel{border-color:#334155!important}
@media(max-width:760px){.account-detail-head,.account-access-title,.profiles-card-heading{flex-direction:column;align-items:stretch}.account-access-grid{grid-template-columns:1fr}.profiles-card-heading .profile-actions-row{justify-content:flex-start}}

/* Inventario digital: al comprar códigos como vendedor, Cantidad + Costo quedan centrados. */
.sale-period-grid-centered.seller-price-grid.digital-mode{grid-template-columns:minmax(220px,300px) minmax(220px,300px);max-width:660px;justify-content:center}
@media(max-width:650px){.sale-period-grid-centered.seller-price-grid.digital-mode{grid-template-columns:1fr}}

/* Inventario digital + selector de tema: contraste consistente claro/oscuro */
html[data-theme="light"] .theme-toggle-link{
  color:#334155!important;
  background:transparent!important;
}
html[data-theme="light"] .theme-toggle-link:hover{
  color:var(--accent)!important;
  background:#f8eaea!important;
}
html[data-theme="dark"] .theme-toggle-link{
  color:#e5edf7!important;
  background:transparent!important;
}
html[data-theme="dark"] .theme-toggle-link:hover{
  color:#ff7378!important;
  background:#24181d!important;
}
html[data-theme="light"] .sale-confirm-cancel{
  background:#ffffff!important;
  color:#1f2937!important;
  border-color:#94a3b8!important;
}
html[data-theme="light"] .sale-confirm-cancel:hover{
  background:#f1f5f9!important;
}
html[data-theme="dark"] .sale-confirm-cancel{
  background:#151d27!important;
  color:#f8fafc!important;
  border-color:#64748b!important;
}
html[data-theme="dark"] .sale-confirm-cancel:hover{
  background:#202a36!important;
}
html[data-theme="light"] .sale-confirm-accept,
html[data-theme="dark"] .sale-confirm-accept{
  color:#ffffff!important;
}

/* Security Phase 4 */
.security-page{max-width:1040px;margin:0 auto}.security-page-head{margin-bottom:22px}.security-page-head h1{margin:4px 0 6px}.security-page-head p,.security-card-head p,.security-setup-step p,.security-small{color:var(--muted,#6b7890)}
.security-card{background:var(--card,#fff);border:1px solid var(--border,#dce3ee);border-radius:18px;padding:22px;margin-bottom:18px}.security-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.security-card-head h2{margin:0 0 6px}.security-card-head p{margin:0}
.security-status{border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;white-space:nowrap}.security-status.on{background:#dcfce7;color:#137333}.security-status.off{background:#eef2f7;color:#53627a}.security-status.warning{background:#fff3cd;color:#8a5a00}
.security-form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.security-form label{margin:0}.security-form-action{display:flex;align-items:flex-end}.security-form-action button{min-height:42px}.security-form-compact{margin-top:18px}
.security-info-box{padding:14px 16px;border-radius:12px;background:var(--surface-soft,#f6f8fb);border:1px solid var(--border,#dce3ee)}.security-setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.security-setup-step{padding:16px;border-radius:14px;background:var(--surface-soft,#f6f8fb);border:1px solid var(--border,#dce3ee)}.security-setup-step p{margin:7px 0}.security-secret-key{display:block;word-break:break-all;font-size:16px;font-weight:800;letter-spacing:1px;padding:12px;border-radius:9px;background:var(--card,#fff);border:1px dashed var(--border,#cbd5e1)}
.recovery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.recovery-grid code{padding:12px;text-align:center;border:1px solid var(--border,#dce3ee);border-radius:10px;background:var(--surface-soft,#f6f8fb);font-weight:800;letter-spacing:1px}.security-login-back{display:block;text-align:center;margin-top:16px}.security-2fa-login input{text-align:center;font-size:20px;letter-spacing:3px}
html[data-theme="dark"] .security-card,html[data-theme="dark"] .security-secret-key{background:#141d28;border-color:#334155;color:#f8fafc}html[data-theme="dark"] .security-info-box,html[data-theme="dark"] .security-setup-step,html[data-theme="dark"] .recovery-grid code{background:#101822;border-color:#334155;color:#f8fafc}html[data-theme="dark"] .security-status.off{background:#263241;color:#cbd5e1}
@media(max-width:800px){.security-form{grid-template-columns:1fr}.security-setup-grid{grid-template-columns:1fr}.recovery-grid{grid-template-columns:repeat(2,1fr)}}
.is-hidden{display:none!important}.mt-0{margin-top:0!important}.mt-10{margin-top:10px!important}.mt-14{margin-top:14px!important}.mt-16{margin-top:16px!important}.mt-18{margin-top:18px!important}.mt-24{margin-top:24px!important}.mt-neg-6{margin-top:-6px!important}.my-24{margin:24px 0!important}.my-28{margin:28px 0!important}.details-summary{cursor:pointer;font-weight:800}.profile-section{max-width:760px}.sale-inline-actions{margin-top:12px;gap:10px;flex-wrap:wrap}

/* CSP-safe dashboard bar heights */
.bar-h-0{height:0%}
.bar-h-1{height:1%}
.bar-h-2{height:2%}
.bar-h-3{height:3%}
.bar-h-4{height:4%}
.bar-h-5{height:5%}
.bar-h-6{height:6%}
.bar-h-7{height:7%}
.bar-h-8{height:8%}
.bar-h-9{height:9%}
.bar-h-10{height:10%}
.bar-h-11{height:11%}
.bar-h-12{height:12%}
.bar-h-13{height:13%}
.bar-h-14{height:14%}
.bar-h-15{height:15%}
.bar-h-16{height:16%}
.bar-h-17{height:17%}
.bar-h-18{height:18%}
.bar-h-19{height:19%}
.bar-h-20{height:20%}
.bar-h-21{height:21%}
.bar-h-22{height:22%}
.bar-h-23{height:23%}
.bar-h-24{height:24%}
.bar-h-25{height:25%}
.bar-h-26{height:26%}
.bar-h-27{height:27%}
.bar-h-28{height:28%}
.bar-h-29{height:29%}
.bar-h-30{height:30%}
.bar-h-31{height:31%}
.bar-h-32{height:32%}
.bar-h-33{height:33%}
.bar-h-34{height:34%}
.bar-h-35{height:35%}
.bar-h-36{height:36%}
.bar-h-37{height:37%}
.bar-h-38{height:38%}
.bar-h-39{height:39%}
.bar-h-40{height:40%}
.bar-h-41{height:41%}
.bar-h-42{height:42%}
.bar-h-43{height:43%}
.bar-h-44{height:44%}
.bar-h-45{height:45%}
.bar-h-46{height:46%}
.bar-h-47{height:47%}
.bar-h-48{height:48%}
.bar-h-49{height:49%}
.bar-h-50{height:50%}
.bar-h-51{height:51%}
.bar-h-52{height:52%}
.bar-h-53{height:53%}
.bar-h-54{height:54%}
.bar-h-55{height:55%}
.bar-h-56{height:56%}
.bar-h-57{height:57%}
.bar-h-58{height:58%}
.bar-h-59{height:59%}
.bar-h-60{height:60%}
.bar-h-61{height:61%}
.bar-h-62{height:62%}
.bar-h-63{height:63%}
.bar-h-64{height:64%}
.bar-h-65{height:65%}
.bar-h-66{height:66%}
.bar-h-67{height:67%}
.bar-h-68{height:68%}
.bar-h-69{height:69%}
.bar-h-70{height:70%}
.bar-h-71{height:71%}
.bar-h-72{height:72%}
.bar-h-73{height:73%}
.bar-h-74{height:74%}
.bar-h-75{height:75%}
.bar-h-76{height:76%}
.bar-h-77{height:77%}
.bar-h-78{height:78%}
.bar-h-79{height:79%}
.bar-h-80{height:80%}
.bar-h-81{height:81%}
.bar-h-82{height:82%}
.bar-h-83{height:83%}
.bar-h-84{height:84%}
.bar-h-85{height:85%}
.bar-h-86{height:86%}
.bar-h-87{height:87%}
.bar-h-88{height:88%}
.bar-h-89{height:89%}
.bar-h-90{height:90%}
.bar-h-91{height:91%}
.bar-h-92{height:92%}
.bar-h-93{height:93%}
.bar-h-94{height:94%}
.bar-h-95{height:95%}
.bar-h-96{height:96%}
.bar-h-97{height:97%}
.bar-h-98{height:98%}
.bar-h-99{height:99%}
.bar-h-100{height:100%}

/* 2FA setup */
.security-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.security-setup-qr{text-align:center}.security-setup-qr>b,.security-setup-qr>p{text-align:left;display:block}
.security-qr{display:block;width:190px;height:190px;max-width:100%;margin:12px auto;background:#fff;padding:8px;border-radius:14px;border:1px solid var(--border,#dce3ee)}
.security-secret-row{display:flex;gap:10px;align-items:center}.security-secret-row .security-secret-key{flex:1;min-width:0}.security-secret-row .secondary-btn{white-space:nowrap}
html[data-theme="dark"] .security-qr{background:#fff;border-color:#475569}
@media(max-width:800px){.security-setup-grid{grid-template-columns:1fr}.security-secret-row{align-items:stretch;flex-direction:column}}

/* Seguridad Fase 6: cerrar sesión debe ser POST sin perder el estilo del menú. */
.nav-logout-form{margin:0;padding:0;}
.nav-logout-button{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;}
.nav-logout-button:hover{background:var(--nav-hover,rgba(179,18,23,.08));}
.security-login-back-form{margin-top:12px;text-align:center;}
.security-login-back-form .security-login-back{border:0;background:transparent;cursor:pointer;font:inherit;}

/* Seguridad / páginas de error */
.security-error-card{max-width:640px;margin:8vh auto;padding:34px;border:1px solid var(--border,#dce3ec);border-radius:18px;background:var(--card,#fff);text-align:center;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.security-error-code{font-size:52px;font-weight:800;line-height:1;color:var(--accent,#b31217);margin-bottom:8px}.security-error-card h1{margin:0 0 10px}.security-error-card p{color:var(--muted,#64748b);margin:0 auto 12px;max-width:520px}.security-error-card small{display:block;color:var(--muted,#64748b);word-break:break-all}.security-error-actions{margin-top:22px}.security-error-actions .btn{display:inline-block;text-decoration:none}
[data-theme="dark"] .security-error-card{background:#151d27;border-color:#334155;box-shadow:none}[data-theme="dark"] .security-error-card p,[data-theme="dark"] .security-error-card small{color:#9fb0c4}

/* Fase 12: recuperación segura de acceso */
.login-help{margin-top:14px;text-align:center}.login-help a{font-weight:700}
.recovery-card{max-width:520px}.dev-recovery-box{margin-top:18px;padding:16px;border:1px solid var(--border,#d9e1ec);border-radius:14px;background:var(--panel-soft,#f5f8fc)}
.dev-recovery-box p{margin:6px 0 10px}.security-pending{display:block;margin-top:8px;font-weight:700;color:#a16207}
.security-temp-card{max-width:760px;margin:0 auto;padding:28px;border:1px solid var(--border,#d9e1ec);border-radius:18px;background:var(--panel,#fff)}
.security-temp-card h2{margin:14px 0 4px}.credential-box{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:20px 0;padding:16px;border:1px solid var(--border,#d9e1ec);border-radius:14px;background:var(--panel-soft,#f5f8fc)}
.credential-box span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.1rem;font-weight:800;word-break:break-all}
html[data-theme="dark"] .dev-recovery-box,html[data-theme="dark"] .credential-box,html[data-theme="dark"] .security-temp-card{background:#151d27;border-color:#314052;color:#eef4ff}
.security-force-change{margin:0 0 18px;border-left:4px solid #d97706}

/* Seguridad Fase 13: ciclo de recuperación y formulario de restablecimiento */
.security-recovery-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:14px 16px;border:1px solid var(--border,#dce3ee);border-radius:12px;background:var(--surface-soft,#f6f8fb)}
.security-recovery-summary p{margin:4px 0 0;color:var(--muted,#6b7890)}
.security-recovery-summary.warning{border-color:#f0c36a;background:#fff9e8}
.security-recovery-manage{margin-top:14px;border:1px solid var(--border,#dce3ee);border-radius:12px;padding:12px 14px;background:var(--surface-soft,#f6f8fb)}
.security-recovery-manage summary{cursor:pointer;font-weight:800}.security-recovery-manage>p{margin:10px 0 0}
.reset-password-form{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;align-items:stretch!important}
.reset-password-form label{display:grid;gap:6px;margin:0!important}.reset-password-form small{display:block;margin:0!important;line-height:1.5}.reset-password-form button{justify-self:start;margin:0!important}
html[data-theme="dark"] .security-recovery-summary,html[data-theme="dark"] .security-recovery-manage{background:#101822;border-color:#334155;color:#f8fafc}
html[data-theme="dark"] .security-recovery-summary.warning{background:#261f10;border-color:#765b1f}
@media(max-width:700px){.security-recovery-summary{align-items:flex-start;flex-direction:column}}

/* Fase 18 - monitoreo financiero */
.financial-alerts-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end}
.financial-alert-summary{display:grid;grid-template-columns:180px 180px 1fr;gap:14px;align-items:stretch;margin:18px 0}
.financial-alert-summary .metric-card{display:flex;flex-direction:column;justify-content:center;min-height:92px;text-align:center}
.financial-alert-summary .metric-card span{font-size:.85rem;color:var(--muted)}
.financial-alert-summary .metric-card strong{font-size:1.8rem}
.financial-alert-filters{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.financial-alert-filters .active{outline:2px solid var(--accent);outline-offset:2px}
.financial-alert-panel{padding:18px}
.financial-alert-table td{vertical-align:middle}
.financial-alert-table td:nth-child(2){min-width:280px}
.risk-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.risk-critical{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.risk-high{background:#ffedd5;color:#9a3412;border:1px solid #fed7aa}
.risk-medium{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.risk-low{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.security-note-box{margin-top:16px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.security-note-box p{margin:6px 0 0;color:var(--muted)}
.financial-alert-banner a{font-weight:800;margin-left:8px}
@media (max-width:900px){.financial-alert-summary{grid-template-columns:1fr 1fr}.financial-alert-filters{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:620px){.financial-alert-summary{grid-template-columns:1fr}.financial-alert-filters{grid-column:auto}.financial-alert-table td:nth-child(2){min-width:220px}}
[data-theme="dark"] .risk-critical{background:#3f1418;color:#fecaca;border-color:#7f1d1d}
[data-theme="dark"] .risk-high{background:#3a2111;color:#fed7aa;border-color:#9a3412}
[data-theme="dark"] .risk-medium{background:#362d10;color:#fde68a;border-color:#92400e}
[data-theme="dark"] .risk-low{background:#12351f;color:#bbf7d0;border-color:#166534}

/* Fase 23 - centro de incidentes y respuesta */
.security-incidents-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end}
.incident-summary{display:grid;grid-template-columns:180px 180px 1fr;gap:14px;align-items:stretch;margin:18px 0}
.incident-summary .metric-card{display:flex;flex-direction:column;justify-content:center;min-height:92px;text-align:center}
.incident-summary .metric-card span{font-size:.85rem;color:var(--muted)}.incident-summary .metric-card strong{font-size:1.8rem}
.incident-filters{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.incident-filters .active{outline:2px solid var(--accent);outline-offset:2px}
.incident-panel{padding:18px}.incident-table td{vertical-align:middle}.incident-table td:nth-child(2){min-width:280px}.incident-table td:last-child{min-width:220px}
.incident-actions{display:grid;gap:8px}.incident-actions form{display:flex;gap:8px;flex-wrap:wrap;margin:0}.incident-actions input{min-width:150px;flex:1}
html[data-theme="dark"] .incident-actions input{background:#101822;border-color:#334155;color:#f8fafc}
@media(max-width:900px){.incident-summary{grid-template-columns:1fr 1fr}.incident-filters{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:620px){.incident-summary{grid-template-columns:1fr}.incident-filters{grid-column:auto}}

/* Dashboard productivo: navegación, alertas y gráfica interactiva */
.kpi-link{text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease}.kpi-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,#e7eaf0)}
.chart-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.chart-toggle{background:transparent;color:#6d7890;border:1px solid #dfe4eb;padding:7px 10px;border-radius:9px;font-size:11px}.chart-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}.dashboard-alert-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;margin:16px 0;border:1px solid #f0cf87;background:#fff8e8;border-radius:14px;color:#76520a}.dashboard-alert-strip b,.dashboard-alert-strip span{display:block}.dashboard-alert-strip span{font-size:12px;margin-top:3px}.dashboard-alert-strip a{color:#76520a;font-weight:800}.bar-fill{transition:height .25s ease}
html[data-theme="dark"] .chart-toggle{color:#aab5c5;border-color:#344052}html[data-theme="dark"] .chart-toggle.active{color:#fff;border-color:var(--accent)}html[data-theme="dark"] .dashboard-alert-strip{background:#2a2113;border-color:#5f4a22;color:#f1ca7a}html[data-theme="dark"] .dashboard-alert-strip a{color:#ffd98b}
@media(max-width:760px){.dashboard-alert-strip{align-items:flex-start;flex-direction:column}.chart-actions{justify-content:flex-start}}

/* Dashboard productivo: comparativos y ranking mensual */
.hero-delta{display:block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:.15px;color:rgba(255,255,255,.72)}
.hero-delta.up{color:#bdf7cf}.hero-delta.down{color:#ffd0d0}
.dashboard-bottom-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin:18px 0}
.dashboard-bottom-grid>section{min-width:0}
.top-products-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.top-product-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid #edf0f4}
.top-product-row:last-child{border-bottom:0}
.top-product-rank{width:28px;height:28px;border-radius:9px;background:#f8eaea;color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:900}
.top-product-name{min-width:0}.top-product-name b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.top-product-name span{display:block;margin-top:3px;color:#7b8596;font-size:11px}.top-product-row>strong{font-size:13px;white-space:nowrap}.dashboard-empty{padding:18px 4px;color:#7b8596;font-size:13px}
html[data-theme="dark"] .top-product-row{border-color:#2d3848}html[data-theme="dark"] .top-product-rank{background:#2a1b20;color:#ff6c75}html[data-theme="dark"] .top-product-name span,html[data-theme="dark"] .dashboard-empty{color:#94a3b8}
@media(max-width:1100px){.dashboard-bottom-grid{grid-template-columns:1fr}}

/* Reportes analíticos */
.report-kpis .kpi-card{align-items:flex-start}.report-kpis .kpi-card>div{display:flex;flex-direction:column;gap:4px}.report-kpis em{font-size:12px;font-style:normal;color:var(--muted)}.report-delta.up{color:#159447!important}.report-delta.down{color:#d92d20!important}.report-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:18px 0;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}.report-summary-strip>div{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:5px}.report-summary-strip span{font-size:12px;color:var(--muted)}.report-summary-strip strong{font-size:20px}.report-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.report-two-col section{margin:0}.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-title-row h2{margin:2px 0 0}.report-ranking{display:flex;flex-direction:column}.report-rank-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.report-rank-row:last-child{border-bottom:0}.rank-number{width:28px;height:28px;border-radius:9px;background:var(--surface,#f3f5f8);display:grid;place-items:center;font-weight:800;font-size:12px}.report-rank-row div{display:flex;flex-direction:column;gap:3px;min-width:0}.report-rank-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-rank-row small{color:var(--muted)}.report-rank-row>b{white-space:nowrap}.report-month-form input{min-width:170px}@media(max-width:900px){.report-summary-strip{grid-template-columns:1fr 1fr}.report-two-col{grid-template-columns:1fr}}@media(max-width:560px){.report-summary-strip{grid-template-columns:1fr}.reports-head{align-items:stretch}.report-month-form{width:100%}.report-month-form input{min-width:0;flex:1}}

/* Batch rapido: Reportes - contraste claro/oscuro y detalle visual */
html[data-theme="dark"] .report-summary-strip{background:#2d3848;border-color:#2d3848}
html[data-theme="dark"] .report-summary-strip>div{background:#151d27;color:#f8fafc}
html[data-theme="dark"] .report-rank-row{border-color:#2d3848}
html[data-theme="dark"] .rank-number{background:#263241!important;color:#f8fafc!important;border:1px solid #3b4a5e}
html[data-theme="dark"] .report-rank-row strong,html[data-theme="dark"] .report-rank-row>b{color:#f8fafc}
html[data-theme="dark"] .report-rank-row small{color:#9fb0c4}
html[data-theme="dark"] .report-two-col section,html[data-theme="dark"] section:has(.report-ranking){background:#151d27;border-color:#2d3848}
html[data-theme="dark"] .renewals-table-wrap table th{color:#a9b9cf;border-color:#2d3848}
html[data-theme="dark"] .renewals-table-wrap table td{color:#f8fafc;border-color:#2d3848}
html[data-theme="light"] .rank-number{background:#eef2f7;color:#172033;border:1px solid #e1e6ee}
html[data-theme="light"] .report-rank-row{border-color:#e7ebf1}
html[data-theme="light"] .report-rank-row small{color:#64748b}

/* Reportes: navegación, exportación y desglose de gastos */
.report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.report-actions .report-month-form{margin:0}.report-nav{min-width:40px;padding-inline:12px;text-align:center}.report-export{white-space:nowrap}.report-expenses{margin:18px 0}.expense-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.expense-breakdown-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}.expense-breakdown-row>div{display:flex;flex-direction:column;gap:3px}.expense-breakdown-row small{color:var(--muted)}.expense-breakdown-row>b{white-space:nowrap}html[data-theme="dark"] .report-actions input[type="month"]{color-scheme:dark;background:#151d27;color:#f8fafc;border-color:#3a4759}html[data-theme="dark"] .report-actions .btn.ghost{background:#151d27;color:#f8fafc;border-color:#3a4759}html[data-theme="dark"] .expense-breakdown-row{border-color:#2d3848}html[data-theme="dark"] .expense-breakdown-row strong,html[data-theme="dark"] .expense-breakdown-row>b{color:#f8fafc}@media(max-width:700px){.report-actions{width:100%}.report-actions .report-month-form{flex:1;min-width:210px}.report-export{width:100%;text-align:center}.expense-breakdown{grid-template-columns:1fr}}

/* Batch rápido: Ventas + Renovaciones operativas */
.sales-ops-summary,.renewal-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.sales-ops-summary>div,.renewal-dashboard>div{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 17px;min-width:0}
.sales-ops-summary span,.renewal-dashboard span{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sales-ops-summary strong,.renewal-dashboard strong{display:block;margin-top:6px;font-size:21px;line-height:1.1}
.renewal-dashboard .renewal-danger strong{color:#d92d20}.renewal-dashboard .renewal-warning strong{color:#b7791f}
.sale-history-head,.renewal-filterbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sale-history-head h2{margin:2px 0 0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.table-count{font-size:12px;color:var(--muted);font-weight:700}
.sale-history-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sale-history-tools input{min-width:250px}.sale-history-tools select{min-width:145px}
.sale-history-table-wrap{overflow-x:auto}
.filtered-empty{padding:18px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px;margin:12px 0 0}
.renewal-filterbar{padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin:16px 0}
.renewal-filterbar>input{min-width:280px;flex:1}.renewal-filter-buttons{display:flex;gap:6px;flex-wrap:wrap}
.renewal-filter{background:transparent;color:var(--text);border:1px solid var(--border);padding:8px 11px;border-radius:9px;font-size:12px;font-weight:700}
.renewal-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.renew-days-hint{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:700}
html[data-theme="dark"] .sales-ops-summary>div,html[data-theme="dark"] .renewal-dashboard>div,html[data-theme="dark"] .renewal-filterbar{background:#151d27;border-color:#2d3848}
html[data-theme="dark"] .renewal-filter{color:#dbe5f1;border-color:#344052}html[data-theme="dark"] .renewal-filter.active{color:#fff;border-color:var(--accent)}
html[data-theme="dark"] .renewal-dashboard .renewal-warning strong{color:#f7c56a}
@media(max-width:900px){.sales-ops-summary,.renewal-dashboard{grid-template-columns:1fr 1fr}.sale-history-tools{width:100%}.sale-history-tools input{flex:1;min-width:190px}}
@media(max-width:560px){.sales-ops-summary,.renewal-dashboard{grid-template-columns:1fr}.renewal-filterbar{align-items:stretch}.renewal-filterbar>input{min-width:0;width:100%}.renewal-filter-buttons{display:grid;grid-template-columns:1fr 1fr}.sale-history-tools{display:grid;grid-template-columns:1fr}.sale-history-tools input,.sale-history-tools select{min-width:0;width:100%}}

/* Batch rápido: Clientes + Catálogo + Wallet */
.client-page-head{align-items:end}.client-search{min-width:min(560px,100%)}
.client-summary-grid,.catalog-summary-grid,.wallet-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}.client-summary-grid>div,.catalog-summary-grid>div,.wallet-summary-grid>div{background:var(--panel,#fff);border:1px solid var(--line,#dbe3ef);border-radius:16px;padding:16px 18px}.client-summary-grid small,.catalog-summary-grid small,.wallet-summary-grid small{display:block;color:#68778d;margin-bottom:6px}.client-summary-grid strong,.catalog-summary-grid strong,.wallet-summary-grid strong{font-size:1.55rem}.wallet-summary-grid span{display:block;font-size:.8rem;color:#68778d;margin-top:3px}.clients-table td small{display:block;color:#68778d;margin-top:4px}.client-service-pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);font-size:.78rem;font-weight:800}.client-service-pill.is-empty{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.28);color:#68778d}.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:12px}.section-title-row h2{margin-bottom:2px}.muted{color:#68778d}.catalog-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px}.catalog-toolbar input{margin:0;flex:1}.catalog-filter-group{display:flex;gap:8px;flex-wrap:wrap}.catalog-filter{margin:0;background:transparent;color:inherit;border:1px solid var(--line,#dbe3ef);padding:10px 13px}.catalog-filter.active{background:#c4161c;color:#fff;border-color:#c4161c}.catalog-item[hidden]{display:none!important}
html[data-theme="dark"] .client-summary-grid>div,html[data-theme="dark"] .catalog-summary-grid>div,html[data-theme="dark"] .wallet-summary-grid>div{background:#151d27;border-color:#304052}html[data-theme="dark"] .client-summary-grid small,html[data-theme="dark"] .catalog-summary-grid small,html[data-theme="dark"] .wallet-summary-grid small,html[data-theme="dark"] .wallet-summary-grid span,html[data-theme="dark"] .clients-table td small,html[data-theme="dark"] .muted{color:#94a3b8!important}html[data-theme="dark"] .catalog-filter{border-color:#3a485a;background:#121923;color:#dbe5f3}html[data-theme="dark"] .catalog-filter.active{background:#c4161c;color:#fff;border-color:#c4161c}
@media(max-width:900px){.client-summary-grid,.catalog-summary-grid,.wallet-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-main-grid{grid-template-columns:1fr}.catalog-toolbar{align-items:stretch;flex-direction:column}}@media(max-width:560px){.client-summary-grid,.catalog-summary-grid,.wallet-summary-grid{grid-template-columns:1fr}.catalog-filter-group{display:grid;grid-template-columns:1fr 1fr}.catalog-filter{width:100%}}

/* Clientes: servicio actual sin globos/pills */
.client-service-inline{display:flex;align-items:center;gap:9px;min-width:110px}.client-service-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12);flex:0 0 auto}.client-service-inline b{display:block;font-size:.86rem;line-height:1.15;color:inherit}.client-service-inline small{display:block;margin-top:3px!important;font-size:.75rem;color:#68778d!important}.client-service-empty{font-size:.82rem;color:#7b8798;font-weight:700}.clients-table td:nth-child(3){min-width:130px}
html[data-theme="dark"] .client-service-inline small{color:#94a3b8!important}html[data-theme="dark"] .client-service-empty{color:#94a3b8}

/* ===== StreamDesk batch: Plataformas + Planes + Proveedores + Gastos ===== */
.module-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.module-kpi-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.module-kpi{background:var(--card,#fff);border:1px solid var(--border,#dbe2ea);border-radius:15px;padding:16px 18px;min-height:104px;display:flex;flex-direction:column;justify-content:center}.module-kpi small{font-size:11px;color:var(--muted,#64748b);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.module-kpi strong{font-size:25px;line-height:1.15;margin-top:6px}.module-kpi span{font-size:12px;color:var(--muted,#64748b);margin-top:5px}.module-kpi .kpi-text{font-size:18px;line-height:1.25}
.module-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:16px 0}.module-toolbar.compact{margin:14px 0}.module-search-wrap{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;border:1px solid var(--border,#dbe2ea);background:var(--card,#fff);border-radius:11px;padding:0 12px;height:44px}.module-search-wrap span{font-size:18px;color:var(--muted,#64748b)}.module-search-wrap input{border:0!important;box-shadow:none!important;background:transparent!important;margin:0!important;padding:0!important;height:auto!important;width:100%;min-width:0}.module-search-wrap:focus-within{border-color:#c51018;box-shadow:0 0 0 2px rgba(197,16,24,.09)}.module-filter-group{display:flex;gap:7px;flex-wrap:wrap}.module-filter{height:40px;padding:0 13px;border:1px solid var(--border,#dbe2ea);border-radius:10px;background:var(--card,#fff);color:inherit;font-weight:700;cursor:pointer}.module-filter:hover,.module-filter.active{border-color:#c51018;color:#fff;background:#c51018}.module-select-filter{height:44px;min-width:200px;margin:0!important}.module-empty-filter{padding:22px;text-align:center;color:var(--muted,#64748b);font-size:13px}.module-empty-filter[hidden]{display:none!important}
.pricing-kpis{margin-top:20px}.pricing-toolbar{margin-bottom:14px}.pricing-filter-row[hidden]{display:none!important}
.services-kpis{margin-top:20px}.services-toolbar{margin-top:16px}.service-filter-tile[hidden]{display:none!important}.services-empty{grid-column:1/-1;border:1px dashed var(--border,#dbe2ea);border-radius:12px}
.supplier-layout{grid-template-columns:.78fr 1.22fr;align-items:start}.supplier-create-card,.supplier-list-card,.expense-create-card,.expense-list-card{margin:0}.supplier-list-head{margin-bottom:4px}.supplier-table-wrap,.expense-table-wrap{overflow:auto}.supplier-table td:first-child,.expense-table-wrap td:nth-child(2){min-width:150px}.supplier-table td strong,.expense-table-wrap td strong{display:block}.supplier-table td small,.expense-table-wrap td small{display:block;color:var(--muted,#64748b);margin-top:3px}.status-inline{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.status-inline i{width:8px;height:8px;border-radius:50%;display:block}.status-inline.success{color:#15803d}.status-inline.success i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}.status-inline.muted{color:var(--muted,#64748b)}.status-inline.muted i{background:#94a3b8}.table-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.table-actions form{margin:0}.table-actions .mini{white-space:nowrap}.supplier-row[hidden],.expense-row[hidden]{display:none!important}
.expense-page-head{align-items:flex-end}.month-nav{display:flex;align-items:center;gap:8px}.month-nav form{display:flex;align-items:center;gap:8px}.month-nav input{height:42px;margin:0!important}.month-nav .btn{height:42px;display:inline-flex;align-items:center}.expense-kpis{margin-top:20px}.expense-layout{grid-template-columns:.78fr 1.22fr;align-items:start}.expense-money{margin-top:5px}.expense-money input{width:100%}.expense-category-summary{margin-top:18px;border-top:1px solid var(--border,#e5e7eb);padding-top:16px}.expense-category-summary h3{font-size:15px;margin:0 0 10px}.expense-category-line{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px dashed var(--border,#e5e7eb);font-size:13px}.expense-category-line:last-child{border-bottom:0}.expense-category-line span{font-weight:600}.expense-category-line small{color:var(--muted,#64748b);font-weight:500;margin-left:4px}
html[data-theme="dark"] .module-kpi,html[data-theme="dark"] .module-search-wrap,html[data-theme="dark"] .module-filter,html[data-theme="dark"] .supplier-create-card,html[data-theme="dark"] .supplier-list-card,html[data-theme="dark"] .expense-create-card,html[data-theme="dark"] .expense-list-card{background:#151d27!important;border-color:#334155!important;color:#f7f9fc!important}html[data-theme="dark"] .module-filter.active,html[data-theme="dark"] .module-filter:hover{background:#d81720!important;border-color:#d81720!important;color:#fff!important}html[data-theme="dark"] .module-search-wrap input,html[data-theme="dark"] .module-select-filter,html[data-theme="dark"] .month-nav input{color:#f4f7fb!important;background:#111923!important;border-color:#334155!important}html[data-theme="dark"] .supplier-table th,html[data-theme="dark"] .supplier-table td,html[data-theme="dark"] .expense-table-wrap th,html[data-theme="dark"] .expense-table-wrap td{border-color:#2d3948!important}html[data-theme="dark"] .expense-category-line{border-color:#2d3948!important}
@media(max-width:1100px){.module-kpi-grid,.module-kpi-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.supplier-layout,.expense-layout{grid-template-columns:1fr}.module-toolbar{align-items:stretch;flex-direction:column}.module-filter-group{width:100%}.module-filter{flex:1}.module-select-filter{width:100%}.expense-page-head{align-items:flex-start}.month-nav{width:100%}.month-nav form{flex:1}.month-nav input{flex:1}}
@media(max-width:650px){.module-kpi-grid,.module-kpi-grid-3{grid-template-columns:1fr 1fr;gap:9px}.module-kpi{padding:13px;min-height:92px}.module-kpi strong{font-size:21px}.module-kpi .kpi-text{font-size:15px}.module-filter-group{display:grid;grid-template-columns:1fr 1fr}.module-filter{width:100%}.month-nav{display:grid;grid-template-columns:auto 1fr auto}.month-nav form{display:grid;grid-template-columns:1fr auto;min-width:0}.supplier-table,.expense-table-wrap table{min-width:720px}}


/* Batch rápido: equipo, avisos y cobros */
.quick-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}.mini-kpi{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-kpi span{color:var(--muted);font-size:12px}.mini-kpi strong{font-size:22px;color:var(--text)}
.list-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 18px;flex-wrap:wrap}.list-tools>input[type=search]{flex:1;min-width:260px;margin:0}.filter-pills{display:flex;gap:8px;flex-wrap:wrap}.filter-pills button{width:auto;margin:0;padding:9px 13px;border-radius:10px;background:transparent;color:var(--text);border:1px solid var(--border);font-weight:700}.filter-pills button:hover,.filter-pills button.active{background:var(--accent);border-color:var(--accent);color:#fff}.team-card[hidden],.notification-card[hidden],.collection-row[hidden],.payment-account-card[hidden]{display:none!important}
.notification-kpis{margin-top:4px}.notification-tools{margin-bottom:16px}.payment-tools{margin:18px 0}.collection-tools{margin-bottom:16px}
@media(max-width:900px){.quick-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.list-tools{align-items:stretch}.filter-pills{width:100%}.filter-pills button{flex:1}}
@media(max-width:560px){.quick-kpis{grid-template-columns:1fr 1fr}.mini-kpi{padding:12px}.mini-kpi strong{font-size:18px}.filter-pills{display:grid;grid-template-columns:1fr 1fr}.list-tools>input[type=search]{min-width:100%}}

/* StreamDesk 2026-08-26 — buscadores Plataformas / Planes y precios */
.services-toolbar .module-search-wrap,
.pricing-toolbar .module-search-wrap{
  height:46px;
  padding:0 14px;
  border:1px solid var(--border,#dbe2ea);
  border-radius:12px;
  background:var(--card,#fff);
  overflow:hidden;
}
.services-toolbar .module-search-wrap input[type="search"],
.pricing-toolbar .module-search-wrap input[type="search"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  outline:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--text,#19243a)!important;
  font:inherit;
  line-height:1.2;
  padding:0 2px!important;
  margin:0!important;
  height:44px!important;
}
.services-toolbar .module-search-wrap input[type="search"]::-webkit-search-decoration,
.services-toolbar .module-search-wrap input[type="search"]::-webkit-search-cancel-button,
.services-toolbar .module-search-wrap input[type="search"]::-webkit-search-results-button,
.services-toolbar .module-search-wrap input[type="search"]::-webkit-search-results-decoration,
.pricing-toolbar .module-search-wrap input[type="search"]::-webkit-search-decoration,
.pricing-toolbar .module-search-wrap input[type="search"]::-webkit-search-cancel-button,
.pricing-toolbar .module-search-wrap input[type="search"]::-webkit-search-results-button,
.pricing-toolbar .module-search-wrap input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
}
.services-toolbar .module-search-wrap:focus-within,
.pricing-toolbar .module-search-wrap:focus-within{
  border-color:var(--accent,#c51018);
  box-shadow:0 0 0 3px rgba(197,16,24,.10);
}
.services-toolbar .module-search-wrap span,
.pricing-toolbar .module-search-wrap span{
  flex:0 0 auto;
  font-size:17px;
  line-height:1;
  color:var(--muted,#64748b);
}
html[data-theme="dark"] .services-toolbar .module-search-wrap,
html[data-theme="dark"] .pricing-toolbar .module-search-wrap{
  background:#151d27!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .services-toolbar .module-search-wrap input[type="search"],
html[data-theme="dark"] .pricing-toolbar .module-search-wrap input[type="search"]{
  background:transparent!important;
  color:#f4f7fb!important;
}
html[data-theme="dark"] .services-toolbar .module-search-wrap:focus-within,
html[data-theme="dark"] .pricing-toolbar .module-search-wrap:focus-within{
  border-color:#d81720!important;
  box-shadow:0 0 0 3px rgba(216,23,32,.16)!important;
}


/* V3.7.6 - Usuarios: flujo vertical y acciones alineadas */
.users-grid{
  grid-template-columns:1fr!important;
  gap:18px;
}
.users-grid>section{
  width:100%;
}
.users-grid .team-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.users-grid .team-card{
  width:100%;
}
.team-actions{
  display:grid!important;
  grid-template-columns:auto auto minmax(280px,1fr) auto;
  gap:10px!important;
  align-items:end;
  padding-top:14px;
  margin-top:14px!important;
  border-top:1px solid #e7eaf0;
}
.team-actions>button,
.team-actions>form>button{
  min-height:42px;
  margin:0!important;
  white-space:nowrap;
}
.team-actions form{
  margin:0!important;
}
.sensitive-inline-form{
  display:grid;
  grid-template-columns:minmax(170px,1fr) auto;
  gap:8px;
  align-items:end;
}
.sensitive-inline-form input{
  margin:0!important;
  min-height:42px;
}
.sensitive-inline-form button{
  min-height:42px;
}
.team-save-btn{
  background:var(--accent)!important;
}
html[data-theme="dark"] .team-actions{
  border-top-color:var(--sd-border)!important;
}
@media(max-width:1000px){
  .team-actions{grid-template-columns:1fr 1fr;}
  .sensitive-inline-form{grid-column:1/-1;grid-template-columns:1fr auto;}
  .team-actions>button,.team-actions>form>button{width:100%;}
}
@media(max-width:680px){
  .team-two{grid-template-columns:1fr;}
  .team-actions{grid-template-columns:1fr;}
  .sensitive-inline-form{grid-column:auto;grid-template-columns:1fr;}
}

/* Botones secundarios reutilizables */
.secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 14px;
    border:1px solid var(--border,#d9e1ec);
    border-radius:10px;
    background:var(--card,#fff);
    color:var(--text,#19243a)!important;
    text-decoration:none!important;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.secondary-btn:hover{
    background:var(--surface-soft,#f6f8fb);
    border-color:var(--accent);
    text-decoration:none!important;
}

.secondary-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff!important;
    outline:none!important;
}

.financial-alert-filters{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}

@media(max-width:900px){
    .financial-alert-filters{
        justify-content:flex-start;
    }
}

@media(max-width:620px){
    .financial-alert-filters .secondary-btn{
        flex:1;
        min-width:90px;
    }
}

[data-theme="dark"] .secondary-btn{
    background:#151d27;
    border-color:#334155;
    color:#eef4ff!important;
}

[data-theme="dark"] .secondary-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff!important;
}

/* ===== Navegación global: Volver ===== */
.global-back-wrap{
    display:flex;
    align-items:center;
    margin:0 0 18px 0;
}

.global-back-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:8px 14px;
    border:1px solid var(--border,#d7dee8);
    border-radius:10px;
    background:var(--card,#fff);
    color:var(--text,#172033);
    font:inherit;
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.global-back-btn:hover{
    background:var(--surface-soft,#f5f7fa);
    border-color:var(--accent,#b31217);
}

.global-back-btn:active{
    transform:translateY(1px);
}

.global-back-btn:focus-visible{
    outline:3px solid color-mix(in srgb,var(--accent,#b31217) 25%,transparent);
    outline-offset:2px;
}

[data-theme="dark"] .global-back-btn{
    background:#151d27;
    border-color:#334155;
    color:#eef4ff;
}

[data-theme="dark"] .global-back-btn:hover{
    background:#1d2836;
}

@media(max-width:700px){
    .global-back-wrap{
        margin-bottom:14px;
    }

    .global-back-btn{
        min-height:44px;
        padding:10px 14px;
        font-size:14px;
    }
}

/* ===== Usuarios · KPI Cards ===== */

.team-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin:20px 0 22px;
}

.team-kpi{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:118px;
    padding:18px;
    border:1px solid var(--border,#dde3ec);
    border-radius:16px;
    background:var(--card,#fff);
    box-shadow:0 8px 24px rgba(15,23,42,.07);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.team-kpi:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(15,23,42,.11);
}

.team-kpi::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--team-kpi-accent);
}

.team-kpi-icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    font-size:21px;
    font-weight:900;
    color:var(--team-kpi-accent);
    background:color-mix(in srgb,var(--team-kpi-accent) 11%,transparent);
}

.team-kpi-content{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.team-kpi-label{
    margin-bottom:2px;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted,#667085);
}

.team-kpi-value{
    display:block;
    margin:1px 0 3px;
    font-size:32px;
    line-height:1;
    letter-spacing:-.04em;
    color:var(--text,#172033);
}

.team-kpi small{
    color:var(--muted,#748094);
    font-size:12px;
    line-height:1.25;
}

.team-kpi-total{
    --team-kpi-accent:#4f6bed;
}

.team-kpi-active{
    --team-kpi-accent:#159a65;
}

.team-kpi-sellers{
    --team-kpi-accent:#8b5cf6;
}

.team-kpi-blocked{
    --team-kpi-accent:#7c8798;
}

.team-kpi-blocked.has-alert{
    --team-kpi-accent:#d14343;
}

[data-theme="dark"] .team-kpi{
    background:#151d27;
    border-color:#293548;
    box-shadow:0 8px 24px rgba(0,0,0,.20);
}

[data-theme="dark"] .team-kpi-value{
    color:#f3f7ff;
}

@media(max-width:1050px){
    .team-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .team-kpi-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .team-kpi{
        min-height:105px;
        padding:14px 12px;
        gap:10px;
    }

    .team-kpi-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:18px;
    }

    .team-kpi-value{
        font-size:27px;
    }

    .team-kpi small{
        font-size:11px;
    }
}


/* ===== Soporte · sonido obligatorio ===== */
.sound-always-on{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid var(--border,#dbe2ea);
    border-radius:10px;
    background:var(--card,#fff);
    color:var(--text,#172033);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

html[data-theme="dark"] .sound-always-on{
    background:#151d27;
    border-color:#334155;
    color:#eef4ff;
}

/* ==========================================================
   SOPORTE ADMIN · BANDEJA + VENTANA DE CHAT
   ========================================================== */

.support-admin-inbox-only{
    grid-template-columns:1fr !important;
}

.support-admin-inbox-only .support-company-list{
    width:100%;
    max-width:none;
}

.support-admin-inbox-only .support-admin-chat{
    display:none;
}


/* Ventana flotante */
.support-admin-chat-modal{
    position:fixed !important;
    z-index:1200;
    right:24px;
    bottom:24px;
    width:min(440px,calc(100vw - 32px));
    height:min(680px,calc(100vh - 48px));
    display:flex !important;
    flex-direction:column;
    overflow:hidden;

    background:var(--card,#fff);
    border:1px solid var(--border,#dbe2ea);
    border-radius:20px;

    box-shadow:
        0 28px 70px rgba(15,23,42,.25),
        0 8px 24px rgba(15,23,42,.12);
}


/* Encabezado */
.support-admin-chat-modal .chat-thread-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:14px 15px;
    margin:0;

    border-bottom:1px solid var(--border,#e3e8ef);
    background:var(--card,#fff);
}

.admin-chat-company{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-chat-company h3{
    margin:0;
    font-size:15px;
    line-height:1.2;
}

.admin-chat-company small{
    display:block;
    max-width:220px;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--muted,#758096);
}

.admin-chat-avatar{
    flex:0 0 40px;
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:color-mix(in srgb,var(--accent,#b31217) 13%,transparent);
    color:var(--accent,#b31217);

    font-size:17px;
    font-weight:900;
}


/* Acciones cabecera */
.admin-chat-head-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
}

.admin-chat-head-actions form{
    margin:0;
}

.admin-chat-head-actions button{
    min-height:34px;
    padding:7px 9px;
    font-size:11px;
    border-radius:9px;
}

.admin-chat-close{
    width:35px;
    height:35px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--border,#dbe2ea);
    border-radius:10px;

    background:var(--surface-soft,#f5f7fa);
    color:var(--text,#172033) !important;

    text-decoration:none !important;
    font-size:16px;
    font-weight:800;

    transition:
        background .15s ease,
        transform .15s ease;
}

.admin-chat-close:hover{
    background:#eef1f5;
}

.admin-chat-close:active{
    transform:scale(.96);
}


/* Mensajes */
.support-admin-chat-modal .admin-chat-message-window{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;

    padding:16px 14px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb,var(--surface-soft,#f6f8fa) 75%,transparent),
            var(--card,#fff)
        );
}

.support-admin-chat-modal .chat-msg{
    max-width:82%;
    margin-bottom:10px;
    padding:10px 12px;
    border-radius:15px;
}

.support-admin-chat-modal .chat-msg.mine{
    margin-left:auto;
    border-bottom-right-radius:5px;
}

.support-admin-chat-modal .chat-msg.theirs{
    margin-right:auto;
    border-bottom-left-radius:5px;
}

.support-admin-chat-modal .chat-msg small{
    display:block;
    margin-top:4px;
    font-size:10px;
    opacity:.7;
}


/* Caja de respuesta */
.support-admin-chat-modal .chat-compose{
    flex:0 0 auto;

    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;

    padding:11px 12px;

    border-top:1px solid var(--border,#e3e8ef);
    background:var(--card,#fff);
}

.support-admin-chat-modal .chat-compose input{
    min-width:0;
    min-height:42px;
    margin:0;
    border-radius:12px;
}

.support-admin-chat-modal .chat-compose button{
    min-height:42px;
    margin:0;
    padding:9px 16px;
    border-radius:12px;
}


/* Ayuda cuando ninguna conversación está abierta */
.admin-inbox-help{
    text-align:center;
    padding:30px 20px;
}

.admin-inbox-help-icon{
    margin-bottom:10px;
    font-size:30px;
}


/* Tema oscuro */
html[data-theme="dark"] .support-admin-chat-modal,
[data-theme="dark"] .support-admin-chat-modal{
    background:#111923;
    border-color:#2b3748;
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(0,0,0,.30);
}

html[data-theme="dark"] .support-admin-chat-modal .chat-thread-head,
html[data-theme="dark"] .support-admin-chat-modal .chat-compose,
[data-theme="dark"] .support-admin-chat-modal .chat-thread-head,
[data-theme="dark"] .support-admin-chat-modal .chat-compose{
    background:#151d27;
    border-color:#293548;
}

html[data-theme="dark"] .support-admin-chat-modal .admin-chat-message-window,
[data-theme="dark"] .support-admin-chat-modal .admin-chat-message-window{
    background:#0f1720;
}

html[data-theme="dark"] .admin-chat-close,
[data-theme="dark"] .admin-chat-close{
    background:#202b39;
    border-color:#344155;
    color:#f4f7fb !important;
}


/* Tablet */
@media(max-width:900px){
    .support-admin-chat-modal{
        right:16px;
        bottom:16px;
        width:min(430px,calc(100vw - 32px));
        height:min(650px,calc(100vh - 32px));
    }
}


/* Teléfono */
@media(max-width:600px){
    .support-admin-chat-modal{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        max-width:none !important;
        max-height:none !important;

        border:0;
        border-radius:0;
    }

    .support-admin-chat-modal .chat-thread-head{
        padding:12px;
    }

    .admin-chat-company small{
        max-width:150px;
    }

    .admin-chat-head-actions button{
        padding:7px 8px;
        font-size:10px;
    }

    .support-admin-chat-modal .admin-chat-message-window{
        padding:13px 10px;
    }

    .support-admin-chat-modal .chat-compose{
        padding:
            10px
            10px
            max(10px,env(safe-area-inset-bottom));
    }
}

/* =========================================================
   BANDEJA SOPORTE · CONVERSACIONES VISIBLES Y PENDIENTES
   ========================================================= */

.support-company-list{
    display:flex;
    flex-direction:column;
    gap:9px;
    background:transparent !important;
}

/* Estado normal: siempre distinguible */
.support-company-list .support-thread-card{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding:13px 14px;

    border:1px solid #344154;
    border-radius:13px;

    background:#18212c;
    color:#eef4ff !important;

    text-decoration:none !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.13);

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.support-company-list .support-thread-card + .support-thread-card{
    margin-top:0;
}

.support-company-list .support-thread-card .inbox-company-main span{
    color:#f4f7fb;
    font-weight:800;
}

.support-company-list .support-thread-card .inbox-company-main small{
    color:#aeb9c8;
}


/* Hover: un poco más fuerte, pero no depende de él */
.support-company-list .support-thread-card:hover{
    background:#202b38;
    border-color:#56667a;
    color:#fff !important;

    transform:translateY(-1px);

    box-shadow:
        0 7px 18px rgba(0,0,0,.20);
}


/* Conversación seleccionada */
.support-company-list .support-thread-card.selected{
    background:#28222a;
    border-color:var(--accent,#e52b32);

    box-shadow:
        inset 3px 0 0 var(--accent,#e52b32),
        0 6px 18px rgba(0,0,0,.18);
}


/* Tiene mensajes pendientes */
.support-company-list .support-thread-card.has-unread{
    background:
        linear-gradient(
            90deg,
            rgba(229,43,50,.17),
            rgba(229,43,50,.055)
        ),
        #19212b;

    border-color:rgba(239,68,68,.72);

    box-shadow:
        inset 4px 0 0 var(--accent,#e52b32),
        0 7px 22px rgba(0,0,0,.20);
}

.support-company-list .support-thread-card.has-unread .inbox-company-main span{
    color:#ff7277;
}

.support-company-list .support-thread-card.has-unread:hover{
    background:
        linear-gradient(
            90deg,
            rgba(229,43,50,.24),
            rgba(229,43,50,.08)
        ),
        #202731;

    border-color:#ff5960;
}


/* Contador visible dentro de la conversación */
.thread-unread-wrap{
    display:flex;
    align-items:center;
    gap:6px;
}

.thread-unread-count{
    min-width:24px;
    height:24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 7px;

    border-radius:999px;

    background:var(--accent,#e52b32) !important;
    color:#fff !important;

    font-size:11px !important;
    font-weight:900;

    box-shadow:
        0 0 0 3px rgba(229,43,50,.14);
}

.thread-new-label{
    color:#ff8589;
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}


/* Metadatos */
.support-company-list .inbox-company-meta{
    min-width:90px;
}

.support-company-list .inbox-company-meta em.open{
    background:#dff8e6;
    color:#176536;
    font-weight:800;
}

.support-company-list .inbox-company-meta small{
    color:#aab5c4;
}


/* Tema claro, por si se usa */
html:not([data-theme="dark"]) .support-company-list .support-thread-card{
    background:#fff;
    border-color:#d8e0ea;
    color:#172033 !important;
}

html:not([data-theme="dark"]) .support-company-list .support-thread-card .inbox-company-main span{
    color:#172033;
}

html:not([data-theme="dark"]) .support-company-list .support-thread-card .inbox-company-main small{
    color:#68758a;
}

html:not([data-theme="dark"]) .support-company-list .support-thread-card.has-unread{
    background:#fff5f5;
    border-color:#ef8b8f;
}

html:not([data-theme="dark"]) .support-company-list .support-thread-card.has-unread .inbox-company-main span{
    color:#b91c24;
}


/* Móvil */
@media(max-width:600px){
    .support-company-list .support-thread-card{
        padding:12px;
        gap:9px;
    }

    .thread-new-label{
        display:none;
    }

    .thread-unread-count{
        min-width:22px;
        height:22px;
        font-size:10px !important;
    }

    .support-company-list .inbox-company-meta{
        min-width:70px;
    }
}

/* ===== Wallet · respetar color de identidad de la empresa ===== */

.wallet-balance-card{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent,#4f6bed) 72%,#111827),
            var(--accent,#4f6bed)
        ) !important;

    color:#fff !important;

    border:
        1px solid
        color-mix(in srgb,var(--accent,#4f6bed) 68%,#ffffff 20%) !important;

    box-shadow:
        0 12px 30px
        color-mix(in srgb,var(--accent,#4f6bed) 22%,transparent) !important;
}

.wallet-balance-card small,
.wallet-balance-card strong{
    color:#fff !important;
}

.wallet-balance-card small{
    opacity:.82;
}

/* Saldo que aparece en el dashboard del vendedor */
.dashboard-balance-chip strong{
    color:var(--accent,#4f6bed) !important;
}

.dashboard-balance-chip:hover{
    border-color:
        color-mix(in srgb,var(--accent,#4f6bed) 45%,#dbe2ea) !important;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 7%,var(--card,#fff)) !important;
}

/* Tema oscuro */
html[data-theme="dark"] .wallet-balance-card{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent,#4f6bed) 42%,#111827),
            color-mix(in srgb,var(--accent,#4f6bed) 72%,#111827)
        ) !important;
}

/* ==========================================================
   STREAMDESK · COLOR DE MARCA GLOBAL POR EMPRESA
   El color configurado en la empresa controla acciones,
   navegación, tarjetas y elementos comerciales.
   Los estados de peligro/error permanecen rojos.
   ========================================================== */

/* --- Navegación / botones normales --- */
.table-action-btn,
.ds-unit-filter.active,
.inv-filter.active{
    background:var(--accent,#4f6bed)!important;
    border-color:var(--accent,#4f6bed)!important;
    color:#fff!important;
}

.table-action-btn:hover,
.ds-unit-filter.active:hover,
.inv-filter.active:hover{
    filter:brightness(.92);
}

/* --- Dashboard --- */
.kpi-icon{
    background:color-mix(in srgb,var(--accent,#4f6bed) 11%,transparent)!important;
    color:var(--accent,#4f6bed)!important;
}

.sidebar nav a:hover{
    background:color-mix(in srgb,var(--accent,#4f6bed) 9%,transparent)!important;
    color:var(--accent,#4f6bed)!important;
}

.brand-logo{
    background:
        linear-gradient(
            135deg,
            var(--accent,#4f6bed),
            color-mix(in srgb,var(--accent,#4f6bed) 48%,#111827)
        )!important;
}

.hero-strip{
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb,var(--accent,#4f6bed) 38%,#111827),
            var(--accent,#4f6bed)
        )!important;
}

.bar-fill{
    background:
        linear-gradient(
            var(--accent,#4f6bed),
            color-mix(in srgb,var(--accent,#4f6bed) 58%,#fff)
        )!important;
}

/* --- Wallet / saldo vendedor / ventas vendedor --- */
.wallet-balance-card,
.wallet-sale-banner{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent,#4f6bed) 62%,#111827),
            var(--accent,#4f6bed)
        )!important;

    border:
        1px solid
        color-mix(in srgb,var(--accent,#4f6bed) 65%,#fff 18%)!important;

    box-shadow:
        0 12px 30px
        color-mix(in srgb,var(--accent,#4f6bed) 20%,transparent)!important;

    color:#fff!important;
}

.wallet-balance-card strong,
.wallet-balance-card small,
.wallet-sale-banner strong,
.wallet-sale-banner a{
    color:#fff!important;
}

.dashboard-balance-chip strong,
.dashboard-rate strong{
    color:var(--accent,#4f6bed)!important;
}

/* --- Catálogo / precios comerciales --- */
.catalog-card>span{
    color:var(--accent,#4f6bed)!important;
}

.price-tags .tag-delete{
    color:var(--accent,#4f6bed)!important;
}

/* --- Tipo de cambio / configuraciones comerciales --- */
.rate-choice-form.is-active{
    box-shadow:
        inset 0 0 0 2px var(--accent,#4f6bed)!important;
}

.rate-current-line>strong,
.operation-rate-strip strong{
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 12%,transparent)!important;

    color:var(--accent,#4f6bed)!important;
}

/* --- Ventas --- */
/*
   La insignia de vencimiento NO se considera peligro por sí misma.
   Usa el color de la empresa.
*/
.sale-expiration-badge{
    border-color:
        color-mix(in srgb,var(--accent,#4f6bed) 55%,#dbe2ea)!important;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 7%,#fff)!important;
}

.sale-expiration-badge span,
.sale-expiration-badge b{
    color:var(--accent,#4f6bed)!important;
}

/* Indicadores comerciales y selecciones */
.new-pill,
.chart-toggle.active,
.btn,
.button-link,
button:not(.danger-btn):not(.danger-outline):not(.danger-outline-btn):not(.wallet-minus){
    --normal-action-accent:var(--accent,#4f6bed);
}

/* --- Usuarios / tarjetas KPI --- */
.team-kpi-total,
.team-kpi-sellers{
    --team-kpi-accent:var(--accent,#4f6bed)!important;
}

/* --- Chat / soporte: acento normal --- */
.admin-chat-avatar{
    color:var(--accent,#4f6bed)!important;
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 13%,transparent)!important;
}

/* ==========================================================
   TEMA OSCURO
   ========================================================== */

html[data-theme="dark"] .wallet-balance-card,
html[data-theme="dark"] .wallet-sale-banner{
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent,#4f6bed) 38%,#0f1720),
            color-mix(in srgb,var(--accent,#4f6bed) 72%,#111827)
        )!important;
}

html[data-theme="dark"] .sale-expiration-badge{
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 13%,#111827)!important;

    border-color:
        color-mix(in srgb,var(--accent,#4f6bed) 58%,#344154)!important;
}

html[data-theme="dark"] .sale-expiration-badge span,
html[data-theme="dark"] .sale-expiration-badge b,
html[data-theme="dark"] .rate-current-line>strong,
html[data-theme="dark"] .operation-rate-strip strong{
    color:
        color-mix(in srgb,var(--accent,#4f6bed) 75%,#fff)!important;
}

/* ==========================================================
   IMPORTANTE:
   Estos estados conservan rojo porque significan peligro.
   ========================================================== */

.alert.danger,
.badge.expired,
.danger-zone,
.user-state.off,
.danger-btn,
.danger-outline,
.danger-outline-btn,
.wallet-minus,
.topup-status-rejected,
.stream-modal-icon.danger,
.profile-status.occupied,
.catalog-stock.sold-out,
.account-main-status.is-warning,
.risk-critical,
.is-negative{
    /* Se mantienen con su color semántico original. */
}


/* ==========================================================
   ACCESO TEMPORAL · CONTRASEÑA SIEMPRE VISIBLE
   ========================================================== */

.security-temp-card .credential-box{
    display:flex !important;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;

    margin:18px 0;
    padding:14px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:14px;

    background:var(--surface-soft,#f5f7fa);
}

#temporary-password{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    min-width:160px;
    min-height:46px;

    padding:10px 16px;

    border:2px dashed var(--accent,#4f6bed);
    border-radius:11px;

    background:#fff !important;
    color:#111827 !important;

    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:20px !important;
    font-weight:900 !important;
    letter-spacing:.08em;

    opacity:1 !important;
    visibility:visible !important;

    user-select:all;
    -webkit-user-select:all;
}

.security-temp-card .credential-box button{
    min-height:46px;
    margin:0;
}

html[data-theme="dark"] .security-temp-card .credential-box{
    background:#111923;
    border-color:#334155;
}

html[data-theme="dark"] #temporary-password{
    background:#f8fafc !important;
    color:#111827 !important;
}

@media(max-width:600px){
    .security-temp-card .credential-box{
        display:grid !important;
        grid-template-columns:1fr;
    }

    #temporary-password{
        width:100%;
        min-width:0;
    }

    .security-temp-card .credential-box button{
        width:100%;
    }
}

/* ==========================================================
   USUARIOS · TARJETAS TIPO CATÁLOGO
   ========================================================== */

.team-list{
    display:grid !important;
    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));
    gap:16px !important;
    align-items:start;
}

.team-card{
    position:relative;
    overflow:hidden;

    margin:0 !important;
    padding:0 !important;

    border:1px solid var(--border,#dbe2ea) !important;
    border-radius:17px !important;

    background:var(--card,#fff) !important;

    box-shadow:
        0 7px 22px rgba(15,23,42,.07);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.team-card:hover{
    transform:translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 38%,
            var(--border,#dbe2ea)
        ) !important;

    box-shadow:
        0 12px 30px rgba(15,23,42,.11);
}


/* Cabecera siempre visible */
.team-card .team-card-head{
    min-height:88px;

    margin:0 !important;
    padding:17px 17px 14px;

    border-bottom:1px solid var(--border,#e5e9ef);
}

.team-card .team-card-head b{
    display:block;

    margin-bottom:5px;

    color:var(--text,#172033);

    font-size:17px;
    font-weight:850;
}

.team-card .team-card-head small{
    color:var(--muted,#748094);
}


/* Barra de color de empresa */
.team-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    right:0;

    height:4px;

    background:var(--accent,#4f6bed);
}


/* ==========================================================
   FORMULARIO PLEGADO
   ========================================================== */

.team-card.team-card-collapsed
.team-edit-form > :not(.team-card-head){
    display:none !important;
}

.team-card .team-edit-form{
    margin:0 !important;
}

.team-card.is-editing .team-edit-form{
    padding-bottom:5px;
}

.team-card.is-editing
.team-edit-form > :not(.team-card-head){
    margin-left:16px;
    margin-right:16px;
}

.team-card.is-editing
.team-edit-form > label:first-of-type{
    margin-top:15px;
}


/* ==========================================================
   TRES ACCIONES PRINCIPALES
   ========================================================== */

.team-card-primary-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;

    padding:13px 14px 14px;

    border-top:1px solid var(--border,#e5e9ef);

    background:
        color-mix(
            in srgb,
            var(--card,#fff) 93%,
            var(--accent,#4f6bed)
        );
}

.team-card-primary-actions form{
    margin:0 !important;
}

.team-card-primary-actions button{
    width:100%;
    min-height:39px;

    margin:0 !important;
    padding:8px 9px !important;

    border-radius:10px !important;

    font-size:12px !important;
    font-weight:800 !important;
}


/* Editar */
.team-card-edit-btn{
    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 48%,
            #dbe2ea
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 8%,
            #fff
        ) !important;

    color:var(--accent,#4f6bed) !important;
}

.team-card-edit-btn:hover{
    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 14%,
            #fff
        ) !important;
}


/* Bloquear / activar */
.team-card-block-btn{
    border:1px solid #d8dee8 !important;
    background:#fff !important;
    color:#374151 !important;
}

.team-card-block-btn:hover{
    border-color:var(--accent,#4f6bed) !important;
    color:var(--accent,#4f6bed) !important;
}


/* Eliminar sigue siendo semánticamente rojo */
.team-card-delete-btn{
    border:1px solid #efb4b7 !important;
    background:#fff5f5 !important;
    color:#b4232a !important;
}

.team-card-delete-btn:hover{
    background:#fee7e8 !important;
    border-color:#df7479 !important;
}


/* ==========================================================
   ACCIONES SOLO DURANTE EDICIÓN
   ========================================================== */

.team-edit-actions{
    display:none !important;

    margin:0 !important;
    padding:4px 16px 16px;

    border:0 !important;
}

.team-card.is-editing .team-edit-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:9px;
}

.team-card.is-editing .team-edit-actions
.team-save-btn{
    min-height:40px;

    background:var(--accent,#4f6bed) !important;
    border-color:var(--accent,#4f6bed) !important;
    color:#fff !important;
}


/* Restablecer acceso queda dentro del modo Editar */
.team-edit-actions .sensitive-inline-form{
    width:100%;

    margin-top:7px;

    padding:12px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:12px;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 5%,
            var(--card,#fff)
        );
}


/* Cuenta protegida */
.team-card-protected{
    opacity:.96;
}

.team-card-protected::after{
    content:"Cuenta protegida";

    position:absolute;
    top:13px;
    right:13px;

    padding:5px 8px;

    border-radius:999px;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 11%,
            #fff
        );

    color:var(--accent,#4f6bed);

    font-size:9px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}


/* ==========================================================
   PASSWORD TEMPORAL
   ========================================================== */

.security-temp-card{
    max-width:620px;
    margin:0 auto;

    padding:24px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 28%,
            var(--border,#dbe2ea)
        ) !important;

    border-radius:20px !important;

    box-shadow:
        0 14px 38px rgba(15,23,42,.10);
}

.security-temp-card .credential-box{
    display:grid !important;
    grid-template-columns:minmax(180px,1fr) auto;

    gap:11px;

    margin:20px 0 !important;
    padding:14px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 25%,
            var(--border,#dbe2ea)
        ) !important;

    border-radius:15px !important;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 5%,
            var(--card,#fff)
        ) !important;
}

#temporary-password{
    display:flex !important;

    align-items:center;
    justify-content:center;

    min-height:52px !important;

    padding:10px 17px !important;

    border:2px dashed var(--accent,#4f6bed) !important;
    border-radius:12px !important;

    background:#fff !important;
    color:#111827 !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace !important;

    font-size:22px !important;
    font-weight:900 !important;

    letter-spacing:.10em !important;

    opacity:1 !important;
    visibility:visible !important;

    user-select:all;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .team-card{
    background:#151d27 !important;
    border-color:#2c394b !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.24);
}

html[data-theme="dark"]
.team-card .team-card-head{
    border-color:#293548;
}

html[data-theme="dark"]
.team-card .team-card-head b{
    color:#f3f7ff;
}

html[data-theme="dark"]
.team-card-primary-actions{
    background:#111923;
    border-color:#293548;
}

html[data-theme="dark"]
.team-card-edit-btn{
    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 16%,
            #151d27
        ) !important;
}

html[data-theme="dark"]
.team-card-block-btn{
    background:#1d2734 !important;
    border-color:#364458 !important;
    color:#e5ebf3 !important;
}

html[data-theme="dark"]
.security-temp-card{
    background:#151d27;
}

html[data-theme="dark"]
#temporary-password{
    background:#f8fafc !important;
    color:#111827 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:720px){

    .team-list{
        grid-template-columns:1fr !important;
    }

    .team-card-primary-actions{
        grid-template-columns:repeat(3,1fr);
        gap:6px;
    }

    .team-card-primary-actions button{
        padding:8px 5px !important;
        font-size:11px !important;
    }

    .security-temp-card .credential-box{
        grid-template-columns:1fr !important;
    }

    #temporary-password{
        width:100%;
    }

    .security-temp-card
    .credential-box button{
        width:100%;
    }
}


/* ==========================================================
   USUARIOS · TARJETA COMPACTA DE PERFIL
   ========================================================== */

.users-grid{
    grid-template-columns:minmax(280px,360px) 1fr !important;
    align-items:start;
}

.team-list{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(230px,280px)) !important;
    gap:14px !important;
    justify-content:start;
}

.team-card{
    width:100% !important;
    min-height:0 !important;

    border:1px solid var(--border,#dbe2ea) !important;
    border-radius:16px !important;

    background:var(--card,#fff) !important;

    overflow:hidden !important;

    box-shadow:
        0 6px 18px rgba(15,23,42,.07) !important;
}


/* Ocultar todo el formulario mientras no se edita */
.team-card.team-card-collapsed
.team-edit-form > :not(.team-card-head){
    display:none !important;
}


/* Encabezado compacto */
.team-card .team-card-head{
    position:relative;

    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:0 !important;

    padding:18px 14px 14px !important;

    text-align:center;

    border-bottom:0 !important;
}


/* Avatar */
.team-profile-avatar{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:10px;

    border-radius:50%;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 14%,
            #fff
        );

    color:var(--accent,#4f6bed);

    font-size:23px;
    font-weight:900;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 30%,
            transparent
        );
}


/* Nombre y rol */
.team-profile-main{
    display:flex;
    flex-direction:column;
    align-items:center;

    min-width:0;
}

.team-profile-main b{
    max-width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:16px !important;
    font-weight:850 !important;

    color:var(--text,#172033) !important;
}

.team-profile-role{
    display:inline-flex;

    margin-top:5px;

    padding:4px 9px;

    border-radius:999px;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 10%,
            transparent
        );

    color:var(--accent,#4f6bed);

    font-size:10px;
    font-weight:850;

    letter-spacing:.04em;
    text-transform:uppercase;
}


/* Estado activo */
.team-card .user-state{
    position:absolute !important;

    top:10px;
    right:10px;

    margin:0 !important;

    font-size:9px !important;

    padding:4px 7px !important;

    border-radius:999px !important;
}


/* Barra de acciones */
.team-card-primary-actions{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;

    gap:6px !important;

    padding:10px !important;

    border-top:1px solid var(--border,#e5e9ef) !important;

    background:
        color-mix(
            in srgb,
            var(--card,#fff) 96%,
            var(--accent,#4f6bed)
        ) !important;
}

.team-card-primary-actions button{
    width:100% !important;

    min-height:34px !important;

    padding:6px 5px !important;

    margin:0 !important;

    border-radius:9px !important;

    font-size:10px !important;
    font-weight:800 !important;
}


/* Editar */
.team-card-edit-btn{
    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 8%,
            #fff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 35%,
            #dbe2ea
        ) !important;

    color:var(--accent,#4f6bed) !important;
}


/* Bloquear */
.team-card-block-btn{
    background:#fff !important;
    border:1px solid #d8dee8 !important;
    color:#374151 !important;
}


/* Eliminar */
.team-card-delete-btn{
    background:#fff4f4 !important;
    border:1px solid #efb7ba !important;
    color:#b4232a !important;
}


/* Cuando se pulsa EDITAR */
.team-card.is-editing{
    grid-column:span 2;

    min-width:min(620px,100%);
}

.team-card.is-editing .team-card-head{
    align-items:flex-start;

    text-align:left;
}

.team-card.is-editing .team-profile-main{
    align-items:flex-start;
}

.team-card.is-editing .team-profile-avatar{
    width:46px;
    height:46px;

    font-size:18px;
}


/* ==========================================================
   PROPIETARIO / ADMIN PROTEGIDO
   ========================================================== */

.team-card-protected{
    max-width:280px;
}

.team-card-protected .team-card-head{
    padding-bottom:18px !important;
}

.team-card-protected::after{
    content:"Protegido";

    position:absolute;
    left:50%;
    bottom:8px;

    transform:translateX(-50%);

    padding:3px 8px;

    border-radius:999px;

    color:var(--muted,#748094);

    font-size:8px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.06em;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .team-card{
    background:#151d27 !important;
    border-color:#2c394b !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.25) !important;
}

html[data-theme="dark"] .team-profile-main b{
    color:#f4f7fb !important;
}

html[data-theme="dark"] .team-profile-avatar{
    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 18%,
            #111923
        );
}

html[data-theme="dark"] .team-card-primary-actions{
    background:#111923 !important;
    border-color:#293548 !important;
}

html[data-theme="dark"] .team-card-block-btn{
    background:#1d2734 !important;
    border-color:#374559 !important;
    color:#e8edf5 !important;
}


/* ==========================================================
   MÓVIL / TABLET
   ========================================================== */

@media(max-width:900px){

    .users-grid{
        grid-template-columns:1fr !important;
    }

    .team-list{
        grid-template-columns:
            repeat(auto-fill,minmax(210px,1fr)) !important;
    }

    .team-card.is-editing{
        grid-column:1/-1 !important;
        min-width:0;
    }
}

@media(max-width:520px){

    .team-list{
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
    }

    .team-card .team-card-head{
        padding:14px 8px 10px !important;
    }

    .team-profile-avatar{
        width:48px;
        height:48px;

        font-size:19px;
    }

    .team-profile-main b{
        font-size:13px !important;
    }

    .team-profile-role{
        padding:3px 6px;

        font-size:8px;
    }

    .team-card-primary-actions{
        grid-template-columns:1fr !important;
        padding:7px !important;
    }

    .team-card-primary-actions button{
        min-height:32px !important;
    }

    .team-card.is-editing{
        grid-column:1/-1 !important;
    }
}

/* ==========================================================
   USUARIOS · LAYOUT FINAL
   Nuevo usuario arriba / Equipo debajo
   ========================================================== */

.users-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
}

/* Ambos bloques ocupan todo el ancho */
.users-grid > section{
    width:100% !important;
    max-width:none !important;
}

/* Equipo debajo del formulario */
.users-grid > section:nth-child(2){
    margin-top:0 !important;
}

/* Tarjetas de equipo */
.team-list{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(220px,260px)) !important;
    gap:14px !important;
    justify-content:start !important;
}

/* Tarjeta cerrada: pequeña */
.team-card{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    border:1px solid var(--border,#dbe2ea) !important;
    border-radius:16px !important;

    background:var(--card,#fff) !important;

    box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
}

/* Cabecera compacta */
.team-card .team-card-head{
    position:relative;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:150px !important;

    padding:18px 12px 14px !important;

    text-align:center !important;

    border:0 !important;
}

/* Avatar */
.team-profile-avatar{
    width:56px !important;
    height:56px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 0 9px !important;

    border-radius:50% !important;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 13%,#fff) !important;

    border:
        2px solid
        color-mix(in srgb,var(--accent,#4f6bed) 30%,transparent) !important;

    color:var(--accent,#4f6bed) !important;

    font-size:21px !important;
    font-weight:900 !important;
}

/* Nombre */
.team-profile-main{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    width:100%;
    min-width:0;
}

.team-profile-main b{
    max-width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--text,#172033) !important;

    font-size:15px !important;
    font-weight:850 !important;
}

/* Rol */
.team-profile-role{
    display:inline-flex !important;

    margin-top:6px !important;
    padding:4px 8px !important;

    border-radius:999px !important;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 10%,transparent) !important;

    color:var(--accent,#4f6bed) !important;

    font-size:9px !important;
    font-weight:900 !important;

    text-transform:uppercase !important;
}

/* Activo / inactivo arriba a la derecha */
.team-card .user-state{
    position:absolute !important;

    top:9px !important;
    right:9px !important;

    margin:0 !important;

    font-size:8px !important;
}

/* ==========================================================
   MUY IMPORTANTE:
   formulario completamente oculto mientras no se edita
   ========================================================== */

.team-card:not(.is-editing)
.team-edit-form > :not(.team-card-head){
    display:none !important;
}

/* También ocultar cualquier acción secundaria antigua */
.team-card:not(.is-editing) .team-edit-actions{
    display:none !important;
}

/* ==========================================================
   SOLO LOS 3 BOTONES VISIBLES
   ========================================================== */

.team-card-primary-actions{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;

    gap:6px !important;

    padding:9px !important;

    border-top:1px solid var(--border,#e5e9ef) !important;

    background:
        color-mix(in srgb,var(--card,#fff) 96%,var(--accent,#4f6bed))
        !important;
}

.team-card-primary-actions form{
    margin:0 !important;
}

.team-card-primary-actions button{
    width:100% !important;
    min-height:34px !important;

    margin:0 !important;
    padding:6px 4px !important;

    border-radius:8px !important;

    font-size:10px !important;
    font-weight:800 !important;
}

/* Editar */
.team-card-edit-btn{
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 8%,#fff) !important;

    border:
        1px solid
        color-mix(in srgb,var(--accent,#4f6bed) 35%,#dbe2ea)
        !important;

    color:var(--accent,#4f6bed) !important;
}

/* Bloquear */
.team-card-block-btn{
    background:#fff !important;
    border:1px solid #d9dee7 !important;
    color:#374151 !important;
}

/* Eliminar sigue rojo */
.team-card-delete-btn{
    background:#fff4f4 !important;
    border:1px solid #efb8bb !important;
    color:#b4232a !important;
}

/* ==========================================================
   AL PULSAR EDITAR
   ========================================================== */

.team-card.is-editing{
    grid-column:1/-1 !important;

    width:min(720px,100%) !important;
    max-width:720px !important;

    justify-self:start;
}

.team-card.is-editing .team-card-head{
    min-height:95px !important;

    flex-direction:row !important;
    justify-content:flex-start !important;
    gap:12px !important;

    padding:15px 17px !important;

    text-align:left !important;

    border-bottom:1px solid var(--border,#e5e9ef) !important;
}

.team-card.is-editing .team-profile-avatar{
    width:46px !important;
    height:46px !important;

    margin:0 !important;

    flex:0 0 46px;
}

.team-card.is-editing .team-profile-main{
    align-items:flex-start !important;
}

.team-card.is-editing
.team-edit-form > :not(.team-card-head){
    display:block !important;
}

/* Los pares de campos conservan su grid */
.team-card.is-editing .team-two{
    display:grid !important;
}

.team-card.is-editing .security-identity-box{
    display:block !important;
}

/* Área interna de edición */
.team-card.is-editing .team-edit-form > label,
.team-card.is-editing .team-edit-form > .team-two,
.team-card.is-editing .team-edit-form > .security-identity-box,
.team-card.is-editing .team-edit-form > small{
    margin-left:16px !important;
    margin-right:16px !important;
}

.team-card.is-editing .team-edit-form > label:first-of-type{
    margin-top:15px !important;
}

.team-card.is-editing .team-edit-actions{
    display:flex !important;

    flex-wrap:wrap;
    gap:8px;

    padding:10px 16px 16px !important;
}

/*
 Eliminar y bloquear ya están arriba como acciones principales,
 por lo que dentro del modo edición no necesitamos repetirlos.
*/
.team-card.is-editing
.team-edit-actions
.team-card-toggle-form,
.team-card.is-editing
.team-edit-actions
.team-card-delete-form{
    display:none !important;
}

/* ==========================================================
   PROPIETARIO
   ========================================================== */

.team-card-protected{
    width:240px !important;
}

.team-card-protected .team-card-head{
    min-height:150px !important;
}

/* No abrir enorme por estilos viejos */
.team-card-protected:not(.is-editing)
.team-edit-form > :not(.team-card-head){
    display:none !important;
}

/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .team-card{
    background:#151d27 !important;
    border-color:#2c394b !important;

    box-shadow:0 7px 20px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .team-profile-main b{
    color:#f3f7ff !important;
}

html[data-theme="dark"] .team-card-primary-actions{
    background:#111923 !important;
    border-color:#293548 !important;
}

html[data-theme="dark"] .team-card-block-btn{
    background:#1d2734 !important;
    border-color:#374559 !important;
    color:#e8edf5 !important;
}

/* ==========================================================
   TABLET / MOVIL
   ========================================================== */

@media(max-width:800px){

    .team-list{
        grid-template-columns:
            repeat(auto-fill,minmax(200px,1fr)) !important;
    }

    .team-card.is-editing{
        width:100% !important;
    }
}

@media(max-width:520px){

    .team-list{
        grid-template-columns:1fr !important;
    }

    .team-card{
        max-width:none !important;
    }

    .team-card-primary-actions{
        grid-template-columns:repeat(3,1fr) !important;
    }
}


/* ==========================================================
   USUARIOS · FICHA CERRADA ULTRA COMPACTA
   Solo avatar + nombre + rol + estado + 3 botones
   ========================================================== */

/* Ocultar absolutamente todo el contenido secundario */
.team-card:not(.is-editing) .team-edit-form label,
.team-card:not(.is-editing) .team-edit-form input,
.team-card:not(.is-editing) .team-edit-form select,
.team-card:not(.is-editing) .team-edit-form textarea,
.team-card:not(.is-editing) .team-edit-form small,
.team-card:not(.is-editing) .team-edit-form .team-two,
.team-card:not(.is-editing) .team-edit-form .security-identity-box,
.team-card:not(.is-editing) .team-edit-form .security-pending,
.team-card:not(.is-editing) .team-edit-actions,
.team-card:not(.is-editing) .sensitive-inline-form{
    display:none !important;
}

/* Mantener visible únicamente el encabezado/ficha */
.team-card:not(.is-editing) .team-card-head,
.team-card:not(.is-editing) .team-profile-avatar,
.team-card:not(.is-editing) .team-profile-main,
.team-card:not(.is-editing) .team-profile-main b,
.team-card:not(.is-editing) .team-profile-role,
.team-card:not(.is-editing) .user-state,
.team-card:not(.is-editing) .team-card-primary-actions{
    display:flex !important;
}

/* Las acciones principales conservan su grid */
.team-card:not(.is-editing) .team-card-primary-actions{
    display:grid !important;
}

/* Evitar espacios reservados por elementos ocultos */
.team-card:not(.is-editing) .team-edit-form{
    padding:0 !important;
    margin:0 !important;
}

.team-card:not(.is-editing){
    min-height:0 !important;
    height:auto !important;
}

/* Ficha compacta */
.team-card:not(.is-editing) .team-card-head{
    min-height:145px !important;
    padding:16px 12px 12px !important;
}

/* ==========================================================
   AL EDITAR: volver a mostrar todos los campos reales
   ========================================================== */

.team-card.is-editing .team-edit-form label{
    display:block !important;
}

.team-card.is-editing .team-edit-form input,
.team-card.is-editing .team-edit-form select,
.team-card.is-editing .team-edit-form textarea{
    display:block !important;
}

.team-card.is-editing .team-edit-form small,
.team-card.is-editing .team-edit-form .security-pending{
    display:block !important;
}

.team-card.is-editing .team-edit-form .team-two{
    display:grid !important;
}

.team-card.is-editing .team-edit-form .security-identity-box{
    display:block !important;
}

.team-card.is-editing .team-edit-actions{
    display:flex !important;
}


/* ==========================================================
   USUARIOS · FICHA FINAL COMPACTA
   ========================================================== */

.users-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
}

.team-list{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(220px,260px)) !important;
    gap:14px !important;
    justify-content:start !important;
}

.user-profile-card{
    overflow:hidden;

    border:1px solid var(--border,#dbe2ea);
    border-radius:16px;

    background:var(--card,#fff);

    box-shadow:0 6px 18px rgba(15,23,42,.07);
}

.user-profile-summary{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:18px 12px 14px;

    text-align:center;
}

.user-profile-avatar{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:10px;

    border-radius:50%;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 13%,#fff);

    border:
        2px solid
        color-mix(in srgb,var(--accent,#4f6bed) 28%,transparent);

    color:var(--accent,#4f6bed);

    font-size:22px;
    font-weight:900;
}

.user-profile-name{
    max-width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--text,#172033);

    font-size:16px;
    font-weight:850;
}

.user-profile-role{
    margin-top:5px;

    padding:4px 8px;

    border-radius:999px;

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 10%,transparent);

    color:var(--accent,#4f6bed);

    font-size:9px;
    font-weight:900;

    text-transform:uppercase;
}

.user-profile-status{
    position:absolute;
    top:9px;
    right:9px;

    padding:4px 7px;

    border-radius:999px;

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
}

.user-profile-status.is-active{
    background:#e5f7eb;
    color:#18723b;
}

.user-profile-status.is-blocked{
    background:#fee9ea;
    color:#a8242b;
}


/* SOLO 3 BOTONES */
.user-profile-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:6px;

    padding:9px;

    border-top:1px solid var(--border,#e5e9ef);
}

.user-profile-actions form{
    margin:0;
}

.user-profile-actions button{
    width:100%;
    min-height:34px;

    margin:0;
    padding:6px 4px;

    border-radius:8px;

    font-size:10px;
    font-weight:800;
}

.user-edit-toggle{
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 8%,#fff);

    border:
        1px solid
        color-mix(in srgb,var(--accent,#4f6bed) 35%,#dbe2ea);

    color:var(--accent,#4f6bed);
}

.user-block-btn{
    background:#fff;
    border:1px solid #d9dee7;
    color:#374151;
}

.user-delete-btn{
    background:#fff4f4;
    border:1px solid #efb8bb;
    color:#b4232a;
}


/* ==========================================================
   EDICIÓN: COMPLETAMENTE OCULTA HASTA EDITAR
   ========================================================== */

.user-edit-panel[hidden]{
    display:none !important;
}

.user-edit-panel{
    padding:16px;

    border-top:1px solid var(--border,#e5e9ef);

    background:
        color-mix(in srgb,var(--accent,#4f6bed) 3%,var(--card,#fff));
}

.user-edit-panel form{
    margin:0;
}

.user-edit-footer{
    display:flex;
    gap:8px;
    flex-wrap:wrap;

    margin-top:14px;
}

.user-edit-footer .team-save-btn{
    background:var(--accent,#4f6bed) !important;
    border-color:var(--accent,#4f6bed) !important;
    color:#fff !important;
}


/* Cuenta protegida */
.user-protected-note{
    padding:9px;

    border-top:1px solid var(--border,#e5e9ef);

    text-align:center;

    color:var(--muted,#748094);

    font-size:9px;
    font-weight:850;

    text-transform:uppercase;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .user-profile-card{
    background:#151d27;
    border-color:#2c394b;
}

html[data-theme="dark"] .user-profile-name{
    color:#f3f7ff;
}

html[data-theme="dark"] .user-profile-avatar{
    background:
        color-mix(in srgb,var(--accent,#4f6bed) 17%,#111923);
}

html[data-theme="dark"] .user-profile-actions,
html[data-theme="dark"] .user-edit-panel,
html[data-theme="dark"] .user-protected-note{
    border-color:#293548;
}

html[data-theme="dark"] .user-block-btn{
    background:#1d2734;
    border-color:#374559;
    color:#e8edf5;
}


/* Móvil */
@media(max-width:520px){

    .team-list{
        grid-template-columns:1fr !important;
    }

}

/* ==========================================================
   USUARIOS · LAYOUT FINAL COMPACTO
   Nuevo usuario arriba + mínimo 4 fichas por fila
   ========================================================== */

/* Recuperar siempre el bloque Nuevo usuario */
.users-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
}

.users-grid > section{
    display:block !important;
    width:100% !important;
    max-width:none !important;
}

/* Primer bloque = Nuevo usuario */
.users-grid > section:first-child{
    order:1 !important;
}

/* Segundo bloque = Equipo */
.users-grid > section:nth-child(2){
    order:2 !important;
}


/* ==========================================================
   EQUIPO: 4 POR FILA
   ========================================================== */

.team-list{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;

    width:100% !important;
}


/* ==========================================================
   FICHA PEQUEÑA / CASI CUADRADA
   ========================================================== */

.user-profile-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:210px !important;
    height:210px !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border-radius:14px !important;
}

/* Parte visual */
.user-profile-summary{
    flex:1 1 auto !important;

    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    padding:14px 10px 9px !important;
}

/* Avatar más pequeño */
.user-profile-avatar{
    width:48px !important;
    height:48px !important;

    flex:0 0 48px !important;

    margin-bottom:7px !important;

    font-size:18px !important;
}

/* Nombre */
.user-profile-name{
    width:100% !important;

    font-size:13px !important;
    line-height:1.25 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* Rol */
.user-profile-role{
    margin-top:5px !important;

    padding:3px 7px !important;

    font-size:8px !important;
}

/* Estado */
.user-profile-status{
    top:7px !important;
    right:7px !important;

    padding:3px 6px !important;

    font-size:7px !important;
}


/* ==========================================================
   3 BOTONES COMPACTOS
   ========================================================== */

.user-profile-actions{
    flex:0 0 auto !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:5px !important;

    padding:7px !important;

    border-top:1px solid var(--border,#e5e9ef) !important;
}

.user-profile-actions form{
    margin:0 !important;
}

.user-profile-actions button{
    width:100% !important;
    min-width:0 !important;

    min-height:30px !important;

    padding:5px 2px !important;
    margin:0 !important;

    border-radius:7px !important;

    font-size:8px !important;
    line-height:1 !important;

    white-space:nowrap !important;
}


/* ==========================================================
   CUANDO SE EDITA
   La ficha puede crecer, pero las demás siguen compactas.
   ========================================================== */

.user-profile-card:has(.user-edit-panel:not([hidden])){
    grid-column:1 / -1 !important;

    height:auto !important;
    min-height:0 !important;

    max-width:760px !important;
}

.user-profile-card:has(.user-edit-panel:not([hidden]))
.user-profile-summary{
    min-height:110px !important;

    flex-direction:row !important;
    justify-content:flex-start !important;

    gap:12px !important;

    text-align:left !important;
}

.user-profile-card:has(.user-edit-panel:not([hidden]))
.user-profile-name{
    width:auto !important;
    font-size:15px !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Tablet grande: 3 */
@media(max-width:1100px){
    .team-list{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

/* Tablet: 2 */
@media(max-width:760px){
    .team-list{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* Teléfono: 1 */
@media(max-width:480px){
    .team-list{
        grid-template-columns:1fr !important;
    }

    .user-profile-card{
        height:190px !important;
    }
}


/* ==========================================================
   STREAMDESK · EQUIPO GLOBAL FINAL
   Aplica a TODAS las empresas actuales y futuras
   ========================================================== */

/* Página en vertical:
   1. Nuevo usuario
   2. Equipo
*/
body .users-grid{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:none !important;
    gap:22px !important;
}

body .users-grid > section{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    flex:none !important;
}

body .users-grid > section:first-child{
    display:block !important;
    order:1 !important;
}

body .users-grid > section:nth-child(2){
    display:block !important;
    order:2 !important;
}


/* ==========================================================
   GRID DE VENDEDORES
   Escritorio = 4 por fila
   ========================================================== */

body .users-grid .team-list.users-team-grid-final{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;

    width:100% !important;
    max-width:none !important;

    align-items:start !important;
}


/* ==========================================================
   FICHA CERRADA
   SOLO:
   avatar
   nombre
   rol
   estado
   editar / bloquear / eliminar
   ========================================================== */

body .users-grid
.team-list.users-team-grid-final
.user-profile-card{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    max-width:none !important;

    height:205px !important;
    min-height:205px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:1px solid var(--border,#dbe2ea) !important;
    border-radius:15px !important;

    background:var(--card,#fff) !important;

    box-shadow:
        0 5px 16px rgba(15,23,42,.07) !important;
}


/* Contenido superior */
body .users-grid
.user-profile-card
.user-profile-summary{
    position:relative !important;

    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:0 !important;

    padding:13px 8px 8px !important;

    text-align:center !important;
}


/* Avatar */
body .users-grid
.user-profile-card
.user-profile-avatar{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;

    margin:0 0 7px !important;

    border-radius:50% !important;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 13%,
            #fff
        ) !important;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 28%,
            transparent
        ) !important;

    color:var(--accent,#4f6bed) !important;

    font-size:18px !important;
    font-weight:900 !important;
}


/* Nombre */
body .users-grid
.user-profile-card
.user-profile-name{
    display:block !important;

    width:100% !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    color:var(--text,#172033) !important;

    font-size:13px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
}


/* Rol */
body .users-grid
.user-profile-card
.user-profile-role{
    display:inline-flex !important;

    margin-top:5px !important;
    padding:3px 7px !important;

    border-radius:999px !important;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 10%,
            transparent
        ) !important;

    color:var(--accent,#4f6bed) !important;

    font-size:8px !important;
    font-weight:900 !important;

    text-transform:uppercase !important;
}


/* Estado */
body .users-grid
.user-profile-card
.user-profile-status{
    display:inline-flex !important;

    position:absolute !important;
    top:7px !important;
    right:7px !important;

    padding:3px 6px !important;

    border-radius:999px !important;

    font-size:7px !important;
    font-weight:900 !important;

    text-transform:uppercase !important;
}

body .users-grid
.user-profile-status.is-active{
    background:#e2f7e9 !important;
    color:#166534 !important;
}

body .users-grid
.user-profile-status.is-blocked{
    background:#fee7e8 !important;
    color:#a51d24 !important;
}


/* ==========================================================
   EXACTAMENTE 3 BOTONES
   ========================================================== */

body .users-grid
.user-profile-card
.user-profile-actions{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    flex:0 0 42px !important;

    gap:5px !important;

    width:100% !important;

    padding:6px !important;
    margin:0 !important;

    border-top:1px solid var(--border,#e5e9ef) !important;

    background:
        color-mix(
            in srgb,
            var(--card,#fff) 96%,
            var(--accent,#4f6bed)
        ) !important;
}

body .users-grid
.user-profile-actions form{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}

body .users-grid
.user-profile-actions button{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    min-height:29px !important;

    padding:4px 2px !important;
    margin:0 !important;

    border-radius:7px !important;

    font-size:8px !important;
    font-weight:850 !important;
    line-height:1 !important;

    white-space:nowrap !important;
}

body .users-grid .user-edit-toggle{
    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 8%,
            #fff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 35%,
            #dbe2ea
        ) !important;

    color:var(--accent,#4f6bed) !important;
}

body .users-grid .user-block-btn{
    background:#fff !important;
    border:1px solid #d8dee7 !important;
    color:#374151 !important;
}

body .users-grid .user-delete-btn{
    background:#fff3f4 !important;
    border:1px solid #efb5b8 !important;
    color:#b4232a !important;
}


/* ==========================================================
   NADA MÁS VISIBLE SI NO PULSAS EDITAR
   ========================================================== */

body .users-grid
.user-profile-card
.user-edit-panel[hidden]{
    display:none !important;
}


/* ==========================================================
   EDITAR
   En ese momento sí aparece todo
   ========================================================== */

body .users-grid
.team-list.users-team-grid-final
.user-profile-card.user-card-editing{
    grid-column:1 / -1 !important;

    width:min(760px,100%) !important;
    max-width:760px !important;

    height:auto !important;
    min-height:0 !important;
}

body .users-grid
.user-profile-card.user-card-editing
.user-edit-panel{
    display:block !important;

    padding:16px !important;

    border-top:1px solid var(--border,#e5e9ef) !important;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 3%,
            var(--card,#fff)
        ) !important;
}


/* Cuenta protegida */
body .users-grid
.user-profile-card
.user-protected-note{
    flex:0 0 auto !important;

    padding:8px !important;

    border-top:1px solid var(--border,#e5e9ef) !important;

    text-align:center !important;

    color:var(--muted,#748094) !important;

    font-size:8px !important;
    font-weight:850 !important;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"]
body .users-grid
.user-profile-card{
    background:#151d27 !important;
    border-color:#2c394b !important;
}

html[data-theme="dark"]
body .users-grid
.user-profile-name{
    color:#f3f7ff !important;
}

html[data-theme="dark"]
body .users-grid
.user-profile-actions{
    background:#111923 !important;
    border-color:#293548 !important;
}

html[data-theme="dark"]
body .users-grid
.user-block-btn{
    background:#1d2734 !important;
    border-color:#374559 !important;
    color:#e8edf5 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Tablet grande = 3 */
@media(max-width:1050px){
    body .users-grid
    .team-list.users-team-grid-final{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }
}

/* Tablet pequeña = 2 */
@media(max-width:720px){
    body .users-grid
    .team-list.users-team-grid-final{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}

/* Teléfono = 1 */
@media(max-width:460px){
    body .users-grid
    .team-list.users-team-grid-final{
        grid-template-columns:1fr !important;
    }
}


/* ==========================================================
   USERS CLEAN V4 · GLOBAL TODAS LAS EMPRESAS
   ========================================================== */

.sd-new-user-card,
.sd-team-section{
    width:100%;
    margin-bottom:22px;
    padding:20px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:16px;

    background:var(--card,#fff);
}

.sd-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;

    margin-bottom:15px;
}

.sd-section-head h2{
    margin:0 0 4px;
}

.sd-section-head p{
    margin:0;
    color:var(--muted,#748094);
}


/* NUEVO USUARIO */
.sd-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.sd-auto-password-info{
    display:flex;
    flex-direction:column;
    gap:3px;

    margin:15px 0;
    padding:12px 14px;

    border-radius:12px;

    background:
      color-mix(in srgb,var(--accent,#4f6bed) 7%,transparent);
}

.sd-create-user-btn,
.sd-save-user{
    background:var(--accent,#4f6bed) !important;
    border-color:var(--accent,#4f6bed) !important;
    color:#fff !important;
}


/* FILTROS */
.sd-team-filters{
    display:flex;
    gap:7px;
    flex-wrap:wrap;

    margin-bottom:16px;
}

.sd-team-filters button{
    min-height:34px;
    padding:6px 11px;
}

.sd-team-filters button.active{
    background:var(--accent,#4f6bed);
    border-color:var(--accent,#4f6bed);
    color:#fff;
}


/* ======================================================
   CUATRO VENDEDORES POR FILA
   ====================================================== */

.sd-team-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    gap:12px;

    width:100%;
}


/* FICHA COMPACTA */
.sd-user-card{
    display:flex;
    flex-direction:column;

    width:100%;
    min-width:0;

    min-height:195px;

    overflow:hidden;

    border:1px solid var(--border,#dbe2ea);
    border-radius:14px;

    background:var(--card,#fff);

    box-shadow:0 5px 16px rgba(15,23,42,.07);
}


/* RESUMEN */
.sd-user-summary{
    position:relative;

    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:145px;

    padding:13px 9px 9px;

    text-align:center;
}

.sd-user-avatar{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:7px;

    border-radius:50%;

    background:
      color-mix(in srgb,var(--accent,#4f6bed) 13%,#fff);

    border:
      2px solid
      color-mix(in srgb,var(--accent,#4f6bed) 28%,transparent);

    color:var(--accent,#4f6bed);

    font-size:18px;
    font-weight:900;
}

.sd-user-name{
    max-width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:13px;
    font-weight:850;
}

.sd-user-role{
    margin-top:5px;
    padding:3px 7px;

    border-radius:999px;

    background:
      color-mix(in srgb,var(--accent,#4f6bed) 10%,transparent);

    color:var(--accent,#4f6bed);

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
}

.sd-user-status{
    position:absolute;

    top:7px;
    right:7px;

    padding:3px 6px;

    border-radius:999px;

    font-size:7px;
    font-weight:900;

    text-transform:uppercase;
}

.sd-user-status.active{
    background:#e3f7e9;
    color:#166534;
}

.sd-user-status.blocked{
    background:#fee7e8;
    color:#a61d24;
}


/* TRES BOTONES */
.sd-user-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:5px;

    padding:6px;

    border-top:1px solid var(--border,#e5e9ef);
}

.sd-user-actions form{
    margin:0;
}

.sd-user-actions button{
    width:100%;
    min-width:0;

    min-height:30px;

    margin:0;
    padding:5px 2px;

    border-radius:7px;

    font-size:8px;
    font-weight:850;
}

.sd-user-edit{
    background:
      color-mix(in srgb,var(--accent,#4f6bed) 8%,#fff);

    border:
      1px solid
      color-mix(in srgb,var(--accent,#4f6bed) 35%,#dbe2ea);

    color:var(--accent,#4f6bed);
}

.sd-user-block{
    background:#fff;
    border:1px solid #d8dee7;
    color:#374151;
}

.sd-user-delete{
    background:#fff3f4;
    border:1px solid #efb5b8;
    color:#b4232a;
}


/* EDICIÓN */
.sd-user-edit-panel[hidden]{
    display:none !important;
}

.sd-user-card.editing{
    grid-column:1/-1;

    width:min(760px,100%);
}

.sd-user-edit-panel{
    padding:16px;

    border-top:1px solid var(--border,#e5e9ef);
}

.sd-edit-buttons{
    display:flex;
    gap:8px;

    margin-top:14px;
}

.sd-reset-access{
    margin-top:16px;
    padding:13px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:12px;
}


/* PROTEGIDO */
.sd-protected-user{
    padding:8px;

    border-top:1px solid var(--border,#e5e9ef);

    text-align:center;

    color:var(--muted,#748094);

    font-size:8px;
    font-weight:850;

    text-transform:uppercase;
}


/* DARK */
html[data-theme="dark"] .sd-new-user-card,
html[data-theme="dark"] .sd-team-section,
html[data-theme="dark"] .sd-user-card{
    background:#151d27;
    border-color:#2c394b;
}

html[data-theme="dark"] .sd-user-block{
    background:#1d2734;
    border-color:#374559;
    color:#e8edf5;
}


/* RESPONSIVE */
@media(max-width:1050px){
    .sd-team-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:760px){
    .sd-team-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .sd-form-grid{
        grid-template-columns:1fr;
    }

    .sd-team-header{
        flex-direction:column;
    }

    .sd-team-header input{
        width:100%;
    }
}

@media(max-width:470px){
    .sd-team-grid{
        grid-template-columns:1fr !important;
    }
}

/* Sidebar: identidad visual solo mediante logo */
.brand-wrap-logo-only{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:18px 12px !important;
}

.brand-wrap-logo-only .brand-img-wrap{
    margin:0 !important;
}


.brand-wrap-logo-only{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:18px 12px !important;
}

.brand-wrap-logo-only .brand-img-wrap{
    margin:0 !important;
}

/* Logo solo en sidebar */
.brand-wrap{
    justify-content:center !important;
}

.brand-wrap .brand-img-wrap,
.brand-wrap .brand-logo{
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Sidebar: logo + nombre comercial juntos */
.brand-wrap{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:10px !important;
}

.brand-wrap .brand-img-wrap,
.brand-wrap .brand-logo{
    margin-left:0 !important;
    margin-right:0 !important;
    flex:0 0 auto;
}

.brand-text{
    min-width:0;
}

.brand-text .brand{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.brand-text small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* ==========================================================
   SIDEBAR BRAND FINAL
   Logo + marca + subtítulo
   ========================================================== */

.sidebar .sd-sidebar-brand{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:11px !important;

    width:100% !important;

    padding:16px 14px !important;

    opacity:1 !important;
    visibility:visible !important;
}

.sidebar .sd-sidebar-brand .brand-img-wrap,
.sidebar .sd-sidebar-brand .brand-logo{
    display:flex !important;

    flex:0 0 42px !important;

    width:42px !important;
    height:42px !important;

    margin:0 !important;
}

.sidebar .sd-sidebar-brand .brand-text{
    display:block !important;

    flex:1 1 auto !important;

    min-width:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    color:inherit !important;
}

.sidebar .sd-sidebar-brand .brand-text .brand{
    display:block !important;

    margin:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    color:var(--text,#172033) !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
}

.sidebar .sd-sidebar-brand .brand-text small{
    display:block !important;

    margin-top:3px !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    color:var(--muted,#748094) !important;

    font-size:10px !important;
    line-height:1.2 !important;
}

html[data-theme="dark"]
.sidebar .sd-sidebar-brand .brand-text .brand{
    color:#f3f7ff !important;
}

html[data-theme="dark"]
.sidebar .sd-sidebar-brand .brand-text small{
    color:#9ba8ba !important;
}


/* ==========================================================
   WHATSAPP
   ========================================================== */

.wa-settings-card{
    margin-bottom:20px;
    padding:20px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:17px;

    background:var(--card,#fff);
}

.wa-card-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;

    margin-bottom:18px;
}

.wa-card-head h2{
    margin:0 0 4px;
}

.wa-card-head p{
    margin:0;
    color:var(--muted,#748094);
}

.wa-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#dcfce7;
    color:#15803d;

    font-size:20px;
    font-weight:900;
}

.wa-status{
    display:inline-flex;

    padding:5px 8px;

    border-radius:999px;

    background:#eef1f5;
    color:#64748b;

    font-size:9px;
    font-weight:900;

    text-transform:uppercase;
}

.wa-status.connected{
    background:#dcfce7;
    color:#166534;
}

.wa-form-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:12px;
}

.wa-events{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;

    margin:15px 0;
    padding:13px;

    border-radius:12px;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 5%,
            transparent
        );
}

.wa-events h3{
    flex:0 0 100%;
    margin:0 0 3px;
}

.wa-events label{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin:0;
}

.wa-events input{
    width:auto;
    margin:0;
}

.wa-seller-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;
}

.wa-seller-card{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:6px;

    padding:15px;

    border:1px solid var(--border,#dbe2ea);
    border-radius:14px;

    text-align:center;
}

.wa-seller-avatar{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        color-mix(
            in srgb,
            var(--accent,#4f6bed) 12%,
            #fff
        );

    color:var(--accent,#4f6bed);

    font-weight:900;
}

@media(max-width:900px){

    .wa-form-grid{
        grid-template-columns:1fr;
    }

    .wa-seller-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:480px){

    .wa-card-head{
        grid-template-columns:auto 1fr;
    }

    .wa-card-head .wa-status{
        grid-column:1/-1;
    }

    .wa-seller-grid{
        grid-template-columns:1fr;
    }

}