body {
    font-family: 'Host Grotesk', sans-serif;
    background-color: #0b0b0b;
    color: #ffffff;
}

.navbar {
    background-color: #252525;
    border-bottom: 1px solid #555555;
}

.navbar-nav .nav-link {
    color: #ffffff;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.navbar-nav .nav-link:hover {
    color: #c7fb00;
}

.navbar-nav .nav-link.active {
    color: #c7fb00;
}

.navbar-toggler-icon {
    filter: invert(1); /* Invierte los colores, útil si el icono es negro por defecto */
}

.navbar .container .mobile-image {
    display: none;
}

/* Ocultar la imagen de escritorio en pantallas pequeñas */
.navbar .container .desktop-image {
    display: block;
}

#navbar-user-badge {
  z-index: 10;
}

#navbar-inbox-badge {
  z-index: 10;
}

.btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #252525;
}

.btn-primary {
    background-color: #c7fb00;
    border-color: #c7fb00;
    color: #252525;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #a6d400;
    border-color: #a6d400;
}

.btn-primary:disabled {
  background-color: #566420 !important;  /* tono más apagado del verde */
  border-color: #566420 !important;
}

/* Por defecto se muestra solo el de escritorio */
.banner-desktop {
    display: block;
    max-height: 160px;
}

.banner-mobile {
    display: none;
}

/* En pantallas pequeñas, mostrar el mobile y ocultar el desktop */
@media (max-width: 768px) {
    .banner-desktop {
        display: none;
    }

    .banner-mobile {
        display: block;
        max-height: 160px;
    }
}

/* Imagenes adentro */
.banner-desktop img,
.banner-mobile img {
    width: 100%;
    display: block;
    object-fit: cover;
}


.header-section {
    padding: 100px 0;
    background-color: #0b0b0b;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='2' cy='2' r='1' fill='rgb(69, 69, 69)' /></svg>");
    background-repeat: repeat;
}

.header-title {
    font-size: 48px;
    font-weight: bold;
}

.highlight {
    color: #c7fb00;
}

.mini-title img{
    margin-bottom: 20px;
}

.header-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    max-width: 500px;
}

.btn-custom {
    background-color: #c7fb00;
    color: #0b0b0b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-custom:hover {
    background-color: #96be00 !important;
    color: #000000 !important;
    border: none !important;
}

.btn-custom:active {
    background-color: #dbff50 !important;
    color: #0b0b0b !important;
    border: none !important;
}

.btn-custom:disabled {
    background-color: #7D7D7D !important; /* un gris más firme */
    color: #fff !important;
    cursor: not-allowed;
    opacity: 1; /* no hace falta opacar si tenés colores sólidos */
    border: none;
}

button.btn-custom:disabled {
    pointer-events: none;
    box-shadow: none;
}

.image-placeholder {
    background-color: #c7fb00;
    width: 100%;
    height: 300px;
    border-radius: 15px;
}

.why-choose-us {
    background-color: #ffffff;
    color: #000000;
    padding-bottom: 50px; /* Espaciado inferior para más aire */
    font-family: 'Montserrat', sans-serif;
}

.section-title {
    font-size: 50px;
    color: #0b0b0b;
    font-family: 'Host Grotesk', sans-serif;
}

.section-subtitle {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
}

