/* glossary-view.css — Vista del glosario LIF Poker (sidebar + detail)
 * Estilo Notion/Confluence: lista a la izquierda, detalle a la derecha.
 * Mobile: lista → detalle full-screen al seleccionar.
 *
 * Animaciones en sí: glossary-animations.css
 */

/* ============================================================
   CONTAINER PRINCIPAL
   ============================================================ */
.lif-glossary{
  --lg-primary:#6ECFF0;
  --lg-primary-rgb:110,207,240;
  --lg-accent:#1481C0;
  --lg-deep:#002E67;
  --lg-bg:#050811;
  --lg-bg-sidebar:#0c1320;
  --lg-bg-detail:#0e131e;
  --lg-bg-hover:rgba(255,255,255,.03);
  --lg-bg-active:rgba(20,129,192,.15);
  --lg-text:#e8eef7;
  --lg-text-soft:#a8b3c4;
  --lg-text-mute:#6a7384;
  --lg-line:rgba(110,207,240,.12);
  --lg-line-hover:rgba(110,207,240,.32);
  --lg-line-active:rgba(110,207,240,.55);

  display:grid;
  grid-template-columns:320px 1fr;
  gap:1.4rem;
  max-width:1500px;
  margin:0 auto;
  padding:1.4rem 1.4rem;
  height:calc(100vh - 2.8rem);
  font-family:'Montserrat', system-ui, -apple-system, sans-serif;
  color:var(--lg-text);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.lif-glossary-sidebar{
  display:flex;
  flex-direction:column;
  background:var(--lg-bg-sidebar);
  border:1px solid var(--lg-line);
  border-radius:12px;
  overflow:hidden;
  min-height:0;
}

.lif-glossary-sidebar-head{
  padding:1rem 1.2rem .8rem;
  border-bottom:1px solid var(--lg-line);
  flex-shrink:0;
}
.lif-glossary-sidebar-head h1{
  font-family:'Bebas Neue', 'Montserrat', sans-serif;
  font-weight:400;
  font-size:1.85rem;
  letter-spacing:.04em;
  color:var(--lg-primary);
  margin:0 0 .15rem;
  line-height:1;
  text-shadow:0 0 18px rgba(110,207,240,.2);
}
.lif-glossary-count{
  font-size:.72rem;
  color:var(--lg-text-mute);
  margin:0;
  letter-spacing:.04em;
  font-weight:600;
}

/* Search */
.lif-glossary-search{
  position:relative;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--lg-line);
  flex-shrink:0;
}
.lif-glossary-search-icon{
  position:absolute;
  left:1.5rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--lg-text-mute);
  pointer-events:none;
}
.lif-glossary-search input{
  width:100%;
  padding:.55rem .75rem .55rem 2rem;
  background:rgba(0,0,0,.3);
  border:1px solid var(--lg-line);
  border-radius:6px;
  color:var(--lg-text);
  font-family:inherit;
  font-size:.88rem;
  transition:border-color .15s, background .15s;
}
.lif-glossary-search input::placeholder{
  color:var(--lg-text-mute);
}
.lif-glossary-search input:focus{
  outline:none;
  border-color:var(--lg-primary);
  background:rgba(0,0,0,.5);
  box-shadow:0 0 0 2px rgba(110,207,240,.12);
}

