/* =============================================
   Warhammer Fantasy Roleplay — Custom Theme
   Paleta: fondo carbón oscuro, texto pergamino claro, acentos dorado/ámbar
   ============================================= */

:root {
  /* Backgrounds — carbón oscuro con matiz cálido */
  --wh-bg:          #0d0b08;   /* página principal */
  --wh-bg-card:     #1a1510;   /* tarjetas, filas de tabla */
  --wh-bg-card-alt: #252018;   /* hover / filas alternas */

  /* Dorado — acento principal */
  --wh-gold:        #d4a830;   /* enlaces, badges */
  --wh-gold-dark:   #9a7422;   /* bordes, gradientes oscuros */
  --wh-gold-light:  #f2cc50;   /* encabezados, hover — alto contraste */

  /* Rojo sangre */
  --wh-red:         #7a1010;
  --wh-red-light:   #c04030;

  /* Texto — contraste WCAG AA o superior contra --wh-bg-card */
  --wh-text:        #ede0c4;   /* ~13:1 sobre #1a1510 — pergamino claro */
  --wh-text-muted:  #c0964a;   /* ~5.5:1 — ámbar cálido */

  /* Bordes */
  --wh-border:      #352a14;   /* separadores sutiles */
  --wh-border-gold: #5e4418;   /* bordes de tarjeta / tabla */

  --wh-parchment:   #f5e6c8;
}

/* ---- Base ---- */
body {
  background-color: var(--wh-bg);
  color: var(--wh-text);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1.05rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6,
.wh-title, .wh-heading, .wh-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: var(--wh-gold-light);
}

a { color: var(--wh-gold); }
a:hover { color: var(--wh-gold-light); }

/* ---- Navbar ---- */
.wh-navbar {
  background: linear-gradient(180deg, #080604 0%, #151008 100%);
  border-bottom: 2px solid var(--wh-gold-dark);
  padding: 0.4rem 1rem;
}

.wh-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--wh-gold-light) !important;
  font-weight: 700;
  letter-spacing: 1px;
}

.navbar-nav .nav-link {
  color: var(--wh-text) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 0.5rem 0.9rem;
  transition: color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--wh-gold-light) !important;
}

/* ---- Cards ---- */
.wh-card {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border-gold);
  border-radius: 4px;
  color: var(--wh-text);
}

.wh-card-sm {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 4px;
  color: var(--wh-text);
  transition: border-color 0.2s;
}
.wh-card-sm:hover { border-color: var(--wh-gold-dark); }

