:root {
  --cyan: #00d4ff;
  --cyan-dim: rgba(0,212,255,0.12);
  --cyan-glow: rgba(0,212,255,0.35);
  --blue: #3b82f6;
  --green: #00ff88;
  --green-dim: rgba(0,255,136,0.1);
  --purple: #a855f7;
  --orange: #f97316;
  --yellow: #fbbf24;
  --ink: #e2e8f0;
  --ink-soft: #94a3b8;
  --ink-muted: #7c899e;   /* aclarado para cumplir contraste WCAG sobre fondo oscuro */
  --bg: #060b14;
  --bg-card: #0d1525;
  --bg-card2: #111827;
  --border: rgba(0,212,255,0.15);
  --border-hard: rgba(0,212,255,0.3);
  --rust: var(--cyan);
  --rust-pale: rgba(0,212,255,0.08);
  --sage: #00ff88;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0,212,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(59,130,246,0.05) 0%, transparent 60%);
}

/* scanline overlay */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events:none;
  z-index:9998;
}

header {
  background: linear-gradient(135deg, #060b14 0%, #0d1a2e 50%, #060b14 100%);
  padding: 3rem 2rem 2.5rem;
  position: relative;
  overflow: hidden;
  color: white;
  border-bottom: 1px solid var(--border-hard);
}
header::before {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.03) 50%, transparent 100%);
  animation: scanH 4s ease-in-out infinite;
}
@keyframes scanH {
  0%,100% { opacity:0; transform:translateX(-100%); }
  50% { opacity:1; transform:translateX(100%); }
}
header::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.header-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.header-tag {
  display:inline-block;
  background: rgba(0,212,255,0.1);
  border: 1px solid var(--border-hard);
  color: var(--cyan);
  font-size:0.65rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:0.3rem 0.9rem;
  border-radius:2px;
  margin-bottom:1rem;
  font-family: 'JetBrains Mono', monospace;
}
header h1 {
  font-family:'Inter', sans-serif;
  font-size:clamp(1.8rem,5vw,2.8rem);
  color:white;
  line-height:1.15;
  margin-bottom:0.8rem;
  font-weight:700;
  letter-spacing:-0.02em;
}
header h1 em {
  font-style:normal;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
}
header p { color: var(--ink-soft); font-size:0.92rem; line-height:1.65; max-width:480px; }
.header-tip {
  margin-top:1.4rem;
  padding:0.8rem 1rem;
  background: rgba(0,212,255,0.06);
  border-left: 2px solid var(--cyan);
  color: var(--ink-soft);
  font-size:0.82rem;
  line-height:1.55;
}
.header-tip strong { color: var(--cyan); }

/* Legend */
.legend-bar { background: var(--bg-card); border-bottom: 1px solid var(--border); }
.legend-inner { max-width:700px; margin:0 auto; padding:0.9rem 1rem; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.legend-label {
  font-size:0.65rem;
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  color: var(--ink-muted);
  margin-right:0.3rem;
  letter-spacing:0.1em;
}
.leg { display:flex; align-items:center; gap:0.35rem; font-size:0.7rem; font-family:'JetBrains Mono',monospace; color:var(--ink-soft); }
.leg-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }

/* Filter */
.filter-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
}
.filter-inner { max-width:700px; margin:0 auto; padding:0.3rem 1rem; display:flex; gap:0.2rem; flex-wrap:wrap; }
.filter-btn {
  flex-shrink:0;
  padding:0.55rem 0.8rem;
  border:none;
  background:transparent;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  font-weight:500;
  color: var(--ink-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all 0.18s;
  white-space:nowrap;
  letter-spacing:0.03em;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  font-weight:600;
  text-shadow: 0 0 10px rgba(0,212,255,0.4);
}

main { max-width:700px; margin:0 auto; padding:2rem 1rem 4rem; }

/* Tip card */
.tip-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hard);
  border-radius:4px;
  padding:1.4rem 1.5rem;
  margin-bottom:2rem;
  color:white;
  position:relative;
  overflow:hidden;
}
.tip-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.tip-card h3 {
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color: var(--cyan);
  margin-bottom:0.8rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.tip-card h3::before { content:'> '; opacity:0.5; }
.tip-card ol { padding-left:1.5rem; }
.tip-card li { font-size:0.84rem; color: var(--ink-soft); line-height:1.65; margin-bottom:0.4rem; }
.tip-card li strong { color:white; }

/* Category */
.category { margin-bottom:2.5rem; }
.category-header {
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin-bottom:1.1rem;
  padding-bottom:0.7rem;
  border-bottom:1px solid var(--border);
}
.cat-emoji { font-size:1.1rem; }
.cat-title {
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:700;
  color: var(--ink);
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.cat-count {
  margin-left:auto;
  background: var(--cyan-dim);
  color: var(--cyan);
  font-size:0.65rem;
  font-weight:700;
  padding:0.15rem 0.55rem;
  border-radius:2px;
  font-family:'JetBrains Mono',monospace;
  border: 1px solid var(--border-hard);
}

/* Prompt card */
.prompt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:4px;
  margin-bottom:1rem;
  overflow:hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position:relative;
}
.prompt-card::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background: var(--cyan);
  opacity:0;
  transition: opacity 0.2s;
}
.prompt-card:hover {
  border-color: var(--border-hard);
  box-shadow: 0 0 24px rgba(0,212,255,0.1), 0 4px 20px rgba(0,0,0,0.4);
  transform:translateY(-1px);
}
.prompt-card:hover::before { opacity:1; }

