/* =====================================================================
   mobile.css — ajustes para celular (se carga al final, después del resto de los estilos).
   Cada bloque corrige algo que se veía mal en un teléfono real (capturas de iPhone):
     1. Inicio: categorías en una fila deslizable y tarjetas de negocios en 2 columnas.
     2. Pie de página: Explorar y Soporte lado a lado, Contacto en su propio bloque, franja final.
     3. Ventana de iniciar sesión / registrarse.
     4. Ventas: tarjetas a todo el ancho.
     5. Perfil / administración: menú ordenado en una grilla.
     6. Fecha de nacimiento (iPhone).
     7. Mis juegos: pestañas en una sola fila.
     8. Mensajes de las rachas (ventanita al tocar).
   ===================================================================== */

/* ---------- 1. INICIO: categorías y tarjetas ---------- */
@media (max-width: 560px) {
    /* Márgenes: entre el <main> (40 px) y el contenedor (20 px) quedaban ~60 px a cada lado y las tarjetas
       se veían angostas; en celular se reducen para aprovechar el ancho. */
    body .home-x { padding-left: 14px; padding-right: 14px; }
    body .home-x main { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 8px !important; }

    /* Categorías: una sola fila que se desliza con el dedo (antes se partían en filas desparejas) */
    .home-x .hx-chips {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px;
        margin: 0 -14px 16px; padding: 4px 14px 8px;
        scroll-snap-type: x proximity; scroll-padding: 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .home-x .hx-chips::-webkit-scrollbar { display: none; }
    .home-x .hx-chip { flex: 0 0 auto; white-space: nowrap; padding: 10px 18px; scroll-snap-align: start; }

    /* Negocios: 2 por fila, tarjetas compactas (antes una tarjeta enorme por fila) */
    .home-x .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .home-x .vcard { border-radius: 14px; }
    .home-x .vcard-media { height: 128px; }
    .home-x .vcard-logo { width: 40px; height: 40px; left: 10px; bottom: -18px; border-width: 2px; padding: 2px; }
    .home-x .vcard-media:has(.vcard-logo) + .vcard-body { padding-top: 26px; }
    .home-x .vcard-badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 9px; }
    .home-x .vcard-fav { top: 6px; right: 6px; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; font-size: 14px; }
    .home-x .vcard-body { padding: 10px 12px 12px; }
    .home-x .vcard-title { font-size: 14px; line-height: 1.25; margin: 0 0 5px; gap: 4px; }
    .home-x .vcard-rating { font-size: 11.5px; gap: 4px; margin-bottom: 6px; flex-wrap: nowrap; white-space: nowrap; }
    .home-x .vcard-rating .stars { letter-spacing: 0; font-size: 12px; }
    /* La descripción se ve en celular (2 renglones); antes estaba oculta */
    .home-x .vcard-desc { font-size: 12px; line-height: 1.4; margin: 0 0 8px; -webkit-line-clamp: 2; }
    .home-x .vcard .trust-row { margin-top: 2px; gap: 4px; }
    .home-x .vcard .trust-pill { font-size: 9.5px; padding: 3px 8px; letter-spacing: .3px; }
    .home-x .vcard .trust-chip { font-size: 10.5px; padding: 3px 7px; }
    .home-x .vcard-foot { padding-top: 8px; font-size: 11.5px; gap: 6px; }
    .home-x .vcard-foot .loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-x .vcard-foot .more { display: none; }
}

/* ---------- 2. PIE DE PÁGINA ---------- */
@media (max-width: 640px) {
    .main-footer { padding: 34px 0 0 !important; margin-top: 32px !important; }
    .main-footer .footer-container {
        /* una regla vieja lo dejaba en "display:flex" de una sola columna */
        display: grid !important; flex-direction: row !important;
        grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; padding: 0 22px !important; width: 100% !important;
    }
    .main-footer .footer-col { text-align: left; min-width: 0; }
    /* La marca arriba, centrada; Explorar y Soporte lado a lado; Contacto en su bloque */
    .main-footer .footer-col:first-child { grid-column: 1 / -1; text-align: center !important; }
    .main-footer .footer-col:first-child h4::after { left: 50%; transform: translateX(-50%); }
    .main-footer .footer-col:last-child {
        grid-column: 1 / -1; background: rgba(255,255,255,.04); border-radius: 14px; padding: 18px 18px 16px;
    }
    .main-footer .footer-col h4 { margin-bottom: 16px !important; }
    .main-footer .footer-col h4::after { bottom: -7px; }
    .main-footer .footer-links li { margin-bottom: 0 !important; }
    /* Enlaces con un área de toque cómoda (antes medían 21 px de alto) */
    .main-footer .footer-link { display: block; padding: 8px 0; font-size: 13.5px; }
    .main-footer .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 22px; background: rgba(255,255,255,.07); border-radius: 12px; }
    .main-footer .contact-item { margin-bottom: 12px !important; align-items: center; }
    /* Franja de abajo: mismo tono que el pie, con una línea fina, sin el recuadro negro */
    .main-footer .footer-bottom {
        background: transparent !important; margin-top: 30px !important; padding: 18px 22px !important;
        border-top: 1px solid rgba(255,255,255,.09) !important;
    }
    .main-footer .footer-bottom p { font-size: 11.5px !important; line-height: 1.6; color: #8f8f8f; }
}
@media (max-width: 1024px) {
    /* Ya no hay barra de iconos abajo (el menú pasó arriba a la derecha): sin relleno extra debajo del pie */
    body { padding-bottom: 0; }
    /* Cartel "Descargá la app" (solo Android): deja lugar para que no tape la franja final del pie */
    body.has-install-banner .main-footer { padding-bottom: 76px !important; }
}

