/* CRM Pro - Design MSP profissional */
:root{
  /* Paleta neutra fria */
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --border:#E4E7EC;
  --border-soft:#F0F2F5;
  --text:#101828;
  --text-soft:#475467;
  --text-mute:#98A2B3;
  /* Brand */
  --brand:#3B5BDB;
  --brand-hover:#324CB8;
  --brand-soft:#EDF0FD;
  /* Status */
  --success:#12B76A;
  --success-soft:#ECFDF3;
  --warning:#F79009;
  --warning-soft:#FFFAEB;
  --danger:#F04438;
  --danger-soft:#FEF3F2;
  --info:#0BA5EC;
  --info-soft:#F0F9FF;
  /* Sidebar dark */
  --side-bg:#101828;
  --side-text:#D0D5DD;
  --side-text-active:#FFFFFF;
  --side-hover:#1D2939;
  --side-border:#1D2939;
  /* Shadows */
  --shadow-sm:0 1px 2px rgba(16,24,40,0.05);
  --shadow-md:0 1px 3px rgba(16,24,40,0.1),0 1px 2px rgba(16,24,40,0.06);
  --shadow-lg:0 4px 8px -2px rgba(16,24,40,0.1),0 2px 4px -2px rgba(16,24,40,0.06);
  --sidebar-w:248px;
  --radius:8px;
  --radius-lg:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ===== ÍCONES SVG ===== */
.icon{width:18px;height:18px;stroke-width:1.75;flex-shrink:0;vertical-align:middle}
.icon-sm{width:14px;height:14px}
.icon-lg{width:22px;height:22px}

/* ===== LOGIN ===== */
.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1rem}
.login-box{background:var(--surface);padding:2.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px;border:1px solid var(--border)}
.login-brand{display:flex;align-items:center;gap:0.625rem;margin-bottom:1.5rem}
.login-brand .logo{width:38px;height:38px;background:var(--brand);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff}
.login-brand h1{font-size:1.25rem;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.login-box .subtitle{color:var(--text-soft);margin-bottom:1.75rem;font-size:0.875rem}

/* ===== LAYOUT ===== */
.dashboard{display:flex;min-height:100vh;width:100%}

/* SIDEBAR */
.sidebar{
  background:var(--side-bg);
  color:var(--side-text);
  width:var(--sidebar-w);
  min-height:100vh;
  position:fixed;
  top:0;left:0;
  overflow-y:auto;
  z-index:1000;
  transition:transform 0.25s ease;
  display:flex;flex-direction:column;
}
.sidebar-brand{padding:1.25rem 1.25rem;border-bottom:1px solid var(--side-border);display:flex;justify-content:space-between;align-items:center}
.sidebar-brand-content{display:flex;align-items:center;gap:0.625rem}
.sidebar-brand .logo{width:32px;height:32px;background:var(--brand);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.sidebar-brand h2{font-size:0.95rem;font-weight:600;color:#fff;letter-spacing:-0.01em}
.sidebar-brand .tagline{font-size:0.7rem;color:var(--text-mute);margin-top:1px}
.sidebar-close{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:0.25rem;border-radius:6px}
.sidebar-close:hover{background:var(--side-hover)}

.nav-section{padding:1rem 0.75rem 0.5rem;font-size:0.7rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.05em;font-weight:600}
.nav-menu{padding:0.25rem 0.5rem;flex:1}
.nav-item{
  display:flex;align-items:center;gap:0.625rem;
  padding:0.5rem 0.75rem;
  color:var(--side-text);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  border-radius:6px;
  margin-bottom:1px;
  transition:background 0.15s;
}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--brand);color:#fff}
.nav-item .icon{opacity:0.9}
.sidebar-footer{padding:0.5rem;border-top:1px solid var(--side-border)}

/* MAIN */
.main-content{flex:1;margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));max-width:100%;display:flex;flex-direction:column;min-height:100vh}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,0.5);z-index:999}
.sidebar-overlay.show{display:block}

/* TOP BAR */
.top-bar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0.875rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:100;
}
.top-bar-left{display:flex;align-items:center;gap:0.875rem;min-width:0;flex:1}
.menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--border);width:36px;height:36px;border-radius:7px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.menu-toggle:hover{background:var(--bg)}
.top-bar h1{font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb{color:var(--text-mute);font-size:0.85rem;font-weight:400;margin-right:0.5rem}
.user-info{display:flex;align-items:center;gap:0.625rem;flex-shrink:0}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:0.75rem;flex-shrink:0}