/* Estilo de cada cuadro */
.feature-box {
    font-size: 15px;
    background-color: #f9fcf8;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #e9f5e4;
    transition: transform 0.3s ease-in-out;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 180px;
    /* Fondo combinado de imagen y color sólido */
    background-image: url('/IMG/grid.png'); /* Ruta de tu imagen PNG */

    /* Ajustes para la imagen de fondo */
    background-size: cover; /* La imagen cubre toda la tarjeta */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* Espaciado entre los dos bloques */
.row:last-child {
    margin-top: 30px;
}

/* Hover */
.feature-box:hover {
    transform: translateY(-5px);
}

/* Iconos */
.icon-style {
    font-size: 30px;
    color: #7ac800;
}

/* Ajuste del título e ícono en línea */
.feature-box h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.feature-box h4, .feature-box p {
    margin: 0;
    padding: 0;
}

.services-section {
    background-color: #ffffff;
    padding: 60px 0;
}

.service-card {
    background-color: #f9fcf8;
    border: 2px solid #e9f5e4;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.price-tag {
    font-size: 50px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
    min-height: 60px; /* misma altura para todos los precios */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.price-tag span {
    font-size: 24px;
    color: #888888;
    font-weight: normal;
}

.price-desc {
    font-size: 13px;
    color: #888888;
    margin-bottom: 10px;
}

.price-title {
    color: #68aa00;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
    min-height: 45px;
}

.service-card hr {
    border: none;
    height: 2px;
    background: #acacac;
    margin-bottom: 15px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.service-card ul li {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
    color: #000;
}

.service-card ul li::before {
    content: "●";
    color: #76bc00;
    font-size: 14px;
    margin-right: 8px;
}

.service-btn {
    background-color: #7ac800;
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease-in-out;
}

.service-btn:hover {
    background-color: #5b9500; /* Un poco más oscuro */
    color: #ffffff; /* Un tono más oscuro del texto */
}

.service-btn:disabled {
    background-color: #999999 !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 0.8;
    border: none;
}

/* Estilo para los servicios especiales */
.upcoming-service {
    background-color: #f0f0f0;
    border: 2px dashed #cccccc;
    opacity: 0.9;
}

/* Faja verde horizontal */
.upcoming-service .blur-content {
    filter: blur(0px);
    opacity: 0.7;
    pointer-events: none; /* evita interacción accidental */
}

.upcoming-service .coming-soon-label {
    position: relative;
    left: -20px;
    width: calc(100% + 40px);
    margin-top: 20px;
    background-color: #7ac800;
    color: #fff;
    padding: 6px 0;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
}

/* Puntitos grises en los li */
.upcoming-service ul li::before {
    color: #999999;
}
.upcoming-service ul li {
    color: #444;
}
.upcoming-service .price-title {
    color: #555;
}

/* ===== Destacado: MÁS VENDIDO (solo cards con .best-seller) ===== */
.service-card.best-seller {
  position: relative;
  /* Glow verde alrededor */
  box-shadow:
    inset 0 0 0 2px rgba(122, 200, 0, 0.35),
    0 0 26px rgba(122, 200, 0, 0.30);
  border: 1px solid rgba(199, 251, 0, 0.25);
  z-index: 1; /* por si convive con badges internos */
}

/* Reserva de espacio arriba para la cinta fija */
.service-card.best-seller { position: relative; overflow: hidden; padding-top: 44px; } /* ajustá 44px al alto real */

.service-card.best-seller .top-ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;            /* alto de la banda */
  background: #c7fb00;
  color: #0b0b0b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .9rem;
  padding-top: 5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22);
}

/* mantiene tu estilo original */
.price-tag .crayon-strike {
  font-size: 50px;
  font-weight: 700;
  color: #000;
  line-height: 1;
  position: relative;
  display: inline-block;
  isolation: isolate;   /* clave para que el ::after vaya arriba del texto */
  z-index: 0;
}

/* tacha vertical roja por encima del número */
.price-tag .crayon-strike::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -10%;
  left: 40%;
  width: 9px;
  height: 200%;
  transform: translateX(-50%) rotate(75deg);
  border-radius: 6px;
  background: repeating-linear-gradient(
    180deg,
    rgba(229,57,53,0.95) 0 6px,
    rgba(229,57,53,0.78) 6px 12px
  );
  /* quito mezclas que podían “esconderla” detrás */
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 2;           /* ahora sí, sobre el texto */
}

/* 1) Cuando hay precio con descuento, usamos GRID para poder superponerlo sobre "USDT" */
.currency-stack{
  position:relative;
  display:inline-block;   /* no altera el flow */
}

.currency-stack .currency{
  position:relative;
  z-index:1;              /* texto "USDT" debajo del precio nuevo */
}

