/* ecommerce-latino HUB — control panel styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --orange-500: #F97316; --orange-600: #EA580C;
  --orange-grad: linear-gradient(135deg, #F97316, #EA580C);
  --navy: #0F172A;
  --g50:#F8FAFC; --g100:#F1F5F9; --g200:#E2E8F0; --g300:#CBD5E1;
  --g400:#94A3B8; --g500:#64748B; --g600:#475569; --g700:#334155; --g900:#0F172A;
  --white:#fff; --green:#16a34a; --red:#dc2626;
  --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-2xl:1.5rem; --r-full:9999px;
  --fast:150ms ease; --base:250ms ease;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }  /* beats class display rules (.hub-empty etc.) */
body { font-family:'Inter',-apple-system,sans-serif; color:var(--g700); -webkit-font-smoothing:antialiased; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* Buttons */
.hub-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:9px 16px; border-radius:var(--r-lg); font-size:.875rem; font-weight:600; transition:all var(--base); white-space:nowrap; }
.hub-btn--primary { background:var(--orange-grad); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.3); }
.hub-btn--primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(249,115,22,.4); }
.hub-btn--ghost { background:var(--g100); color:var(--g700); }
.hub-btn--ghost:hover { background:var(--g200); }
.hub-btn--text { background:none; color:var(--g500); padding:6px 8px; font-weight:500; }
.hub-btn--text:hover { color:var(--g900); }
.hub-btn--block { width:100%; }
.hub-btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

.hub-error { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:var(--red); padding:.6rem .8rem; border-radius:var(--r-md); font-size:.85rem; margin-bottom:1rem; word-break:break-word; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.85rem; font-weight:500; color:var(--g700); margin-bottom:.35rem; }
.form-group input { width:100%; padding:11px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg); font-size:1rem; color:var(--g900); outline:none; transition:border-color var(--fast); }
.form-group input:focus { border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(249,115,22,.1); }

/* Logo */
.hub-logo-mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--orange-grad); color:#fff; font-weight:900; font-size:15px; flex-shrink:0; }
.hub-logo-text { font-weight:700; color:var(--g900); font-size:.95rem; }
.hub-logo-text strong { color:var(--orange-600); }

/* Login */
.hub-body--centered { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--g50),#FFF7ED); padding:2rem 1rem; }
.hub-login-card { background:#fff; border:1px solid rgba(249,115,22,.12); border-radius:var(--r-2xl); padding:2.5rem; width:100%; max-width:400px; box-shadow:var(--shadow-xl); position:relative; overflow:hidden; }
.hub-login-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--orange-grad); }
.hub-login-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; }
.hub-login-card h1 { font-size:1.5rem; font-weight:800; color:var(--g900); margin-bottom:.4rem; }
.hub-login-sub { font-size:.875rem; color:var(--g500); margin-bottom:1.5rem; }

