:root{
  --bg:#0b0d10;
  --card:#12161b;
  --muted:#9aa4af;
  --text:#e8eef5;
  --accent:#67e8f9;
  --ring:#2a2f36;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Noto Sans,sans-serif
}

.container{max-width:1100px;margin:0 auto;padding:1rem}

/* Header fijo con blur */
header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg, rgba(11,13,16,.97), rgba(11,13,16,.9));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ring)
}

h1{margin:.2rem 0 0;font-size:1.6rem}
.subtitle{margin:.2rem 0 1rem;color:var(--muted)}

/* Controles superiores */
.controls{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem
}
.controls input[type="search"]{
  flex:1;min-width:220px;padding:.6rem .8rem;border-radius:.8rem;
  border:1px solid var(--ring);background:var(--card);color:var(--text);outline:none
}
.controls input[type="search"]:focus{border-color:var(--accent)}
.controls select,.controls button{
  padding:.6rem .8rem;border-radius:.8rem;border:1px solid var(--ring);
  background:var(--card);color:var(--text)
}

/* Toggle vista y switch “solo favoritos” */
.view-toggle button{
  padding:.6rem .8rem;border-radius:.8rem;border:1px solid var(--ring);
  background:var(--card);color:var(--text)
}
.view-toggle .is-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(103,232,249,.15) inset}
.switch{display:flex;align-items:center;gap:.35rem;color:var(--muted)}
#onlyFavs{accent-color:var(--accent)}

/* Chips de filtros (27 macros) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;
  border:1px solid var(--ring);border-radius:999px;background:var(--card);
  cursor:pointer;user-select:none
}
.filter-chip input{accent-color:var(--accent)}
/* Resaltado del chip activo */
.filter-chip input:checked + span{
  background:var(--accent);color:#0b0d10;border-radius:999px;padding:.05rem .3rem
}

/* Estadísticas */
.stats{color:var(--muted);margin:.3rem 0 .8rem}

/* Layout de resultados */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px
}
/* En modo lista, el contenedor deja de ser grid para que la tabla ocupe el ancho */
.grid.list{display:block}

/* Tarjetas */
.card{
  background:var(--card);border:1px solid var(--ring);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:.5rem
}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);line-height:1.45}
.row{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
a.button{
  display:inline-block;text-decoration:none;border:1px solid var(--ring);
  padding:.45rem .7rem;border-radius:.6rem;color:var(--text)
}
a.button:hover{border-color:var(--accent)}

/* Badges genéricos */
.badges{display:flex;flex-wrap:wrap;gap:.35rem}
.badge{
  font-size:.75rem;border:1px dashed var(--ring);
  padding:.2rem .45rem;border-radius:999px;color:var(--muted)
}

/* Estrella de favoritos */
.card .star,
.table .star{
  margin-left:.5rem;background:transparent;border:1px dashed var(--ring);
  color:#ffd166;padding:.3rem .5rem;border-radius:.6rem;line-height:1;cursor:pointer
}
.card .star:hover,.table .star:hover{border-color:var(--accent)}

/* Tabla (vista lista) */
.table{
  width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--ring);border-radius:12px;overflow:hidden
}
.table th,.table td{
  padding:.6rem .8rem;border-top:1px solid var(--ring);
  text-align:left;vertical-align:top
}
.table thead th{background:#0f1318;color:var(--muted);font-weight:600;border-top:none}
.table tr:hover td{background:#101419}

/* Footer */
.footer{border-top:1px solid var(--ring);color:var(--muted);font-size:.9rem}

/* Responsive */
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
}

/* ===== Enlaces (general) ===== */
a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Panel plegable de filtros */
.filters-panel { margin:.5rem 0 1rem; }
.filters-panel > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap:.5rem;
  padding:.55rem .8rem;
  border:1px solid var(--ring);
  border-radius:.8rem;
  background: var(--card);
  color: var(--text);
}
.filters-panel > summary::-webkit-details-marker { display:none; }
.filters-panel[open] > summary { border-color: var(--accent); box-shadow:0 0 0 2px rgba(103,232,249,.12) inset;}

/* En escritorio, que salga abierto por defecto (lo hace JS, esto es visual) */
@media (min-width: 900px){
  .filters-panel { margin-bottom:1.2rem; }
}

/* Ajustes móviles: chips más pequeños y menos padding */
@media (max-width: 600px){
  h1 { font-size:1.35rem; }
  .subtitle { font-size:.95rem; }
  .controls { gap:.5rem; }
  .controls input[type="search"] { padding:.5rem .7rem; }
  .controls select, .controls button, .view-toggle button { padding:.5rem .7rem; }
  .filter-chip { padding:.28rem .5rem; }
  .filter-chip span { font-size:.9rem; }
  .badge { font-size:.7rem; padding:.18rem .4rem; }
  .grid { gap:10px; }
}

/* Vista lista: ocupar todo el ancho */
.grid.list { display:block; }

/* Enlaces bonitos (evita azul por defecto) */
a { color: var(--text); text-decoration: none; font-weight: 500; }
a:hover { color: var(--accent); text-decoration: underline; }

/* Contenedor scroll para tabla (móvil: swipe horizontal suave) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Tabla: mínimo ancho para que no colapse columnas importantes */
.table{
  min-width: 720px;            /* ajustable; 680–760px suele ir bien */
  table-layout: fixed;         /* distribuye mejor en pantallas estrechas */
}
.table th,.table td{
  word-wrap: break-word;
  white-space: normal;
}

/* Macros: que envuelvan bien en la celda */
.table .col-macros{
  min-width: 180px;
}
.table .col-macros .badge{
  display:inline-block;
  margin:.12rem .2rem .12rem 0;
  white-space: nowrap;
}

/* Anchos útiles para primeras columnas */
.table .col-star{ width:48px; }
.table .col-name{ width: 220px; }

/* En móvil: sticky para ⭐ y nombre, así no “se pierden” al deslizar */
@media (max-width: 700px){
  .table th.col-star,
  .table td.col-star{
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
  }
  .table th.col-name,
  .table td.col-name{
    position: sticky; left: 48px; z-index: 2;   /* 48px = ancho col-star */
    background: var(--card);
  }
  /* Ajustes de densidad */
  .table th,.table td{ padding:.5rem .6rem; }
  .table{ min-width: 640px; }  /* un poco más compacto */
}