/* Duelos Troll MLBB - lista simple del catálogo de ventajas y castigos: una fila por entrada (nombre
   corto y regla) que se abre para ver la explicación. La pinta js/catalogo-lista.js y la usan la sección
   Catálogo de la página principal (index.html) y la página de administración (catalogo.html): las dos
   cargan este archivo detrás de base.css. Todo texto llega a 4,5:1 sobre su fondo en los dos temas. */

/* ---------- dos columnas (A favor / En contra) ---------- */
.cat-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;align-items:start}
@media (min-width:1000px){
  .cat-cols.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.cat-colh{margin:8px 0 2px;font-size:20px;line-height:26px;font-weight:700}
.cat-colh span{font-size:13px;font-weight:400;color:var(--fg2);margin-left:6px}
.cat-lnada{margin:10px 0 0;padding:14px 16px;border-radius:12px;background:var(--card);color:var(--fg2);font-size:15px;line-height:20px}
.cat-col.fav .cat-colh{color:var(--good-ink)}
.cat-col.con .cat-colh{color:var(--bad-ink)}

/* ---------- explicación y campo sin rellenar ---------- */
.cat-d,.cat-v{margin:6px 0 0;font-size:14px;line-height:19px;color:var(--fg2)}
.cat-vl{font-weight:600;color:var(--fg)}
.cat-falta{font-style:italic;color:var(--bad-ink)}

/* ---------- lista simple: una fila por entrada (nombre y regla), que se abre para ver la explicación ---------- */
:root{--cat-t0:#0B6B78;--cat-t1:#7A4300;--cat-t2:#A31F6E}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--cat-t0:#6FD3E0;--cat-t1:#FFC773;--cat-t2:#FF8FC7}
}
:root[data-theme="dark"]{--cat-t0:#6FD3E0;--cat-t1:#FFC773;--cat-t2:#FF8FC7}
.cat-lg{min-width:0}
.cat-lt{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.cat-lt::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:currentColor}
.cat-lt.n0{color:var(--cat-t0)}
.cat-lt.n1{color:var(--cat-t1)}
.cat-lt.n2{color:var(--cat-t2)}
.cat-lt.np{color:var(--fg2)}   /* propios de un héroe: sin color de nivel */
.cat-lt span{font-weight:400;letter-spacing:0;color:var(--fg2)}
.cat-ll{list-style:none;margin:0;padding:0;border-radius:12px;background:var(--card);overflow:hidden}
.cat-li+.cat-li{border-top:1px solid var(--sep)}
.cat-lr{
  display:grid;grid-template-columns:10px minmax(0,190px) minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;
  width:100%;min-height:40px;padding:9px 12px;border:0;background:none;color:var(--fg);
  font-family:inherit;font-size:15px;line-height:20px;text-align:left;cursor:pointer;overflow-wrap:anywhere;
}
.cat-lr::before{content:"";width:6px;height:6px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(-45deg);align-self:center}
.cat-lr[aria-expanded="true"]::before{transform:rotate(45deg)}
.cat-lr:focus-visible{outline-offset:-3px}
.cat-ln{font-weight:700}
.cat-le{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 8px}
/* marcas del borrador: fondo opaco y borde, para que se lean igual con la fila resaltada al pasar el ratón */
.cat-lm{padding:0 7px;border:1px solid currentColor;border-radius:999px;background:var(--card);color:var(--link);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.cat-lm.new{color:var(--good-ink)}
.cat-lm.del{color:var(--bad-ink)}
.cat-lc{font-size:13px;line-height:18px;color:var(--fg2);white-space:nowrap}
.cat-li.is-del .cat-ln,.cat-li.is-del .cat-lx{text-decoration:line-through}
.cat-ld{padding:0 12px 10px 32px}
.cat-ld .cat-d{margin-top:0}
@media (hover:hover){
  .cat-lr:hover{background:var(--fill)}
}
@media (pointer:coarse){
  .cat-lr{min-height:44px}
}
@media (max-width:599.98px){
  .cat-lr{grid-template-columns:10px minmax(0,1fr) auto;min-height:44px}
  .cat-lx{grid-column:2 / -1;grid-row:2}
}