.prompt-header {
  padding:1rem 1.2rem 0.8rem;
  border-bottom:1px solid var(--border);
  background: rgba(0,212,255,0.02);
}
.prompt-label {
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--ink-muted);
  margin-bottom:0.3rem;
  font-family:'JetBrains Mono',monospace;
}
.prompt-label::before { content:'// '; color: var(--cyan); opacity:0.5; }
.prompt-title { font-weight:600; font-size:0.92rem; color: var(--ink); }

/* Sections */
.prompt-sections { padding:0.8rem 1.2rem; display:flex; flex-direction:column; gap:0.4rem; }
.ps { display:flex; gap:0.6rem; align-items:flex-start; border-radius:3px; padding:0.5rem 0.7rem; }
.ps-rol  { background: rgba(148,163,184,0.06); border-left:2px solid #64748b; }
.ps-ctx  { background: rgba(59,130,246,0.06); border-left:2px solid #3b82f6; }
.ps-task { background: rgba(0,255,136,0.05); border-left:2px solid #00ff88; }
.ps-fmt  { background: rgba(249,115,22,0.06); border-left:2px solid #f97316; }
.ps-tone { background: rgba(168,85,247,0.06); border-left:2px solid #a855f7; }
.ps-badge {
  flex-shrink:0;
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:0.18rem 0.5rem;
  border-radius:2px;
  margin-top:2px;
  white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
}
.ps-rol  .ps-badge { background:#334155; color:#94a3b8; border:1px solid #475569; }
.ps-ctx  .ps-badge { background:rgba(59,130,246,0.2); color:#60a5fa; border:1px solid rgba(59,130,246,0.3); }
.ps-task .ps-badge { background:rgba(0,255,136,0.12); color:#00ff88; border:1px solid rgba(0,255,136,0.25); }
.ps-fmt  .ps-badge { background:rgba(249,115,22,0.15); color:#fb923c; border:1px solid rgba(249,115,22,0.3); }
.ps-tone .ps-badge { background:rgba(168,85,247,0.15); color:#c084fc; border:1px solid rgba(168,85,247,0.3); }
.ps-text { font-size:0.83rem; color: var(--ink-soft); line-height:1.6; }
.ph {
  color: var(--cyan);
  font-weight:600;
  background: var(--cyan-dim);
  border-radius:2px;
  padding:0 4px;
  font-style:normal;
  font-family:'JetBrains Mono',monospace;
  font-size:0.8em;
}

.prompt-footer {
  padding:0.6rem 1.2rem 0.9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.prompt-tip { font-size:0.74rem; color: var(--ink-muted); font-style:italic; flex:1; line-height:1.4; }
.copy-btn {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:0.4rem;
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--border-hard);
  border-radius:3px;
  padding:0.45rem 1rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;
  transition: all 0.15s;
  letter-spacing:0.05em;
}
.copy-btn:hover {
  background: var(--cyan-dim);
  box-shadow: 0 0 12px rgba(0,212,255,0.2);
  transform:scale(1.03);
}
.copy-btn.copied {
  color: var(--green);
  border-color: rgba(0,255,136,0.4);
  background: var(--green-dim);
}

#toast {
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%) translateY(60px);
  background: var(--bg-card);
  color: var(--cyan);
  border: 1px solid var(--border-hard);
  padding:0.55rem 1.4rem;
  border-radius:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  box-shadow: 0 0 24px rgba(0,212,255,0.2), 0 4px 20px rgba(0,0,0,0.4);
  transition:transform 0.28s ease,opacity 0.28s;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  z-index:9999;
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

footer {
  background: var(--bg-card);
  color: var(--ink-muted);
  text-align:center;
  padding:1.5rem;
  font-size:0.72rem;
  letter-spacing:0.06em;
  border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;
}

/* info boxes */
.what-box p { font-family:'Inter',sans-serif !important; }

/* ══ Barra de filtros compacta (buscador + botón desplegable) ══ */
.filter-bar-inner { max-width:700px; margin:0 auto; position:relative; }
.filter-top { display:flex; gap:0.5rem; align-items:center; padding:0.5rem 1rem; }
#search-input {
  flex:1; min-width:0;
  background: var(--bg);
  border:1px solid var(--border-hard);
  color: var(--ink);
  border-radius:3px;
  padding:0.55rem 0.9rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  outline:none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
#search-input::placeholder { color: var(--ink-muted); }
#search-input:focus { border-color: var(--cyan); box-shadow:0 0 0 3px var(--cyan-dim); }
#filter-toggle {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:0.4rem;
  background: var(--cyan-dim);
  border:1px solid var(--border-hard);
  color: var(--cyan);
  border-radius:3px;
  padding:0.55rem 0.85rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition: all 0.15s;
}
#filter-toggle:hover { box-shadow:0 0 12px rgba(0,212,255,0.25); }
#filter-toggle::after { content:'▾'; opacity:0.7; font-size:0.8em; }
#filter-toggle[aria-expanded="true"]::after { content:'▴'; }
.filter-panel {
  position:absolute; top:100%; left:0; right:0;
  background: var(--bg-card);
  border:1px solid var(--border-hard);
  border-top:none;
  border-radius:0 0 6px 6px;
  margin:0 1rem;
  padding:0.6rem 0.7rem;
  display:flex; flex-wrap:wrap; gap:0.25rem;
  box-shadow:0 12px 28px rgba(0,0,0,0.55);
  z-index:101;
}
/* El atributo hidden debe ganarle al display:flex de arriba */
.filter-panel[hidden] { display:none; }

/* ══ Botón favorito (estrella) ══ */
.fav-btn {
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--border-hard);
  color: var(--ink-muted);
  border-radius:3px;
  padding:0.35rem 0.6rem;
  cursor:pointer;
  font-size:0.95rem;
  line-height:1;
  transition: all 0.15s;
}
.fav-btn:hover { color:#fbbf24; border-color:rgba(251,191,36,0.45); }
.fav-btn.on { color:#fbbf24; border-color:rgba(251,191,36,0.5); background:rgba(251,191,36,0.1); }

/* ══ Mis Prompts ══ */
.mine-toolbar { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.mine-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  background:transparent;
  border:1px solid var(--border-hard);
  color: var(--cyan);
  border-radius:3px;
  padding:0.5rem 0.9rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;
  transition: all 0.15s;
  letter-spacing:0.03em;
}
.mine-btn:hover { background: var(--cyan-dim); box-shadow:0 0 12px rgba(0,212,255,0.2); }
.mine-btn.primary { background: var(--cyan-dim); }
.mine-edit, .mine-del {
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--border);
  color: var(--ink-muted);
  border-radius:3px;
  padding:0.35rem 0.55rem;
  cursor:pointer;
  font-size:0.85rem;
  line-height:1;
  transition: all 0.15s;
}
.mine-edit:hover { color: var(--cyan); border-color: var(--border-hard); }
.mine-del:hover { color:#f87171; border-color:rgba(248,113,113,0.4); }

/* Formulario de creación/edición */
.mine-form {
  background: var(--bg-card);
  border:1px solid var(--border-hard);
  border-radius:4px;
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
/* El atributo hidden debe ganarle al display:flex de arriba */
.mine-form[hidden] { display:none; }
.mine-input {
  width:100%;
  background: var(--bg);
  border:1px solid var(--border);
  color: var(--ink);
  border-radius:3px;
  padding:0.55rem 0.75rem;
  font-family:'Inter',sans-serif;
  font-size:0.85rem;
  outline:none;
  resize:vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mine-input::placeholder { color: var(--ink-muted); }
.mine-input:focus { border-color: var(--cyan); box-shadow:0 0 0 2px var(--cyan-dim); }
.mine-form-actions { display:flex; gap:0.5rem; margin-top:0.3rem; }
.mine-empty { color: var(--ink-muted); font-size:0.84rem; font-style:italic; line-height:1.6; padding:0.5rem 0; }

/* Sin resultados de búsqueda */
#no-results { display:none; text-align:center; color: var(--ink-muted); font-family:'JetBrains Mono',monospace; font-size:0.85rem; padding:2rem 1rem; }