/* ═══════════════════════════════════════════════════════════════
   BANDALIUM — Tema "LA NOCHE"  ·  assets/css/noche.css
   Re-piel de escenario para TODAS las secciones internas, a juego
   con la landing: noche cálida, papel, rojo escenario, esquinas a
   90°, sombras duras, etiquetas en mono.
   Se incluye DESPUÉS de la piel inline de cada página para ganarle
   por cascada (con !important donde la piel vieja usa cósmico azul).
   No toca contenido ni datos — sólo apariencia.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --noche:       #0f0c0a;
  --noche-2:     #14100c;
  --ink:         #1a1511;
  --paper:       #f4efe3;
  --paper-dim:   rgba(244,239,227,0.62);
  --paper-faint: rgba(244,239,227,0.30);
  --rojo:        #d02e1d;
  --rojo-2:      #b22518;
  --bulb:        #ffc874;
  --line:        rgba(244,239,227,0.16);
  --line-strong: rgba(244,239,227,0.30);
  --card-bg:     #17130f;
  --card-bg-2:   #1e1812;

  /* tokens del design-system entonados a la noche */
  --bg-page:        var(--noche);
  --bg-card:        var(--card-bg);
  --bg-hover:       rgba(244,239,227,0.05);
  --text-primary:   var(--paper);
  --text-secondary: var(--paper-dim);
  --text-muted:     var(--paper-faint);
  --border:         var(--line);
  --border-dark:    var(--line-strong);
  --section-color:  var(--rojo);

  /* esquinas afiladas de cartel */
  --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 2px; --radius-xl: 2px;
  --radius: 0; --radius-full: 999px;
}

/* ── Fondo de escenario: pisa los gradientes cósmicos viejos ── */
html, body { background: var(--noche) !important; color: var(--paper); }
body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(208,46,29,0.10), transparent 60%),
    radial-gradient(900px 520px at 12% 8%, rgba(255,200,116,0.05), transparent 55%),
    var(--noche) !important;
  background-attachment: fixed !important;
}
.app-layout, .main-content, .page, .page-content, .content-wrap { background: transparent !important; }
::selection { background: var(--rojo); color: var(--paper); }

/* ── Tipografía de cartel ── */
h1, h2, h3, .page-title, .section-title, .hero-title {
  font-family: var(--font-display); font-stretch: 125%; letter-spacing: -0.01em; color: var(--paper);
}
.eyebrow, .section-label, .form-label, .sidebar-label, .modal-info-label, .badge, .chip-option, .tag-option, .fpill {
  letter-spacing: 0.08em;
}

/* ════════ HEADER / NAV ════════ */
.hub-header {
  background: rgba(15,12,10,0.92) !important;
  border-bottom: 2px solid var(--paper) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.hub-brand-name { color: var(--paper) !important; }
/* logo a blanco sobre el escenario oscuro (las internas usan logo.svg a color) */
.hub-brand-logo { filter: brightness(0) invert(1); }
.hub-nav-link { color: var(--paper-dim) !important; border-radius: 0 !important; }
.hub-nav-link:hover { color: var(--paper) !important; background: rgba(244,239,227,0.08) !important; }
.hub-nav-link.active {
  color: var(--rojo) !important;
  background: rgba(208,46,29,0.14) !important;
}
.hub-header .btn, #headerLoginBtn {
  border: 2px solid var(--paper) !important; color: var(--paper) !important; background: transparent !important;
  border-radius: 0 !important; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem;
}
.hub-header .btn:hover, #headerLoginBtn:hover { background: var(--paper) !important; color: var(--noche) !important; }
.hub-user-chip { background: transparent !important; border: 2px solid var(--paper) !important; border-radius: 0 !important; color: var(--paper) !important; }
.hub-user-chip-avatar { border-radius: 0 !important; background: var(--rojo) !important; color: var(--paper) !important; }

/* ════════ FOOTER ════════ */
.hub-footer { background: var(--noche) !important; color: var(--paper-dim) !important; border-top: 2px solid var(--paper) !important; }
.hub-footer a { color: var(--rojo) !important; }

/* ════════ TARJETAS (cartel: papel-sobre-tinta con sombra dura) ════════ */
/* NB: .sala-card y .mc-card tienen su propia piel de cartel completa en su
   página (polaroid de papel / foto-card) → se excluyen del override genérico. */
.card, .marketplace-card, .gig-card, .musico-card,
.fav-item-card, .user-list-item, .my-listing-item, .musica-item, .busco-match-card,
.thread-card, .post-card, .clase-card, .bolo-card, .blog-card, .anuncio-card, .review-card {
  background: var(--card-bg) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45) !important;
  color: var(--paper);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.card:hover, .marketplace-card:hover, .gig-card:hover, .musico-card:hover,
.thread-card:hover, .post-card:hover, .clase-card:hover, .bolo-card:hover, .blog-card:hover, .anuncio-card:hover {
  border-color: var(--rojo) !important;
  box-shadow: 6px 6px 0 var(--rojo) !important;
  transform: translateY(-2px);
}
.card *, .marketplace-card *, .gig-card * { border-color: var(--line); }