/* — precio con descuento arriba de "USDT" (sin mover el layout) — */
.currency-stack .bulk-price-new-crayon{
  position:absolute;
  left:50%; top:-0.95em;                 /* súbelo/bájalo fino: -0.9em / -1.1em */
  transform:translateX(-50%);            /* centrado sobre "USDT" */
  z-index:2; pointer-events:none;

  color:#E53935 !important;              /* rojo crayon */
  font-weight:700;
  font-size:3.25rem;                     /* más grande */
  line-height:1;
  letter-spacing:.3px;
  text-shadow:0 0 .5px rgba(0,0,0,.35);
  font-family:"Caveat", cursive, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.testimonials {
    background-color: #ffffff;
    text-align: center;
    padding: 50px 20px;
}

.testimonials-title {
    margin-bottom: 50px;
}

/* Contenedor de los logos */
.logos-wrapper {
    display: flex;
    justify-content: center;
}

/* En pantallas grandes: 5 arriba y 3 abajo */
.logos-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 800px;
}

/* Mantener tamaño fijo de los logos */
.logo-item {
    width: 120px;
    flex-shrink: 0;
}

.logo-item img {
    width: 100%;
    height: auto;
    filter: saturate(50%);
}

.industries-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas fijas */
	gap: 1.5rem;
	margin-top: 2.5rem;
}

/* Card */
.industry-item {
	background-color: #ffffff;
	border-radius: 16px;
	border: 1px solid #e5e7eb;
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 140px;
	text-align: center;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
}

.industry-number {
	font-weight: 300;
	font-size: 1.8rem;
	color: #000000;
	margin-bottom: 0.75rem;
}

.industry-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}

.industry-icon,
.industry-label {
	color: #96A5AE;
}

.industry-icon {
	font-size: 1.6rem;
}

.industry-label {
	font-size: 1rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.promo-section {
    background-color: #ffffff;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    padding: 60px 0; /* Agrega un poco de padding en la parte superior e inferior */
}

.promo-card {
    border: 2px solid #e9f5e4;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    max-width: 80%;
    width: 100%;
    margin: auto;
    box-shadow: none !important;
    /* Fondo combinado de imagen y color sólido */
    background-image: url('/IMG/grid.png'); /* Ruta de tu imagen PNG */
    background-color: #f9fcf8; /* Color sólido de fondo */

    /* Ajustes para la imagen de fondo */
    background-size: cover; /* La imagen cubre toda la tarjeta */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.promo-title {
    font-size: 38px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.promo-text {
    font-size: 17px;
    color: #555555;
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
}

.promo-highlight {
    color: #68aa00;
}

.btn-promo {
    background-color: #7ac800;
    color: #ffffff;
    font-size: 18px;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-promo:hover {
    background-color: #5b9500;
}

.promo-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre el texto y el botón */
    margin-top: 15px;
    flex-direction: row; /* Asegura que el texto esté a la izquierda */
}

.promo-subtext {
    font-size: 20px;
    font-weight: 600;
    color: #444444;
    font-family: 'Montserrat', sans-serif;
    text-align: right; /* Asegura que el texto se alinee correctamente */
}

.promo-subtext i {
    font-size: 22px;
    color: #7ac800;
}

.lp-help{
  width: 22px;           /* tamaño del círculo */
  height: 22px;
  padding: 0;            /* sin padding para que sea perfecto */
  border-radius: 50%;    /* círculo perfecto */
  display: inline-flex;  /* centrar el ? */
  align-items: center;
  justify-content: center;
  line-height: 1;        /* evitar que crezca */
  font-size: 12px;       /* más chico que el default */
  font-weight: 700;
}

/* Footer */
.footer {
    background-color: #252525; /* Color oscuro para el footer */
    padding-top: 10px;
    padding-bottom: 0; /* Ajuste para no dejar espacio extra */
    color: #fff;
}

.footer a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
}

.footer a:hover {
    color: #c7fb00;
}

.footer .contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-END;
    width: 100%;
}

.footer .contact-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer .contact-info i {
    margin-right: 8px;
}

.footer .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px; /* Ajuste para dar un poco de espacio antes del copyright */
}