.wh-card-header {
  background: linear-gradient(90deg, #2a1e0a 0%, #1a1510 100%);
  border-bottom: 1px solid var(--wh-border-gold);
  color: var(--wh-gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

/* ---- Buttons ---- */
.btn-wh {
  background: linear-gradient(180deg, #9a7422 0%, #6b5018 100%);
  color: #0d0b08;
  border: 1px solid var(--wh-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  font-weight: 700;
  transition: all 0.2s;
}

.btn-wh:hover, .btn-wh:focus {
  background: linear-gradient(180deg, #d4a830 0%, #9a7422 100%);
  color: #080604;
  border-color: var(--wh-gold-light);
  box-shadow: 0 0 10px rgba(212, 168, 48, 0.45);
}

.btn-wh:active { transform: scale(0.97); }

/* ---- Forms / Inputs ---- */
.wh-input, .wh-input.form-control, .wh-input.form-select {
  background: #120f08;
  border: 1px solid var(--wh-border-gold);
  color: var(--wh-text);
  border-radius: 3px;
}

.wh-input:focus {
  background: #1c1810;
  border-color: var(--wh-gold);
  color: var(--wh-text);
  box-shadow: 0 0 0 2px rgba(212, 168, 48, 0.3);
}

.wh-input::placeholder { color: var(--wh-text-muted); opacity: 0.7; }

.wh-label {
  color: var(--wh-gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

/* ---- Tables ---- */
.wh-table {
  color: var(--wh-text);
  border-color: var(--wh-border-gold);
  /* Neutralize Bootstrap 5's inset box-shadow hover trick (table-hover) */
  --bs-table-hover-bg: transparent;
  --bs-table-accent-bg: transparent;
}

.wh-table thead th {
  background: #261c08;
  color: var(--wh-gold-light);
  border-color: var(--wh-border-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.wh-table tbody td {
  background: var(--wh-bg-card);
  border-color: var(--wh-border);
  color: var(--wh-text);
  /* Block Bootstrap's inset box-shadow overlay */
  box-shadow: none !important;
}

.wh-table tbody tr:hover td {
  background: var(--wh-bg-card-alt);
}

/* Characteristic tables */
.wh-stat-table {
  font-size: 0.85rem;
  color: var(--wh-text);
}

.wh-stat-table th {
  background: #261c08;
  color: var(--wh-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  padding: 4px 6px;
  border-color: var(--wh-border-gold);
  min-width: 36px;
}

.wh-stat-table td {
  background: var(--wh-bg-card);
  padding: 4px 6px;
  border-color: var(--wh-border);
  color: var(--wh-text);
}

.wh-stat-positive {
  color: #6ee87a !important;
  font-weight: 600;
}

/* ---- Badges ---- */
.wh-badge-skill {
  background: #0e2a10;
  border: 1px solid #266628;
  color: #8edaa0;
  font-size: 0.78rem;
  font-weight: normal;
}

.wh-badge-skill-opt {
  background: #0e1e2e;
  border: 1px solid #224466;
  color: #7ab4d4;
  font-size: 0.78rem;
  font-weight: normal;
}

.wh-badge-talent {
  background: #2e1e08;
  border: 1px solid #664a18;
  color: #e0b86a;
  font-size: 0.78rem;
  font-weight: normal;
}

.wh-badge-talent-opt {
  background: #2e0e1e;
  border: 1px solid #661842;
  color: #e07aaa;
  font-size: 0.78rem;
  font-weight: normal;
}

.wh-badge-trapping {
  background: #242210;
  border: 1px solid #524e20;
  color: #d0cc6a;
  font-size: 0.78rem;
  font-weight: normal;
}

.wh-badge-prof {
  background: #1e0e2e;
  border: 1px solid #4a2266;
  color: #b07ae0;
  font-size: 0.78rem;
  font-weight: normal;
  text-decoration: none;
}

.wh-badge-prof:hover { color: var(--wh-gold-light); }

/* ---- Choice groups ---- */
.wh-choice-group { display: inline-flex; align-items: center; gap: 3px; }
.wh-or {
  color: var(--wh-text-muted);
  font-style: italic;
  font-size: 0.75rem;
}

/* ---- Accordion ---- */
.wh-accordion-item {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border-gold);
  margin-bottom: 2px;
}

.wh-accordion-btn {
  background: #241a08;
  color: var(--wh-gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
}

.wh-accordion-btn:not(.collapsed) {
  background: #302616;
  color: var(--wh-gold-light);
}

.wh-accordion-btn::after { filter: brightness(2) sepia(1) hue-rotate(15deg); }

/* ---- Dividers ---- */
.wh-divider {
  border-color: var(--wh-gold-dark);
  border-width: 2px;
  opacity: 0.5;
  margin: 1.5rem auto;
  width: 60%;
}

.wh-divider-sm {
  border-color: var(--wh-border-gold);
  opacity: 0.4;
}

/* ---- Misc UI ---- */
.wh-subtitle { color: var(--wh-text-muted); font-family: 'Cinzel', serif; }

.wh-description {
  color: var(--wh-text);
  line-height: 1.7;
}

.wh-link { color: var(--wh-gold); text-decoration: none; }
.wh-link:hover { color: var(--wh-gold-light); text-decoration: underline; }

.wh-breadcrumb { background: transparent; font-size: 0.85rem; }
.wh-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--wh-text-muted); }
.wh-breadcrumb .breadcrumb-item.active { color: var(--wh-text-muted); }

.wh-alert { background: #1a1510; border-color: var(--wh-gold-dark); color: var(--wh-text); }

.wh-footer {
  background: #0a0806;
  border-top: 1px solid var(--wh-border-gold);
  margin-top: auto;
}

/* ---- Profession images ---- */
.wh-card-img {
  height: 180px;
  object-fit: cover;
  filter: sepia(20%) brightness(0.85);
}

.wh-card-img-placeholder {
  height: 180px;
  background: #1a1510;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--wh-border-gold);
}

.wh-prof-image {
  max-height: 280px;
  object-fit: cover;
  width: 100%;
  filter: sepia(15%) brightness(0.9);
}

.wh-prof-image-placeholder {
  height: 220px;
  background: #1a1510;
  border: 1px solid var(--wh-border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--wh-border-gold);
  border-radius: 4px;
}

.wh-prof-thumb {
  height: 70px;
  width: 100%;
  object-fit: cover;
  filter: sepia(20%) brightness(0.8);
}

.wh-prof-thumb-placeholder {
  height: 70px;
  background: #1a1510;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--wh-border-gold);
}

/* ---- Stat number ---- */
.wh-stat-number {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  color: var(--wh-gold);
  line-height: 1;
  margin: 0.5rem 0;
}

.wh-icon-lg {
  font-size: 2.5rem;
  color: var(--wh-gold-dark);
  display: block;
  margin: 0.5rem 0;
}

/* ---- Pre text (PDF pages) ---- */
.wh-pre-text {
  background: var(--wh-bg);
  border: 1px solid var(--wh-border);
  color: var(--wh-text);
  font-size: 0.82rem;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wh-bg); }
::-webkit-scrollbar-thumb { background: var(--wh-border-gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wh-gold-dark); }

/* ---- Skill/Talent list items ---- */
.wh-item-list { display: flex; flex-direction: column; }

.wh-item-entry {
  padding: .8rem 1rem;
  border-left: 1px solid var(--wh-border-gold);
  border-right: 1px solid var(--wh-border-gold);
  border-top: 1px solid var(--wh-border);
  background: var(--wh-bg-card);
}
.wh-item-entry:first-child {
  border-top-color: var(--wh-border-gold);
  border-radius: 4px 4px 0 0;
}
.wh-item-entry:last-child {
  border-bottom: 1px solid var(--wh-border-gold);
  border-radius: 0 0 4px 4px;
}
.wh-item-entry:hover { background: var(--wh-bg-card-alt); }

.wh-item-name  { font-family: 'Cinzel', serif; font-size: .95rem; color: var(--wh-gold-light); }
.wh-item-desc  { color: var(--wh-text); font-size: .9rem; line-height: 1.6; }
.wh-item-meta  { font-size: .8rem; color: var(--wh-text-muted); }

/* Type badges — WH-styled, no Bootstrap */
.badge-wh-basic {
  display: inline-block;
  background: #0c2610;
  border: 1px solid #245a28;
  color: #7adc90;
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .3px;
  vertical-align: middle;
}
.badge-wh-advanced {
  display: inline-block;
  background: #281a00;
  border: 1px solid #604000;
  color: #d8a428;
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .3px;
  vertical-align: middle;
}

/* Filter bar */
.wh-filter-bar {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border-gold);
  border-radius: 4px;
  padding: .6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.wh-filter-bar .form-check-label,
.wh-filter-bar label { color: var(--wh-text); font-size: .85rem; }
.wh-filter-bar .form-check-input:checked { background-color: var(--wh-gold-dark); border-color: var(--wh-gold); }
.wh-filter-bar select.wh-input { padding: .2rem .6rem; font-size: .85rem; height: auto; }

/* Search input highlight */
mark { background: rgba(212, 168, 48, .28); color: var(--wh-gold-light); padding: 0 2px; border-radius: 2px; }

/* =============================================
   Bootstrap overrides — adapt to dark WH theme
   ============================================= */

/* text-muted */
.text-muted { color: var(--wh-text-muted) !important; }

/* btn-outline-secondary */
.btn-outline-secondary {
  color: var(--wh-text) !important;
  border-color: var(--wh-border-gold) !important;
  background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--wh-bg-card-alt) !important;
  color: var(--wh-gold-light) !important;
  border-color: var(--wh-gold-dark) !important;
}

/* btn-outline-warning / danger — visible on dark bg */
.btn-outline-warning {
  color: #e0a830 !important;
  border-color: #8a6018 !important;
}
.btn-outline-warning:hover {
  background-color: #2e1e06 !important;
  color: var(--wh-gold-light) !important;
  border-color: var(--wh-gold) !important;
}
.btn-outline-danger {
  color: #e06060 !important;
  border-color: #7a2020 !important;
}
.btn-outline-danger:hover {
  background-color: #2a0808 !important;
  color: #ff8080 !important;
  border-color: #c04040 !important;
}

/* dropdown-toggle caret */
.dropdown-toggle::after { border-top-color: inherit; }

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--wh-bg-card);
  border: 1px solid var(--wh-border-gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
  min-width: 10rem;
}
.dropdown-item {
  color: var(--wh-text);
  font-size: 0.88rem;
  padding: 0.4rem 1rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--wh-bg-card-alt);
  color: var(--wh-gold-light);
}
.dropdown-divider { border-color: var(--wh-border-gold); }

/* Bootstrap badges — replace Bootstrap colors with WH palette */
.badge.bg-secondary {
  background-color: #2e2410 !important;
  color: var(--wh-text-muted) !important;
  border: 1px solid var(--wh-border-gold);
}
.badge.bg-info {
  background-color: #0e2010 !important;
  color: #7acc80 !important;
  border: 1px solid #266630;
}
.badge.bg-success {
  background-color: #0a2010 !important;
  color: #60c870 !important;
  border: 1px solid #205830;
}
.badge.bg-warning {
  background-color: #261808 !important;
  color: #d4a030 !important;
  border: 1px solid #604010;
}
.badge.bg-danger {
  background-color: #200808 !important;
  color: #d46060 !important;
  border: 1px solid #602020;
}
/* text-dark for badges (e.g. bg-warning text-dark) */
.badge.bg-warning.text-dark { color: #c89020 !important; }

/* "sí" prefix badge in synonym dictionary */
.wh-badge-prefix {
  display: inline-block;
  background: #0e2210;
  border: 1px solid #2a6630;
  color: #7ad888;
  font-size: .78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}

/* Alerts */
.alert-warning { color: #e0c060; background-color: #221400; border-color: #604010; }
.alert-danger   { color: #e08080; background-color: #200808; border-color: #602020; }
.alert-info     { color: #80c8c8; background-color: #081818; border-color: #104040; }
.alert-success  { color: #80cc80; background-color: #081408; border-color: #204020; }

/* Form checks */
.form-check-input { background-color: #120f08; border-color: var(--wh-border-gold); }
.form-check-input:checked {
  background-color: var(--wh-gold-dark);
  border-color: var(--wh-gold);
}
.form-check-label { color: var(--wh-text); }

/* Modal */
.modal-content {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border-gold);
  color: var(--wh-text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
}
.modal-header  { border-bottom-color: var(--wh-border-gold); }
.modal-footer  { border-top-color: var(--wh-border-gold); }
.btn-close { filter: invert(0.8) sepia(0.3) hue-rotate(20deg); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .wh-stat-number { font-size: 1.8rem; }
  .wh-stat-table th, .wh-stat-table td { padding: 2px 3px; font-size: 0.7rem; min-width: 28px; }
}