/* Cohentai A–Z Index — front.css (v2.0.0)
   - Hub + Top cards + letras por AJAX
   - Contraste consistente (light/dark detectado por JS con .az-dark)
*/

.cohentai-alpha-index.cohentai-az{
  --fg:#111827;
  --muted:#6b7280;
  --line:rgba(15,23,42,.12);
  --panel:rgba(255,255,255,.92);
  --card-bg:rgba(0,0,0,.02);
  --card-bg-hover:rgba(0,0,0,.04);
  --avatar-bg:rgba(0,0,0,.04);
  --shadow:0 10px 30px rgba(0,0,0,.08);

  color:var(--fg);
}
.cohentai-alpha-index.cohentai-az.az-dark{
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(229,231,235,.16);
  --panel:rgba(17,24,39,.92);
  --card-bg:rgba(255,255,255,.04);
  --card-bg-hover:rgba(255,255,255,.07);
  --avatar-bg:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Hidden robust */
.cohentai-alpha-index.cohentai-az [hidden]{display:none !important}
/* Fuerza legibilidad en enlaces dentro del índice (muchos temas ponen links en gris) */
.cohentai-alpha-index.cohentai-az a{color:var(--fg) !important}


/* ---- Search ---- */
.alpha-search{position:relative;display:flex;gap:.5rem;align-items:center;padding:.6rem .75rem;border-bottom:1px solid var(--line)}
.alpha-input{flex:1;padding:.7rem .9rem;border:1px solid var(--line);border-radius:.8rem;font-size:1rem;background:transparent;color:var(--fg);outline:none}
.alpha-input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.18);border-color:#93c5fd}
.clear-btn{border:1px solid var(--line);background:transparent;border-radius:.8rem;padding:.7rem .9rem;font-weight:800;line-height:1;cursor:pointer;color:var(--fg)}

.az-results{
  position:absolute;left:.75rem;right:.75rem;top:calc(100% + .4rem);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:var(--shadow);
  max-height:52vh;
  overflow:auto;
  z-index:60;
}
.az-result{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;text-decoration:none;color:var(--fg)}
.az-result:hover,.az-result.active{background:var(--card-bg-hover)}
.az-result-thumb{width:34px;height:34px;border-radius:.6rem;object-fit:cover;flex:0 0 auto}
.az-result-avatar{width:34px;height:34px;border-radius:.6rem;background:var(--avatar-bg);display:grid;place-items:center;flex:0 0 auto}
.az-result-name{flex:1 1 auto;font-weight:600;line-height:1.1}
.az-result-name mark{background:rgba(59,130,246,.18);padding:0 .2rem;border-radius:.3rem}
.az-result-count{color:var(--muted);font-size:.9em}
.az-nores{padding:.7rem .75rem;color:var(--muted);font-style:italic}

/* ---- Top cards ---- */
.az-top{padding:1rem .75rem;border-bottom:1px solid var(--line)}
.az-top-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}
.az-top-h{margin:0;font-size:1.05rem}
.az-top-sub{color:var(--muted);font-size:.95rem}
.az-top-grid{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:520px){ .az-top-grid{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .az-top-grid{grid-template-columns:1fr 1fr 1fr} }
.az-top-card{display:flex;align-items:center;gap:.65rem;border:1px solid var(--line);border-radius:1rem;background:var(--card-bg);padding:.65rem .75rem;text-decoration:none;color:var(--fg)}
.az-top-card:hover{background:var(--card-bg-hover);text-decoration:underline}
.az-top-thumb{width:46px;height:46px;border-radius:.8rem;object-fit:cover;flex:0 0 auto}
.az-top-avatar{width:46px;height:46px;border-radius:.8rem;background:var(--avatar-bg);display:grid;place-items:center;font-weight:900;flex:0 0 auto;border:1px solid var(--line)}
.az-top-title{flex:1 1 auto;font-weight:700}
.az-top-count{color:var(--muted);font-size:.9em}

/* ---- Alpha bar ---- */
.alpha-bar{position:sticky;top:0;z-index:50;display:grid;grid-auto-flow:column;gap:.5rem;overflow-x:auto;padding:.6rem .75rem;border-bottom:1px solid var(--line);background:transparent;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.alpha-bar.scrolled{background:var(--panel)}
.alpha-bar::-webkit-scrollbar{height:6px}
.alpha-bar::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.alpha-btn{scroll-snap-align:start;display:inline-block;min-width:2.25rem;text-align:center;padding:.5rem .65rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--fg);background:transparent;font-weight:700;line-height:1}
.alpha-btn:active{transform:scale(.98)}
.alpha-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.alpha-btn.active{border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,.35)}

/* ---- Letter section ---- */
.az-live{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.az-letter-wrap{padding:.3rem 0 1rem}
.az-placeholder{margin:1rem .75rem;color:var(--muted);font-style:italic}
.az-loading,.az-error,.az-empty-letter{margin:1rem .75rem;color:var(--muted)}

.az-spinner{
  display:inline-block;width:16px;height:16px;border:2px solid rgba(127,127,127,.25);
  border-top-color:rgba(127,127,127,.9);
  border-radius:999px;vertical-align:-3px;margin-right:.45rem;
  animation:azspin .9s linear infinite;
}
@keyframes azspin{to{transform:rotate(360deg)}}

.alpha-letter{position:sticky;top:2.9rem;z-index:10;margin:1rem 0 .35rem;padding:.35rem .75rem;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:1rem}
.alpha-list{list-style:none;margin:.35rem 0 1rem;padding:0 .75rem;display:grid;grid-template-columns:1fr;gap:.45rem}
@media (min-width:520px){ .alpha-list{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .alpha-list{grid-template-columns:1fr 1fr 1fr} }
.alpha-item{list-style:none;margin:0;padding:0}

.alpha-card{display:flex;align-items:center;gap:.65rem;border:1px solid var(--line);border-radius:1rem;background:var(--card-bg);padding:.6rem .75rem;width:100%;text-decoration:none;color:var(--fg)}
.alpha-card:hover{background:var(--card-bg-hover);text-decoration:underline}
.alpha-thumb{width:44px;height:44px;border-radius:.75rem;object-fit:cover;flex:0 0 auto}
.alpha-avatar{width:44px;height:44px;border-radius:.75rem;background:var(--avatar-bg);display:inline-grid;place-items:center;font-weight:900;flex:0 0 auto;border:1px solid var(--line)}
.alpha-title{flex:1 1 auto;font-weight:700}
.alpha-count{color:var(--muted);font-size:.9em}