/* Estilos para la franja de copyright */
.footer .copyright-section {
    background-color: #1c1c1c; /* Color más oscuro */
    padding: 10px 0;
    text-align: center;
}

.footer .copyright-section span {
    font-size: 14px;
}

/* Estilo para Móvil */
@media (max-width: 768px) {
    .header-title {
        font-size: 44px;
        margin-top: -80px;
    }
    
    .feature-box {
        width: 80%;
        margin: 15px auto; /* Mantiene la misma separación entre todas */
    }

    .row:last-child {
        margin-top: 0; /* Hace que la separación entre filas sea igual */
    }

    .logos-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        max-width: 500px;
    }

    .logo-item {
        width: 70px;
    }

    .promo-card {
        padding: 30px;
    }

    .promo-title {
        font-size: 26px;
    }

    .promo-text {
        font-size: 18px;
    }
    
    .promo-cta {
        flex-direction: column; /* Cambia de fila a columna */
        align-items: center; /* Centra el contenido */
        gap: 8px; /* Reduce el espacio entre elementos */
    }
    
    .promo-subtext {
        font-size: 13px;
        text-align: center;
        max-width: 100%;
    }
    
    .promo-subtext i {
        font-size: 20px;
        display: inline-block;
        transform: rotate(90deg); /* Rota la flecha para que apunte hacia abajo */
    }

    .btn-promo {
        font-size: 15px;
        display: flex;
        padding: 10px 20px;
        white-space: nowrap;
        align-items: center;
        gap: 8px; /* Espacio entre icono y texto */
    }

    .footer .contact-info {
        align-items: center;
        text-align: center;
    }

    .footer .row {
        flex-direction: column;
        text-align: center;
    }
    
    /* Para que en móviles los enlaces no tengan margen a la derecha y queden centrados */
    .footer a {
        margin-right: 0 !important;
        display: block;
        text-align: center;
    }
    
    /* Asegurarse de que la primera columna se centre */
    .footer .col-md-4:first-child {
        text-align: center !important;
        margin: 0 auto;
        padding-bottom: 10px;
        
    }
    
    /* También eliminamos márgenes o paddings extra en la lista */
    .footer .col-md-4:first-child ul {
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center;
    }
    
    .footer .highlight img {
        height: 30px;
        margin-top: 10px;
    }

    .auth-wrapper {
        flex-direction: column;
    }

    .auth-image {
        display: none;
    }

    .auth-form-wrapper {
        padding: 40px 30px;
    }

    .auth-logo-mobile {
        display: block;
    }

    .auth-form-wrapper h2 {
        text-align: center;
    }
    
	.industries-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.industry-item {
		padding: 1.5rem 1.25rem;
		min-height: 130px;
	}
}

@media (max-width: 480px) {
	.industries-container {
		grid-template-columns: 1fr;
	}
}

/* Asegura que los dos de abajo estén centrados */
@media (min-width: 768px) {
    .row:last-child {
        display: flex;
        justify-content: center;
    }

    .logos-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        max-width: 800px;
    }

    .logo-item {
        width: 120px; /* Todos los logos tienen el mismo tamaño */
    }

    /* Primera fila: 5 logos */
    .logo-item:nth-child(-n+5) {
        flex: 0 1 auto; /* Evita que los logos se estiren */
    }

    /* Segunda fila: 3 logos centrados */
    .logo-item:nth-child(n+6) {
        flex: 0 1 auto; /* Mantiene el mismo tamaño */
    }

    /* Contenedor para la segunda fila, centrado */
    .logos-row:last-child {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .service-column {
        padding-top: 10px;
    }
}

