/* estilos-componentes.css — age gate, estatuto regulatorio, timeline, faq, etc. */

/* --- Age gate --- */
.gate-fondo{
  position:fixed;inset:0;
  background:rgba(11,46,54,0.88);
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.gate-dialogo{
  background:var(--color-bg-light);
  color:var(--color-text-onlight);
  max-width:440px;
  width:100%;
  border-radius:var(--radius-md);
  padding:28px 24px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
  text-align:center;
  border:2px solid var(--color-accent-brass);
}
.gate-dialogo h2{margin-bottom:0.4em;}
.gate-dialogo p{margin:0 auto 1.2em;max-width:38ch;}
.gate-botones{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.gate-btn{
  padding:12px 28px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:var(--fs-16);
  border:2px solid var(--color-accent-brass);
}
.gate-btn-si{
  background:var(--color-accent-brass);
  color:#1B2A2E;
}
.gate-btn-si:hover{background:var(--color-accent-terracotta);border-color:var(--color-accent-terracotta);}
.gate-btn-no{
  background:transparent;
  color:var(--color-text-onlight);
}
.gate-btn-no:hover{background:rgba(166,67,43,0.1);border-color:var(--color-warning);color:var(--color-warning);}
.gate-nota{font-size:var(--fs-12);opacity:0.75;margin-top:16px;}

/* --- Estatuto regulatorio --- */
.estatuto{
  background:var(--color-surface-dark);
  color:var(--color-text-ondark);
  border:1px solid rgba(234,243,241,0.15);
  border-left:5px solid var(--color-accent-brass);
  border-radius:var(--radius-md);
  padding:22px 24px;
  margin:24px 0;
  display:flex;
  gap:16px;
}
.estatuto__icono{flex-shrink:0;width:40px;height:40px;}
.estatuto h2,.estatuto h3{color:var(--color-text-ondark);margin-bottom:0.3em;font-size:var(--fs-22);}
.estatuto p{color:var(--color-text-ondark);max-width:none;}

/* Plaqueta "verificar antes de publicar" */
.op-editable{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--color-warning);
  color:#FBF6EC;
  font-size:var(--fs-12);
  font-weight:600;
  padding:2px 8px;
  border-radius:4px;
  white-space:nowrap;
}

/* Tarjetas */
.tarjeta{
  background:#fff;
  border:1px solid rgba(27,42,46,0.12);
  border-radius:var(--radius-md);
  padding:22px;
  position:relative;
}
.tarjeta::before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:22px;height:22px;
  background:
    linear-gradient(135deg, transparent 50%, var(--color-accent-terracotta) 50%);
  border-top-right-radius:var(--radius-md);
}
.tarjeta h3{margin-bottom:0.4em;}

/* Plaqueta responsabilidad (footer) */
.plaqueta-responsable{
  background:var(--color-surface-dark);
  border-radius:var(--radius-md);
  padding:16px 20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:20px;
}
.plaqueta-responsable svg{flex-shrink:0;width:28px;height:28px;}
.plaqueta-responsable p{margin:0;color:var(--color-text-ondark);font-size:var(--fs-14);}

/* Tabla de fechas clave */
.tabla-fechas{
  margin:20px 0;
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(27,42,46,0.12);
}
.tabla-fechas caption{
  text-align:left;
  font-weight:600;
  padding:10px 12px;
  background:var(--color-bg-dark);
  color:var(--color-text-ondark);
}
.tabla-fechas th{background:rgba(199,123,60,0.12);}

/* FAQ accordion */
.faq-item{
  border-bottom:1px solid rgba(27,42,46,0.15);
}
.faq-pregunta{
  width:100%;
  background:transparent;
  border:none;
  text-align:left;
  padding:16px 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--font-heading);
  font-size:var(--fs-18);
  font-weight:600;
  color:var(--color-text-onlight);
}
.faq-pregunta .faq-icono{
  flex-shrink:0;
  width:20px;height:20px;
  transition:transform var(--transition-fast);
}
.faq-pregunta[aria-expanded="true"] .faq-icono{transform:rotate(45deg);}
.faq-respuesta{
  padding:0 4px 18px;
  max-width:68ch;
}