/* CONTENT WRAPPER */
.page-content{padding:1.5rem;flex:1}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--surface);
  padding:1.125rem 1.25rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.stat-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.625rem}
.stat-card h3{font-size:0.78rem;color:var(--text-soft);font-weight:500}
.stat-card .stat-icon{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand)}
.stat-card .stat-value{font-size:1.5rem;font-weight:600;color:var(--text);letter-spacing:-0.02em;line-height:1.2}
.stat-card .stat-delta{font-size:0.75rem;color:var(--text-mute);margin-top:0.25rem}

/* CARD */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  margin-bottom:1.25rem;
  overflow:hidden;
}
.card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.card-head h2{font-size:0.95rem;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.card-body{padding:1.25rem}

/* FORM */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:0.375rem;font-weight:500;font-size:0.82rem;color:var(--text-soft)}
.form-control{
  width:100%;
  padding:0.5rem 0.75rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.875rem;
  font-family:inherit;
  background:var(--surface);
  color:var(--text);
  transition:border-color 0.15s,box-shadow 0.15s;
}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,91,219,0.1)}
.form-control::placeholder{color:var(--text-mute)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.5rem 0.875rem;
  border:1px solid transparent;
  border-radius:6px;
  font-size:0.82rem;
  font-weight:500;
  cursor:pointer;
  transition:all 0.15s;
  text-decoration:none;
  gap:0.375rem;
  font-family:inherit;
  white-space:nowrap;
  line-height:1;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--bg);border-color:var(--text-mute)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#0E9456;border-color:#0E9456}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-ghost{background:transparent;color:var(--text-soft);border-color:transparent;padding:0.4rem 0.6rem}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-sm{padding:0.35rem 0.625rem;font-size:0.75rem}

/* TABLE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:600px}
thead{background:var(--bg)}
th{
  padding:0.625rem 1.25rem;text-align:left;
  font-weight:500;font-size:0.7rem;
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
}
td{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border-soft);font-size:0.875rem;color:var(--text)}
tr:last-child td{border-bottom:none}
tr:hover{background:var(--border-soft)}
.cell-primary{font-weight:500;color:var(--text)}
.cell-mute{color:var(--text-mute)}
.empty-row td{text-align:center;padding:3rem 1rem;color:var(--text-mute);font-size:0.875rem}
.empty-row svg{margin-bottom:0.5rem;color:var(--text-mute);opacity:0.5}

/* BADGES (estilo pill discreto) */
.badge{
  display:inline-flex;align-items:center;gap:0.25rem;
  padding:0.2rem 0.5rem;
  border-radius:6px;
  font-size:0.7rem;
  font-weight:500;
  border:1px solid;
  line-height:1.3;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.9}
.badge-success{background:var(--success-soft);color:var(--success);border-color:var(--success-soft)}
.badge-warning{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-soft)}
.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-soft)}
.badge-info{background:var(--info-soft);color:var(--info);border-color:var(--info-soft)}
.badge-brand{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft)}
.badge-neutral{background:var(--bg);color:var(--text-soft);border-color:var(--border)}
.badge-plain{background:transparent;color:var(--text-soft);border-color:transparent;padding:0}
.badge-plain::before{display:none}

/* ACTIONS */
.actions{display:flex;gap:0.25rem;align-items:center}
.action-btn{
  padding:0.4rem;
  border:none;background:transparent;
  cursor:pointer;border-radius:6px;
  color:var(--text-soft);
  display:inline-flex;align-items:center;justify-content:center;
}
.action-btn:hover{background:var(--bg);color:var(--brand)}
.action-btn.danger:hover{color:var(--danger);background:var(--danger-soft)}
.action-btn .icon{width:16px;height:16px}

/* ALERTS */
.alert{padding:0.75rem 1rem;border-radius:var(--radius);margin-bottom:1.25rem;font-weight:400;font-size:0.85rem;border:1px solid;display:flex;align-items:flex-start;gap:0.5rem}
.alert .icon{margin-top:1px;flex-shrink:0}
.alert-success{background:var(--success-soft);color:var(--success);border-color:rgba(18,183,106,0.2)}
.alert-info{background:var(--info-soft);color:var(--info);border-color:rgba(11,165,236,0.2)}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(240,68,56,0.2)}

