html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
.metodo-pago-box {
    border: 1px solid #444;
    padding: 15px;
    width: 260px;
    background-color: #111;
}

.metodo-pago-titulo {
    border: 1px solid #444;
    padding: 6px 10px;
    margin-bottom: 10px;
    font-weight: 500;
    color: white;
    width: fit-content;
    background-color: #000;
}
/* 📱 MENÚ EN UNA SOLA LÍNEA (COMPACTO) */

@media (max-width: 576px) {

    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start;
        width: 100%;
        margin-top: 5px;
    }

    .navbar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
    }

    .nav-link {
        font-size: 0.9rem; /* MÁS PEQUEÑO */
        padding: 3px 4px; /* MENOS ESPACIO */
        white-space: nowrap;
    }
}
/* 📱 AJUSTAR BUSCADORES Y BOTONES EN CELULAR */

@media (max-width: 576px) {

    /* Input buscadores */
    input.form-control {
        font-size: 0.8rem;
        padding: 6px 8px;
        height: auto;
    }

    /* Selects */
    select.form-control {
        font-size: 0.8rem;
        padding: 6px 8px;
        height: auto;
    }

    /* Botones */
    .btn {
        font-size: 0.75rem;
        padding: 5px 8px;
    }

    /* Formularios en fila */
    .row > div {
        margin-bottom: 5px;
    }
}
/* 📱 TABLAS DESLIZABLES */

@media (max-width: 576px) {

    table {
        font-size: 0.75rem;
    }

    .table-responsive {
        overflow-x: auto;
    }
}
/* 📱 CATÁLOGO MÁS COMPACTO SOLO EN CELULAR */

@media (max-width: 576px) {

    #listaProductos .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Ajustar contenedor imagen */
    .producto-item .position-relative {
        height: 220px !important;
    }

    /* Mostrar imagen completa */
    .producto-item img {
        object-fit: contain !important;
        background-color: #1a1a1a;
    }

    /* Reducir título */
    .producto-item .card-title {
        font-size: 0.85rem;
    }

    /* Reducir descripción */
    .producto-item .card-text {
        font-size: 0.75rem;
    }

    /* Reducir precio */
    .producto-item .text-info {
        font-size: 0.9rem !important;
    }

    /* Botón más pequeño */
    .producto-item .btn {
        font-size: 0.75rem;
        padding: 6px;
    }
}
/* 📱 BUSCADOR DEL CATÁLOGO SOLO CELULAR */

@media (max-width: 576px) {

    /* Buscar y Marca en una sola línea */
    form .col-md-5,
    form .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Botón abajo */
    form .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

        /* Botón más corto */
        form .col-md-2 .btn {
            width: 60% !important;
            font-size: 0.8rem;
            padding: 6px;
        }
}
/* 📱 CENTRAR BOTÓN BUSCAR SOLO EN MIS PEDIDOS CLIENTE */

@media (max-width: 576px) {

    #formMisPedidos .col-md-auto {
        text-align: center;
        width: 100%;
    }

    #formMisPedidos button {
        display: inline-block;
        margin: 0 auto;
        width: 30%;
    }
}
/* 📱 ADMIN USUARIOS — Botón arriba derecha en celular */

@media (max-width: 576px) {

    #headerUsuarios {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #headerUsuarios h2 {
            text-align: center;
            flex-grow: 1;
            font-size: 1.1rem;
        }

        #headerUsuarios a {
            font-size: 0.5rem;
            padding: 3px 4px;
        }
}
/* 📱 ADMIN PRODUCTOS — Botón arriba derecha en celular */

@media (max-width: 576px) {

    #headerProductos {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #headerProductos h2 {
            text-align: center;
            flex-grow: 1;
            font-size: 1.1rem;
        }

        #headerProductos a {
            font-size: 0.5rem;
            padding: 3px 4px;
        }
}
/* 📱 MARCAS — Botón arriba derecha en celular */

@media (max-width: 576px) {

    #headerMarcas {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #headerMarcas h2 {
            text-align: center;
            flex-grow: 1;
            font-size: 1.1rem;
        }

        #headerMarcas a {
            font-size: 0.5rem;
            padding: 3px 4px;
        }
}
/* 📱 PEDIDOS ADMIN — Ajustar búsquedas solo en celular */

@media (max-width: 576px) {

    /* Hacer que el row permita 2 en línea */

    #formPedidosAdmin .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Buscador cliente */

    #formPedidosAdmin .col-md-5 {
        width: 48%;
    }

    /* Buscador fecha */

    #formPedidosAdmin .col-md-4 {
        width: 48%;
    }


    /* Centrar el botón abajo */

    #formPedidosAdmin .col-md-2 {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    /* Hacer botón más corto */
    
    #formPedidosAdmin button {
        width: 30%;
        font-size: 0.8rem;
        padding: 6px;
    }
}