/* Catálogo piloto. Todos los estilos quedan limitados a esta página. */
.catalog-modern { --ink-dim:#b8b2a3; padding-bottom:110px; }
.catalog-modern header { background:rgba(12,12,17,.98); }
.catalog-modern .page-head { padding-bottom:1.5rem; }
.catalog-modern .page-head h1 { max-width:850px; font-size:clamp(2rem,5.5vw,4rem); line-height:1.08; }
.cm-accent { color:var(--solder); }
.cm-intro { display:flex; flex-wrap:wrap; gap:.7rem 1.8rem; margin:1.5rem 0 1rem; font-family:var(--mono); font-size:.78rem; color:var(--solder); }
.catalog-modern .page-head .cm-method { font-size:.95rem; max-width:70ch; }
.cm-tools { padding:1.3rem; background:#111116; border:1px solid var(--line-strong); border-radius:16px; }
.cm-fields { display:grid; grid-template-columns:2fr repeat(var(--cm-field-count,3),minmax(0,1fr)); gap:1rem; }
.cm-fields label { display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; font-weight:600; }
.cm-fields input,.cm-fields select { width:100%; min-width:0; min-height:48px; border:1px solid #555044; border-radius:8px; padding:.65rem .8rem; background:#09090e; color:var(--ink); font:inherit; color-scheme:dark; }
.cm-tools-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }
.cm-tools-bottom p { font-size:.95rem; color:var(--ink-dim); }
.catalog-modern button { font-family:var(--display); cursor:pointer; }
.cm-quiet { border:1px solid #555044; background:transparent; color:var(--ink); border-radius:8px; min-height:44px; padding:.5rem .9rem; }
.cm-quiet:hover { border-color:var(--solder); color:var(--solder); }
.catalog-modern .games-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.2rem; }
.catalog-modern .game { display:flex; flex-direction:column; background:#101015; border-radius:12px; }
.catalog-modern .game[hidden],.catalog-modern [hidden] { display:none!important; }
.catalog-modern .game .cover { object-fit:contain; background:#08080c; }
.catalog-modern .game .info { display:flex; flex:1; flex-direction:column; gap:.6rem; padding:1rem; }
.catalog-modern .game .info h5 { font-size:1.08rem; line-height:1.35; }
.catalog-modern .game .info .sub { line-height:1.6; margin:0 0 .4rem; }
.cm-add { width:100%; min-height:44px; margin-top:auto; padding:.6rem .5rem; background:#232016; color:#ffe06b; border:1px solid #6e5d24; border-radius:8px; font-weight:600; font-size:.9rem; }
.cm-add:hover { border-color:var(--solder); }
.cm-add[aria-pressed="true"] { background:var(--solder); color:#171200; border-color:var(--solder); }
.catalog-modern .game:has(.cm-add[aria-pressed="true"]) { border-color:var(--solder); }
.cm-empty { text-align:center; padding:3rem 1rem; }
.cm-empty h2 { font-size:1.5rem; margin-bottom:.6rem; }
.cm-empty p { color:var(--ink-dim); margin-bottom:1rem; }
.cm-more { display:block; margin:2rem auto 0; min-width:220px; }
.cm-tray { position:fixed; z-index:40; bottom:0; left:0; right:0; border-top:1px solid var(--line-strong); background:rgba(14,14,19,.98); padding:1rem max(5vw,16px) calc(1rem + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:center; gap:1rem; box-shadow:0 -12px 40px #0005; }
.cm-tray strong { display:block; font-family:var(--display); }
.cm-tray small { color:var(--ink-dim); }
.cm-primary { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.7rem 1.2rem; background:var(--solder); color:#171200; border:1px solid var(--solder); border-radius:9px; font-weight:700; text-decoration:none; font-size:1rem; }
.cm-primary:hover { background:#ffe369; }
.cm-dialog { position:fixed; inset:0; margin:auto; width:min(620px,calc(100% - 28px)); max-height:85dvh; padding:1.5rem; color:var(--ink); background:#111116; border:1px solid #76632b; border-radius:16px; box-shadow:0 24px 100px #000a; overflow:auto; }
.cm-dialog::backdrop { background:#000b; backdrop-filter:blur(4px); }
.cm-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.cm-dialog h2 { font-family:var(--display); font-size:1.5rem; }
.cm-dialog p { color:var(--ink-dim); line-height:1.5; }
.cm-list { list-style:none; margin:1rem 0; }
.cm-list li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.cm-list small { display:block; color:var(--ink-dim); }
.cm-list button { flex-shrink:0; }
.cm-dialog-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.cm-dialog .cm-note { font-size:.9rem; }
.cm-feedback { min-height:1.5em; margin-top:.8rem; color:var(--solder)!important; }
.cm-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:850px) { .cm-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) {
  .cm-tools { padding:1rem; }
  .cm-fields { gap:.8rem; }
  .cm-fields label:first-child { grid-column:1/-1; }
  .catalog-modern .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .catalog-modern .game .info { padding:.7rem; }
  .catalog-modern .game .info h5 { font-size:.95rem; }
  .cm-intro { display:grid; gap:.6rem; font-size:.72rem; }
  .cm-tray { padding-top:.8rem; padding-bottom:calc(.8rem + env(safe-area-inset-bottom)); }
  .cm-tray small { font-size:.75rem; }
  .cm-tray .cm-primary { padding:.65rem .8rem; white-space:nowrap; }
  .cm-dialog { padding:1rem; }
}