/* Layout */
.hub-body { background:var(--g50); }
.hub-layout { display:flex; min-height:100vh; }
.hub-sidebar { width:260px; flex-shrink:0; background:#fff; border-right:1px solid var(--g200); display:flex; flex-direction:column; padding:1.25rem; position:sticky; top:0; height:100vh; }
.hub-brand { display:flex; align-items:center; gap:.6rem; padding-bottom:1.25rem; border-bottom:1px solid var(--g100); margin-bottom:1rem; }

.hub-communities { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem; }
.hub-community-loading { color:var(--g400); font-size:.85rem; padding:.75rem; font-style:italic; }
.hub-community-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem .85rem; border-radius:var(--r-lg); cursor:pointer; transition:all var(--fast); color:var(--g700); font-weight:600; font-size:.9rem; }
.hub-community-item:hover { background:var(--g50); }
.hub-community-item.active { background:rgba(249,115,22,.1); color:var(--orange-600); }
.hub-community-item .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hub-community-item .dot.active { background:var(--green); }
.hub-community-item .dot.pending { background:var(--g400); }
.hub-community-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hub-add-btn { margin-top:.75rem; }
.hub-sidebar-footer { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--g100); display:flex; flex-direction:column; gap:.4rem; }
.hub-user-email { font-size:.75rem; color:var(--g500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Main */
.hub-main { flex:1; padding:2rem; overflow-x:hidden; }
.hub-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; text-align:center; color:var(--g400); }
.hub-empty-icon { font-size:3rem; margin-bottom:1rem; }
.hub-empty h2 { color:var(--g700); font-size:1.5rem; margin-bottom:.4rem; }

.hub-view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.hub-view-header h1 { font-size:1.6rem; font-weight:800; color:var(--g900); display:inline-flex; align-items:center; gap:.25rem; }
.hub-rename-btn { background:none; border:none; cursor:pointer; font-size:.85rem; color:var(--g400); padding:3px 7px; border-radius:var(--r-md); transition:all var(--fast); }
.hub-rename-btn:hover { color:var(--orange-600); background:rgba(249,115,22,.1); }
.hub-view-meta { font-size:.8rem; color:var(--g500); }
.hub-stats { display:flex; gap:.75rem; flex-wrap:wrap; }
.hub-stat { font-size:.85rem; color:var(--g500); background:var(--g50); border:1px solid var(--g200); padding:5px 12px; border-radius:var(--r-full); }
.hub-stat strong { color:var(--g900); margin-right:3px; }
.hub-stat--ok strong { color:var(--green); }
.hub-stat--bad strong { color:var(--red); }

.hub-card { background:#fff; border:1px solid var(--g200); border-radius:var(--r-xl); padding:1.25rem; box-shadow:var(--shadow-sm); margin-bottom:1.25rem; }
.hub-card h3 { font-size:1.05rem; font-weight:700; color:var(--g900); margin-bottom:1rem; }
.hub-card-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.hub-card-head h3 { margin-bottom:0; }

/* Table */
.hub-table-wrap { overflow-x:auto; border:1px solid var(--g200); border-radius:var(--r-lg); }
.hub-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.hub-table thead { background:var(--g50); }
.hub-table th { text-align:left; padding:10px 14px; font-size:.7rem; font-weight:600; color:var(--g700); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--g200); }
.hub-table td { padding:12px 14px; border-bottom:1px solid var(--g100); color:var(--g700); }
.hub-table tbody tr:last-child td { border-bottom:none; }
.hub-table tbody tr:hover { background:rgba(249,115,22,.03); }
.hub-empty-row td { text-align:center; color:var(--g400); font-style:italic; padding:2rem 1rem!important; }
.hub-cust { display:flex; flex-direction:column; gap:2px; }
.hub-cust strong { color:var(--g900); font-weight:600; }
.hub-cust small { color:var(--g500); font-size:.75rem; }

.hub-badge { display:inline-block; padding:3px 9px; border-radius:var(--r-full); font-size:.7rem; font-weight:600; background:var(--g100); color:var(--g700); }
.hub-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-full); font-size:.7rem; font-weight:600; text-transform:capitalize; }
.hub-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.hub-status--active,.hub-status--succeeded { background:rgba(34,197,94,.12); color:var(--green); }
.hub-status--inactive,.hub-status--failed,.hub-status--rejected,.hub-status--cancelled,.hub-status--expired { background:rgba(239,68,68,.1); color:var(--red); }
.hub-status--trialing { background:rgba(59,130,246,.12); color:#2563eb; }
.hub-status--open,.hub-status--pending,.hub-status--unknown { background:var(--g100); color:var(--g500); }
.hub-tag { display:inline-block; padding:2px 7px; border-radius:var(--r-full); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--g100); color:var(--g700); margin-right:4px; }
.hub-tag--manual { background:rgba(249,115,22,.12); color:var(--orange-600); }
.hub-fail { color:var(--red); font-size:.75rem; background:rgba(239,68,68,.06); padding:2px 7px; border-radius:var(--r-md); }
.hub-pid { font-family:'SF Mono',Monaco,monospace; font-size:.62rem; color:var(--g400); }
.hub-charge-btn { padding:6px 12px; font-size:.72rem; }
.hub-charge-btn:disabled { opacity:.4; }

/* Modal */
.hub-modal { position:fixed; inset:0; background:rgba(15,23,42,.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.hub-modal[hidden] { display:none; }
.hub-modal-inner { background:#fff; border-radius:var(--r-2xl); padding:2rem; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 32px 64px rgba(0,0,0,.3); }
.hub-modal-inner h3 { font-size:1.25rem; font-weight:800; color:var(--g900); margin-bottom:.5rem; }
.hub-modal-sub { font-size:.85rem; color:var(--g500); margin-bottom:1.25rem; line-height:1.6; }
.hub-modal-close { position:absolute; top:1rem; right:1rem; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--g100); color:var(--g600); font-size:1.2rem; transition:all var(--fast); }
.hub-modal-close:hover { background:var(--g200); color:var(--g900); }
.hub-modal-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.25rem; }
.hub-steps { margin:0 0 1rem 1.1rem; font-size:.85rem; color:var(--g600); line-height:1.9; }
.hub-code { display:inline-block; font-family:'SF Mono',Monaco,monospace; font-size:.75rem; background:var(--g100); padding:3px 8px; border-radius:var(--r-md); color:var(--g900); word-break:break-all; }

/* Toast */
.hub-toast { position:fixed; bottom:2rem; right:2rem; padding:14px 22px; border-radius:var(--r-lg); font-size:.85rem; font-weight:500; color:#fff; z-index:9999; transform:translateY(100px); opacity:0; transition:all var(--base); max-width:400px; box-shadow:var(--shadow-xl); }
.hub-toast.show { transform:translateY(0); opacity:1; }
.hub-toast.success { background:var(--green); }
.hub-toast.error { background:var(--red); }
.hub-toast.info { background:var(--g900); }

@media (max-width:820px) {
  .hub-layout { flex-direction:column; }
  .hub-sidebar { width:100%; height:auto; position:relative; flex-direction:column; }
  .hub-main { padding:1.25rem; }
}