/* Categorías (pills horizontales) */
.lif-glossary-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--lg-line);
  flex-shrink:0;
}
.lif-glossary-cat-btn{
  padding:.32rem .65rem;
  border-radius:4px;
  border:1px solid var(--lg-line);
  background:transparent;
  color:var(--lg-text-mute);
  font-family:inherit;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
}
.lif-glossary-cat-btn:hover{
  border-color:var(--lg-line-hover);
  color:var(--lg-text);
}
.lif-glossary-cat-btn.is-active{
  background:linear-gradient(180deg, var(--lg-accent), #0d5589);
  border-color:var(--lg-primary);
  color:#fff;
}

/* Letras A-Z (mismo estilo de pills que las categorías) */
.lif-glossary-letters{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--lg-line);
  flex-shrink:0;
}
.lif-glossary-letter-btn{
  min-width:1.85rem;
  height:1.85rem;
  padding:0 .35rem;
  border-radius:4px;
  border:1px solid var(--lg-line);
  background:transparent;
  color:var(--lg-text-mute);
  font-family:'Bebas Neue', 'Montserrat', sans-serif;
  font-weight:400;
  font-size:.95rem;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .12s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.lif-glossary-letter-btn:not(:disabled):hover{
  border-color:var(--lg-line-hover);
  color:var(--lg-text);
  background:rgba(255,255,255,.03);
}
.lif-glossary-letter-btn.is-active{
  background:linear-gradient(180deg, var(--lg-accent), #0d5589);
  border-color:var(--lg-primary);
  color:#fff;
}
.lif-glossary-letter-btn.is-disabled{
  opacity:.25;
  cursor:not-allowed;
}
.lif-glossary-letter-all{
  color:var(--lg-primary);
  font-size:1.1rem;
}

/* Lista de términos */
.lif-glossary-list{
  flex:1;
  overflow-y:auto;
  margin:0;
  padding:.3rem 0;
  list-style:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(110,207,240,.2) transparent;
}
.lif-glossary-list::-webkit-scrollbar{
  width:6px;
}
.lif-glossary-list::-webkit-scrollbar-track{
  background:transparent;
}
.lif-glossary-list::-webkit-scrollbar-thumb{
  background:rgba(110,207,240,.18);
  border-radius:3px;
}
.lif-glossary-list::-webkit-scrollbar-thumb:hover{
  background:rgba(110,207,240,.35);
}

.lif-glossary-list-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem 1rem;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .1s, border-color .1s;
}
.lif-glossary-list-item:hover{
  background:var(--lg-bg-hover);
}
.lif-glossary-list-item.is-active{
  background:var(--lg-bg-active);
  border-left-color:var(--lg-primary);
}
.lif-glossary-list-name{
  font-family:'Bebas Neue', 'Montserrat', sans-serif;
  font-size:1.02rem;
  letter-spacing:.04em;
  color:var(--lg-text);
  line-height:1.1;
}
.lif-glossary-list-item.is-active .lif-glossary-list-name{
  color:#fff;
}
.lif-glossary-list-dot{
  margin-left:auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lg-primary);
  box-shadow:0 0 6px rgba(110,207,240,.5);
  flex-shrink:0;
}
.lif-glossary-list-empty{
  padding:1.5rem 1rem;
  color:var(--lg-text-mute);
  font-size:.85rem;
  text-align:center;
  font-style:italic;
}

.lif-glossary-highlight{
  background:rgba(110,207,240,.25);
  color:var(--lg-primary);
  padding:0 1px;
  border-radius:2px;
  font-weight:700;
}

/* ============================================================
   DETAIL (panel derecho)
   Altura fija (100% del grid), scroll interno cuando el contenido excede.
   El panel NUNCA cambia de tamaño al cambiar de término.
   ============================================================ */
.lif-glossary-detail{
  background:var(--lg-bg-detail);
  border:1px solid var(--lg-line);
  border-radius:12px;
  overflow-y:auto;
  min-height:0;        /* Importante para que el overflow funcione en grid */
  scrollbar-width:thin;
  scrollbar-color:rgba(110,207,240,.2) transparent;
}
.lif-glossary-detail::-webkit-scrollbar{
  width:8px;
}
.lif-glossary-detail::-webkit-scrollbar-track{
  background:transparent;
}
.lif-glossary-detail::-webkit-scrollbar-thumb{
  background:rgba(110,207,240,.18);
  border-radius:4px;
}

.lif-glossary-detail-content{
  padding:2rem 2.4rem 2.4rem;
}

/* Botón Volver — solo visible en mobile */
.lif-glossary-back-btn{
  display:none;
  width:100%;
  padding:.85rem 1rem;
  background:rgba(20,129,192,.12);
  border:none;
  border-bottom:1px solid var(--lg-line);
  color:var(--lg-primary);
  font-family:inherit;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.04em;
  text-align:left;
  cursor:pointer;
  transition:background .12s;
}
.lif-glossary-back-btn:hover{
  background:rgba(20,129,192,.22);
}

