/* responsive.css - Estilos para mejorar visualización en móviles */

.cat-card p,
.testi-card p {
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  body { padding-top: 60px; }

  .ml-buscador {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .hero-header { flex-direction: column; align-items: center; text-align: center; padding: 12px 4vw 0; gap: 12px; margin-top: 30px; }
  .hero-logo { display: none; width: 100%; max-width: 240px; margin: 0 auto 12px; padding: 0; }
  .hero-logo img { width: 100%; max-width: 180px; height: auto; margin: 0 auto; }
  .hero-content { padding: 10px 6vw; text-align: center; margin-top: 10px; }
  .hero-content h1 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 8px; word-break: break-word; }
  .hero-content p { font-size: 1rem; line-height: 1.4; margin-bottom: 12px; }

  .cat-cards { display:flex; flex-wrap:nowrap; justify-content:space-between; padding:8px 6px; gap:6px; width:100%; overflow-x:hidden; }
  .cat-card {
    flex: 1 1 calc((100% - 18px) / 4);
    max-width: calc((100% - 18px) / 4);
    min-width: calc((100% - 18px) / 4);
    padding: 10px 4px;
    min-height: 95px;
    border-radius: 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }

  .cat-icon { font-size: 1.3rem; margin-bottom: 4px; }
  .cat-titulo { font-size: 0.7rem; font-weight: 700; color: #1366d6; }
  .cat-vermas { font-size: 0.65rem; margin-top: 3px; color: #008080; font-weight: 600; }

  .btn-main,.btn-sec { font-size: .95rem; padding: 10px 16px; margin: 5px 0; width: 100%; }

  .categorias h2,.ranking h2 { font-size: 1.25rem; text-align: center; }
  .ranking-table th,.ranking-table td { font-size: 0.9rem; padding: 10px 6px; }
  #btnVolverCats { margin: 18px auto 0; display: block; }
  #negociosRanking .negocio-item { max-width: 90vw; margin: 0 auto; font-size: 0.9rem; padding: 10px; }

  .testi-card { flex-direction: column; text-align: center; padding: 14px 18px; gap: 10px; }
  .testi-card img { margin: 0 auto 10px; }

  .cta h2 { font-size: 1.4rem; text-align: center; }

  footer { flex-direction: column; text-align: center; gap: 10px; padding: 20px 10px; }
  footer div { margin: 0; }
  .app-badge { height: 30px; margin: 8px 4px; }

  .modal { display:none; justify-content:center; align-items:center; position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); z-index:999; }
  .modal-content { width: 92vw; padding: 18px 5vw; border-radius: 12px; margin-bottom: 30px; }
  #modalNegocio .modal-content { width: 94vw; padding: 20px 6vw; }
  #modalNegocio h2 { font-size: 1.4rem; }
  #previewImg { max-width: 100px; }
  .modal input,.modal button { font-size: 1rem; width:100%; margin-bottom: 12px; }
  #contrasena { padding-right: 12px; }

  #bienvenidaUsuario,#fotoUsuario,.hero-header nav { display: none; }

  #adminTabs { flex-direction: column; gap: 8px; }

  .fab { position:fixed; right:12px; bottom:20px; width:48px; height:48px; z-index:999; }

  .ml-header { position:fixed; top:0; left:0; right:0; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:10px 16px; box-shadow:0 4px 8px rgba(0,0,0,0.15); z-index:999; }
  .ml-logo { height:34px; }
  .ml-menu-icon { font-size:1.6rem; background:none; border:none; cursor:pointer; }

  .ml-sidebar { position:fixed; top:0; right:-100%; width:75%; height:100vh; background:#fff; box-shadow:-2px 0 6px rgba(0,0,0,0.15); padding:20px; transition:right .3s ease; z-index:1000; }
  .ml-sidebar.open { right:0; }
  .ml-close-btn { background:none; border:none; font-size:1.4rem; cursor:pointer; display:block; margin-left:auto; margin-bottom:16px; }
  .ml-item { width:100%; text-align:left; font-size:.95rem; padding:12px 10px; display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:6px; transition:background .2s ease; }
  .ml-item:hover { background-color:#f2f2f2; }
  .ml-item span { flex-grow:1; }
}