/* components.css — LuckJournal.pro — componentes reutilizables */

/* ===== Age gate ===== */
.age-gate-overlay{
  position:fixed; inset:0;
  background:rgba(27,10,12,0.88);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
  padding:16px;
}
.age-gate-modal{
  background:var(--color-cream);
  color:var(--text-on-cream);
  border:2px solid var(--color-brass);
  border-radius:6px;
  max-width:420px;
  width:100%;
  padding:28px 24px;
  text-align:center;
}
.age-gate-modal h2{ margin-bottom:12px; }
.age-gate-modal p{ margin:0 auto 20px; }
.age-gate-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-16);
  padding:10px 24px;
  border-radius:4px;
  border:2px solid var(--color-brass);
  background:var(--color-brass);
  color:#000000;
  cursor:pointer;
}
.btn:hover{ background:#BF9052; border-color:#8F672F; color:#000000; }
.btn-outline{
  background:transparent;
  color:var(--text-on-cream);
}
.btn-outline:hover{ background:var(--color-cream-surface); }

/* ===== Cards / paspartú ===== */
.card{
  background:var(--color-cream-surface);
  border:1px solid var(--color-brass);
  outline:6px solid var(--color-cream);
  outline-offset:-10px;
  border-radius:2px;
  padding:20px;
}
.card-dark{
  background:var(--color-dark-surface);
  color:var(--text-on-dark);
  border-color:var(--color-brass);
}
.card-dark a{ color:var(--color-cream); }

.section-divider{
  border:0; height:1px;
  background:var(--color-brass);
  width:100%;
  margin:8px 0 24px;
  position:relative;
}

/* drop cap */
.dropcap::first-letter{
  font-family:var(--font-display);
  font-size:3.2em;
  float:left;
  line-height:0.85;
  padding-right:8px;
  color:var(--color-brass);
  font-weight:700;
}

/* ===== Marker badges (vínculo con juegos de azar) ===== */
.marker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-12);
  font-weight:700;
  padding:4px 10px;
  border-radius:3px;
  color:#fff;
  line-height:1.3;
}
.marker::before{ content:"●"; font-size:0.7em; }
.marker-documentado{ background:var(--marker-documentado); }
.marker-indirecto-contextual{ background:var(--marker-indirecto); color:#000000; }
.marker-sin-evidencia-directa{ background:var(--marker-sin-evidencia); }
.badge-verificacion{
  display:inline-block;
  font-size:var(--fs-12);
  font-weight:700;
  background:var(--marker-verificacion);
  color:#fff;
  padding:3px 8px;
  border-radius:3px;
}

/* ===== Índice: controles ===== */
.index-tools{
  background:var(--color-cream-surface);
  border:1px solid var(--color-brass);
  border-radius:4px;
  padding:20px;
  margin-bottom:24px;
}
.search-field{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--color-cream);
  border:2px solid var(--color-brass);
  border-radius:4px;
  padding:8px 12px;
  margin-bottom:16px;
}
.search-field svg{ flex:none; width:20px; height:20px; color:var(--color-brass); }
.search-field input[type="search"]{
  border:0; background:transparent; flex:1;
  font-size:var(--fs-18);
  color:var(--text-on-cream);
}
.search-field input[type="search"]:focus{ outline:none; }
.search-field input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-end;
  justify-content:space-between;
}
.sort-group{ display:flex; align-items:center; gap:8px; font-size:var(--fs-14); }
.sort-group select{
  border:1px solid var(--color-brass);
  border-radius:4px;
  padding:6px 8px;
  background:var(--color-cream);
}

.facets{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:16px;
}
@media (max-width:1024px){
  .facets{ grid-template-columns:repeat(2,1fr); }
}
.facets fieldset{
  border:1px solid var(--color-brass);
  border-radius:4px;
  padding:10px 12px;
  margin:0;
}
.facets legend{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-14);
  padding:0 6px;
}
.facet-option{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-14);
  margin-bottom:4px;
}
.facet-option input{ flex:none; }