/* Header del detail */
.lif-glossary-detail-head{
  margin-bottom:1.2rem;
}
.lif-glossary-detail-title{
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-wrap:wrap;
  margin-bottom:.4rem;
}
.lif-glossary-detail-title h2{
  font-family:'Bebas Neue', 'Montserrat', sans-serif;
  font-weight:400;
  font-size:2.6rem;
  letter-spacing:.04em;
  color:var(--lg-text);
  margin:0;
  line-height:1;
}
.lif-glossary-detail-abbr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.32rem .7rem;
  border-radius:999px;
  background:rgba(110,207,240,.18);
  border:1px solid rgba(110,207,240,.35);
  color:var(--lg-primary);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
}
.lif-glossary-detail-english{
  display:block;
  font-size:.85rem;
  color:var(--lg-text-mute);
  font-style:italic;
  margin-bottom:.5rem;
  letter-spacing:.02em;
}
.lif-glossary-detail-cats{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.4rem;
}
.lif-glossary-detail-cat{
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:var(--lg-text-soft);
}

/* Definición */
.lif-glossary-detail-def{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--lg-text);
  margin:0 0 1.4rem;
}

/* Aliases */
.lif-glossary-detail-aliases{
  margin-bottom:1.5rem;
  padding:.7rem .9rem;
  background:rgba(0,0,0,.2);
  border-left:3px solid rgba(110,207,240,.3);
  border-radius:4px;
  font-size:.82rem;
}
.lif-glossary-detail-aliases-label{
  color:var(--lg-text-mute);
  font-weight:700;
  letter-spacing:.04em;
  margin-right:.5rem;
}
.lif-glossary-detail-alias{
  display:inline-block;
  padding:.15rem .5rem;
  margin:.1rem .2rem .1rem 0;
  background:rgba(255,255,255,.05);
  border-radius:3px;
  color:var(--lg-text-soft);
  font-size:.78rem;
}

/* Wrapper de animación: tamaño controlado para que no rompa el layout
   sea cual sea el término. La mesa siempre se ve igual.
*/
.lif-glossary-detail-anim-wrap{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lif-glossary-detail-anim-wrap .ga-stage{
  width:100%;
  max-width:640px;
  height:336px;        /* width 640 * (1/1.9) ≈ 337px — height explícito para evitar problemas con aspect-ratio en flex */
  min-height:0;        /* override del min-height:340px que viene del CSS de animaciones */
  flex-shrink:0;
}
@media (max-width:700px){
  .lif-glossary-detail-anim-wrap .ga-stage{
    height:240px;
  }
}
.lif-glossary-detail-anim-hint{
  text-align:center;
  font-size:.72rem;
  color:var(--lg-text-mute);
  margin:.8rem 0 0;
  letter-spacing:.04em;
  font-style:italic;
}

/* Estado vacío */
.lif-glossary-detail-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:300px;
}
.lif-glossary-detail-empty p{
  color:var(--lg-text-mute);
  font-size:.95rem;
}

/* ============================================================
   RESPONSIVE — Mobile (< 768px)
   ============================================================ */
@media (max-width:768px){
  .lif-glossary{
    grid-template-columns:1fr;
    padding:0;
    gap:0;
    height:100vh;
  }
  .lif-glossary-sidebar{
    border-radius:0;
    border:none;
    border-bottom:1px solid var(--lg-line);
    height:100vh;
  }
  .lif-glossary-detail{
    border-radius:0;
    border:none;
    display:none;
  }

  /* Cuando el usuario seleccionó un término, mostramos el detail full-screen */
  .lif-glossary.mobile-showing-detail .lif-glossary-sidebar{
    display:none;
  }
  .lif-glossary.mobile-showing-detail .lif-glossary-detail{
    display:block;
    height:100vh;
  }
  .lif-glossary.mobile-showing-detail .lif-glossary-back-btn{
    display:block;
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(14,19,30,.95);
    backdrop-filter:blur(10px);
  }

  .lif-glossary-detail-content{
    padding:1.4rem 1.2rem 2rem;
  }
  .lif-glossary-detail-title h2{
    font-size:2rem;
  }
  .lif-glossary-detail-anim-wrap .ga-stage{
    max-width:100%;
  }
}

/* ============================================================
   TABLET (768-1100px): sidebar más angosto
   ============================================================ */
@media (min-width:769px) and (max-width:1100px){
  .lif-glossary{
    grid-template-columns:260px 1fr;
    padding:1rem;
    height:calc(100vh - 2rem);
  }
  .lif-glossary-detail-content{
    padding:1.6rem 1.8rem;
  }
  .lif-glossary-detail-title h2{
    font-size:2.2rem;
  }
}