/*
Theme Name: Mascota QR Mobile
Description: Capa de adaptación mobile-first para Mascota QR. Conserva el diseño original del plugin y solo aporta estructura responsive.
Version: 1.0.9
Author: Mascota QR
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mascota-qr-mobile
*/

/* El diseño visual pertenece al plugin. El tema no redefine colores,
   tarjetas, botones, iconos ni dashboards. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }
body { margin: 0; overflow-x: hidden; }

/* Solo adaptación de contenedores en pantallas pequeñas. */
@media (max-width: 768px) {
  body { width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  table { max-width: 100%; overflow-x: auto; }
}


/* Menú inferior: solo existe visualmente en móvil. */
.mcqm-mobile-bottom { display: none !important; }

@media (max-width: 768px) {
  .mcqm-mobile-bottom {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 -8px 28px rgba(15,23,42,.10);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .mcqm-mobile-bottom__scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .mcqm-mobile-bottom__scroll::-webkit-scrollbar { display: none; }

  .mcqm-mobile-bottom__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0 2px;
    list-style: none;
    gap: 3px;
  }

  .mcqm-mobile-bottom__list > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mcqm-mobile-bottom__list > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 56px;
    padding: 6px 9px;
    border-radius: 14px;
    color: #64748b;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
  }

  .mcqm-mobile-bottom__list > li > a:hover {
    color: #334155;
    background: rgba(15,23,42,.045);
  }

  .mcqm-mobile-bottom__list > li > a:active {
    transform: scale(.94);
  }

  /* Estado activo: soporta los estados generados por el menú y por las páginas actuales. */
  .mcqm-mobile-bottom__list > li.current-menu-item > a,
  .mcqm-mobile-bottom__list > li.current-menu-ancestor > a,
  .mcqm-mobile-bottom__list > li.current_page_item > a,
  .mcqm-mobile-bottom__list > li.current_page_parent > a,
  .mcqm-mobile-bottom__list > li.current-menu-parent > a {
    color: #0f172a;
    background: rgba(15,23,42,.075);
  }

  .mcqm-mobile-bottom__list > li.current-menu-item > a::before,
  .mcqm-mobile-bottom__list > li.current_page_item > a::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
  }

  .mcqm-menu-icon {
    width: 21px;
    height: 21px;
    margin: 0 0 4px;
    flex: 0 0 21px;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mcqm-mobile-bottom__label {
    display: block;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  body.mcqm-has-mobile-bottom { padding-bottom: 78px; }
}

@media (max-width: 380px) {
  .mcqm-mobile-bottom { padding-left: 4px; padding-right: 4px; }
  .mcqm-mobile-bottom__list { gap: 1px; }
  .mcqm-mobile-bottom__list > li > a {
    min-width: 59px;
    padding-left: 6px;
    padding-right: 6px;
  }
}