style.css




/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #f1f4f9;
  color: #1a1a1a;
}



/* HEADER */
.main-header {
  background: #ffffff;
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}



/* BOTONES */
.btn {
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
  display: inline-block;
  cursor: pointer;
}

.btn-primary {
  background: #0d47a1;
  color: #fff;
  box-shadow: 0 5px 15px rgba(13,71,161,0.3);
}

.btn-primary:hover {
  background: #1565c0;
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: #25D366;
  color: white;
}

.btn-whatsapp:hover {
  background: #07bf50;
  transform: translateY(-2px);
}

/* PRODUCTOS */
.products {
  max-width: 1300px;
  margin: 70px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
  padding: 0 30px;
}

/* CARD UNIFORME */
.product-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 119, 255, 0.935);
  transition: 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(13,71,161,0.2);
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* CONTENIDO */
.product-content {
  padding: 20px;
  flex-grow: 1;
}

.product-card h3 {
  color: #0d47a1;
  font-size: 18px;
  margin-bottom: 10px;
}

.product-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
  min-height: 40px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #1565c0;
  margin-bottom: 15px;
}
/* STOCK */
.stock {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 5px 18px;
  display: inline-block;
  border-radius: 20px;
  color: #1565c0;
}

/* Colores dinámicos según cantidad */
.stock.low {
  background: #ffebee;
  color: #c62828;
}

.stock.medium {
  background: #fff8e1;
  color: #ef6c00;
}

.stock.high {
  background: #e3f2fd;
  color: #1565c0;
}
/* BOTONES CARD */
.product-buttons {
  display: flex;
  gap: 10px;
}

/*ADMIN */
.admin-container {
  max-width: 1000px;
  margin: 70px auto;
  padding: 30px;
}

.form-admin {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-admin input,
.form-admin textarea {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.form-admin button {
  background: #0d47a1;
  color: white;
  padding: 12px;
  border-radius: 30px;
  border: none;
  font-weight: 600;
}

.form-admin button:hover {
  background: #1565c0;
}

/* PRODUCTO ADMIN */
.producto-admin {
  background: white;
  padding: 15px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.producto-admin img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
}

.producto-info {
  flex: 1;
}

.admin-buttons button {
  padding: 8px 15px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-editar {
  background: #0195f1;
  color: white;
}

.btn-eliminar {
  background: #030fe6;
  color: white;
}

/* FOOTER PREMIUM AZUL*/

.main-footer {
    background: linear-gradient(135deg, #0b3d91, #1565c0);
    color: white;
    padding-top: 60px;
    margin-top: 80px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    padding: 0 30px 50px;
}

.footer-column h3,
.footer-column h4 {
    margin-bottom: 20px;
}

.footer-column p {
    opacity: 0.9;
    line-height: 1.6;
}

.footer-column a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 10px;
    opacity: 0.85;
    transition: 0.3s ease;
    position: relative;
}

/* Animación underline */
.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: white;
    transition: 0.3s;
}

.footer-column a:hover {
    opacity: 1;
    transform: translateX(5px);
}

.footer-column a:hover::after {
    width: 100%;
}

/* Línea inferior */
.footer-bottom {
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0.15);
    font-size: 14px;
}
/* ICONOS SOCIALES BLANCOS*/

.social-icons {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}

.social-icons a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.social-icons a:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-5px);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* RESPONSIVE */
@media(max-width:768px){
  .banner {
    height: 250px;
  }

  .product-card img {
    height: 200px;
  }

  .main-header {
    flex-direction: column;
    gap: 15px;
  }
}
/* CONTENEDOR GENERAL FORMULARIOS */
.form-wrapper {
  max-width: 750px;
  margin: 60px auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* TITULO FORM */
.form-wrapper h2 {
  color: #0d47a1;
  margin-bottom: 30px;
  text-align: center;
  font-size: 22px;
}

/* GRID FORMULARIO */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* INPUT GROUP */
.input-group {
  display: flex;
  flex-direction: column;
}

.input-group.full {
  grid-column: span 2;
}

/* LABEL */
.input-group label {
  font-size: 14px;
  margin-bottom: 6px;
  color: #0d47a1;
  font-weight: 600;
}

/* INPUTS */
.input-group input,
.input-group textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  transition: 0.3s ease;
}

.input-group input:focus,
.input-group textarea:focus {
  border-color: #1565c0;
  box-shadow: 0 5px 15px rgba(21,101,192,0.2);
  outline: none;
}

/* BOTON FORMULARIO */

