/* iOS Safari fix global */
*, *::before, *::after { box-sizing:border-box; }
html { overflow-x:hidden; }
body { overflow-x:hidden; max-width:100vw; }
.portal-shell, .app-shell { overflow-x:hidden; max-width:100vw; }
.portal-main { overflow-x:hidden; }

/* ===== IMPERIUM — Design System v3 ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Inter',system-ui,sans-serif;background:#f1f5f9;color:#0f172a}
a{text-decoration:none;color:inherit}

/* Layout */
.app-shell{display:flex;height:100vh;overflow:hidden}
.sidebar{width:260px;flex-shrink:0;background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow-y:auto}
.content{flex:1;overflow-y:auto}

/* Brand */
.brand{padding:18px 16px 14px;border-bottom:1px solid #e2e8f0}
.brand strong{display:block;font-size:14px;font-weight:700;color:#0f172a}
.brand small{font-size:11px;color:#94a3b8}
.brand img{max-height:44px;max-width:150px;object-fit:contain;margin-bottom:8px;display:block}

/* Profile */
.profile-card{margin:10px;padding:10px 12px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0}
.profile-card strong{display:block;font-size:13px;font-weight:600}
.profile-card small{font-size:11px;color:#94a3b8}

/* Nav */
.menu{padding:6px 0;flex:1}
.menu-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#94a3b8;padding:10px 16px 4px}
.menu a,.menu-item{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:13px;font-weight:500;color:#475569;border-left:3px solid transparent}
.menu a:hover,.menu-item:hover{background:#f8fafc;color:#0f172a}
.menu a.active,.menu-item.active{background:#eff6ff;color:#1d4ed8;border-left-color:#2563eb;font-weight:600}
.menu-group summary{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:13px;font-weight:600;color:#334155;cursor:pointer;list-style:none}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary:hover{background:#f8fafc}
.submenu{padding:0 0 4px 40px}
.submenu a{display:block;padding:7px 10px;font-size:13px;color:#64748b;border-radius:8px;margin:1px 4px 1px 0}
.submenu a:hover{background:#f1f5f9;color:#0f172a}
.submenu a.active{color:#1d4ed8;font-weight:600}
.mi{width:17px;text-align:center;font-size:13px;opacity:.7;flex-shrink:0}
.sidebar-logout{padding:12px 14px;border-top:1px solid #e2e8f0}
.sidebar-logout a{font-size:12px;color:#ef4444;font-weight:500}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.topbar h1{font-size:17px;font-weight:700}
.topbar p{font-size:13px;color:#64748b;margin-top:2px}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;display:block;margin-bottom:3px}
.page-body{padding:20px 22px 40px}

/* KPIs */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px}
.kpi h3{font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.kpi strong{font-size:24px;font-weight:700;color:#0f172a;display:block}
.kpi small{font-size:11px;color:#94a3b8;margin-top:3px;display:block}

/* Cards */
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px;margin-bottom:14px}
.card h2{font-size:14px;font-weight:600;margin-bottom:12px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-header h2{margin:0}
.insight-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px}
.insight-card h2{font-size:14px;font-weight:600;margin-bottom:12px}
.grid-premium{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:14px;align-items:start}

/* Tables */
.table-wrap{overflow-x:auto}
.table-wrap table,table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 10px;font-weight:600;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #e2e8f0;white-space:nowrap}
td{padding:10px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f8fafc}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;background:#dbeafe;color:#1e40af}
.badge-green{background:#dcfce7;color:#166534}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-amber{background:#fef3c7;color:#92400e}
.badge-gray{background:#f1f5f9;color:#475569}
.badge-soft{background:#eff6ff;color:#1e40af;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-family:inherit}
.btn:hover{background:#f8fafc}
.btn-primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn-primary:hover{background:#1d4ed8}
.btn-secondary{background:#f1f5f9;color:#334155;border-color:#e2e8f0}
.btn-light{background:#fff;border:1px solid #e2e8f0;color:#334155}
.btn-light:hover{background:#f8fafc}
.btn-danger{color:#dc2626;border-color:#fecaca}
.btn-danger:hover{background:#fef2f2}
.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Forms */
label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;color:#0f172a;background:#fff;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.muted{color:#64748b;font-size:13px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.row>div{display:flex;flex-direction:column}

/* Alerts */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;border:1px solid transparent}
.alert.success,.alert-success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.alert.error,.alert-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.alert.info,.alert-info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.alert.warning,.alert-warning{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* Progress */
.progress{height:5px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-top:6px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#0ea5e9);border-radius:99px}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid #e2e8f0;margin-bottom:14px}
.tabs a{padding:9px 16px;font-size:13px;font-weight:500;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:#0f172a}
.tabs a strong{font-weight:600;color:#2563eb;border-bottom:2px solid #2563eb;display:inline-block}

/* Segment */
.segment{display:inline-flex;background:#f1f5f9;border-radius:8px;padding:3px;gap:2px}
.segbtn{padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;font-family:inherit}
.segbtn.active{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:600}

/* Mini stat */
.mini-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}
.mini-stat span{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#94a3b8;margin-bottom:4px}
.mini-stat strong{font-size:18px;font-weight:700}

/* Quick links */
.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-links a{padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:13px;font-weight:600;color:#0f172a}
.quick-links a:hover{background:#eff6ff}

/* Login admin */
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eff6ff,#f0fdf4)}
.login-premium{display:grid;grid-template-columns:1.2fr .9fr;gap:22px;max-width:1040px;width:100%;padding:22px}
.login-showcase{padding:38px;border-radius:22px;background:linear-gradient(135deg,#0f172a,#1e3a8a 60%,#0f766e);color:#fff;box-shadow:0 20px 50px rgba(15,23,42,.22)}
.login-showcase h1{font-size:2.4rem;line-height:1.05;margin:14px 0 10px}
.login-showcase p{color:rgba(255,255,255,.78);font-size:15px;line-height:1.5}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.feature-list div{background:rgba(255,255,255,.1);padding:11px 13px;border-radius:12px;font-size:13px;font-weight:600}
.login-box{padding:32px;background:#fff;border-radius:22px;border:1px solid #e2e8f0;box-shadow:0 14px 36px rgba(15,23,42,.07)}
.login-box h2{font-size:20px;font-weight:700;margin-bottom:4px}
.login-box p.muted{margin-bottom:18px}
.login-box label{margin-bottom:4px}
.login-box input{height:42px;padding:0 10px;margin-bottom:10px}
.login-box button{width:100%;height:44px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.login-box button:hover{background:#1d4ed8}
.login-dot{width:13px;height:13px;border-radius:50%;background:linear-gradient(90deg,#2563eb,#14b8a6);box-shadow:0 0 0 6px rgba(37,99,235,.1);flex-shrink:0}
.login-headline{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.clean-chip{display:inline-block;padding:7px 11px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:600;color:#fff;margin-bottom:14px}

/* Portal morador login */
.morador-premium-body{background:#031b57}
.morador-premium-scene{min-height:100vh;padding:22px;background:linear-gradient(135deg,#031b57,#0a3d8f 54%,#0b6b6f)}
.morador-premium-wrap{max-width:1140px;margin:0 auto;min-height:calc(100vh - 44px);display:grid;grid-template-columns:1.1fr .72fr;gap:26px;align-items:center}
.morador-premium-hero{color:#fff;padding:18px 0}
.morador-premium-hero h1{font-size:46px;line-height:1.02;letter-spacing:-1.4px;margin:10px 0 12px}
.morador-premium-hero p{font-size:18px;line-height:1.5;color:rgba(255,255,255,.83);margin-bottom:18px}
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.hero-points div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);font-weight:600;font-size:14px;color:#fff}
.hero-chip{display:inline-block;margin:6px 0 10px;padding:7px 11px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:11px;color:#dff7ff;font-weight:600}
.morador-premium-login{display:flex;justify-content:center}
.morador-premium-card{width:100%;max-width:400px;padding:30px;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 26px 55px rgba(0,0,0,.2)}
.morador-premium-card h2{font-size:22px;font-weight:700;margin-bottom:4px;color:#0f172a}
.morador-premium-card p{font-size:13px;color:#64748b;margin-bottom:16px}
.morador-premium-card label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.morador-premium-card input{width:100%;height:44px;border-radius:9px;border:1px solid #d1d5db;padding:0 11px;font-size:14px;background:#f8fbff;margin-bottom:10px;font-family:inherit}
.morador-premium-card input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.morador-premium-card button{width:100%;height:46px;border:0;border-radius:9px;background:linear-gradient(90deg,#1e3a8a,#0f766e);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}

/* Portal painel */
.portal-shell{display:flex;height:100vh;overflow:hidden}
.portal-sidebar{width:250px;flex-shrink:0;background:#0f172a;display:flex;flex-direction:column;overflow-y:auto}
.portal-main{flex:1;overflow-y:auto}
.portal-brand{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.portal-brand strong{display:block;font-size:14px;font-weight:700;color:#f8fafc}
.portal-brand small{font-size:11px;color:#94a3b8}
.portal-brand img{max-height:40px;max-width:140px;object-fit:contain;margin-bottom:8px;display:block}
.portal-user{margin:8px;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.portal-user strong{display:block;font-size:13px;font-weight:600;color:#f8fafc}
.portal-user small{font-size:11px;color:#94a3b8}
.portal-menu{padding:6px 0;flex:1}
.portal-menu a{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13px;font-weight:500;color:#94a3b8;border-left:3px solid transparent}
.portal-menu a:hover{background:rgba(255,255,255,.05);color:#f8fafc}
.portal-menu a.active{background:rgba(37,99,235,.15);color:#93c5fd;border-left-color:#2563eb}
.portal-logout{padding:10px 14px;border-top:1px solid rgba(255,255,255,.08)}
.portal-logout a{font-size:12px;color:#f87171;font-weight:500}

/* Cobrancas cards portal */
.cobranca-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:10px 0;background:#fff}
.cobranca-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cobranca-top h3{font-size:14px;font-weight:700;margin:5px 0 3px}
.cobranca-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.cobranca-meta .mini{background:#f8fafc;border-radius:8px;padding:9px 10px;border:1px solid #e2e8f0}
.cobranca-meta .mini strong{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#94a3b8;margin-bottom:3px}
.valor-main{font-size:24px;font-weight:800;color:#0f172a}
.cobranca-obs{margin-top:10px;padding:9px 12px;border-radius:8px;background:#fffbeb;border:1px solid #fde68a;font-size:13px}
.cobranca-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9}

/* Cadastro portal público */
.morador-cadastro-wrap{max-width:580px;margin:0 auto;padding:28px 16px}
.morador-login-box-luxo{background:#fff;border-radius:18px;border:1px solid #e2e8f0;padding:26px;box-shadow:0 10px 36px rgba(15,23,42,.07)}
.morador-login-box-luxo h2{font-size:19px;font-weight:700;margin-bottom:3px}
.morador-login-box-luxo .muted{margin-bottom:16px}
.morador-login-box-luxo label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.morador-login-box-luxo input,.morador-login-box-luxo select,.morador-login-box-luxo textarea{margin-bottom:10px}
.morador-login-box-luxo select{height:42px}
.check-line{display:flex;gap:10px;align-items:flex-start;border:1px solid #e2e8f0;background:#f8fafc;border-radius:10px;padding:11px 13px;margin:6px 0 12px}
.check-line input[type=checkbox]{width:auto;margin-top:2px;flex-shrink:0}
.check-line label{font-size:13px;font-weight:400;color:#374151;margin:0}

/* Preview card cobranças */
.preview-card{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:18px;padding:20px;position:sticky;top:18px}
.preview-card .muted{color:rgba(255,255,255,.6);font-size:12px}

/* Responsive */

/* =============================================
   RESPONSIVO MOBILE — versão limpa
   ============================================= */

/* =============================================
   RESPONSIVO MOBILE — versão final limpa
   ============================================= */




@media (max-width:980px) {
  body { overflow-x:hidden; }

  /* Login mobile */
  .morador-premium-wrap {
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:20px 16px !important;
    gap:20px !important;
  }
  .morador-premium-hero h1 { font-size:28px !important; letter-spacing:-.5px !important; }
  .morador-premium-hero p { font-size:15px !important; }
  .morador-premium-card { max-width:100% !important; padding:22px 18px !important; }
  .morador-premium-scene { padding:16px !important; }
  .hero-points { grid-template-columns:1fr 1fr !important; }
  
  /* Login admin mobile */
  .login-premium { grid-template-columns:1fr !important; padding:16px !important; }
  .login-showcase { order:2; padding:24px !important; }
  .login-box { padding:22px 18px !important; }

  /* ===== ADMIN sidebar ===== */
  .app-shell { display:block !important; }

  .sidebar {
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:min(85vw, 300px) !important;
    height:100vh !important;
    transform:translateX(-110%) !important;
    transition:transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index:1300;
    overflow-y:auto;
    box-shadow:4px 0 40px rgba(0,0,0,.3) !important;
    padding-bottom:30px;
    display:flex !important;
    flex-direction:column !important;
  }
  body.sidebar-open .sidebar {
    transform:translateX(0) !important;
  }
  .mobile-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    z-index:1250;
  }
  body.sidebar-open .mobile-overlay { display:block; }

  .mobile-topbar {
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    position:sticky; top:0; z-index:1200;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
  }
  .mobile-menu-btn {
    width:44px; height:44px;
    background:#1d4ed8;
    border:none; border-radius:12px;
    color:#fff; font-size:22px;
    cursor:pointer; flex-shrink:0;
    display:flex !important;
    align-items:center; justify-content:center;
  }
  .mobile-topbar-title {
    font-size:15px; font-weight:700; color:#0f172a;
  }

  .content { height:auto !important; overflow:visible !important; width:100% !important; }
  .menu-group { display:block !important; }
  .menu-group .submenu { display:block !important; max-height:none !important; }

  /* ===== PORTAL sidebar mobile ===== */
  .portal-shell { display:block !important; }

  .portal-sidebar {
    position:fixed !important;
    top:0 !important; left:0 !important; bottom:0 !important;
    width:min(85vw, 280px) !important;
    height:100vh !important;
    transform:translateX(-110%) !important;
    transition:transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index:1300 !important;
    overflow-y:auto !important;
    box-shadow:4px 0 40px rgba(0,0,0,.35) !important;
    padding-bottom:30px !important;
    flex-direction:column !important;
  }
  body.portal-open .portal-sidebar {
    transform:translateX(0) !important;
  }
  /* Links do menu ficam clicáveis acima do overlay */
  .portal-sidebar .portal-menu a {
    position:relative;
    z-index:1400;
  }
  .portal-mobile-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    z-index:1250;
  }
  body.portal-open .portal-mobile-overlay { display:block; }

  .portal-mobile-topbar {
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    position:sticky; top:0; z-index:1200;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
  }
  .portal-mobile-menu-btn {
    width:44px; height:44px;
    background:#166534;
    border:none; border-radius:12px;
    color:#fff; font-size:22px;
    cursor:pointer; flex-shrink:0;
    display:flex !important;
    align-items:center; justify-content:center;
  }
  .portal-mobile-topbar-title {
    font-size:15px; font-weight:700; color:#0f172a;
  }

  .portal-main { height:auto !important; overflow:visible !important; width:100% !important; }
  .portal-menu { display:flex !important; flex-direction:column !important; }

  /* ===== GRIDS ===== */
  .grid { grid-template-columns:1fr 1fr !important; }
  .grid-premium { grid-template-columns:1fr !important; }
  .row { grid-template-columns:1fr !important; }
  .quick-links { grid-template-columns:1fr 1fr !important; }

  /* ===== CARDS ===== */
  .card, .insight-card, .kpi { padding:14px 16px; border-radius:12px; }
  .kpi strong { font-size:20px; }

  /* ===== TABELA — scroll horizontal ===== */
  .table-wrap {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:100%;
  }
  .table-wrap table {
    min-width:580px;
    width:max-content;
  }
  /* Cobranças do portal viram cards no mobile */
  .cobranca-card { padding:14px !important; }
  .cobranca-top { flex-direction:column !important; gap:8px !important; }
  .cobranca-meta { grid-template-columns:1fr 1fr !important; }

  /* Forms */
  .row { grid-template-columns:1fr !important; }
  select, input[type=text], input[type=email], input[type=number], input[type=date], textarea {
    font-size:16px !important; /* evita zoom no iOS */
  }
}

@media (max-width:480px) {
  .grid { grid-template-columns:1fr !important; }
  .cobranca-meta { grid-template-columns:1fr 1fr !important; }
  .table-wrap table { min-width:480px; }
  .kpi strong { font-size:18px; }
  .actions { flex-direction:column !important; width:100%; }
  .actions .btn { width:100%; justify-content:center; }
}