/* Design Match — Responsive CSS v1.0
   Incluir en todos los HTML: <link rel="stylesheet" href="js/responsive.css">
   (o copiar dentro del <style> de cada página)
*/

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --dm-mobile: 480px;
  --dm-tablet: 768px;
  --dm-desktop: 1024px;
}

/* ─── Base responsive ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* ─── TABLET (≤768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Navigation */
  .topnav, .nav-shell { padding: 0 16px; }
  .navbar { padding-left: 16px !important; padding-right: 16px !important; }
  .navbar .nav-right { display: none !important; }
  .nav-links { display: none !important; }
  .nav-cta { font-size: 10px !important; padding: 6px 12px 6px 6px !important; }

  /* Hero */
  .hero-section, .hero-wrap { padding: 40px 16px 32px; }
  .hero-title { font-size: clamp(28px, 7vw, 48px) !important; line-height: 1.15 !important; }
  .hero-sub, .hero-subtitle { font-size: 14px !important; }
  .hero-cta-row, .hero-btns { flex-direction: column; gap: 12px; }
  .hero-shapes-static { display: none; }

  /* Profiles grid */
  .profiles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .pcard { min-height: auto; }
  .pcard-name { font-size: 13px !important; }

  /* Vacantes table */
  .vac-table-head { display: none !important; }
  .vrow { flex-direction: column !important; padding: 14px 12px !important; gap: 6px !important; }
  .vcol-puesto { width: 100% !important; }
  .vcol { font-size: 12px !important; }
  .vcol-modal { display: none !important; }
  .btn-ver-vac { width: 100% !important; margin-top: 8px; }

  /* Dashboard */
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .main-content { padding: 16px !important; }
  .novedades-grid { grid-template-columns: 1fr !important; }
  .dash-stats-row { flex-direction: column !important; gap: 12px; }

  /* Explorar */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .cat-item { padding: 14px !important; }
  .search-bar { flex-direction: column !important; gap: 8px !important; padding: 12px !important; }
  .search-sep { display: none !important; }
  .search-input, .search-loc { width: 100% !important; }
  .search-btn { width: 100% !important; }

  /* Registro */
  .reg-form, .exp-form { padding: 0 !important; }
  .type-opts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .form-row-2 { flex-direction: column !important; gap: 12px; }

  /* Perfil público */
  .profile-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .profile-info, .contact-card { width: 100% !important; max-width: 100% !important; }
  .contact-card { position: static !important; transform: none !important; }
  .tabs-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-row::-webkit-scrollbar { display: none; }
  .tabs-row .tab-btn { flex: 0 0 auto !important; }
  .profile-layout { flex-direction: column !important; }
  .profile-sidebar { width: 100% !important; }
  .profile-main { width: 100% !important; }
  .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Admin */
  .admin-grid { grid-template-columns: 1fr !important; }
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .data-table { overflow-x: auto; display: block; }
}

/* ─── MOBILE (≤480px) ────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  body { font-size: 14px; }

  /* Navigation */
  .topnav { height: 52px !important; }
  .nav-logo { font-size: 15px !important; }

  /* Profiles grid — single column */
  .profiles-grid { grid-template-columns: 1fr !important; }
  .pcard { width: 100% !important; }

  /* Categories — single column */
  .cat-grid { grid-template-columns: 1fr !important; }

  /* Filter chips — scrollable */
  .filter-chips, .filter-chips-group {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .fchip { white-space: nowrap; flex-shrink: 0; }

  /* Dashboard */
  .hero-eyebrow { font-size: 10px !important; }
  .stat-cards { grid-template-columns: 1fr !important; }
  .novedades-grid { grid-template-columns: 1fr !important; }

  /* Perfil */
  .profile-tabs { overflow-x: auto; flex-wrap: nowrap !important; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
  .projects-grid { grid-template-columns: 1fr !important; }

  /* Buttons */
  .btn-solid, .btn-ghost, .reg-cta, .exp-cta {
    width: 100% !important;
    text-align: center;
  }

  /* Forms */
  .form-input, .reg-form input, .exp-form input,
  select.form-select { width: 100% !important; font-size: 16px !important; }

  /* Admin */
  .admin-nav { flex-direction: column !important; }
  .stat-cards { grid-template-columns: 1fr !important; }

  /* Toast */
  #_dm_toast { max-width: 92vw !important; font-size: 12px !important; }
}

/* ─── Mobile nav hamburger ───────────────────────────────────────────────── */
.mobile-menu-btn { display: none; }
.mobile-menu { display: none; }

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
  }
  .mobile-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #FFFEFA;
    z-index: 9998;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    margin-bottom: 16px;
  }
  .mobile-menu a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-family: 'Inter', sans-serif;
  }
}

@media (min-width: 769px) {
  .mobile-menu-btn { display: none !important; }
}

/* ─── Overrides adicionales ≤768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Perfil público — padding 120px → 16px */
  .tab-content  { padding-left: 16px !important; padding-right: 16px !important; }
  .tabs-row     { padding-left: 16px !important; padding-right: 16px !important; }
  .back-btn     { margin-left:  16px !important; margin-right:  16px !important; }

  /* Explorar — hero de categorías */
  .cat-hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 20px !important;
  }
  .res-hero { padding: 36px 20px 32px !important; }

  /* Privacidad / Términos — nav padding */
  nav { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 480px) {
  /* Servicios y galerías en perfil público */
  .services-grid  { grid-template-columns: 1fr !important; }
  .galeria-grid   { grid-template-columns: repeat(2,1fr) !important; }
  .catalogos-grid { grid-template-columns: repeat(2,1fr) !important; }
  .novedades-grid { grid-template-columns: 1fr !important; }
}