.form-wrapper button {
  margin-top: 25px;
  background: #0d47a1;
  color: white;
  padding: 12px;
  border-radius: 30px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.form-wrapper button:hover {
  background: #1565c0;
  transform: translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:768px){
  .form-grid {
    grid-template-columns: 1fr;
  }
  .input-group.full {
    grid-column: span 1;
  }
}

/* CONTENEDOR DE PRODUCTOS*/

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 40px 20px;
}

/* CARD PRODUCTO*/

.card {
    width: 280px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* centra contenido */
    text-align: center; /* centra texto */
    font-family: "Segoe UI", Arial, sans-serif; /* tipografía uniforme */
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}

/* IMAGEN PRODUCTO*/

.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    background: #f4f4f4;
}

/*CONTENIDO CARD*/

.card h3 {
    font-size: 18px;
    padding: 15px 15px 5px;
    margin: 0;
    color: #0b3d91;
    text-align: center;
}

/* DESCRIPCION */
.card .description {
    font-size: 14px;
    padding: 0 15px;
    margin-top: 5px;
    color: #555;
    line-height: 1.5;
    text-align: justify;
    font-family: "Montserrat", sans-serif;
}

/* PRECIO */

.card .price {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 15px;
    color: #0b3d91;
}

/* STOCK */

.card .stock {
    font-size: 14px;
    color: #777;
    margin-bottom: 8px;
}

/* BOTONES*/

.card .btn {
    display: block;
    text-align: center;
    margin: 8px 15px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    color: white;
    width: 85%; /* todos los botones alineados */
}

/* Azul corporativo */
.card .edit {
    background: #0b3d91;
}

.card .edit:hover {
    background: #072c66;
}

/* Eliminar */
.card .delete {
    background: #03b0f5;
}

.card .delete:hover {
    background: #012938;
}

/* WhatsApp */
.card .whatsapp {
    background: #25D366;
}

.card .whatsapp:hover {
    background: #1da851;
}

/* Descargar */
.card .download {
    background: #1f4ed8;
}

.card .download:hover {
    background: #173ea6;
}

/* CONTENEDOR GRID ADMIN*/

.admin-products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    padding: 40px;
}

/* LOGIN WRAPPER*/

.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0b3d91, #1f4ed8);
    padding: 20px;
}

/* LOGIN CONTAINER*/

.login-container {
    width: 900px;
    max-width: 100%;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 40px rgba(2, 182, 227, 0.516);
    animation: fadeIn 0.6s ease;
}

/*LADO IZQUIERDO*/

.login-left {
    flex: 1;
    background: linear-gradient(135deg, #0b3d91, #072c66);
    color: white;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-left h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.login-left p {
    opacity: 0.9;
}

/* LADO DERECHO*/

.login-right {
    flex: 1;
    padding: 60px 40px;
    background: white;
}

.login-right h3 {
    margin-bottom: 30px;
    color: #0b3d91;
}

/* INPUTS*/

.login-right .input-group {
    margin-bottom: 20px;
}

.login-right input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: 0.3s;
}

.login-right input:focus {
    border-color: #0b3d91;
    outline: none;
    box-shadow: 0 0 8px rgba(11, 61, 145, 0.3);
}

/* BOTÓN*/

.login-right button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #0b3d91;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.login-right button:hover {
    background: #072c66;
    transform: translateY(-2px);
}

/* ANIMACIÓN*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE*/

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-left {
        padding: 40px 20px;
        text-align: center;
    }

    .login-right {
        padding: 40px 20px;
    }
}
/*    NAV PROFESIONAL AZUL*/

.main-nav {
    background: linear-gradient(
        270deg,
        #000000,
        #1565c0,
        #1e88e5,
        #0b3d91
    );

    background-size: 400% 400%;
    animation: navGradient 10s ease infinite;

    padding: 18px 0;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    position: relative;
}

/* Enlaces */
.main-nav a {
    color: white;
    text-decoration: none;
    margin: 0 20px;
    font-weight: 600;
    font-size: 15px;
    position: relative;
    transition: 0.3s ease;
}

/* Línea animada debajo */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 2px;
    background: white;
    transition: 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Hover general */