/* --- Century Decade Slider --- */
.slider-envoltorio{
  background:var(--color-bg-dark);
  color:var(--color-text-ondark);
  border-radius:var(--radius-md);
  padding:24px;
  margin:24px 0;
}
.slider-controles{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.slider-controles .grupo-zoom{display:flex;gap:8px;align-items:center;}
.btn-zoom{
  background:var(--color-surface-dark);
  color:var(--color-text-ondark);
  border:1px solid rgba(234,243,241,0.3);
  border-radius:var(--radius-sm);
  width:36px;height:36px;
  font-size:var(--fs-18);
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-zoom:hover{background:var(--color-accent-brass);color:#1B2A2E;}
.btn-volver{
  background:transparent;
  border:1px solid var(--color-accent-terracotta);
  color:var(--color-accent-terracotta);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  font-weight:600;
  font-size:var(--fs-14);
}
.btn-volver:hover{background:var(--color-accent-terracotta);color:var(--color-bg-dark);}

.slider-eje-contenedor{
  overflow-x:auto;
  padding-bottom:12px;
  scrollbar-color:var(--color-accent-brass) var(--color-surface-dark);
}
.slider-eje{
  list-style:none;
  margin:0;padding:8px 4px 18px;
  display:flex;
  gap:10px;
  position:relative;
  min-width:min-content;
}
.slider-eje.zoom-anim{
  animation:eje-aparece var(--transition-zoom);
}
@keyframes eje-aparece{
  from{opacity:0.2;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
.slider-eje::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:6px;
  height:2px;
  background:repeating-linear-gradient(90deg, rgba(234,243,241,0.35) 0 1px, transparent 1px 10px);
}
.plieza{
  flex:0 0 auto;
  min-width:112px;
}
.plieza-btn{
  width:100%;
  background:var(--color-surface-dark);
  color:var(--color-text-ondark);
  border:2px solid rgba(234,243,241,0.25);
  border-radius:var(--radius-sm);
  padding:14px 10px 10px;
  text-align:left;
  transition:border-color var(--transition-fast), background var(--transition-fast);
}
.plieza-btn:hover{border-color:var(--color-accent-terracotta);}
.plieza-btn[aria-pressed="true"]{
  background:var(--color-accent-brass);
  color:#1B2A2E;
  border-color:var(--color-accent-brass);
}
.plieza-etiqueta{
  display:block;
  font-family:var(--font-heading);
  font-size:var(--fs-18);
  font-weight:600;
}
.plieza-rango{
  display:block;
  font-size:var(--fs-12);
  opacity:0.85;
  margin-top:2px;
}
.plieza-btn.edge-reached{
  animation:pulso-rechazo 320ms ease;
}
@keyframes pulso-rechazo{
  0%{transform:translateX(0);}
  30%{transform:translateX(-4px);}
  60%{transform:translateX(4px);}
  100%{transform:translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  .plieza-btn.edge-reached{animation:none;}
}

.slider-panel{
  background:var(--color-bg-light);
  color:var(--color-text-onlight);
  border-radius:var(--radius-md);
  padding:20px;
  margin-top:16px;
}
.slider-panel h3{margin-bottom:0.3em;}
.panel-vacio{opacity:0.85;font-style:italic;}
.categoria-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-12);
  font-weight:600;
  padding:3px 9px;
  border-radius:12px;
  background:rgba(62,107,92,0.15);
  color:var(--color-success);
  margin-bottom:10px;
}
.categoria-badge svg{width:14px;height:14px;}

/* Panel-fila para año dentro de lista de años (no-js y js) */
.lista-anios{list-style:none;margin:0;padding:0;}
.lista-anios li{
  border:1px solid rgba(234,243,241,0.18);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  margin-bottom:10px;
}

@media (max-width:600px){
  .slider-envoltorio{padding:16px;}
  .slider-eje-contenedor{
    border-top:1px dashed rgba(234,243,241,0.3);
    border-bottom:1px dashed rgba(234,243,241,0.3);
  }
}

/* No-JS estático dentro de decadas.html */
.decadas-estatico details{
  background:#fff;
  border:1px solid rgba(27,42,46,0.12);
  border-radius:var(--radius-md);
  padding:10px 16px;
  margin-bottom:12px;
}
.decadas-estatico summary{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--fs-22);
  cursor:pointer;
  padding:8px 0;
}

/* Menciones de fuentes */
.nota-fuentes{
  background:rgba(166,67,43,0.08);
  border:1px solid rgba(166,67,43,0.35);
  border-radius:var(--radius-md);
  padding:18px 20px;
}