/* ==========================================================================
   dedonde.es - Responsive Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --filter-width: 280px;
  }

  .header-content {
    padding: 0 var(--spacing-4);
  }

  /* Keep nav text visible, just reduce size */
  .nav-link {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .nav-link span:not(.nav-icon) {
    display: inline;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
  }

  #filter-panel {
    padding: var(--spacing-4);
  }

  #app-content {
    padding: var(--spacing-4);
  }

  .home-hero {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .home-hero::before {
    width: 260px;
    height: 260px;
  }

  .home-hero h2 {
    font-size: var(--font-size-2xl);
  }

  .home-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
  }

  .home-card-icon {
    width: 40px;
    height: 40px;
  }

  .home-card-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* --------------------------------------------------------------------------
   Mobile (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  /* Header */
  #main-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: var(--spacing-4);
    border-bottom: var(--border-subtle);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }

  #main-nav.open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    justify-content: flex-start;
    font-size: var(--font-size-sm);
  }

  .nav-link span:not(.nav-icon) {
    display: inline;
  }

  .nav-link.active::after {
    display: none;
  }

  .nav-link.active {
    background: var(--color-gray-50);
    color: var(--color-primary);
  }

  #mobile-menu-btn {
    display: flex;
  }

  #mobile-menu-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  #mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
  }

  #mobile-menu-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .mobile-only {
    display: flex;
  }

  /* Layout */
  #main-container {
    flex-direction: column;
  }

  /* Filter Panel */
  #filter-panel {
    width: 100%;
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: var(--border-subtle);
  }

  #filter-panel.collapsed-on-home {
    transform: none;
    opacity: 1;
    position: relative;
    pointer-events: auto;
    display: none;
  }

  .filter-header {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
  }

  #filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-gray-100);
    color: var(--color-primary);
  }

  .toggle-icon {
    transition: transform var(--transition-fast);
  }

  #filter-panel.collapsed .toggle-icon {
    transform: rotate(-90deg);
  }

  #filter-panel.collapsed .filter-content {
    display: none;
  }

  .filter-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
  }

  .filter-group {
    margin-bottom: 0;
  }

  .filter-group.full-width {
    grid-column: 1 / -1;
  }

  /* Button groups wrap on mobile */
  .button-group {
    gap: 4px;
  }

  .button-group-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Content */
  #app-content {
    padding: var(--spacing-4);
  }

  #tab-container {
    max-width: none;
  }

  /* Home */
  .home-hero {
    padding: var(--spacing-6) var(--spacing-4);
  }

  .home-hero::before {
    width: 180px;
    height: 180px;
    opacity: 0.25;
  }

  .home-hero h2 {
    font-size: var(--font-size-xl);
  }

  .home-hero p {
    font-size: var(--font-size-sm);
  }

  .home-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .home-card {
    padding: var(--spacing-5);
  }

  .home-card:hover {
    transform: none;
  }

  .home-card-icon {
    width: 44px;
    height: 44px;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  /* Charts */
  .chart-container {
    padding: var(--spacing-4);
  }

  .chart-wrapper {
    height: auto;
    min-height: 400px;
  }

  /* Ensure chart captions/footnotes are visible on mobile */
  .highcharts-caption {
    font-size: 11px !important;
  }

  .highcharts-credits {
    font-size: 12px !important;
  }

  /* Modal */
  .modal-content {
    padding: var(--spacing-6);
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  /* Floating Button */
  .floating-btn {
    width: 40px;
    height: 40px;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    font-size: var(--font-size-md);
  }

  /* Footer */
  #app-footer {
    padding: var(--spacing-4);
  }
}

/* --------------------------------------------------------------------------
   Small Mobile (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .header-content {
    padding: 0 var(--spacing-3);
  }

  .logo h1 {
    font-size: var(--font-size-lg);
  }

  .language-toggle {
    flex-shrink: 0;
  }

  .lang-btn {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
  }

  #filter-panel {
    padding: var(--spacing-3);
  }

  .filter-content {
    grid-template-columns: 1fr;
  }

  #app-content {
    padding: var(--spacing-3);
  }

  .home-hero {
    padding: var(--spacing-5) var(--spacing-3);
    margin-bottom: var(--spacing-4);
  }

  .home-hero::before {
    display: none;
  }

  .home-hero h2 {
    font-size: var(--font-size-xl);
  }

  .home-cards {
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
  }

  .home-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-3);
  }

  .chart-wrapper {
    height: auto;
    min-height: 350px;
  }

  /* Ensure chart captions are visible on small screens */
  .highcharts-caption {
    font-size: 10px !important;
  }

  .modal-content {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
  }

  .modal h2 {
    font-size: var(--font-size-lg);
  }

  .floating-btn {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
  #app-header,
  #filter-panel,
  #app-footer,
  .floating-btn,
  .modal {
    display: none !important;
  }

  #app {
    padding-top: 0;
  }

  #app-content {
    padding: 0;
  }

  .chart-container {
    box-shadow: none;
    border: 1px solid var(--color-gray-200);
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Dark Mode (optional - can be expanded later)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Placeholder for dark mode styles */
  /* Currently disabled - can be enabled by uncommenting */
  /*
  :root {
    --color-white: #1f2937;
    --color-gray-50: #111827;
    --color-gray-100: #1f2937;
    --color-gray-200: #374151;
    --color-gray-300: #4b5563;
    --color-gray-400: #6b7280;
    --color-gray-500: #9ca3af;
    --color-gray-600: #d1d5db;
    --color-gray-700: #e5e7eb;
    --color-gray-800: #f3f4f6;
    --color-gray-900: #f9fafb;
  }
  */
}