/* SupaData — Responsive Dinámico (inspirado webAstral/landing) — capa aditiva, no rompe desktop */
:root{
  --pad:clamp(14px,3vw,28px);
  --topH:48px;
  --sideW:232px;
  --radius:14px;
}

/* Tipografía fluida */
html{scrollbar-gutter:stable}
body{font-size:clamp(13px,1.8vw,14px)}
.sec{font-size:clamp(15px,2vw,16px)}

/* Shell usa dvh para móviles */
.wrap{min-height:calc(100dvh - var(--topH));min-height:calc(100svh - var(--topH))}
.main{padding:var(--pad);max-width:min(1060px,100%);container-type:inline-size;container-name:main}

/* Top: clamp padding + burger */
.top{padding:0 var(--pad);gap:clamp(8px,2vw,12px)}
.top .burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);place-items:center;cursor:pointer;font-size:18px;line-height:1}
.top .burger svg{width:18px;height:18px}

/* Overlay drawer */
#sideOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:18;display:none}
#sideOverlay.open{display:block}

/* Bottom nav eliminado — se usa solo hamburger drawer + asistente IA */
.bottomNav{display:none !important}

/* Grids fluidos — reemplaza saltos bruscos */
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid2{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* DBlayout con container query */
.dblayout{container-type:inline-size}
@container main (max-width: 700px){
  .dblayout{grid-template-columns:1fr}
}

/* Cards: mejor tap target móvil */
.dbrow-card,.urow-unif,.ucard{border-radius:12px}
.dbrow-card{padding:12px 14px}
@media(hover:hover){.dbrow-card:hover{transform:translateY(-1px)}}

/* Tablas: hint scroll + sin min-width forzado en móvil */
.twrap{position:relative}
.twrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:18px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18));pointer-events:none;opacity:0;transition:opacity .2s}
.twrap.is-scrollable::after{opacity:1}
table.t{ min-width:560px }
@media(max-width:640px){
  table.t{ min-width:520px }
}

/* Insert bar: mejor wrap */
.insert-bar{ gap:10px }
.insert-bar #addRow .inp{ min-width:120px }

/* Responsive dinámico para filas unificadas */
@media(max-width:720px){
  .uhead-unif{display:none}
  .urow-unif{grid-template-columns:1fr auto;gap:8px;padding:12px 14px;align-items:start}
  .urow-unif .name{grid-column:1 / -1}
  .urow-unif .c-met,.urow-unif .c-est,.urow-unif .c-act,.urow-unif .c-del{justify-content:flex-start}
  .urow-unif .c-act{grid-column:1;gap:8px}
  .urow-unif .c-del{grid-column:2;justify-content:flex-end}
  .urow-unif .name b{font-size:14px}
}

/* dbrow-card apilado en móvil estrecho */
@media(max-width:640px){
  .dbhead{display:none}
  .dbrow{grid-template-columns:1fr auto;gap:8px}
  .dbrow b{font-size:14px}
  .dbrow .cell{font-size:12px}
  .dbrow .cell.r{font-weight:700}
  .dbrow .qbar.hide-m{display:none}
  .dbrow-card{gap:10px;padding:12px 14px}
  /* stats dentro de card: segunda línea */
  .dbrow .hide-m{ display:none }
}

/* Side drawer <900px (reemplaza scroll horizontal) */
@media(max-width: 900px){
  .wrap{grid-template-columns:1fr}
  .top .burger{display:grid}
  .side{
    position:fixed;top:var(--topH);left:0;bottom:0;width:min(82vw,300px);
    z-index:20;overflow-y:auto;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    border-right:1px solid var(--line);border-bottom:0;
    display:block;flex-direction:column;gap:0;
    padding:12px 10px 12px;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
  .side.open{transform:translateX(0)}
  .side .nav{width:100%;white-space:normal}
  .side .nsec,.side .card{display:block}
  .side .nsec{margin-top:8px}
  /* ocultar side horizontal viejo */
  .side:not(.open) ~ .main{margin-left:0}
  .main{padding-bottom:var(--pad)}
  .modal-card{margin-bottom:0}
  /* grids a 1 col en muy estrecho, 2 en medio */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:1fr}
}

/* Muy estrecho <380px */
@media(max-width:380px){
  .g4{grid-template-columns:1fr}
  .rowform .inp{min-width:100px}
  .top{padding:0 10px}
  .main{padding:12px}
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  .side{transition:none}
  .dbrow-card{transition:none}
}

/* Login dvh */
#login{ min-height:100dvh; min-height:100svh; padding:var(--pad) }
.lcard{ width:min(400px,92vw); max-height:calc(100dvh - 32px); overflow:auto }

/* Touch targets */
.nav,.ghost,.btn,.iconbtn{ min-height:44px }
@media(max-width:900px){
  .nav{ min-height:44px; padding:10px 12px }
}
/* Fluido dinámico inspirado en potenciatuproyecto.com — clamp + auto-fit + dvh */
:root{ --section-padding: clamp(3rem,6vw,6rem); --container-padding: clamp(1rem,4vw,2rem); }
.sec{margin-top:var(--section-padding); padding-left:var(--container-padding); padding-right:var(--container-padding)}
.hero{padding: clamp(2rem,6vw,4rem) var(--container-padding)}
.plugins-grid{grid-template-columns:repeat(auto-fit,minmax(clamp(130px,30vw,150px),1fr))}
@media(max-width:480px){
  .top{padding:0 8px; gap:6px}
  .proj-trigger{max-width:clamp(140px,45vw,200px)}
  #topProjectLabel{max-width:clamp(100px,35vw,140px)}
}
/* Blindaje topbar: bordes seguros (nunca pegado al exterior) + sin solape + sin 44px dentro */
.top{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.top .ghost,.top .iconbtn,.top .burger{min-height:0}
@media(max-width:640px){
  .top{gap:8px}
  #adminModeToggle{min-width:0}
  .admin-toggle .ghost{padding:5px 8px;font-size:11px}
}