@media (max-width: 991px) {
    .navbar .container .mobile-image {
        display: block;
    }

    /* Ocultar la imagen de escritorio en pantallas pequeñas */
    .navbar .container .desktop-image {
        display: none;
    }
    
    .header-section .row {
        text-align: center; /* Centra el texto */
        display: flex;
        flex-direction: column;
        align-items: center; /* Asegura el centrado */
        justify-content: center;
        margin-top: -50px; /* Subir un poco el contenido */
    }

    .col-lg-6 {
        width: 100% !important; /* Asegura que ocupe todo el ancho */
        max-width: 600px; /* Evita que se haga demasiado ancho */
    }

    .col-lg-6 img {
        margin-top: 50px;
        max-width: 80%; /* Reduce el tamaño de la imagen en móviles */
    }

    .mini-title {
        visibility: hidden;
    }

    .service-column {
        max-width: 90%; /* Ajusta el ancho de la card */
        margin: 0 auto 20px auto !important; /* Centra y da margen inferior */
    }

    .service-title {
        margin-bottom: 40px;
        margin-top: -50px;
    }
}

/* ==== LOGIN & REGISTER ==== */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.auth-image {
    background-color: #0b0b0b;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='2' cy='2' r='1' fill='rgb(69, 69, 69)' /></svg>");
    background-repeat: repeat;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-image img.logo {
    max-width: 180px;
    margin-bottom: 40px;
}

.auth-image img.social {
    max-width: 100%;
    height: auto;
}

.auth-form-wrapper {
    background-color: #0b0b0b;
    color: #ffffff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.auth-form-wrapper h2 {
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 28px;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.auth-form-wrapper form {
    width: 100%;
    max-width: 400px;
}

.form-control {
    border-radius: 10px;
    padding: 12px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.form-control::placeholder {
    color: #888;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #1a1a1a inset !important; /* color de fondo deseado */
    -webkit-text-fill-color: #ffffff !important;      /* color del texto */
    caret-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s; /* evita flash de color */
}

input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000 !important; /* color que querés cuando hay autofill y foco */
    caret-color: #000 !important;
}

input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000;
    caret-color: #000 !important; /* Asegura que el cursor sea visible */
}

.btn-register {
    background-color: #c7fb00;
    border: none;
    color: #0b0b0b;
    font-weight: bold;
    border-radius: 10px;
    padding: 12px;
    width: 100%;
    max-width: 400px;
}

.btn-register:hover {
    background-color: #a6d400;
}

.auth-logo-mobile {
    display: none;
    max-width: 150px;
    margin: 0 auto 30px auto;
}

.text-small {
    font-size: 14px;
    color: #999;
}

.eye-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 18px;
}

.eye-icon:hover {
    color: #c7fb00;
}

.quantity-controls input.qty-input {
    text-align: center;
    font-weight: bold;
}

.quantity-controls button {
    min-width: 32px;
}

.qty-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 5px;
    height: 38px;
    width: 60px;
    text-align: center;
    appearance: textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-warning {
    color: #9f8700 !important; /* Más fuerte y visible que el amarillo pálido por defecto */
}

.service-btn-secondary {
    color: #fff;
    background-color: #7ac800;
    border: none;
    transition: background-color 0.3s ease;
}

.service-btn-secondary:hover {
    background-color: #5b9500; /* Un poco más oscuro */
    color: #ffffff; /* Un tono más oscuro del texto */
}

.service-btn-secondary:focus,
.service-btn-secondary:active {
    background-color: #7ac800 !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.back-arrow {
    font-size: 1.2rem;
    cursor: pointer;
}

.cart-table th, .cart-table td {
    vertical-align: middle;
    background-color: transparent !important;
    color: #000; /* texto negro */
}

.cart-table img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.bodyconfirm {
    background-color: #fff !important;
}

/* Recuadro del resumen */
.cart-summary-box {
    border: 1px solid #cbcbcb !important;
    padding: 1.5rem;
    background-color: #fff;
    color: #000;
    border-radius: 8px;
}

.cart-back {
    color: #000;
}

.btn-outline-custom {
    background-color: #fff;
    color: #0b0b0b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 20px;
    border: 1px solid #0b0b0b !important;
    cursor: pointer;
}