.main-nav a:hover {
    transform: translateY(-2px);
}
.main-nav {
    backdrop-filter: blur(6px);
}
/* BOTÓN LOGIN */
.btn-login {
    background: linear-gradient(135deg, #1f4ed8, #0b3d91);
    padding: 8px 18px;
    border-radius: 25px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.btn-login:hover {
    background-position: right center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* BOTÓN LOGOUT */
.btn-logout {
    background: #0257b2;
    padding: 8px 18px;
    border-radius: 25px;
}

.btn-logout:hover {
    background: #012a55;
}

/* Responsive */
@media(max-width:768px){
    .main-nav a {
        display: block;
        margin: 12px 0;
    }
}
/* SEPARADOR VISUAL */
.input-group input[type="file"] {
    padding: 10px;
    background: #f4f6fb;
    border: 1px dashed #0b3d91;
    cursor: pointer;
}

.input-group input[type="file"]:hover {
    background: #e9eefc;
}

/* Placeholder más suave */
.input-group input::placeholder {
    color: #999;
}
.card video {
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}







/* PAGINACION */

.pagination{
display:flex;
justify-content:center;
margin:40px 0;
gap:10px;
flex-wrap:wrap;
}

.pagination a{
padding:10px 15px;
background:#1976d2;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:.3s;
}

.pagination a:hover{
background:#0d47a1;
}

.pagination a.active{
background:#0d47a1;
}

.card img{
width:100%;
height:250px;
object-fit:cover;
border-radius:8px;
}
/* CONTENEDOR DEL BANNER */
.banner-header{
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* degradado azul rey dinámico */
    background: linear-gradient(270deg,#0d47a1,#1565c0,#1e88e5,#0d47a1);
    background-size: 600% 600%;
    animation: fondoAnimado 10s ease infinite;

    overflow: hidden;
}

/* animación del degradado */
@keyframes fondoAnimado{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* BANNER PNG */
.banner-bg{
    max-width: 100%;
    height: auto;
    z-index: 1;
}

/* LOGO TIPO SELLO */
.logo-header{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.logo-header img{
    width: 110px;
    height: auto;
    border-radius: 50%;
    border: 4px solid white;
    background: white;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.card a{
display:inline-block;
margin-top:10px;
padding:8px 14px;
background:linear-gradient(135deg,#0d47a1,#1e88e5);
color:white;
text-decoration:none;
border-radius:6px;
font-size:14px;
transition:0.3s;
}

.card a:hover{
background:linear-gradient(135deg,#1e88e5,#42a5f5);
transform:scale(1.05);
}

.card a{
display:inline-block;
margin-top:10px;
padding:8px 14px;
background:linear-gradient(135deg,#0d47a1,#1e88e5);
color:white;
text-decoration:none;
border-radius:6px;
font-size:14px;
transition:0.3s;
}

.card a:hover{
background:linear-gradient(135deg,#1e88e5,#42a5f5);
transform:scale(1.05);
}
.product-description{
    color:#0d47a1;
    font-size:14px;
    line-height:1.6;
    margin:10px 0 15px 0;
    font-weight:500;

    overflow:hidden;
    text-overflow:ellipsis;

    display:-webkit-box;
    
    -webkit-box-orient:vertical;
}
/* MEDIA CARD (IMAGEN / VIDEO)*/

.card img,
.drive-preview iframe {
    width: 90%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* CENTRAR MEDIA */

.card img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* CONTENEDOR PREVIEW */

.drive-preview{
    width:100%;
    display:flex;
    justify-content:center;
}

/* EFECTO HOVER SUAVE */

.card img:hover,
.drive-preview iframe:hover{
    transform: scale(1.02);
    transition: 0.3s;
}
/* MEDIA CARD (imagen o video) */

.card-media{
width:100%;
height:230px;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

/* IMAGEN */

.card-media img{
width:100%;
height:100%;
object-fit:cover;
border-top-left-radius:18px;
border-top-right-radius:18px;
}

/* VIDEO */

.card-media iframe{
width:100%;
height:100%;
border:none;
border-top-left-radius:18px;
border-top-right-radius:18px;
}

/* EFECTO HOVER */

.card-media img:hover,
.card-media iframe:hover{
transform:scale(1.03);
transition:0.3s;
}
/* MEDIA CARD */

.card-media{
width:100%;
height:230px;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

/* IMAGEN */

.card-media img{
width:100%;
height:100%;
object-fit:cover;
border-top-left-radius:18px;
border-top-right-radius:18px;
}

/* VIDEO / DRIVE */

.card-media iframe{
width:100%;
height:100%;
border:none;
border-top-left-radius:18px;
border-top-right-radius:18px;
}

/* HOVER */

.card-media img:hover,
.card-media iframe:hover{
transform:scale(1.03);
transition:0.3s;
}
@keyframes navGradient {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}




/* ===========================
   ALERTAS
=========================== */
.alert {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
}
.alert-error { background-color: #ffeeee; color: #c00; }
.alert-success { background-color: #eeffee; color: #0a0; }


/* CARD */

.card{
background:#fff;
border-radius:10px;
padding:5px;
box-shadow:0 2px 8px rgba(1, 8, 54, 0.514);
display:flex;
flex-direction:column;
gap:10px;
}


/* MEDIA */

.card-media{
width:100%;
height:250px;
overflow:hidden;
border-radius:10px;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
}

.card-media img,
.card-media iframe{
width:100%;
height:100%;
object-fit:cover;
border:10;
}


/* DESCRIPCIÓN */

.description-wrapper{
min-height:80px;
}

.product-description{
text-align:justify;
line-height:1.5;
font-size:14px;
}

.text-full{
display:none;
}

.toggle-description{
background:none;
border:none;
color:#0077ff;
cursor:pointer;
font-size:13px;
}


/* PRECIO */

.price{
font-weight:bold;
font-size:18px;
}


/* STOCK */

.stock{
color:#0a7d2c;
font-weight:bold;
}

.stock-empty{
color:#ffffff !important;
background:#0d47a1;
padding:4px 8px;
border-radius:4px;
display:inline-block;
font-size:13px;
font-weight:bold;
}


/* BOTONES */

.btn{
display:inline-block;
padding:8px 12px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.whatsapp{
background:#25D366;
color:#fff;
}

.download{
background:#1565c0;
color:#fff;
}
/* =========================
GRID PRODUCTOS
========================= */

.container{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
padding:20px;
}


/* =========================
CARD PRODUCTO
========================= */

.card{
background:#fff;
border-radius:10px;
padding:15px;
box-shadow:0 2px 8px rgba(4, 67, 101, 0.824);
display:flex;
flex-direction:column;
gap:10px;
height:100%;
transition:0.2s ease;
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.12);
}
/* Contenedor de la card */
.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 10px;
    margin: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-3px);
}

/* Imagen o iframe */
.card-media {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-media img,
.card-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    display: block;
    transition: filter 0.3s ease;
}

/* Badge de stock agotado */
.stock-empty-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9); /* Blanco translúcido */
    color: #000;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Oscurecer imagen si agotado */
.card-media .stock-empty-badge ~ img,
.card-media .stock-empty-badge ~ iframe {
    filter: brightness(0.6);
}

/* Texto de la card */
.drive-preview{
display:none !important;
}

/* =========================
FILTRO DE CATEGORIAS PREMIUM
========================= */

.category-filter{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
margin:10px 0;
}

/* BOTONES */

.category-filter a{

padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-size:14px;
font-weight:600;
color:white;

/* MISMO FONDO DEL NAV */
background: linear-gradient(
270deg,
#000000,
#1565c0,
#1e88e5,
#0b3d91
);

background-size:400% 400%;
animation: navGradient 10s ease infinite;

box-shadow:0 6px 18px rgba(0,0,0,0.2);

transition:0.3s ease;
}

/* HOVER */

.category-filter a:hover{
transform:translateY(-3px);
box-shadow:0 10px 22px rgba(0,0,0,0.25);
}

/* ACTIVO */

.category-filter a.active{
background:linear-gradient(135deg,#072c66,#0d47a1);
box-shadow:0 6px 14px rgba(0,0,0,0.25);
}


/* FONDO PARA LA ZONA DE CATEGORIAS */

.category-section{

background: linear-gradient(
270deg,
#000000,
#1565c0,
#1e88e5,
#0b3d91
);

background-size:400% 400%;
animation: navGradient 10s ease infinite;

/* MÁS COMPACTO */
padding:10px 0 15px 0;

}
/* SELECTS DEL FORMULARIO (ADMIN) */

.input-group select{
padding:12px 14px;
border-radius:10px;
border:1px solid #dcdcdc;
font-size:14px;
transition:0.3s ease;
background:white;
appearance:none;
cursor:pointer;
}

.input-group select:focus{
border-color:#1565c0;
box-shadow:0 5px 15px rgba(21,101,192,0.2);
outline:none;
}

/* FONDO PARA LA ZONA DE CATEGORIAS */

.category-section{

background: linear-gradient(
270deg,
#000000,
#1565c0,
#1e88e5,
#0b3d91
);

background-size:400% 400%;
animation: navGradient 10s ease infinite;

padding:25px 0 35px 0;

}