/* ── RESPONSIVE / MÓVIL — CAL-BIN ── */

/* Botón hamburguesa animado (oculto en escritorio) */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 34px;
  height: 30px;
  position: relative;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 5px;
  width: 24px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.hamburger span:nth-child(1) { top: 7px; }
.hamburger span:nth-child(2) { top: 14px; }
.hamburger span:nth-child(3) { top: 21px; }

/* Animación a "X" cuando el menú está abierto */
.hamburger.active span:nth-child(1) {
  top: 14px;
  transform: rotate(45deg);
  background: #ff8c00;
}
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) {
  top: 14px;
  transform: rotate(-45deg);
  background: #ff8c00;
}

/* ── TABLET y MÓVIL ── */
@media (max-width: 860px) {
  .hamburger { display: block; }

  /* Menú colapsable */
  .topbar .nav-buttons {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #1a1a1a;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0;
    border-top: 1px solid #333;
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  }
  .topbar .nav-buttons.open { display: flex; }
  .topbar .nav-buttons a,
  .topbar .nav-buttons span {
    width: 100%;
    padding: 12px 18px;
    border-bottom: 1px solid #2a2a2a;
  }

  .topbar { position: fixed; flex-wrap: wrap; }

  /* Listas en cascada → apiladas verticalmente */
  .main {
    flex-direction: column;
    padding: 16px 12px;
  }
  .list-panel {
    margin-right: 0;
    margin-bottom: 18px;
  }
  .list-box { height: 220px; }

  /* Hero más compacto */
  .hero {
    font-size: 13px !important;
    padding: 16px 18px !important;
  }

  /* Modificar: paneles apilados */
  .main-content {
    flex-direction: column;
    padding: 0 14px;
  }
  .panel-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 2px solid #ccc;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .panel-right { padding-left: 0; }

  /* Formularios: labels arriba de inputs */
  .form-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .form-row label { width: 100%; }
  .btn-register { margin-left: 0; width: 100%; }

  /* Cards full width */
  .card { margin: 20px 12px; padding: 20px 16px; }

  /* Footer apilado */
  footer { flex-direction: column; gap: 8px; text-align: center; }
  footer .disclaimer { max-width: 100%; }
}

/* ── MÓVIL pequeño ── */
@media (max-width: 480px) {
  .topbar .logo { font-size: 15px; }
  .hero { font-size: 12px !important; }
  .valor-actual, .modificar-win, .conversor-box { width: 100% !important; max-width: 320px; }
  .input-nuevo-km, .win-input { width: 100% !important; }
}