.btn-outline-custom:hover {
    background-color: #96be00 !important;
    color: #fff !important;
    border: 1px solid #96be00 !important;
}

.btn-outline-custom:active {
    background-color: #dbff50 !important;
    color: #0b0b0b !important;
    border: 1px solid #dbff50 !important;
}

.order-comment {
    padding-bottom: 40px;
}

.order-form {
    background-color: #fff;
    border: 1px solid #cbcbcb !important;
    font-size: 15px;
    color: #000;
}

.summary-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    max-width: 700px;
    margin: 40px auto;
    text-align: center;
    color: #000;
}

.sidebar {
    background-color: #252525;
    color: #fff;
    width: 250px;
    min-height: 100vh;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    transition: transform 0.3s ease;
}

.sidebar .nav-link {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding: 10px 15px;
    display: block;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background-color 0.2s ease;
}

.sidebar .nav-link:hover {
    background-color: #c7fb00;
    color: #0b0b0b !important;
    font-weight: bold;
}

/* Activo (cuando estás en la página) */
.sidebar .nav-link.active {
    color: #c7fb00 !important;
    font-weight: bold;
    background-color: transparent;
}

/* Hover + activo (cuando estás en la página y pasás el mouse) */
.sidebar .nav-link.active:hover {
    background-color: #c7fb00;
    color: #0b0b0b !important;
}

.locked,
.locked span,
.locked i {
    color: #8a8a8a !important;
}

.locked:hover,
.locked:hover span,
.locked:hover i {
    color: #969696 !important;
    background: transparent !important;
    cursor: default !important;
    font-weight: 400 !important;
}

#toggleSidebar {
    display: none;
}

#menu-tutoriales,
#menu-tutoriales-mobile {
  transition: none !important;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    #toggleSidebar {
        display: block;
        margin-bottom: 20px;
        background-color: transparent;
        border: none;
        color: #c7fb00;
        font-size: 24px;
    }
}

.mobile-navbar {
    background-color: #252525;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1050;
    border-bottom: 1px solid #333;
}

.mobile-navbar .nav-link {
    color: #fff;
    padding: 10px;
    font-size: 15px;
    border-radius: 6px;
}

.mobile-navbar .nav-link:hover {
    background-color: #c7fb00;
    color: #0b0b0b;
    font-weight: bold;
}

.mobile-menu {
    padding: 10px 0;
}

.main-content {
    margin-left: 250px;
    padding: 20px;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
    }
}

.icon-button {
  background: none !important;
  border: none !important;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 0 3px;
}

.icon-button:hover {
  color: #c7fb00;
}

.icon-button:focus {
  outline: none;
  box-shadow: none;
}

/* Estilo para el header del popover */
.popover-header {
    background-color: #252525 !important;
    color: #c7fb00 !important;
    font-weight: bold;
}

/* Cuerpo del popover */
.popover-body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.custom-info-btn {
    border-color: #c7fb00;
    color: #c7fb00;
}

.custom-info-btn:hover {
    background-color: #c7fb00;
    color: #0b0b0b;
}

.badge.bg-success {
    background-color: #7ac800 !important; /* Verde claro tuyo */
    color: #ffffff !important;
}

.badge.bg-warning {
    background-color: #e4a700 !important; /* Amarillo fuerte */
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: #d9534f !important; /* Rojo Bootstrap más intenso */
    color: #fff !important;
}

.table-rounded {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
}

.modal-dashboard-centered .modal-content {
    background-color: #ffffff;
    color: #000000;
}

.modal-dashboard-centered .form-label,
.modal-dashboard-centered .modal-title {
    color: #000000;
}

.modal-dashboard-centered .form-control,
.modal-dashboard-centered .form-select {
    color: #000000;
    background-color: #f8f8f8;
    border-color: #ccc;
}

.pagination .page-link {
  background-color: transparent;
  color: #fff;
  border: none;
  transition: all 0.1s ease-in-out;
}

.pagination .page-link:hover {
  background-color: transparent;
  color: #c7fb00;
}

