/* Este CSS debería ir al principio de tu archivo de estilos principal (por ejemplo, style.css) */
html, body {
    margin: 0;   /* Elimina todos los márgenes externos */
    padding: 0;  /* Elimina todo el relleno interno */
    box-sizing: border-box; /* Muy recomendado para un layout predecible */
}

/* El asterisco universal resetea muchos elementos, pero úsalo con cuidado */
/* Si ya tienes un reseteo al principio, puedes omitir este */
* {
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho/alto de los elementos */

}



/* Estilos generales del header */
.main-header {
    background-color: rgb(135, 134, 145); /* Tu color de fondo */
    padding: 10px 20px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

.header-content {
    display: flex; /* Usamos Flexbox para alinear elementos horizontalmente */
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between; /* Espacia los elementos: logo a la izquierda, búsqueda en el centro, acciones a la derecha */
    gap: 20px; /* Espacio entre los bloques principales */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

/* --- Logo --- */
.header-logo img {
    max-width: 150px; /* Ajusta el tamaño de tu logo */
    height: auto;
    display: block; /* Elimina cualquier espacio extra debajo de la imagen */
}

/* --- Menú Desplegable de Categorías --- */
.header-dropdown-menu {
    flex-shrink: 0; /* Evita que el menú se encoja */
 
}


.category-select {
    padding: 8px 12px;
    margin: 0px;
    border: 1px solid #232f3e;
    border-radius: 5px;
    background-color: #333;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    -webkit-appearance: none; /* Elimina el estilo predeterminado en WebKit */
    -moz-appearance: none; /* Elimina el estilo predeterminado en Mozilla */
    appearance: none; /* Elimina el estilo predeterminado */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13%205.4L146.2%20202.7%2018.8%2074.8c-4.7-4.7-11.7-7.4-18.7-7.4H17.6c-7%200-13.9%202.7-18.7%207.4L0%2082.4c-4.7%204.7-7.4%2011.7-7.4%2018.7s2.7%2013.9%207.4%2018.7l128%20128c4.7%204.7%2011.7%207.4%2018.7%207.4s13.9-2.7%2018.7-7.4l128-128c4.7-4.7%207.4-11.7%207.4-18.7S291.7%2074.1%20287%2069.4z%22%2F%3E%3C%2Fsvg%3E'); /* Flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
/* buscador 11111111111111*/

/* Contenedor principal del buscador */
.header-search {
    text-align: center; /* Centra el formulario de búsqueda */
    
}

/* Contenedor del input y el botón, para posicionamiento */
.search-container {
    position: relative;
    display: inline-flex; /* Usamos flexbox para alinear el input y el botón */
    align-items: center; /* Centra verticalmente los elementos dentro */
    width: 100%; /* Ocupa todo el ancho disponible en su contenedor */
    max-width: 500px; /* Limita el ancho máximo para que no sea demasiado grande en pantallas grandes */
    border: 2px solid #333; /* Un borde sutil para el contenedor general */
    border-radius: 25px; /* Bordes redondeados para un aspecto moderno */
    overflow: hidden; /* Asegura que los elementos internos no se salgan del borde redondeado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Una sombra suave para darle profundidad */
}

/* Estilos para el campo de texto (input) */
.search-input {
    flex-grow: 1; /* Permite que el input crezca y ocupe el espacio disponible */
    padding: 12px 20px; /* Espaciado interno para el texto */
    border: none; /* Quitamos el borde predeterminado del input */
    outline: none; /* Quitamos el contorno al hacer clic */
    font-size: 16px; /* Tamaño de fuente legible */
    color: #333; /* Color de texto oscuro */
    background-color: #fff; /* Fondo blanco para el input */
    border-top-left-radius: 25px; /* Bordes redondeados específicos */
    border-bottom-left-radius: 25px;
}

.search-input::placeholder {
    color: #999; /* Color para el texto del placeholder */
}

/* Estilos para el botón de búsqueda */
.search-icon {
    display: flex; /* Usamos flexbox para centrar el icono */
    justify-content: center; /* Centra horizontalmente el icono */
    align-items: center; /* Centra verticalmente el icono */
    padding: 12px 18px; /* Espaciado interno del botón */
    background-color: #333; /* Un azul vibrante como color principal */
    color: white; /* Color del icono blanco */
    border: none; /* Quitar borde del botón */
    border-top-right-radius: 25px; /* Bordes redondeados específicos */
    border-bottom-right-radius: 25px;
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
    font-size: 18px; /* Tamaño del icono */
}

.search-icon:hover {
    background-color: yellow; /* Un azul más oscuro al pasar el ratón */
}

/* Media query para pantallas pequeñas (móviles) */


/* buscador finish 1111111*/

.search-input {
    width: 300px; /* Ancho del input, puedes ajustarlo */
    padding: 10px 15px; /* Espaciado dentro del input */
    font-size: 16px; /* Tamaño de la fuente */
    border: 10px solid #333; /* Borde gris */
    border-radius: 25px; /* Bordes redondeados */
    outline: none;
    
}

.search-icon {
    position: absolute;
    right: 10px; /* Espacio a la derecha dentro del input */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente el icono */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px; /* Tamaño del icono */
    color: #333; /* Color del icono */
    transition: color 0.3s;

}

.search-icon:focus {
    outline: none; /* Remover el borde de enfoque del botón */
}

/* --- Iconos de Usuario --- */
.header-user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre los iconos */
    flex-shrink: 0; /* Evita que este bloque se encoja */
}

.action-item {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.action-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Ligero fondo al hacer hover */
}

.action-item svg {
    margin-bottom: 3px; /* Espacio entre el ícono y el texto */
    color: #fff; /* Color de los íconos */
}

.cart-item {
    position: relative; /* Para posicionar el contador del carrito */
}

.cart-count {
    position: absolute;
    top: -5px; /* Ajusta la posición vertical del contador */
    right: 5px; /* Ajusta la posición horizontal del contador */
    background-color: #ff5722; /* Color de la burbuja del carrito */
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%; /* Forma circular */
    min-width: 18px; /* Ancho mínimo para un solo dígito */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

/* --- Segunda fila de navegación (opcional, si la necesitas) --- */
.secondary-nav {
    background-color: #232f3e; /* Un tono más oscuro si lo deseas */
    padding: 8px 20px;
    margin-top: 10px; /* Espacio entre la primera y segunda fila */
    border-radius: 5px;
}

.secondary-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px; /* Espacio entre los elementos del menú */
    justify-content: center; /* Centra los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
}

.secondary-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.secondary-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Responsive (Ajustes para pantallas más pequeñas) --- */
@media (max-width: 900px) {
    .header-content {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center;
        text-align: center;
        
    }

    .header-dropdown-menu,
    .header-search,
    .header-user-actions {
        width: 100%; /* Ocupan todo el ancho disponible */
        margin-top: 10px; /* Espacio entre ellos */
       
    }

    .header-search form {
        width: 100%;
    }

    .header-user-actions {
        justify-content: center; /* Centra los iconos */
        margin-top: 15px;
        gap: 25px; /* Más espacio entre iconos en móvil */
    }

    .secondary-nav {
        margin-top: 15px;
    }

    .secondary-nav ul {
        flex-direction: column; /* Apila los elementos del segundo menú */
        gap: 10px;
    }
}
.header-slogan {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 19px; /* Tamaño más grandddse para resaltar */
    color: #232f3e;; /* Color vibrante, puedes elegir otro */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    transition: color 0.3s, text-shadow 0.3s; /* Transición suave */
}

.header-slogan:hover {
    color:  #CCC; /* Cambia de color cuando el mouse pase por encima */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* Aumenta la sombra al pasar el ratón */
}
.table-responsive {
    overflow-x: auto; /* Permite scroll horizontal si el contenido es demasiado ancho */
    -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
}
/*dddddddddddddd*/
/* --- Ajustes para hacer el formulario del modal más pequeño --- */

/* Contenedor del modal */
#checkoutModal .modal-content {
    padding: 20px; /* Reduce el padding interno del modal */
    max-width: 400px; /* Ancho máximo aún más pequeño */
}

/* Título del modal */
#checkoutModal .modal-content h3 {
    font-size: 1.6em; /* Título un poco más pequeño */
    margin-bottom: 20px; /* Reduce el margen inferior del título */
}

/* Etiquetas de los campos */
#checkoutModal .form-label {
    font-size: 0.95em; /* Fuente ligeramente más pequeña para las etiquetas */
    margin-bottom: 3px; /* Reduce el espacio entre la etiqueta y el input */
}