.facets-toggle{
  display:none;
  width:100%;
  text-align:left;
  background:var(--color-cream);
  border:1px solid var(--color-brass);
  border-radius:4px;
  padding:10px 12px;
  font-weight:700;
  margin-top:16px;
  cursor:pointer;
}
@media (max-width:480px){
  .facets-toggle{ display:flex; justify-content:space-between; align-items:center; }
  .facets{
    display:none;
    grid-template-columns:1fr;
  }
  .facets.facets-open{ display:grid; }
}

.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:16px 0;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--color-brass);
  color:#000000;
  font-size:var(--fs-12);
  font-weight:600;
  padding:4px 6px 4px 10px;
  border-radius:12px;
}
.chip button{
  border:0; background:transparent; cursor:pointer;
  font-weight:700; color:#000000;
  font-size:var(--fs-14);
  line-height:1;
  padding:2px 4px;
}

.results-bar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px;
  margin-bottom:16px;
  font-size:var(--fs-14);
}
.results-count{ font-weight:700; }

.empty-result{
  text-align:center;
  padding:40px 20px;
  border:1px dashed var(--color-brass);
  border-radius:4px;
}

/* ===== Índice: lista y tarjetas de institución ===== */
.institution-list{ list-style:none; margin:0; padding:0; }
.alpha-tab{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-18);
  color:var(--color-brass);
  border-bottom:2px solid var(--color-brass);
  padding:16px 4px 4px;
  margin-top:24px;
}
.alpha-tab:first-child{ margin-top:0; }

.institution-card{
  margin-bottom:16px;
}
.institution-summary{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.institution-summary:hover .inst-name{ color:var(--color-dark); }
.inst-name{
  font-family:var(--font-display);
  font-size:var(--fs-22);
  font-weight:700;
  color:var(--text-on-cream);
}
.inst-name mark{
  background:#F6D98B;
  color:inherit;
  padding:0 1px;
}
.inst-meta{
  font-size:var(--fs-14);
  opacity:0.85;
  margin-top:4px;
}
.inst-markers{
  margin-top:8px;
  display:flex; gap:6px; flex-wrap:wrap;
}
.inst-summary-text{
  margin-top:10px;
  font-size:var(--fs-16);
}
.inst-chevron{
  flex:none;
  font-size:var(--fs-18);
  transition:transform 0.2s ease;
}
.institution-summary[aria-expanded="true"] .inst-chevron{
  transform:rotate(180deg);
}
@media (prefers-reduced-motion: reduce){
  .inst-chevron{ transition:none; }
}
.inst-extended{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--color-brass);
}
.inst-extended[hidden]{ display:none !important; }
.inst-source{
  font-size:var(--fs-12);
  opacity:0.75;
  margin-top:10px;
}

/* FAQ accordion */
.faq-item{
  border-bottom:1px solid var(--color-brass);
}
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:14px 4px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-18);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.faq-answer{
  padding:0 4px 16px;
}
.faq-answer[hidden]{ display:none !important; }

/* tables */
table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-14);
}
th,td{
  border:1px solid var(--color-brass);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}
th{ background:var(--color-cream-surface); font-family:var(--font-display); }

.checklist{ padding-left:0; list-style:none; }
.checklist li{
  padding-left:1.6em;
  position:relative;
  margin-bottom:8px;
}
.checklist li::before{
  content:"✓";
  color:var(--color-brass);
  font-weight:700;
  position:absolute;
  left:0;
}

.affiliate-note{
  font-size:var(--fs-12);
  font-style:italic;
  opacity:0.8;
}

.js-only{ display:none; }
.js .js-only{ display:block; }
.no-js-note{
  border:1px solid var(--color-brass);
  background:var(--color-cream-surface);
  padding:12px 16px;
  border-radius:4px;
  margin-bottom:16px;
  font-size:var(--fs-14);
}
.js .no-js-note{ display:none; }