/* --- Catalogo table --- */
.table-wrap { overflow:auto; border:1px solid #eee; border-radius:14px; background:#fff; }
table { width:100%; border-collapse: collapse; min-width: 920px; }
th, td { padding: 10px 10px; border-bottom:1px solid #f0f0f0; font-size: 14px; vertical-align: middle; }
th { color:#444; font-weight: 700; background: #fafafa; position: sticky; top: 0; z-index: 1; }
tr:hover td { background: #fcfcfc; }

.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; border:1px solid #ddd; border-bottom-width:2px; padding:2px 6px; border-radius:8px; background:#fff; color:#333; }

/* --- Sortable headers --- */
th.sortable { cursor:pointer; user-select:none; }
th.sortable .sort { margin-left: 6px; font-size: 12px; opacity: .7; }
th.sortable.active { color:#111; }
th.sortable.active .sort { opacity: 1; }

/* --- Badges --- */
.badge { display:inline-flex; align-items:center; gap:6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; border:1px solid transparent; white-space: nowrap; }
.badge .dot { width:8px; height:8px; border-radius:999px; display:inline-block; }

/* Difficulty badges */
.badge.diff-easy   { background:#f0fff4; border-color:#b7f0c2; color:#1a7f37; }
.badge.diff-medium { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.badge.diff-hard   { background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.badge.diff-expert { background:#f5f3ff; border-color:#ddd6fe; color:#5b21b6; }

/* Status badges */
.badge.st-draft     { background:#f8fafc; border-color:#e2e8f0; color:#334155; }
.badge.st-review    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.badge.st-published { background:#ecfdf5; border-color:#bbf7d0; color:#047857; }
.badge.st-archived  { background:#f1f5f9; border-color:#cbd5e1; color:#475569; }

/* Icons */
.ico { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:6px; font-size: 12px; }
.ico.draft { background:#eef2f7; color:#334155; }
.ico.review { background:#e0f2fe; color:#075985; }
.ico.published { background:#dcfce7; color:#166534; }
.ico.archived { background:#e2e8f0; color:#475569; }

.actions a { text-decoration:none; font-weight:700; }
.actions a:hover { text-decoration: underline; }

/* Filters row */
.filters { display:flex; gap:10px; flex-wrap: wrap; align-items: end; }
.filters .field { min-width: 140px; }
.filters label { display:block; font-size: 12px; color:#667085; margin-bottom: 6px; }
.filters input, .filters select { width:100%; padding:10px 12px; border-radius: 12px; border:1px solid #ddd; }
.filters .grow { flex: 1; min-width: 240px; }
.toolbar { display:flex; justify-content: space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar .meta { color:#667085; font-size: 13px; }