/* Campos de entrada (inputs) */
#checkoutModal .form-control {
    padding: 8px 10px; /* Reduce el padding interno de los inputs */
    margin-bottom: 12px; /* Reduce el espacio entre los inputs */
    font-size: 0.95em; /* Fuente ligeramente más pequeña para el texto del input */
}

/* Botones dentro del modal */
#checkoutModal .btn-checkout,
#checkoutModal .btn-secondary {
    padding: 10px 15px; /* Reduce el padding de los botones */
    font-size: 1em; /* Ajusta el tamaño de la fuente de los botones */
    margin-top: 5px; /* Pequeño margen superior para separar */
}

/* Media query para pantallas aún más pequeñas (móviles muy pequeños) */
@media (max-width: 480px) {
    #checkoutModal .modal-content {
        padding: 15px; /* Reduce el padding aún más en pantallas pequeñas */
        max-width: 95%; /* Ocupa casi todo el ancho disponible */
    }
    #checkoutModal .modal-content h3 {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    #checkoutModal .form-label {
        font-size: 0.9em;
    }
    #checkoutModal .form-control {
        padding: 7px 9px;
        margin-bottom: 10px;
        font-size: 0.9em;
    }
    #checkoutModal .btn-checkout,
    #checkoutModal .btn-secondary {
        padding: 8px 12px;
        font-size: 0.9em;
    }
}