/* ====== KANBAN ====== */
.kanban{display:flex;gap:0.875rem;overflow-x:auto;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch}
.kanban-col{
  flex:0 0 280px;
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 200px);
}
.kanban-col-head{
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border-soft);
  display:flex;justify-content:space-between;align-items:center;
}
.kanban-col-head .title{font-size:0.82rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:0.5rem}
.kanban-col-head .count{background:var(--bg);color:var(--text-soft);font-size:0.7rem;padding:0.1rem 0.45rem;border-radius:10px;font-weight:500}
.kanban-col-head .total{font-size:0.75rem;color:var(--text-soft);font-weight:500}
.kanban-cards{padding:0.625rem;display:flex;flex-direction:column;gap:0.5rem;overflow-y:auto;flex:1;min-height:60px}
.kanban-empty{text-align:center;color:var(--text-mute);padding:1rem;font-size:0.8rem}
.kanban-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:0.75rem;
  cursor:pointer;
  transition:all 0.15s;
}
.kanban-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand);transform:translateY(-1px)}
.kanban-card-title{font-weight:600;color:var(--text);font-size:0.82rem;margin-bottom:0.25rem}
.kanban-card-cli{font-size:0.75rem;color:var(--text-soft);margin-bottom:0.5rem}
.kanban-card-val{font-weight:600;color:var(--brand);font-size:0.9rem}
.kanban-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--border-soft);font-size:0.7rem;color:var(--text-mute)}

/* ====== ITEM ROW (produto picker) ====== */
.item-row{display:grid;grid-template-columns:2fr 0.6fr 1fr auto;gap:0.5rem;margin-bottom:0.5rem;align-items:center}

/* ====== DETAIL VIEW (cliente / oportunidade 360) ====== */
.detail-head{
  background:var(--surface);
  padding:1.5rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  margin-bottom:1.25rem;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;
}
.detail-head .title-block{display:flex;align-items:center;gap:1rem}
.detail-head .big-avatar{width:56px;height:56px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600}
.detail-head h1{font-size:1.35rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:0.25rem}
.detail-head .subtitle{font-size:0.85rem;color:var(--text-soft)}
.detail-head .actions{margin-left:auto}
.detail-grid{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;align-items:start}
.detail-info p{margin-bottom:0.5rem;font-size:0.85rem;color:var(--text)}
.detail-info p strong{color:var(--text-soft);font-weight:500;display:inline-block;min-width:80px}

/* ====== STAGE PROGRESS (igual Salesforce: setas) ====== */
.stage-progress{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.25rem}
.stage-step{
  flex:1;padding:0.875rem 1rem;
  font-size:0.78rem;font-weight:500;
  position:relative;
  color:var(--text-soft);
  background:var(--bg);
  text-align:center;
  border-right:1px solid var(--border);
}
.stage-step:last-child{border-right:none}
.stage-step.done{background:var(--success-soft);color:var(--success)}
.stage-step.current{background:var(--brand);color:#fff;font-weight:600}
.stage-step.upcoming{background:var(--surface);color:var(--text-mute)}

/* ====== EMPTY STATE ====== */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--text-mute)}
.empty-state .icon{width:40px;height:40px;margin-bottom:0.75rem;opacity:0.4}
.empty-state-title{font-size:0.95rem;color:var(--text-soft);margin-bottom:0.25rem;font-weight:500}
.empty-state-msg{font-size:0.82rem}

/* ===== MOBILE / TABLET ===== */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:4px 0 16px rgba(16,24,40,0.18)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex;align-items:center;justify-content:center}
  .main-content{margin-left:0;width:100%}
  .menu-toggle{display:flex}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page-content{padding:1rem}
  .top-bar{padding:0.75rem 1rem}
  .user-info span:not(.user-avatar){display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.625rem}
  .stat-card{padding:0.875rem}
  .stat-card .stat-value{font-size:1.15rem}
  .item-row{grid-template-columns:1fr 1fr;gap:0.4rem}
  .kanban-col{flex:0 0 240px}
  .stage-progress{flex-direction:column}
  .stage-step{border-right:none;border-bottom:1px solid var(--border)}
  th,td{padding:0.625rem 0.875rem}
}
@media(max-width:380px){
  .stats-grid{grid-template-columns:1fr}
}