/* ---------- 3. VENTANA DE INICIAR SESIÓN / REGISTRARSE ---------- */
/* La raya gruesa debajo del título venía del borde que todos los <h2> del sitio tienen por defecto */
.auth-modal-container .auth-title { border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; }
.auth-modal-container .auth-title::after { display: none !important; }
@media (max-width: 768px) {
    .auth-modal-container {
        border-radius: 22px !important; padding: 26px 20px 22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.35);
    }
    .auth-modal-container .auth-title { font-size: 22px !important; letter-spacing: -.2px; }
    .auth-modal-container .auth-subtitle { font-size: 13.5px !important; margin: 0 0 18px !important; color: #6b7280; }
    .auth-modal-close {
        top: 12px !important; right: 12px !important; width: 34px; height: 34px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; line-height: 1;
        background: #f1f3f5; color: #6b7280 !important; font-size: 22px !important;
    }
    .auth-modal-container .btn-social { padding: 12px !important; font-size: 14px !important; border-radius: 12px !important; min-height: 46px; }
    .auth-modal-container .divider-text { margin: 14px 0 !important; font-size: 12px !important; }
    .auth-modal-container .input-group { margin-bottom: 10px !important; }
    .auth-modal-container input, .auth-modal-container select {
        padding: 13px 14px !important; font-size: 15px !important; border-radius: 12px !important; min-height: 46px; box-sizing: border-box;
    }
    .auth-modal-container .btn-auth-submit { min-height: 48px; border-radius: 12px; font-size: 15.5px; margin-top: 4px; }
    .auth-modal-container .auth-footer { margin-top: 14px; font-size: 13.5px; }
}
@media (max-width: 360px) {
    /* El cuadro de "No soy un robot" mide 304 px: en pantallas muy angostas se achica para no cortarse */
    .auth-modal-container .g-recaptcha { transform: scale(.86); transform-origin: center top; margin-bottom: -10px; }
}

/* ---------- 4. VENTAS: tarjetas a todo el ancho ---------- */
@media (max-width: 600px) {
    .records-wrapper > main { padding: 0 !important; }
    .records-wrapper { padding: 0 10px !important; margin: 10px auto !important; }
    /* Cajas dentro de cajas (25 + 20 + 16 + 12 px de relleno por lado): se aplanan para que los campos usen el ancho */
    #main-content .card > div[style*="padding: 25px"] { padding: 18px 14px !important; }
    #main-content div:has(> #product-attribute-manager-root) { padding: 0 !important; border: 0 !important; background: transparent !important; }
    #product-attribute-manager-root > .w-full { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    #product-attribute-manager-root .field-settings-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    #product-attribute-manager-root input { min-height: 46px; }
}