/* Botón activo */
.pagination .page-item.active .page-link {
  background-color: transparent;
  color: #c7fb00;
  font-weight: bold;
  text-decoration: underline;
  border: none;
}

/* Sacamos el borde feo del focus */
.pagination .page-link:focus {
  box-shadow: none;
}

.nav-tabs {
    border-bottom: 2px solid #333;
}

.nav-tabs .nav-link {
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s;
}

.nav-tabs .nav-link:hover {
    background-color: #2c2c2c;
    color: #c7fb00;
}

.nav-tabs .nav-link.active {
    background-color: #c7fb00;
    color: #000;
    font-weight: bold;
    border-color: #c7fb00 #c7fb00 #1a1a1a;
}

.btn-user {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    padding: 6px 10px;
    line-height: 1;
}

.btn-user:hover {
    color: #c7fb00;
}

.dropdown-menu {
    background-color: #1a1a1a;
    border-radius: 8px;
    font-size: 0.95rem;
    min-width: 200px;
}

.dropdown-header {
    color: #c7fb00;
    padding: 0.5rem 1rem;
    font-weight: bold;
}

.dropdown-link {
    color: #fff !important;
    transition: background-color 0.2s ease;
}

.dropdown-link:hover {
    background-color: #c7fb00;
    color: #000 !important;
}

/* 1. Estilo para el enlace 'Tutoriales' cuando el sub-menú está ABIERTO (clase .show) */
.dropdown-menu .dropdown-item.dropdown-toggle.show {
    /* Aplica el estilo deseado para el estado activo */
    color: #c7fb00 !important;
    font-weight: bold !important;
    
    /* Elimina el fondo no deseado de Bootstrap al estar activo */
    background-color: transparent !important; 
}

/* 2. CLAVE: Evitar que el color negro no deseado aparezca en el estado :focus (el momento del click) */
/* Aplicamos el mismo estilo de abierto para que no haya un cambio abrupto */
.dropdown-menu .dropdown-item.dropdown-toggle:focus {
    color: #c7fb00 !important;
    font-weight: bold !important;
    background-color: transparent !important;
}

/* 3. CLAVE: Asegurar que el estilo de activo se MANTENGA incluso si el mouse está sobre él. */
/* Esto anula el estilo de :hover (fondo amarillo) cuando el menú está abierto. */
.dropdown-menu .dropdown-item.dropdown-toggle.show:hover {
    /* Mantiene los estilos del estado 'abierto' */
    color: #c7fb00 !important;
    font-weight: bold !important;
    background-color: transparent !important; 
}

.dropdown-toggle::after {
    margin-left: -5px;
}

/* Este CSS hace que el sub-menú se muestre DENTRO del flujo normal del menú principal */
.dropdown-menu-compact {
    position: static !important; /* Desactiva la posición flotante de dropdown */
    transform: none !important;  /* Desactiva cualquier transformación para el posicionamiento */
    border: none !important;     /* Elimina el borde de separación */
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none !important; /* Elimina la sombra si la tiene */
    background-color: transparent !important; /* Fondo transparente */
}

/* Opcional: Para darle una pequeña indentación a los links */
.dropdown-menu-compact .dropdown-item {
    padding-left: var(--bs-dropdown-item-padding-x, 1rem);
}

#logout-btn {
    cursor: pointer;
}

.custom-alert {
    color: #43520b;
    background-color: #e0edb0;
    border-color: #e0edb0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.custom-alert .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    color: #43520b;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.custom-alert .close-btn:hover {
    color: #768b26;
}

#editor-container-qill {
    height: 300px;
    background-color: #181b1e;
    color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.button-quill {
    margin-top: 10px;
}

#editor-container-qill .ql-editor::before {
    color: #888 !important; /* Cambiá este color según tu preferencia */
    font-style: italic;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #333;
}

.ql-container.ql-snow {
    border: 1px solid #333;
}

.form-label-qill {
    color: #fff;
    padding-bottom: 10px;
}

.custom-card-qill {
    background-color: #212529;
    color: #fff;
    border: 1px solid #4d5154;
}

