@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

@import url('../libs/icons-1.13.1/font/bootstrap-icons.css');	


:root{
    --primary-color: #F18A15; 
    --secondary-color: #333C4A; 
    --background-color: #181A1B;
    --text-color: #E0E0E0; 
    --surface-color: #23272B;
    --accent-color: #BE3D2A;
    --font-family: 'Urbanist', sans-serif;
    --color-negro: #000000;
    --color-gris-claro: #888888;
    --espacio-seccion: 90px;
}


body{
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
}

#main-header {
    background-color: #000; /* Fondo negro */
    color: #fff;
    padding: 30px 0;
}
#main-header h1 {
    color: var(--primary-color);
    margin: 0;
}

#main-footer{
    background-color: var(--surface-color);
    color: var(--color-gris-claro);
    padding: 45px 0;
}

#nosotros, #historia, #oficinas {
    background-color: var(--surface-color);
    color: var(--text-color);
}

.page-header{
    color:  white;
    background-color: var(--surface-color);
    padding: 15px 0;
}

.list-group-item.active{
    background-color: var(--primary-color);
    border-color:var(--primary-color)
}
.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{

    box-shadow: 0 -3px var(--accent-color);
}
.page-header{
    color:  white;
    background-color: var(--surface-color);
    padding: 15px 0;
     
}
.precio-anterior{
    font-size : 0.9em;
    text-decoration: line-through;
    color: var(--primary-color);

}
#grid-productos .card{
    text-align: center;
}
.porcentaje-descuento{
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--surface-color);
    color: white;
    padding: 5px 10px;
}
#grid-productos .card{
    overflow: hidden;
}
#grid-productos img{
    transition: all ease-in-out .5s;
}
#grid-productos img:hover{
    transform: scale(1.2);
}
.icono-vista-rapida{
    position: absolute;
    top: -15%;
    left: 50%;
    background-color: white;
    padding: 6px 10px;
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: all ease-in-out .5s;
}
.icono-vista-rapida:hover{
    background-color: black;
    color: white;
}
#grid-productos .card:hover .icono-vista-rapida{
    top: 25%;
}
.nav-link i{
    margin-left: 5px;
}
.icono-carrito, .icono-eliminar{ 
    cursor: pointer;
}
.icono-carrito:hover, .icono-eliminar:hover{
    color: var(--primary-color);
}
.input-cantidad{
    width: 100px;
}
.caja-cantidad{
    width: 100px;

}
.icono-editar, .icono-elinminar{
    cursor: pointer;
}
.icono-editar:hover, .icono-elinminar:hover{
    color: var(--primary-color);
}
#tbofy-directores tr i{
    display: none;
}
#tbody-peticiones tr:hover i{
    display: inline;
}
#main-header {
    background-color: #2b2929; /* Fondo negro */
    color: #fff;            /* Texto blanco */
    padding: 30px 0;
}
#main-header h1 {
    color: #f18a15;            /* Asegura que el texto sea blanco */
    margin: 0;
}
/* Tablas Bootstrap fondo gris oscuro */
.table,
.table thead,
.table tbody,
.table tr,
.table td,
.table th {
    background-color: #23272B !important; /* gris oscuro */
    color: #E0E0E0 !important;            /* texto claro */
    border-color: #333C4A !important;     /* bordes más oscuros */
}
.table th,
.table td {
    font-weight: bold !important;
}

/* Cards Bootstrap fondo gris oscuro */
.card {
    background-color: #23272B !important; /* gris oscuro */
    color: #E0E0E0 !important;            /* texto claro */
    border: 1px solid #333C4A !important; /* borde oscuro */
}
/* Botones color rojo oscuro */
.btn,
.btn-primary,
.btn-danger,
.btn-outline-danger {
    background-color: var(--accent-color) !important; /* rojo oscuro */
    color: #fff !important; /* letras blancas por contraste */
    border-color: var(--accent-color) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: #a12e1e !important; /* tono más oscuro al pasar el mouse */
    border-color: #a12e1e !important;
    color: #fff !important;
}

/* Si quieres que las letras de los botones sean rojas en vez de blancas: */
.btn,
.btn-primary,
.btn-danger,
.btn-outline-danger {
    color: var(--accent-color) !important; /* letras rojas */
    background-color: transparent !important;
    border-color: var(--accent-color) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border-color: var(--accent-color) !important;
}

#tbody-peticiones td,
#tbody-peticiones th {
    color: rgb(175, 77, 11) !important; /* letras naranjas */
}
#tbody-peticiones th,
#tbody-proveedores th {
    color: var(--primary-color) !important; /* encabezados naranjas */
}
#tbody-peticiones td,
#tbody-proveedores td {
    color: rgb(175, 77, 11) !important; /* celdas normales color claro */
}
.navbar,
.navbar.bg-body-tertiary,
.navbar .navbar-collapse,
.navbar .container {
    background-color: var(--accent-color) !important; /* rojo oscuro */
}

.navbar,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler,
.navbar .navbar-toggler-icon {
    color: #fff !important; /* letras blancas */
    border-color: #fff !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand:visited {
    color: var(--primary-color) !important; /* títulos naranja */
    font-weight: bold;
}

.navbar .nav-link.active,
.navbar .nav-link.show {
    color: var(--primary-color) !important; /* nav activo naranja */
    box-shadow: 0 -3px var(--primary-color);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--primary-color) !important; /* hover naranja */
}
.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgb(18 15 15) !important;
}
.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: #e04e3b;
    border: var(--bs-list-group-border-width) solid #121e2a;
}

    .h2, h2 {
        font-size: 2rem;
         color: rgb(199, 13, 13);
    }

    .card-title
 {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: rgb(199, 13, 13);
}

/* cards Design */

.card-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas salten de línea si no caben */
    gap: 20px; /* Espacio entre las tarjetas */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    max-width: 1200px; /* Ancho máximo para el contenedor de tarjetas */
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
    width: 300px; /* Ancho fijo para cada tarjeta */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease; /* Efecto de transición al pasar el ratón */
}

.card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
}

.card img {
    width: 100%;
    height: 200px; /* Altura fija para la imagen */
    object-fit: cover; /* Recorta la imagen para que cubra el espacio sin distorsionarse */
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
}

.card-content h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.card-content p {
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio antes del botón */
}

.card-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Alinea el botón a la izquierda dentro del flex column */
}

.card-button:hover {
    background-color: #0056b3;
}


.carousel,
.carousel-inner {
    max-width: 1000px;   /* Cambia este valor al tamaño deseado */
    max-height: 600px;  /* Cambia este valor al tamaño deseado */
    margin: 0 auto;  
    padding: 2px;   /* Centra el carrusel */
}

.carousel-item img {
    width: 100%;
    height: 500px;      /* Ajusta la altura deseada */
    object-fit: cover;  /* Mantiene la proporción y recorta si es necesario */
}
/* Media Queries para diseño responsivo */
@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px); /* Dos tarjetas por fila en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* Una tarjeta por fila en pantallas pequeñas */
    }
    .card-container {
        padding: 0 10px; /* Reducir el padding en el contenedor */
    }
}
@media (min-width: 1520px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px;
  }
}