/* ═══════════════════════════════════════════════════════════════
   KEIKI / OrquiFlora — Afinamiento MÓVIL de la experiencia de cliente
   mobile.css — se carga DESPUÉS de estilos.css. Solo refina pantallas
   chicas; no altera el escritorio. Si molesta, se quita este archivo.
   Enfoque: botones táctiles grandes, menos scroll, flujo de compra simple.
   Grupo SAT SRL / WebSiteParaguay
   ═══════════════════════════════════════════════════════════════ */

/* Tamaño táctil mínimo recomendado (Apple/Google): 44–48px */
:root { --tactil: 50px; }

/* ──────────────────────────────────────────────────────────────
   1) GLOBAL MÓVIL (hasta 768px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Botones de acción: grandes, cómodos, legibles */
    .boton-principal,
    .cuenta-boton,
    .ficha-boton-carrito,
    .ficha-boton-directo,
    button[type="submit"],
    .checkout-boton {
        min-height: var(--tactil);
        font-size: 1.05rem;
        padding: 14px 22px;
    }

    /* Campos de formulario: altura táctil y texto 16px (evita zoom iOS) */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="date"], select, textarea {
        min-height: var(--tactil);
        font-size: 16px !important;
    }

    /* Menos padding lateral desperdiciado */
    .tienda { padding: 14px 4vw 40px; }
    .contenedor { padding-left: 4vw; padding-right: 4vw; }
}

/* ──────────────────────────────────────────────────────────────
   2) CABECERA DE TIENDA — compacta, buscador cómodo
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tienda-cabecera {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 4vw;
    }
    .tienda-logo img { height: 38px; }
    /* El buscador ocupa toda una fila propia: fácil de tocar */
    .tienda-buscador { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }
    .tienda-buscador input { min-height: var(--tactil); }
    .tienda-buscador button { min-width: var(--tactil); }
    .tienda-nav { gap: 14px; font-size: 1rem; }
    .tienda-nav a { padding: 6px 2px; }
    /* Carrito bien visible */
    .tienda-carrito { font-size: 1.5rem; }
}

/* ──────────────────────────────────────────────────────────────
   3) TIENDA / LISTADO
   El <details.tienda-filtros-caja> envuelve los filtros:
   - Escritorio: siempre abierto, sin botón (se ve igual que siempre).
   - Móvil: colapsado por defecto; un botón "Filtros y categorías" lo abre,
     así se ven los productos directo.
   ────────────────────────────────────────────────────────────── */

/* Escritorio: el details no debe esconder nada ni mostrar el botón */
.tienda-filtros-toggle { display: none; }
.tienda-filtros-caja { display: block; }
@media (min-width: 769px) {
    /* Forzar contenido visible aunque el <details> no tenga 'open' */
    .tienda-filtros-caja > .tienda-filtros { display: block !important; }
}

@media (max-width: 768px) {
    .tienda-grilla { grid-template-columns: 1fr; gap: 14px; }

    /* El botón que abre/cierra los filtros */
    .tienda-filtros-toggle {
        display: flex; align-items: center; gap: 8px;
        list-style: none; cursor: pointer;
        min-height: var(--tactil);
        padding: 12px 16px; border: 1px solid #e2ddd4; border-radius: 12px;
        background: #fff; font-weight: 500; color: var(--orquidea);
        font-size: 1rem; user-select: none;
    }
    .tienda-filtros-toggle::-webkit-details-marker { display: none; }
    .tienda-filtros-toggle::after {
        content: "\25BC"; margin-left: auto; font-size: .7rem; transition: transform .2s;
    }
    .tienda-filtros-caja[open] .tienda-filtros-toggle::after { transform: rotate(180deg); }

    /* Panel de filtros al abrir: tarjeta cómoda, no fila apretada */
    .tienda-filtros-caja[open] .tienda-filtros {
        margin-top: 10px; background: #faf8f5; border-radius: 12px; padding: 14px;
    }
    .tienda-filtros h3 { margin: 10px 0 6px; }
    .tienda-filtros select, .filtro-precio input { min-height: var(--tactil); width: 100%; }
    .filtro-precio { display: flex; gap: 10px; }
    .filtro-arbol { list-style: none; padding: 0; margin: 0; }
    .filtro-arbol a { display: inline-block; padding: 8px 4px; min-height: 40px; }

    /* Grilla de productos: 2 por fila en móvil (ver más flores, menos scroll) */
    .tarjetas, .tarjetas-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tarjeta h4 { font-size: .92rem; padding: 10px 10px 2px; }
    .tarjeta-categoria { padding: 0 10px 10px; }
}
@media (max-width: 360px) {
    /* Teléfonos muy chicos: 1 columna para que no se aprieten */
    .tarjetas, .tarjetas-4 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   4) FICHA DE PRODUCTO — foto grande, comprar fácil (barra fija abajo)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ficha { grid-template-columns: 1fr; gap: 18px; }
    .ficha-datos h1 { font-size: 1.7rem; }
    .ficha-precio { font-size: 1.5rem; margin: 12px 0 6px; }
    .ficha-variantes { max-width: none; min-height: var(--tactil); }

    /* Fila de compra: selector de cantidad + botón, ambos grandes */
    .ficha-comprar-fila { gap: 10px; }
    .ficha-comprar-fila input[type="number"] { min-height: var(--tactil); width: 72px; font-size: 1.1rem; }
    .ficha-boton-carrito, .ficha-boton-directo { flex: 1; min-height: var(--tactil); font-size: 1.05rem; }

    /* WhatsApp táctil */
    .ficha-whatsapp { min-height: var(--tactil); display: inline-flex; align-items: center; }
}

