/* PARCBUS – Responsive v3 */

/* ── MÓVIL (< 768px) ── */
@media (max-width: 768px) {
  /* Header: columna */
  header > div {
    flex-direction: column !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 4px !important;
  }

  /* Nav principal: una línea, scroll horizontal, solo iconos */
  header > div > nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    scrollbar-width: none !important;
  }
  header > div > nav::-webkit-scrollbar { display: none; }

  /* TODOS los botones dentro del header: solo iconos */
  header button {
    padding: 8px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }
  header button > .material-symbols-outlined {
    font-size: 22px !important;
  }

  /* Fila derecha */
  header > div > div:last-child {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }

  /* Botón idioma: mantener texto */
  header > div > div:last-child > button:last-child {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Dropdowns: panel desde abajo */
  header div[style*="position"] > div:last-child {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 100vw !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,.25) !important;
    z-index: 9999 !important;
  }
  header div[style*="position"] > div:last-child button {
    font-size: 14px !important;
    padding: 14px 20px !important;
  }

  /* Contenido */
  main > div, main > section { padding: 16px 12px !important; }
  main section { padding: 32px 16px !important; }

  /* Grids: forzar 1 columna */
  main div[style*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* Tablas */
  table { font-size: 11px !important; }
  table th, table td { padding: 8px 6px !important; font-size: 11px !important; }
  div:has(> table) { overflow-x: auto !important; }

  /* Filtros y botones: columna */
  main div[style*="flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Inputs full width */
  input, select, textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Login */
  main > div > div[style*="maxWidth"] {
    max-width: 100% !important;
  }
  main h1 { font-size: 20px !important; }

  /* Hero */
  main section h1 { font-size: 18px !important; letter-spacing: 1px !important; }

  /* Footer */
  footer {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px !important;
  }
  footer nav { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
}

/* ── TABLET (< 1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  header button {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  main > div { padding: 24px 16px !important; }
  main div[style*="grid"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── MÓVIL PEQUEÑO (< 480px) ── */
@media (max-width: 480px) {
  header button { padding: 6px !important; }
  header button > .material-symbols-outlined { font-size: 18px !important; }
  main > div { padding: 12px 8px !important; }
  table th, table td { padding: 6px 3px !important; font-size: 10px !important; }
  h2 { font-size: 16px !important; }
}

/* ── BOTONES VERDES GLOBALES ── */
button[style*="background: var(--darkest)"],
button[style*="background:var(--darkest)"],
button[style*="background: rgb(26, 26, 26)"],
button[style*="background: #1a1a1a"] {
  background: rgba(6, 171, 32, 0.5) !important;
}
button[style*="background: var(--darker)"] {
  background: rgba(6, 171, 32, 0.6) !important;
}
button[style*="background: var(--success)"],
button[style*="background:var(--success)"] {
  background: rgba(6, 171, 32, 0.5) !important;
}

/* Header mantener oscuro */
header button {
  background: transparent !important;
}
header button:hover {
  background: rgba(255,255,255,.12) !important;
}

/* ── BOTONES VERDES GLOBALES ── */
main button[style*="background"] {
  background: rgba(6, 171, 32, 0.5) !important;
}
main button[style*="background"]:hover {
  background: rgba(6, 171, 32, 0.65) !important;
}
main button[style*="background: transparent"],
main button[style*="background:transparent"] {
  background: transparent !important;
}
main button[style*="background: var(--danger)"],
main button[style*="background:var(--danger)"] {
  background: var(--danger) !important;
}
header button {
  background: transparent !important;
}
header button:hover {
  background: rgba(255,255,255,.12) !important;
}