/* Duelos Troll MLBB - distribución: cabecera, pestañas, columnas y el contenedor de detalle.
   Un solo HTML; estos puntos de corte cambian la forma:
     < 700 px        teléfono: pestañas abajo, listas en filas, detalle como hoja inferior
     700 - 1099 px   tablet: pestañas arriba, rejilla de tarjetas, detalle como ventana centrada
     >= 1100 px      PC: detalle como panel fijo a la derecha
     >= 1280 px      PC ancho: además, filtros en columna fija a la izquierda */

/* ================= teléfono (base) ================= */
.app{padding-top:env(safe-area-inset-top,0px)}
.top-in{
  padding:12px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
}
.top h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.37px;margin:8px 0 4px}
.shell{
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(88px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
}
.views,.main{min-width:0}
.sub{margin:0 0 16px;font-size:15px;line-height:20px;color:var(--fg2);max-width:46ch}

/* pestañas: barra fija abajo */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;
  background:var(--card);border-top:.5px solid var(--sep);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
}
.tabbar .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:560px;gap:4px}
.tab{
  height:48px;border:0;border-radius:10px;background:transparent;color:var(--fg2);
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.tab svg{width:24px;height:24px}
.tab[aria-selected="true"]{color:var(--accent)}
.tab:active{background:var(--fill)}

/* columna de filtros y columna de resultados (apiladas en teléfono) */
.tools{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.filters{margin-bottom:4px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.countrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:12px 4px 4px;font-size:13px;color:var(--fg2);min-height:44px;
}
.pagefoot{margin-top:24px}
.foot{margin:12px 4px 0;font-size:13px;line-height:18px;color:var(--fg2);max-width:60ch}

/* ---------- detalle: hoja inferior ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20}
.detail{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  width:100%;max-height:88vh;max-height:88dvh;overflow-y:auto;
  background:var(--sheet-bg);color:var(--fg);
  border-radius:14px 14px 0 0;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  overscroll-behavior:contain;
}
.detail:focus{outline:none}
.detail:not(.is-open){display:none}
.detail.is-open{animation:up .3s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

.sheet-top{
  position:sticky;top:0;z-index:3;background:var(--sheet-bg);
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding-top:8px;margin:0 -6px;
}
.grab{position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--fg3);opacity:.6}
.sbtn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  border:0;background:none;color:var(--link);font-size:17px;padding:8px 6px;cursor:pointer;
}
.sbtn.done{font-weight:600;margin-left:auto}
.sbtn.back{margin-right:auto}
.bchev{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px}
.dempty{display:none}

/* ================= tablet: desde 700 px ================= */
@media (min-width:700px){
  :root{--top-h:56px}
  .top{
    position:sticky;top:0;z-index:10;background:var(--bg);
    border-bottom:.5px solid var(--sep);
  }
  .top-in{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    height:var(--top-h);max-width:1440px;margin:0 auto;padding:0 24px;
  }
  .top h1{font-size:22px;line-height:28px;margin:0;letter-spacing:0}
  .shell{max-width:1440px;margin:0 auto;padding:16px 24px 48px}
  .sub{max-width:80ch}

  /* pestañas arriba, dentro de la cabecera */
  .tabbar{position:static;background:none;border:0;padding:0}
  .tabbar .in{display:flex;width:auto;max-width:none}
  .tab{flex-direction:row;gap:8px;height:40px;padding:0 14px;font-size:15px}
  .tab svg{width:20px;height:20px}
  .tab[aria-selected="true"]{background:var(--accent-tint);color:var(--link)}
  .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}   /* ya no hay barra de pestañas abajo */

  /* buscador y botones en una fila; filtros con el título a la izquierda */
  .tools{flex-direction:row;align-items:center}
  .tools .search{flex:1;min-width:0}
  .actions{display:flex;flex:none}
  .actions .btn{min-height:44px;font-size:15px;padding:6px 16px}
  .fgroup{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px 12px;align-items:start;margin-top:10px}
  .fgroup .cap{margin:0;line-height:36px}
  .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}
  .seg{max-width:460px}

  /* detalle: ventana centrada */
  .detail{
    top:5vh;bottom:auto;margin-inline:auto;
    width:min(700px,calc(100% - 48px));max-height:90vh;
    border-radius:14px;padding:0 20px 20px;
    box-shadow:var(--shadow);
  }
  .detail.is-open{animation:pop .22s ease-out}
  .grab{display:none}
  .sheet-top{padding-top:4px}
}

/* ================= PC: desde 1100 px ================= */
@media (min-width:1100px){
  .shell{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,29vw,420px);
    gap:20px;align-items:start;
  }
  /* el duelo necesita dos tarjetas lado a lado: el panel se ensancha */
  .app[data-dtype="duel"] .shell{grid-template-columns:minmax(0,1fr) minmax(540px,46%)}
  /* en la Guía no hay nada que elegir: sin panel mientras esté vacío.
     La Galería tampoco lo enseña vacío: los retratos usan todo el ancho hasta que se abre una ficha */
  .app[data-view="g"][data-detail="closed"] .shell,.app[data-view="r"][data-detail="closed"] .shell{grid-template-columns:minmax(0,1fr)}
  .app[data-view="g"][data-detail="closed"] .detail,.app[data-view="r"][data-detail="closed"] .detail{display:none}

  /* detalle: panel fijo a la derecha, con su propio scroll */
  .detail,.detail:not(.is-open){display:block}
  .detail{
    position:sticky;top:calc(var(--top-h) + 16px);z-index:1;
    left:auto;right:auto;bottom:auto;margin:0;
    width:auto;height:calc(100vh - var(--top-h) - 32px);max-height:none;
    border:1px solid var(--sep);border-radius:14px;padding:0 16px 20px;
    box-shadow:none;
  }
  .detail.is-open{animation:none}
  .detail:not(.is-open) .sheet-top{display:none}
  .detail:not(.is-open) .dempty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:100%;padding:24px 12px;text-align:center;color:var(--fg2);font-size:15px;line-height:21px;
  }
}

/* ================= PC ancho: desde 1280 px ================= */
@media (min-width:1280px){
  .view:not(.gsec){
    display:grid;grid-template-columns:208px minmax(0,1fr);gap:20px;align-items:start;
  }
  .side{
    position:sticky;top:calc(var(--top-h) + 12px);
    max-height:calc(100vh - var(--top-h) - 24px);overflow-y:auto;
    padding:6px;margin:-6px;scrollbar-width:thin;
  }
  .tools{flex-direction:column;align-items:stretch}
  .tools .search{flex:none}
  .search input{font-size:15px}
  .actions{display:grid;grid-template-columns:1fr}
  .fgroup{display:block;margin-top:0}
  .fgroup .cap{margin:16px 0 6px 4px;line-height:18px}
  .seg{grid-template-columns:1fr 1fr;max-width:none}
  .seg.seg3{grid-template-columns:1fr}
  .countrow{margin-top:0}
}

@media (prefers-reduced-motion: reduce){
  .detail.is-open{animation:none}
  html{scroll-behavior:auto}
}