/* Reglas grid */
#reglas-actions{margin:14px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#reglas-actions .btn{padding:8px 12px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#fff;cursor:pointer}
#reglas-grid{margin-top:10px;overflow:auto}
#reglas-grid table{width:100%;border-collapse:collapse}
#reglas-grid th,#reglas-grid td{padding:8px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;vertical-align:top}
#reglas-grid th{position:sticky;top:0;background:#fafafa;z-index:1}
#reglas-grid .muted{opacity:.7}
@media (prefers-color-scheme:dark){
  #reglas-actions .btn{background:#0b0b0c;border-color:rgba(255,255,255,.12);color:#e5e7eb}
  #reglas-grid th,#reglas-grid td{border-color:rgba(255,255,255,.12)}
  #reglas-grid th{background:#0b0b0c}
}


/* ===== Mejoras de estilo para título, botón y filtros ===== */
.grid-title{
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 8px 0 4px 0;
  letter-spacing: .2px;
}
#reglas-actions{margin:14px 0 8px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn.primary{
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(79,70,229,.25);
}
.btn.primary:hover{ filter: brightness(1.05); transform: translateY(-1px); transition: .15s ease; }
.btn.primary:active{ transform: translateY(0); }

.reglas-filtros{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin: 6px 0 10px 0;
}
.reglas-filtros input[type="text"], .reglas-filtros select{
  padding:8px 10px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}
@media (prefers-color-scheme:dark){
  .reglas-filtros input[type="text"], .reglas-filtros select{
    background:#0b0b0c; color:#e5e7eb; border-color: rgba(255,255,255,.16);
  }
  .grid-title{ color:#e5e7eb; }
}