/* ════════ BOTONES ════════ */
.btn { border-radius: 0 !important; }
.btn-primary, .btn.btn-primary {
  background: var(--rojo) !important; color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.55) !important;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.btn-primary:hover { background: var(--rojo-2) !important; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important; }
.btn-secondary, .btn-ghost, .btn-outline {
  background: transparent !important; color: var(--paper) !important;
  border: 2px solid var(--paper) !important; box-shadow: none !important;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover { background: var(--paper) !important; color: var(--noche) !important; }
.fab, .btn-fab, #btnChatFab { box-shadow: 4px 4px 0 rgba(0,0,0,0.55) !important; }

/* ════════ FORMULARIOS ════════ */
.form-label, .sidebar-label { color: var(--paper-dim) !important; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.12em; }
.form-input, .form-select, select.form-select, textarea.form-input, input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="date"] {
  background: rgba(244,239,227,0.05) !important;
  color: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
}
.form-input:focus, .form-select:focus, textarea.form-input:focus { border-color: var(--rojo) !important; outline: none !important; box-shadow: 0 0 0 1px var(--rojo) !important; }
.form-input::placeholder, textarea.form-input::placeholder { color: var(--paper-faint) !important; }

/* ════════ CHIPS · TAGS · FILTROS ════════ */
.tag-option, .chip-option, .filter-option, .fpill, .badge, .instr-btn, .view-sw-btn, .sub-tab, .profile-tab {
  background: rgba(244,239,227,0.05) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--paper-dim) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem;
}
.tag-option:hover, .chip-option:hover, .filter-option:hover, .fpill:hover, .instr-btn:hover, .view-sw-btn:hover, .sub-tab:hover, .profile-tab:hover {
  color: var(--paper) !important; border-color: var(--line-strong) !important;
}
.tag-option.selected, .chip-option.selected, .filter-option.active, .fpill.active, .instr-btn.active,
.view-sw-btn.active, .sub-tab.active, .profile-tab.active {
  background: rgba(208,46,29,0.18) !important;
  border-color: var(--rojo) !important;
  color: var(--paper) !important;
}

/* ════════ SIDEBAR ════════ */
.sidebar, .filters-sidebar, .sidebar-section { background: transparent !important; }
.sidebar-divider, .sidebar-section { border-color: var(--line) !important; }
.sidebar-item { color: var(--paper-dim) !important; border-radius: 0 !important; }
.sidebar-item:hover, .sidebar-item.active { color: var(--paper) !important; background: rgba(244,239,227,0.06) !important; }

/* ════════ MODALES ════════ */
.modal-overlay { background: rgba(8,6,5,0.78) !important; backdrop-filter: blur(4px); }
.modal {
  background: var(--card-bg-2) !important;
  border: 2px solid var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.6) !important;
  color: var(--paper);
}
.modal-header, .modal-footer { border-color: var(--line) !important; }
.modal-title { color: var(--paper) !important; font-family: var(--font-display); font-stretch: 125%; }
.modal-close { color: var(--paper-dim) !important; border-radius: 0 !important; }
.modal-close:hover { color: var(--paper) !important; background: rgba(244,239,227,0.08) !important; }
.modal-info-label { color: var(--paper-faint) !important; }

/* ════════ CHAT / panel de preferencias en noche ════════ */
.mc-card { background: var(--card-bg) !important; }
.mc-card:hover { border-color: rgba(208,46,29,0.4) !important; }
#sono-prefs-panel { background: var(--card-bg-2) !important; border: 2px solid var(--paper) !important; border-radius: 0 !important; }
.sono-prefs-label { color: var(--paper-dim) !important; }
.sono-prefs-row:hover { background: rgba(244,239,227,0.06) !important; }
#sono-prefs-btn { color: var(--paper-dim) !important; border-color: var(--line) !important; border-radius: 0 !important; }
#sono-prefs-btn:hover { color: var(--paper) !important; background: rgba(244,239,227,0.08) !important; }
/* el toggle claro/oscuro ya no aplica (tema NOCHE forzado) → ocultar esa fila, dejar idioma */
.sono-prefs-row:has(.sono-toggle-track) { display: none; }

/* ════════ enlaces de acción ════════ */
a.link, .text-link, .link-rojo { color: var(--rojo) !important; }

/* ════════ HERO/BANNERS de página: mata gradientes cósmicos viejos ════════ */
.blog-hero, .page-hero, .section-hero, .hero-band {
  background: linear-gradient(135deg, var(--noche) 0%, #1a0d0a 55%, var(--noche) 100%) !important;
  border-bottom: 2px solid var(--paper) !important;
}
.blog-hero h1, .page-hero h1 {
  background: none !important;
  -webkit-text-fill-color: var(--paper) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--paper) !important;
}
.blog-hero-eyebrow, .page-hero-eyebrow { color: var(--rojo) !important; }
.blog-hero-sub, .page-hero-sub { color: var(--paper-dim) !important; }

/* respeta lo redondo de verdad (avatares, dots) */
.avatar, .hub-user-chip-avatar.is-round, .dot, .status-dot { border-radius: 50% !important; }