/* Custom styles beyond Tailwind */

/* Tab buttons */
.tab-button {
    @apply px-4 py-2 text-xs md:text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap;
  }
  
  .tab-button.active {
    @apply text-blue-600 border-blue-600;
  }
  
  /* Tab content */
  .tab-content {
    @apply hidden;
  }
  
  .tab-content.active {
    @apply block;
  }
  
  /* Submenu */
  .submenu,
  .mobile-submenu {
    display: block;
  }
  
  /* Animated form fields */
  input:focus ~ label,
  textarea:focus ~ label,
  input:not(:placeholder-shown) ~ label,
  textarea:not(:placeholder-shown) ~ label {
    @apply transform -translate-y-2 scale-75 top-2 text-blue-600 z-10;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .h-14 {
      height: 3.5rem;
    }
  
    .mt-14 {
      margin-top: 3.5rem;
    }
  }
  
  /* Sidebar hover effects */
  @media (min-width: 768px) {
    #sidebar:hover {
      width: 240px !important;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
  
    #sidebar:hover .whitespace-nowrap {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  
    #sidebar[style="width: 64px;"] .whitespace-nowrap {
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
  
    #sidebar:hover[style="width: 64px;"] .whitespace-nowrap {
      opacity: 1;
    }
  }
  
  /* Form field animations */
  .peer:focus ~ label,
  .peer:not(:placeholder-shown) ~ label {
    top: 0;
    font-size: 0.75rem;
    font-weight: 500;
    transform: translateY(-50%);
  }
  
  /* Dropdown animations */
  #category-options,
  #filter-dropdown {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform-origin: top;
  }
  
  #category-options.hidden,
  #filter-dropdown.hidden {
    opacity: 0;
    transform: scaleY(0.95);
    pointer-events: none;
  }
  
  /* Button hover effects */
  button {
    transition: all 0.2s ease-in-out;
  }
  
  /* Table row hover effects */
  tbody tr {
    transition: background-color 0.2s ease-in-out;
  }
  
  /* Modal animations */
  #add-blog-modal {
    transition: opacity 0.3s ease-in-out;
  }
  
  #add-blog-modal.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  #add-blog-modal > div {
    transition: transform 0.3s ease-in-out;
  }
  
  #add-blog-modal.hidden > div {
    transform: scale(0.95);
  }
  
  /* Add these styles to the end of the file to ensure proper sidebar toggle behavior */
  
  /* Sidebar toggle icon transition */
  #toggle-sidebar svg {
    transition: transform 0.3s ease;
  }
  
  #sidebar[style="width: 64px;"] #toggle-sidebar svg {
    transform: rotate(180deg);
  }
  
  /* Fix for menu items in collapsed sidebar */
  #sidebar[style="width: 64px;"] .whitespace-nowrap {
    display: none;
  }
  
  #sidebar[style="width: 240px;"] .whitespace-nowrap {
    display: inline;
  }
  
  /* Ensure filter button has correct color */
  #filter-btn {
    @apply bg-blue-100 hover:bg-blue-200 text-blue-800;
  }
  
  /* Ensure all action buttons have consistent styling */
  .edit-blog-btn,
  .delete-blog-btn {
    @apply bg-blue-100 hover:bg-blue-200 text-blue-800;
  }
  
  /* Fix for Add Blog button */
  #add-blog-btn,
  #submit-add-blog,
  #create-blog-form button[type="submit"] {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }
  
  @media (max-width: 767px) {
    #sidebar {
      position: fixed;
      left: 0;
      /* resto permanece igual */
    }
    
    #sidebar:not(.active) {
      left: -240px;
    }
  }
  @media (max-width: 767px) {
    #sidebar {
      transform: translateX(-100%);
    }
    #sidebar.-translate-x-full {
      transform: translateX(0);
    }
  }