/* DEFENSIVE: garantir tamanho dos SVGs e logos mesmo em condições adversas */
svg.icon{width:18px!important;height:18px!important;max-width:18px;max-height:18px;flex-shrink:0;display:inline-block;vertical-align:middle}
svg.icon-sm{width:14px!important;height:14px!important;max-width:14px;max-height:14px}
svg.icon-lg{width:22px!important;height:22px!important;max-width:22px;max-height:22px}
.sidebar-brand .logo svg{width:16px!important;height:16px!important}
.big-avatar svg{width:22px!important;height:22px!important}
.stat-icon svg{width:14px!important;height:14px!important}
.empty-state svg, .empty-row svg{width:32px!important;height:32px!important;max-width:32px;max-height:32px}
.nav-item svg{width:18px!important;height:18px!important;max-width:18px;max-height:18px;flex-shrink:0}
.btn svg{width:14px!important;height:14px!important;max-width:14px;max-height:14px;flex-shrink:0}
.action-btn svg{width:16px!important;height:16px!important;max-width:16px;max-height:16px;flex-shrink:0}
.alert svg{width:14px!important;height:14px!important;max-width:14px;max-height:14px;flex-shrink:0}
.menu-toggle svg{width:18px!important;height:18px!important;max-width:18px;max-height:18px}
.card-head svg{width:14px!important;height:14px!important;max-width:14px;max-height:14px}

/* =====================================================
   LISTAGEM — toolbar de busca/filtros + paginação
   ===================================================== */
.listagem-toolbar { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.ltb-busca-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ltb-busca { flex: 1; min-width: 240px; position: relative; display: flex; align-items: center; gap: 0.5rem; background: #F9FAFB; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.75rem; transition: all 0.15s; }
.ltb-busca:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }
.ltb-input { flex: 1; border: none; background: transparent; outline: none; font-size: 0.9rem; font-family: inherit; color: var(--text); }
.ltb-input::placeholder { color: var(--text-mute); }
.ltb-clear { background: var(--border); color: var(--text-soft); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; line-height: 1; }
.ltb-clear:hover { background: var(--danger); color: #fff; }
.ltb-btn-filtros, .ltb-btn-buscar, .ltb-btn-limpar { padding: 0.55rem 0.85rem; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; font-family: inherit; transition: all 0.15s; }
.ltb-btn-filtros:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.ltb-btn-filtros.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.ltb-btn-buscar { background: var(--brand); color: #fff; border-color: var(--brand); }
.ltb-btn-buscar:hover { background: var(--brand-hover); }
.ltb-btn-limpar { color: var(--danger); }
.ltb-btn-limpar:hover { background: var(--danger-soft); border-color: var(--danger); }

.ltb-filtros { display: none; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-soft); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; }
.ltb-filtros.show { display: grid; }
.ltb-filtro-item { display: flex; flex-direction: column; gap: 0.3rem; }
.ltb-filtro-item label { font-size: 0.75rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.3px; }
.ltb-filtro-item select, .ltb-filtro-item input[type="date"] { padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem; background: #fff; font-family: inherit; color: var(--text); }
.ltb-filtro-item select:focus, .ltb-filtro-item input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }

.listagem-paginacao { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.85rem; margin-top: 1rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; font-size: 0.85rem; }
.lp-info { color: var(--text-soft); }
.lp-pages { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.lp-btn, .lp-num { padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-soft); text-decoration: none; font-size: 0.85rem; cursor: pointer; transition: all 0.1s; min-width: 34px; text-align: center; }
.lp-btn:hover, .lp-num:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.lp-num.current { background: var(--brand); color: #fff; border-color: var(--brand); cursor: default; }
.lp-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.lp-gap { color: var(--text-mute); padding: 0 0.25rem; }
.lp-pp { color: var(--text-soft); display: flex; align-items: center; gap: 0.4rem; }
.lp-pp select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; font-family: inherit; background: #fff; }

@media (max-width: 700px) {
    .listagem-paginacao { flex-direction: column; align-items: stretch; }
    .lp-info, .lp-pp { text-align: center; }
    .lp-pages { justify-content: center; }
}