.select2-container--default .select2-selection--multiple {
    background-color: #0b0b0b;
    border: 1px solid #444;
    color: #c7fb00;
    padding: 0.4rem;
    min-height: 50px;
    font-family: 'Montserrat', sans-serif;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #252525;
    border: 1px solid #c7fb00;
    color: #c7fb00;
    padding: 0.2rem 0.5rem;
    margin-top: 0.2rem;
    font-size: 0.85rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ff4d4d;
    margin-right: 5px;
    cursor: pointer;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  color: #22cc00;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #22cc00;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #22cc00 !important;
}


.choices__list--dropdown .choices__item {
    background-color: #fff;
    color: #000;
}

/* HOVER EN LA LISTA */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #fff;
    color: #000;
}

/* BACKGROUND Y BORDE DEL CHIP */
.choices__list--multiple .choices__item {
    background-color: #c7fb00;
    color: #000;
    border: 1px solid #c7fb00;
}

/* X (remove button) dentro del chip */
.choices__list--multiple .choices__item .choices__button {
    border-left: 1px solid #000000 !important;
    color: #000 !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
    opacity: 1;
}

.choices__list--multiple .choices__item .choices__button::after {
    color: #000 !important; /* Cambia el color de la "X" */
    font-weight: bold;
}

.choices__list--multiple .choices__item .choices__button:hover::after {
    color: #333 !important;
}

/* Fondo general oscuro cuando está desactivado */
.choices.is-disabled {
    background-color: #393939 !important;
    border: 1px solid #444 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Cambiar el input visible aunque esté desactivado */
.choices.is-disabled .choices__inner {
    background-color: #393939 !important;
    cursor: not-allowed;
}

/* Fondo del input invisible de búsqueda (aunque esté presente) */
.choices.is-disabled .choices__input {
    background-color: #393939 !important;
    color: #888 !important;
    pointer-events: none;
    cursor: not-allowed;
}

/* Chips ya seleccionados */
.choices.is-disabled .choices__item--selectable {
    background-color: #444 !important;
    cursor: not-allowed;
}

.choices.is-disabled .choices__list--multiple .choices__item .choices__button {
    cursor: not-allowed;
}

/* Cuando está chequeado */
.form-check-input:checked {
    background-color: #c7fb00;
    border-color: #c7fb00;
}

/* La tilde negra */
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.173 13.727L1.075 8.73l1.36-1.366 3.738 3.726L13.578 2.98l1.36 1.368z'/%3E%3C/svg%3E");
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(199, 251, 0, 0.1); /* glow verde */
    border-color: #c7fb00 !important; /* reemplaza el azul por verde */
}

.link-color a{
    color: #c7fb00 !important;
}

.ql-font-serif { font-family: serif; }
.ql-font-monospace { font-family: monospace; }
.ql-font-sans-serif { font-family: sans-serif; }

.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }

.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Hover manual (forzar estilo) */
#notification-list button:hover {
  background-color: #2d3238 !important;
  color: white;
}

/* Activo personalizado */
#notification-list button.active-custom {
  background-color: #2d3238 !important;
  border-left: 3px solid #c7fb00 !important;
  color: white;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #c7fb00;
  border-radius: 50%;
}

@media (max-width: 768px) {
  #notification-detail {
    display: none;
  }

  #notification-detail.mobile-visible {
    display: block;
  }

  #notification-list.mobile-hidden,
  #pagination-container.mobile-hidden {
    display: none;
  }
}

/* Buscador de usuario para tutoriales (mismo estilo que Pixel Admin) */
.user-searchbox {
  position: relative;
}

.user-suggestions {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .5rem;
  max-height: 260px;
  overflow: auto;
  display: none;
}

.user-suggestions .item {
  padding: .5rem .75rem;
  cursor: pointer;
  background: #fff;
  color: #000;
}

.user-suggestions .item:hover {
  background: #f2f2f2;
}

.user-suggestions .item strong {
  color: #000;
}

.user-suggestions .item small {
  color: #555;
}