/*
Theme Name:   Vibra Child
Theme URI:    https://vibrasv.com
Description:  Child theme para Vibra — Revista Digital de Entretenimiento El Salvador
Author:       VIBRA
Author URI:   https://vibrasv.com
Template:     foxiz
Version:      2.0.0
Tags:         entertainment, magazine, dark, news
*/

/* ============================================================
   PALETA OFICIAL VIBRA — 8 COLORES DEFINITIVOS
   ============================================================ */
:root {
  /* Fondos oscuros */
  --vibra-black:        #191819;   /* Fondo principal web */
  --vibra-void:         #190E1C;   /* Fondo secundario / hero / cards profundas */

  /* Acento intermedio */
  --vibra-vino:         #7D275E;   /* Bordes, nav inactivo, separadores */

  /* Familia magenta — color principal */
  --vibra-magenta:      #E040A0;   /* Color principal — logo, CTAs, fechas, activos */
  --vibra-rosa-mid:     #F083C4;   /* Texto secundario sobre fondos oscuros */
  --vibra-rosa-light:   #FFC6E8;   /* Texto terciario / detalles / metadata */

  /* Complementarios */
  --vibra-lime:         #A8E040;   /* Escapadas, disponibilidad, redes */
  --vibra-yellow:       #FFFD49;   /* Hot Takes, alertas, preventa, TikTok */

  /* Utilitarios derivados */
  --vibra-card:         #1E0E24;   /* Cards sobre fondo principal */
  --vibra-border:       #3D1040;   /* Bordes sutiles de cards */
  --vibra-border-mid:   #7D275E;   /* Bordes de cards activas */
  --vibra-text:         #FFC6E8;   /* Texto general sobre fondos oscuros */
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
body {
  background-color: var(--vibra-black) !important;
  color: var(--vibra-text) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.rf-header,
.rf-header-inner,
.site-header,
#site-header {
  background-color: var(--vibra-black) !important;
  border-bottom: 1px solid var(--vibra-vino) !important;
}

.rf-header .logo img,
.site-branding img {
  max-height: 40px;
  width: auto;
}

/* NAV */
.rf-menu a,
.main-navigation a {
  color: var(--vibra-vino) !important;
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.rf-menu a:hover,
.rf-menu .current-menu-item > a,
.main-navigation a:hover {
  color: var(--vibra-magenta) !important;
  border-bottom: 2px solid var(--vibra-magenta);
}

/* TICKER / BREAKING NEWS */
.rf-ticker,
.breaking-news {
  background: var(--vibra-void) !important;
  border-bottom: 1px solid var(--vibra-vino) !important;
}

.rf-ticker-label,
.breaking-label {
  background: var(--vibra-magenta) !important;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
}

/* ============================================================
   TARJETAS DE EVENTO — SHORTCODES VIBRA
   ============================================================ */

/* Tarjeta de evento simple */
.vibra-event-card {
  background: var(--vibra-card);
  border: 0.5px solid var(--vibra-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.vibra-event-card:hover {
  border-color: var(--vibra-vino);
  transform: translateY(-2px);
}

.vibra-event-card .date-block {
  width: 58px;
  min-width: 58px;
  background: var(--vibra-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border-right: 1px solid var(--vibra-border);
}

.vibra-event-card .date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--vibra-magenta);
  line-height: 1;
  font-family: Georgia, serif;
}

.vibra-event-card .date-dow {
  font-size: 8px;
  color: var(--vibra-vino);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
}

.vibra-event-card .date-mon {
  font-size: 8px;
  color: var(--vibra-border-mid);
  margin-top: 1px;
}

.vibra-event-card .event-body {
  flex: 1;
  padding: 12px 16px;
  min-width: 0;
}

.vibra-event-card .event-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-family: Georgia, serif;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibra-event-card .event-venue {
  font-size: 11px;
  color: var(--vibra-rosa-mid);
  margin-bottom: 8px;
}

.vibra-event-card .event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vibra-event-card .event-cat {
  background: var(--vibra-border);
  color: var(--vibra-vino);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Bloque de evento con ticket */
.vibra-event-block {
  background: var(--vibra-void);
  border: 0.5px solid var(--vibra-vino);
  border-top: 3px solid var(--vibra-magenta);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.vibra-event-block .event-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.vibra-event-block .event-block-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  font-family: Georgia, serif;
  line-height: 1.1;
}

.vibra-event-block .event-block-tour {
  font-size: 13px;
  color: var(--vibra-magenta);
  margin-top: 4px;
}

.vibra-event-block .event-block-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vibra-event-block .meta-item {
  font-size: 12px;
  color: var(--vibra-rosa-mid);
}

.vibra-event-block .meta-item strong {
  color: #fff;
}

.vibra-event-block .ticket-btn {
  display: inline-block;
  background: var(--vibra-magenta);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  letter-spacing: 0.3px;
  transition: background 0.2s ease;
}

.vibra-event-block .ticket-btn:hover {
  background: #c0307a !important;
}

/* ============================================================
   BADGES DE ESTADO
   ============================================================ */
.vibra-badge-available {
  background: rgba(168, 224, 64, 0.15);
  border: 1px solid var(--vibra-lime);
  color: var(--vibra-lime);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vibra-badge-selling {
  background: rgba(255, 253, 73, 0.15);
  border: 1px solid var(--vibra-yellow);
  color: var(--vibra-yellow);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vibra-badge-soldout {
  background: rgba(125, 39, 94, 0.3);
  border: 1px solid var(--vibra-vino);
  color: var(--vibra-rosa-mid);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   PILLS DE CATEGORIAS (FILTROS EN AGENDA)
   ============================================================ */
.vibra-pill {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--vibra-border);
  background: var(--vibra-card);
  color: var(--vibra-vino);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.vibra-pill:hover,
.vibra-pill.active {
  background: var(--vibra-magenta);
  color: #fff;
  border-color: var(--vibra-magenta);
  font-weight: 700;
}

/* Pill verde — categoria Escapadas */
.vibra-pill.escapadas {
  border-color: var(--vibra-lime);
  color: var(--vibra-lime);
}
.vibra-pill.escapadas:hover,
.vibra-pill.escapadas.active {
  background: var(--vibra-lime);
  color: #191819;
  border-color: var(--vibra-lime);
}

/* Pill amarillo — categoria Hot Takes / Tendencia */
.vibra-pill.tendencia {
  border-color: var(--vibra-yellow);
  color: var(--vibra-yellow);
}
.vibra-pill.tendencia:hover,
.vibra-pill.tendencia.active {
  background: var(--vibra-yellow);
  color: #191819;
  border-color: var(--vibra-yellow);
}

/* ============================================================
   POSTS / NOTAS EDITORIALES
   ============================================================ */
.rf-post-card,
.post-card,
article.post {
  background: var(--vibra-card) !important;
  border: 0.5px solid var(--vibra-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.rf-post-card:hover,
article.post:hover {
  border-color: var(--vibra-vino) !important;
}

/* Categoria label sobre tarjeta */
.rf-post-card .cat-label,
.category-label {
  background: var(--vibra-magenta) !important;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

/* Categoria label Escapadas */
.rf-post-card .cat-label.escapadas,
.category-label.escapadas {
  background: var(--vibra-lime) !important;
  color: #191819 !important;
}

/* Categoria label Hot Take */
.rf-post-card .cat-label.hot-take,
.category-label.hot-take {
  background: var(--vibra-yellow) !important;
  color: #191819 !important;
}

/* Titulo de nota */
.rf-post-card .post-title,
.entry-title,
h1.post-title,
h2.post-title {
  color: #fff !important;
  font-family: Georgia, serif !important;
}

/* Meta / fecha / autor */
.rf-post-card .post-meta,
.entry-meta {
  color: var(--vibra-vino) !important;
  font-size: 10px;
}

/* Excerpt */
.rf-post-card .post-excerpt,
.entry-summary {
  color: var(--vibra-rosa-light) !important;
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================================
   SECCION HERO (PORTADA)
   ============================================================ */
.rf-hero,
.hero-section {
  background: var(--vibra-void) !important;
}

.rf-hero .hero-title,
.hero-section h1 {
  color: #fff !important;
  font-family: Georgia, serif !important;
}

.rf-hero .hero-eyebrow {
  color: var(--vibra-magenta) !important;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.rf-sidebar,
aside.sidebar,
#sidebar {
  background: var(--vibra-void) !important;
}

.rf-sidebar .widget-title,
.sidebar .widget-title {
  color: var(--vibra-magenta) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--vibra-border) !important;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* ============================================================
   SECCION DE AGENDA (LISTA DE EVENTOS)
   ============================================================ */
.vibra-agenda-section {
  padding: 24px 0;
}

.vibra-agenda-section .section-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  font-family: Georgia, serif;
  margin-bottom: 4px;
}

.vibra-agenda-section .section-title span {
  color: var(--vibra-magenta);
}

.vibra-agenda-section .section-link {
  font-size: 12px;
  color: var(--vibra-magenta);
  text-decoration: none;
}

.vibra-agenda-section .section-link:hover {
  text-decoration: underline;
}

/* ============================================================
   VIBRA DEL FINDE — BANNER
   ============================================================ */
.vibra-finde-banner {
  background: linear-gradient(135deg, #2a0020, var(--vibra-void));
  border: 0.5px solid var(--vibra-vino);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vibra-finde-banner .finde-label {
  font-size: 9px;
  color: var(--vibra-magenta);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vibra-finde-banner .finde-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  font-family: Georgia, serif;
  line-height: 1.2;
}

.vibra-finde-banner .finde-sub {
  font-size: 13px;
  color: var(--vibra-vino);
  margin-top: 5px;
}

.vibra-finde-banner .finde-cta {
  background: var(--vibra-magenta);
  color: #fff !important;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 20px;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.btn-vibra,
.vibra-btn,
button.vibra,
a.vibra-btn {
  background: var(--vibra-magenta) !important;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.2s ease;
  letter-spacing: 0.3px;
}

.btn-vibra:hover,
.vibra-btn:hover {
  background: #c0307a !important;
}

.btn-vibra-outline {
  background: transparent !important;
  color: var(--vibra-magenta) !important;
  border: 1px solid var(--vibra-magenta) !important;
  border-radius: 8px;
  padding: 9px 21px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-vibra-outline:hover {
  background: var(--vibra-magenta) !important;
  color: #fff !important;
}

/* ============================================================
   LINKS GLOBALES
   ============================================================ */
a {
  color: var(--vibra-magenta);
  text-decoration: none;
}

a:hover {
  color: var(--vibra-rosa-mid);
}

/* ============================================================
   FOOTER
   ============================================================ */
.rf-footer,
#colophon,
.site-footer {
  background: var(--vibra-void) !important;
  border-top: 1px solid var(--vibra-vino) !important;
  color: var(--vibra-vino) !important;
}

.rf-footer a,
.site-footer a {
  color: var(--vibra-vino) !important;
}

.rf-footer a:hover,
.site-footer a:hover {
  color: var(--vibra-magenta) !important;
}

.rf-footer .footer-logo img {
  max-height: 22px;
  width: auto;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.vibra-newsletter {
  background: var(--vibra-black);
  border-top: 1px solid var(--vibra-border);
  padding: 24px 28px;
}

.vibra-newsletter h3 {
  color: #fff;
  font-size: 18px;
  font-family: Georgia, serif;
  margin-bottom: 4px;
}

.vibra-newsletter p {
  color: var(--vibra-vino);
  font-size: 13px;
  margin-bottom: 14px;
}

.vibra-newsletter input[type="email"] {
  background: var(--vibra-card);
  border: 1px solid var(--vibra-border);
  border-radius: 7px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  flex: 1;
}

.vibra-newsletter input[type="email"]:focus {
  border-color: var(--vibra-magenta);
  outline: none;
}

.vibra-newsletter button {
  background: var(--vibra-magenta);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
   SCROLLBAR PERSONALIZADA
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--vibra-black); }
::-webkit-scrollbar-thumb { background: var(--vibra-vino); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vibra-magenta); }

/* ============================================================
   SELECCION DE TEXTO
   ============================================================ */
::selection {
  background: var(--vibra-magenta);
  color: #fff;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .vibra-event-card { flex-direction: column; }
  .vibra-event-card .date-block { flex-direction: row; gap: 8px; padding: 10px 14px; width: 100%; border-right: none; border-bottom: 1px solid var(--vibra-border); }
  .vibra-finde-banner { flex-direction: column; gap: 14px; }
  .vibra-finde-banner .finde-cta { margin-left: 0; width: 100%; }
  .vibra-event-block .event-block-meta { flex-direction: column; gap: 6px; }
}