/* Central Construindo Gigantes — V10 (fix)
   - Remove @apply (não funciona em CSS externo com Tailwind CDN)
   - Botões e inputs com CSS real
   - Mais respiro + tipografia consistente
*/

:root{
  --bg: #09090b;            /* zinc-950 */
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);
  --text: #fafafa;
  --muted: rgba(244,244,245,.78);
  --muted2: rgba(244,244,245,.62);
  --red: #dc2626;
  --red2: rgba(239,68,68,.35);
}

.glass{ background: var(--panel); backdrop-filter: blur(14px); }
.glass-strong{ background: var(--panel2); backdrop-filter: blur(18px); }
.ring-soft{ box-shadow: 0 0 0 1px var(--border) inset; }

.input{
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 1rem; /* 2xl-ish */
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-size: .95rem;
  outline: none;
}
.input::placeholder{ color: rgba(244,244,245,.45); }
.input:focus{
  border-color: var(--red2);
  box-shadow: 0 0 0 2px var(--red2);
}

.btn-primary, .btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem .9rem;
  border-radius: 1rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: transform .06s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn-primary{
  background: var(--red);
  border: 1px solid rgba(239,68,68,.30);
  color: white;
}
.btn-primary:hover{ background: #b91c1c; }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); }
.btn-ghost:active{ transform: translateY(1px); }

.badge, .badge-red{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
  color: rgba(244,244,245,.90);
}
.badge-red{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.18);
  color: rgba(254,202,202,.95);
}

.card{
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.card:hover{ background: rgba(255,255,255,.07); }

.thumb{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.thumb img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Typography helpers */
.kicker{ font-size: .88rem; color: var(--muted); }
.h1{ font-size: clamp(1.35rem, 1.10rem + 0.9vw, 1.8rem); font-weight: 700; letter-spacing: -.01em; }
.h2{ font-size: clamp(1.02rem, .95rem + .45vw, 1.25rem); font-weight: 700; letter-spacing: -.01em; }
.p{ font-size: 1rem; color: rgba(244,244,245,.86); line-height: 1.55; }
.small{ font-size: .86rem; color: var(--muted2); line-height: 1.45; }

.titleClamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dashboard accents */
.accent{ position: relative; overflow: hidden; }
.accent:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}
.accent:after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius: 999px;
  background: rgba(239,68,68,.85);
}
.accent-red:after{ background: rgba(239,68,68,.90); }
.accent-amber:after{ background: rgba(245,158,11,.95); }
.accent-emerald:after{ background: rgba(16,185,129,.95); }
.accent-sky:after{ background: rgba(56,189,248,.95); }
.accent-violet:after{ background: rgba(167,139,250,.95); }
.accent-zinc:after{ background: rgba(244,244,245,.80); }

.kpi{
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.kpiIcon{
  height: 2.6rem; width: 2.6rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.05rem;
}
.kpiValue{
  font-size: clamp(1.65rem, 1.2rem + 1.0vw, 2.1rem);
  line-height: 1.05;
}

.sectionTitle{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.92rem;
  font-weight: 700;
  color: rgba(244,244,245,.92);
}
.sectionTitle .dot{
  height:.5rem; width:.5rem;
  border-radius:999px;
  background: rgba(239,68,68,.95);
}

/* Scrollbar */
.scrollbar::-webkit-scrollbar{height:10px;width:10px}
.scrollbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}

/* Breathing room */
@media (max-width: 640px){
  #view{ padding: 1.4rem !important; }
  .btn-primary, .btn-ghost{ padding: .85rem 1rem; }
  .input{ padding: .85rem 1rem; font-size: 1rem; }
}
@media (min-width: 1024px){
  #view{ padding: 2.6rem !important; }
}

/* Layout spacing helpers */
.gapDash{ gap: 1.5rem; }

.titleSingle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}


/* V13 — Layout fixes (no overlap) */
.rowGrid{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: center;
  min-width: 0;
}
.rowGrid .min0{ min-width:0; }
.descClamp{
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Responsive stack for tight rows */
@media (max-width: 520px){
  .rowGridStack{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .rowGridStack > :nth-child(1){ justify-self: start; }
  .rowGridStack > :nth-child(2){ width: 100%; }
  .rowGridStack > :nth-child(3){ width: 100%; justify-self: stretch; }
  .rowGridStack > :nth-child(3) button{ width: 100%; }
}