/* =====================================================================
   ROLEA · Rediseño 2026 · componentes de la web pública
   Se carga después de los estilos de header.php y ajusta lo que cambia
   respecto a 2025. Los colores salen siempre de rolea-tokens.css.
   ===================================================================== */

/* === BASE === */
html, body { background: var(--tdn-bg-1); }
::selection { background: rgba(var(--tdn-accent-rgb), .35); }

/* === NAVBAR === */
.tdn-navbar { background: var(--tdn-bg-navbar); }
.tdn-navbar .tdn-logo { height: 48px; width: auto; }
.tdn-navbar .nav-link { font-size: .95rem; }
.tdn-navbar .nav-link:hover,
.tdn-navbar .nav-link:focus { color: var(--tdn-accent); }
.btn-login { background: var(--tdn-accent); color: var(--tdn-on-accent); font-weight: 600; }
.btn-login:hover, .btn-login:focus { background: var(--tdn-accent-soft); color: var(--tdn-on-accent); }
#tdnNavFlotante {
  background: rgba(var(--tdn-bg-1-rgb), .92);
  border-bottom: 1px solid rgba(var(--tdn-accent-2-rgb), .15);
}

/* === BOTONES === */
.btn-accent { background: var(--tdn-accent); color: var(--tdn-on-accent); border: 2px solid var(--tdn-accent); }
.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
  background: var(--tdn-accent-soft); border-color: var(--tdn-accent-soft); color: var(--tdn-on-accent);
}
.btn-outline-accent { background: transparent; }
.btn-outline-accent:hover, .btn-outline-accent:focus, .btn-outline-accent:active {
  background: var(--tdn-accent); border-color: var(--tdn-accent); color: var(--tdn-on-accent);
}
.btn-outline-light:hover { color: var(--tdn-bg-1); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--tdn-accent-rgb), .4); }

/* === ENLACES === */
.link-accent { color: var(--tdn-accent); }
.link-accent:hover { color: var(--tdn-accent-soft); }

/* === TARJETAS === */
.tdn-card { background: var(--tdn-card); }
.bg-dark-2 .tdn-card { background: var(--tdn-card-2); }
.tdn-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }

/* Caja destacada del hero (Últimas noticias, habitación, habitaciones disponibles) */
.news-hero {
  background: rgba(1, 11, 15, .92) !important;
  border: 2px solid var(--tdn-accent-2) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 14px rgba(var(--tdn-accent-2-rgb), .55);
}
.news-hero .hero-news-card a:hover p { color: var(--tdn-accent-2-soft); }

/* === CONTADOR === */
#countdown span.label { color: var(--tdn-accent-2); }

/* === FORMULARIOS === */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--tdn-accent-2);
  box-shadow: 0 0 0 .2rem rgba(var(--tdn-accent-2-rgb), .25);
}
.form-check-input:checked { background-color: var(--tdn-accent); border-color: var(--tdn-accent); }

/* === BOOTSTRAP: componentes que traen azul por defecto === */
.page-link { color: var(--tdn-accent); }
.page-item.active .page-link { background: var(--tdn-accent); border-color: var(--tdn-accent); color: var(--tdn-on-accent); }
.progress-bar { background-color: var(--tdn-accent); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { border-color: var(--tdn-accent); }
.nav-pills .nav-link.active { background: var(--tdn-accent); color: var(--tdn-on-accent); }

/* === BOOTSTRAP: primary / info con la paleta 2026 === */
:root {
  --bs-primary: var(--tdn-accent); --bs-primary-rgb: var(--tdn-accent-rgb);
  --bs-info: var(--tdn-accent-2); --bs-info-rgb: var(--tdn-accent-2-rgb);
  --bs-link-color: var(--tdn-accent); --bs-link-color-rgb: var(--tdn-accent-rgb);
  --bs-link-hover-color: var(--tdn-accent-soft);
}
.bg-primary, .badge.bg-primary { color: var(--tdn-on-accent) !important; }
.bg-info, .badge.bg-info { color: var(--tdn-on-info) !important; }
.btn-primary {
  --bs-btn-bg: var(--tdn-accent); --bs-btn-border-color: var(--tdn-accent); --bs-btn-color: var(--tdn-on-accent);
  --bs-btn-hover-bg: var(--tdn-accent-soft); --bs-btn-hover-border-color: var(--tdn-accent-soft); --bs-btn-hover-color: var(--tdn-on-accent);
  --bs-btn-active-bg: var(--tdn-accent-soft); --bs-btn-active-border-color: var(--tdn-accent-soft); --bs-btn-active-color: var(--tdn-on-accent);
  --bs-btn-disabled-bg: var(--tdn-accent); --bs-btn-disabled-border-color: var(--tdn-accent); --bs-btn-disabled-color: var(--tdn-on-accent);
}
.btn-info {
  --bs-btn-bg: var(--tdn-accent-2); --bs-btn-border-color: var(--tdn-accent-2); --bs-btn-color: var(--tdn-on-info);
  --bs-btn-hover-bg: var(--tdn-accent-2-soft); --bs-btn-hover-border-color: var(--tdn-accent-2-soft); --bs-btn-hover-color: var(--tdn-on-info);
}
.btn-outline-info {
  --bs-btn-color: var(--tdn-accent-2); --bs-btn-border-color: var(--tdn-accent-2);
  --bs-btn-hover-bg: var(--tdn-accent-2); --bs-btn-hover-border-color: var(--tdn-accent-2); --bs-btn-hover-color: var(--tdn-on-info);
}
.alert-info {
  background: rgba(var(--tdn-accent-2-rgb), .08); border: 1px solid rgba(var(--tdn-accent-2-rgb), .4); color: var(--tdn-text);
}
.alert-info .alert-link, .alert-info a { color: var(--tdn-accent-2); }

/* === SWEETALERT2 === */
.swal2-confirm { color: var(--tdn-on-accent) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--tdn-accent-2) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--tdn-accent-2) !important; }
.swal2-icon.swal2-info { border-color: var(--tdn-accent-2) !important; color: var(--tdn-accent-2) !important; }

/* === MODALES === */
.modal-content.bg-dark-2 { background: var(--tdn-bg-2); }
.modal .modal-title.text-accent { color: var(--tdn-accent-2); }

/* === MINIATURA POR DEFECTO DE ACTIVIDADES === */
.activity-thumb { background-image: url('/assets/images/rolea2026/thumbnail_defecto.png'); }

/* === ENLACES ÚTILES (footer) === */
.tdn-link-card { transition: transform .25s ease; }
.tdn-link-card i { color: var(--tdn-accent-2); }
.tdn-link-card:hover { transform: translateY(-4px); }
.tdn-link-card:hover i { color: var(--tdn-accent-2-soft); }

/* === ORGANIZADOR / PATROCINADORES / COLABORADORES (footer) === */
.tdn-patrocinios .text-muted { color: #CCCCCC !important; }
.tdn-patrocinios a:hover .text-muted { color: var(--tdn-text) !important; }

/* === FOOTER === */
footer { background: var(--tdn-bg-1); color: var(--tdn-text-muted); }

/* === BOTONES FLOTANTES (ayuda, subir) === */
.btn.rounded-circle.btn-accent { color: var(--tdn-on-accent); }