/* ---------- 5. PERFIL / ADMINISTRACIÓN: menú desplegable ---------- */
.sidebar-toggle { display: none; }
@media (max-width: 1024px) {
    .profile-container .sidebar { padding: 14px !important; border-radius: 18px !important; }
    .profile-container .sidebar .user-preview { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 2px 2px 12px !important; margin-bottom: 4px !important; border-bottom: 1px solid var(--border-color); }
    .profile-container .sidebar .user-preview .sidebar-user-info { text-align: left !important; }
    /* Desplegable: cerrado muestra solo la sección actual; al tocarlo se abre la lista */
    .profile-container .sidebar-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%;
        min-height: 48px; margin-top: 2px; padding: 0 14px; border-radius: 12px; cursor: pointer;
        background: var(--color-hover); border: 1px solid var(--border-color); color: var(--text-primary);
        font: inherit; font-size: 15px; font-weight: 700; text-align: left; -webkit-tap-highlight-color: transparent;
    }
    .profile-container .sidebar.is-open .sidebar-toggle { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
    .profile-container .sidebar-toggle-chev { font-size: 12px; color: var(--text-secondary); transition: transform .2s ease; }
    .profile-container .sidebar.is-open .sidebar-toggle-chev { transform: rotate(180deg); }
    .profile-container .sidebar .user-preview { border-bottom: 0 !important; padding-bottom: 6px !important; }
    .profile-container .sidebar:not(.is-open) .sidebar-menu { display: none !important; }
    .profile-container .sidebar-menu {
        display: grid !important; grid-template-columns: 1fr; gap: 6px; overflow: visible !important;
        white-space: normal !important; padding: 10px 0 0 !important;
    }
    .profile-container .sidebar-menu > a { display: block !important; flex: none; min-width: 0; }
    .profile-container .sidebar-menu > a.menu-wide { grid-column: 1 / -1; }
    .profile-container .sidebar-menu button {
        width: 100% !important; height: 46px; padding: 0 14px !important; font-size: 14.5px !important;
        display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left;
        border-radius: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        background: var(--color-hover); border: 1px solid var(--border-color);
    }
    .profile-container .sidebar-menu > a.active button { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
    /* Menú de administración: título arriba y las secciones en lista */
    .profile-container .sidebar-menu > .menu-admin-group {
        grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px;
        margin: 0 !important; padding: 0 0 10px !important;
    }
    .profile-container .sidebar-menu > .menu-admin-group > p { grid-column: 1 / -1; margin: 0 0 2px !important; }
    .profile-container .sidebar-menu > .menu-admin-group > a { display: block; min-width: 0; }
}

/* ---------- 6. FECHA DE NACIMIENTO (el iPhone la dibujaba más ancha que el resto y centrada) ---------- */
.pp-card input[type="date"] {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box; min-height: 46px; text-align: left; line-height: 1.2;
}
.pp-card input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
.pp-cols > .pp-field, .pp-field { min-width: 0; }

/* ---------- 7. MIS JUEGOS: pestañas en una sola fila ---------- */
.tabs-row { display: flex; gap: 0; }
.tabs-row .btn-tab { flex: 1 1 0; width: auto !important; text-align: center; }
@media (max-width: 600px) {
    .tabs-row .btn-tab { padding: 14px 6px !important; font-size: 14px !important; font-weight: 600; }
}

/* ---------- 8. MENSAJES DE LAS RACHAS ---------- */
/* Ventanita que se abre al tocar (o al pasar el mouse); va pegada al <body>, así no la corta ninguna tarjeta */
html.trust-pop-js .trust-tip::after { display: none !important; }
.trust-popover {
    position: fixed; z-index: 10000; box-sizing: border-box; max-width: min(300px, calc(100vw - 24px)); width: max-content;
    padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; white-space: pre-line;
    background: #1f2937; color: #f9fafb; box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none;
    opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.trust-popover.show { opacity: 1; transform: none; }

/* ---------- 9. MENÚ LATERAL DERECHO (celular, con sesión iniciada) ---------- */
/* Reemplaza a la barra de iconos de abajo. Arriba a la derecha queda un botón ☰ que abre un panel con el
   perfil, las secciones, las notificaciones, el modo claro/oscuro y cerrar sesión. */
.mobile-only { display: none; }
.m-drawer, .m-drawer-overlay { display: none; }
@media (max-width: 1024px) {
    .bottom-nav { display: none !important; }
    .nav-item-profile { display: none !important; }
    .nav-item.mobile-only { display: flex !important; align-items: center; }
    .mobile-menu-btn {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
        border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu-btn:active { background: rgba(255,255,255,.32); }
    /* Las notificaciones salen como una hoja desde abajo; sin la barra, ya no hace falta dejarle lugar */
    .nav-dropdown { bottom: 12px !important; }

    .m-drawer-overlay {
        display: block; position: fixed; inset: 0; z-index: 9550; background: rgba(0,0,0,.45);
        opacity: 0; transition: opacity .25s ease;
    }
    .m-drawer-overlay[hidden] { display: none; }
    .m-drawer-overlay.show { opacity: 1; }
    .m-drawer {
        display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 9600;
        width: min(86vw, 340px); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
        background: var(--color-surface); color: var(--text-primary); border-radius: 22px 0 0 22px;
        box-shadow: -14px 0 44px rgba(0,0,0,.28); padding-bottom: env(safe-area-inset-bottom); outline: none;
        transform: translateX(106%); visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
    }
    .m-drawer.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; }
    body.m-drawer-open { overflow: hidden; }

    .m-drawer-head { display: flex; align-items: center; gap: 8px; padding: 18px 14px 14px 16px; border-bottom: 1px solid var(--border-color); }
    .m-drawer-user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
    .m-drawer-avatar { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-primary); background: var(--color-hover); }
    .m-drawer-who { min-width: 0; }
    .m-drawer-who strong { display: block; font-size: 15.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-drawer-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
    .m-drawer-close {
        flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-hover);
        color: var(--text-secondary); font-size: 24px; line-height: 1; cursor: pointer;
    }

    .m-drawer-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
    .m-drawer-link {
        display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; min-height: 50px; padding: 0 14px;
        border: 0; border-radius: 12px; background: none; color: var(--text-primary); text-decoration: none; text-align: left;
        font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .m-drawer-link > i:first-child { flex: none; width: 22px; text-align: center; font-size: 17px; color: var(--color-primary); }
    .m-drawer-link:active { background: var(--color-hover); }
    .m-drawer-link.active { background: rgba(76,175,80,.15); color: var(--color-primary); }
    .m-drawer-admin { background: var(--color-primary); color: #fff; }
    .m-drawer-admin > i:first-child { color: #fff; }
    [data-theme="dark"] .m-drawer-admin, [data-theme="dark"] .m-drawer-admin > i:first-child { color: #07210d; }

    .m-drawer-fav > summary { list-style: none; }
    .m-drawer-fav > summary::-webkit-details-marker { display: none; }
    .m-drawer-chev { margin-left: auto; font-size: 12px; color: var(--text-secondary); transition: transform .2s ease; }
    .m-drawer-fav[open] .m-drawer-chev { transform: rotate(180deg); }
    .m-drawer-favlist { padding: 2px 0 6px; }
    .m-drawer-favlist a { display: block; padding: 10px 14px 10px 50px; font-size: 14px; color: var(--text-secondary); text-decoration: none; border-radius: 10px; }
    .m-drawer-favlist a:active { background: var(--color-hover); }
    .m-drawer-favlist p { margin: 0; padding: 8px 14px 8px 50px; font-size: 13px; color: var(--text-secondary); }

    .m-drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 18px; border-top: 1px solid var(--border-color); }
    .m-drawer-foot .md-theme-icon { flex: none; width: 22px; text-align: center; font-size: 17px; }
    .m-drawer-logout, .m-drawer-logout > i:first-child { color: #c0392b; }
    [data-theme="dark"] .m-drawer-logout, [data-theme="dark"] .m-drawer-logout > i:first-child { color: #f87171; }
}

/* ---------- 10. ADMINISTRACIÓN (celular): usuarios y emprendimientos como tarjetas a todo el ancho ---------- */
/* La fila (<tr>) se dibuja como tarjeta pero la tabla seguía siendo tabla: cada tarjeta tomaba el ancho de su
   contenido (más angostas que la pantalla y de distinto tamaño), y en Emprendimientos los botones se salían. */
@media (max-width: 768px) {
    .content-panel { min-width: 0; box-sizing: border-box; }
    .user-table, .user-table tbody, .venture-table, .venture-table tbody { display: block; width: 100%; }
    .user-table tbody tr, .venture-table tbody tr { box-sizing: border-box; width: 100%; margin-bottom: 14px; padding: 16px !important; }
    .user-table td, .venture-table td { box-sizing: border-box; min-width: 0; gap: 12px; }
    .user-table td:nth-child(2), .user-table td:nth-child(2) > * { overflow-wrap: anywhere; }
    .user-table td:nth-child(2) { text-align: right; }
    /* Emprendimientos: estado con etiquetas ordenadas y los 4 botones en 2 x 2 (antes se salían de la tarjeta) */
    .venture-table td:nth-child(3) { align-items: flex-start; }
    .venture-table .v-status { justify-content: flex-end; flex: 1; }
    .venture-table td:last-child .btn-group { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
    .venture-table td:last-child .btn-action, .venture-table td:last-child .btn-action--icon { width: 100%; min-width: 0; flex: none; }
    .user-table td:last-child .btn-group { gap: 8px; }
}

/* ---------- 11. IMÁGENES DE TARJETAS Y GALERÍA (celular) ---------- */
/* layout_fix.css fuerza alto automático a las imágenes sin clase en celular; estas tienen su propio alto
   (cuadro de la tarjeta, galería) y recortan o ajustan con object-fit. */
@media (max-width: 480px) {
    .vcard-media > img:not(.vcard-logo), .sr-media > img:not(.sr-logo), .ptile img, .pp-vcard-coverimg { height: 100% !important; }
}