/* ──────────────────────────────────────────────────────────────
   5) CARRITO — ítems legibles, pagar grande
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .carrito-grilla { grid-template-columns: 1fr; gap: 16px; }
    .carrito-item { grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
    .carrito-item-foto img, .carrito-item-foto .tarjeta-sin-foto { width: 76px; height: 76px; }
    .carrito-item-cantidad { flex-direction: row; gap: 8px; grid-column: 2; }
    .carrito-item-cantidad input { width: 72px; min-height: 44px; }
    .carrito-item-subtotal { grid-column: 2; }
    .carrito-item-quitar { min-height: 44px; min-width: 44px; }

    /* Resumen del carrito: deja de ser sticky lateral, va al final claro */
    .carrito-resumen { position: static; padding: 20px 18px; }
    .carrito-resumen .cuenta-boton { width: 100%; min-height: var(--tactil); font-size: 1.1rem; }
}

/* ──────────────────────────────────────────────────────────────
   6) CHECKOUT — resumen arriba, formulario cómodo, pagar fijo abajo
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-grilla { grid-template-columns: 1fr; gap: 16px; }
    /* El resumen (lateral) ya va arriba por estilos.css (order:-1): lo compactamos */
    .checkout-lateral { position: static; padding: 16px 16px; }
    .checkout-fila-2 { grid-template-columns: 1fr; gap: 12px; }
    .checkout-grilla select, .checkout-grilla input, .checkout-grilla textarea { min-height: var(--tactil); }

    /* Acciones de checkout: Volver + Confirmar en fila cómoda */
    .checkout-acciones {
        display: flex; flex-direction: column-reverse; gap: 10px; align-items: stretch;
    }
    .checkout-volver {
        text-align: center; min-height: 48px; display: inline-flex;
        align-items: center; justify-content: center;
    }
    /* Botón de pagar/confirmar: ancho completo y grande.
       !important porque el botón trae un style="width:auto" inline en el HTML. */
    .checkout-acciones .cuenta-boton {
        width: 100% !important; min-height: 54px; font-size: 1.15rem;
        padding: 15px 22px !important;
    }

    /* Botones chicos del checkout (Aplicar cupón, Canjear puntos): táctiles */
    .checkout-grilla button[type="submit"] { min-height: 46px; }
}

/* ──────────────────────────────────────────────────────────────
   7) MI-CUENTA — menos largo: accesos como fila de "chips", no columna
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .panel-cliente { padding-top: 14px; }
    .panel-distribucion { grid-template-columns: 1fr; gap: 14px; }

    /* El panel lateral (.panel-menu) deja de ser una lista vertical larga
       y sticky: se vuelve una grilla de 2 por línea, sin cortes. */
    .panel-menu {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        padding: 0; margin: 0; position: static; top: auto;
    }
    /* El título "Mi cuenta" del panel ocupa mucho alto en móvil: lo ocultamos
       (ya hay un <h1> "Mi cuenta" en el contenido). */
    .panel-menu-titulo { display: none; }
    .panel-menu a {
        display: flex; align-items: center; justify-content: center;
        text-align: center; gap: 6px;
        padding: 12px 10px; min-height: var(--tactil);
        border: 1px solid #e2ddd4; border-radius: 12px;
        background: #fff; font-size: .92rem; line-height: 1.2;
    }
    .panel-menu a:hover, .panel-menu a.activa {
        background: var(--orquidea); color: #fff; border-color: var(--orquidea);
    }
    /* "Cerrar sesión" ocupa toda la última fila para que se distinga */
    .panel-menu-salir {
        grid-column: 1 / -1;
        margin-top: 0 !important; border-top: 0 !important; padding-top: 12px !important;
        justify-content: center;
    }

    /* Contenido de la cuenta: padding cómodo, no apretado */
    .panel-contenido { padding: 18px 16px; border-radius: 14px; }
    .panel-contenido h2 { font-size: 1.3rem; margin: 16px 0 10px; }

    /* Formularios de cuenta: una columna, campos grandes */
    .cuenta-fila { grid-template-columns: 1fr; gap: 10px; }
    .panel-contenido .cuenta-fila > *, .panel-contenido .g-fila > * { min-width: 0; }
    .cuenta-boton { width: 100%; }
    .cuenta-boton-secundario { width: 100%; }

    /* Tablas de cuenta (sesiones, pedidos): scroll horizontal en vez de romper */
    .cuenta-tabla, .panel-contenido table {
        display: block; overflow-x: auto; white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* ──────────────────────────────────────────────────────────────
   8) MIS PEDIDOS — tarjetas claras en móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mis-pedidos-item { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
    .mis-pedidos-item .cuenta-boton-mini, .mis-pedidos-item a { min-height: 44px; display: inline-flex; align-items: center; }
}