/* ============================================================================
   Vuelame — tabs.css
   ============================================================================
   Sistema de tabs `vuelame-*` copiado del shortcode WP (tabs.css) tal cual.
   Se usa en template/partials/meses.php para alternar entre los 3 meses
   de la tabla Kiwi. El markup debe mantenerse IDÉNTICO al original.
   ========================================================================== */

.vuelame-tabs { width: 100%; margin: 0 auto; font-family: 'Manrope', sans-serif; position: relative; }
.vuelame-tabs-nav { display: flex; justify-content: center; width: 100%; margin-bottom: 15px; }
.vuelame-tabs-nav-inner { display: flex; gap: 8px; background: #f5f5f5; padding: 6px; border-radius: 8px; margin: 0 auto; width: fit-content; }
.vuelame-tab { padding: 10px 20px; border-radius: 6px; background: white; border: none; cursor: pointer; font-weight: 600; transition: all 0.2s ease; font-family: 'Manrope', sans-serif; font-size: 15px; color: #333; white-space: nowrap; flex-shrink: 0; }
.vuelame-tab:hover { background: #f0f0f0; }
.vuelame-tab.active { background: #FF5E3A; color: #fff; }
.vuelame-tabs-content { width: 100%; margin-top: 10px; padding-top: 0; }
.vuelame-tab-panel { display: none; }
.vuelame-tab-panel.active { display: block; }

/* Dark mode tabs */
body.dark-mode .vuelame-tabs-nav-inner { background: #374151; }
body.dark-mode .vuelame-tab { background: #1f2937; color: #e5e7eb; }
body.dark-mode .vuelame-tab:hover { background: #4b5563; }
body.dark-mode .vuelame-tab.active { background: #FF5E3A; color: #ffffff; }

@media (max-width: 768px) {
  .vuelame-tabs-nav { overflow-x: auto; padding-bottom: 8px; justify-content: flex-start; }
  .vuelame-tabs-nav-inner { padding: 5px; gap: 6px; }
  .vuelame-tab { padding: 8px 16px; font-size: 14px; }
}