html {
  scroll-behavior: smooth;
  --principal-text-color:#E0E0E0;
  /*menus podrian ser diferentes*/
  --primary-color:rgba(88, 16, 20, 1);
  --primary-text-color:#E0E0E0;
  
  --primary-border-color:rgba(95,100,5,.5);
  --primary-border-color-shadow:rgba(171, 176, 69, 0.15);

  --primary-hover-color:rgba(95,100,5,1);
  --primary-text-hover-color:#fff;
 
  
  /*contenido*/
  --content-primary-color:rgba(88, 16, 20, 1);
  --content-primary-text-color:#E0E0E0;

  --content-primary-border-color:rgba(95,100,5,.2);
  --content-primary-border-color-shadow:rgba(95,100,5,.3);

  --content-primary-hover-color:rgba(95,100,5,1);

  --content-primary-text-important:rgba(95,100,5,1);

  /*paneles*/
  --content-panel-background-color:rgba(50,50,50,1);
  --bs-card-bg:hsla(0, 0%, 0%, 1);
  --content-paneltransparent-background-color:rgba(50,50,50, 0.7);


  /*background general*/
  --principal-soft-background:hsla(0, 0%, 0%, 1);
  --principal-soft-background1:rgb(82, 65, 65);
  --principal-soft-background2:rgb(67, 44, 44);


--principal-acent:#D4AF37;
}

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #FFF;
  --bs-gray: rgba(147, 156, 159, 1);
  --bs-gray-dark: #372b27;
  --bs-gray-100: rgb(17, 19, 19);
  --bs-gray-200: rgb(32, 36, 37);
  --bs-gray-300: #D0CBC9;
  --bs-gray-400: #C1BAB8;
  --bs-gray-500: #A29894;
  --bs-gray-600: rgba(147, 156, 159, 1);
  --bs-gray-700: #372b27;
  --bs-gray-800: #372b27;
  --bs-gray-900: #29201D;
  --bs-primary:  var(--principal-acent);
  --bs-default: #64544d;
  --bs-secondary: #64544d;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: var(--bs-gray-100);
  --bs-dark: #372b27;
  --bs-primary-rgb: 212, 175, 55;
  --bs-default-rgb: 100, 84, 77;
  --bs-secondary-rgb: 100, 84, 77;
  --bs-success-rgb: 40, 167, 69;
  --bs-info-rgb: 23, 162, 184;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 239, 237, 237;
  --bs-dark-rgb: 55, 43, 39;
  --bs-white-rgb: 50, 50, 50;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 207, 207, 207;
  --bs-body-bg-rgb: 245, 245, 245;
  --bs-font-sans-serif: "Titillium Web", Arial, sans-serif;
  --bs-font-monospace: "Droid Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: rgb(205,205,205);
  --bs-body-bg: rgb(29, 29, 29);
  
  --bs-emphasis-color:#fff;
  
  --bs-border-color:var(--content-primary-border-color);
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-secondary-color: rgb(156, 170, 179);

}

.btn-primary, .swal-button--confirm {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--principal-acent);
    --bs-btn-border-color: var(--principal-acent);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--principal-acent);
    --bs-btn-hover-border-color: var(--principal-acent);
    --bs-btn-focus-shadow-rgb: 217, 62, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--principal-acent);
    --bs-btn-active-border-color: var(--principal-acent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--principal-acent);
    --bs-btn-disabled-border-color:var(--principal-acent);
}



body {
  	margin: 0;
  	color: var(--principal-text-color); 
	opacity: 1;
    background-image: radial-gradient(var(--content-primary-color) 0.8px, var(--principal-soft-background) 0.2px);
	background-size: 4px 4px;
}
main{
background-image: url("/themes/igniter-orange-int/img/back.png");
  background-repeat: repeat-x;
    
}
.container{
    	color: var(--principal-text-color); 
}
body > header nav {
    border-bottom: 1px solid red;
}
#page-wrapper{
margin-top:40px;
    background-color: var(--content-paneltransparent-background-color);
}

.nav-link, .nav .navbar > li > a {
  color:  var(--principal-acent);
}

.nav-link.disabled, .nav .navbar > li > a.disabled {
  color: var( --bs-gray-600);
 }
.navbar-top {
  background-color: var(--primary-color);
      border-bottom: 1px solid  var(--primary-border-color);
}

.page-login .login-container .card .card-body, .page-login .login-container .well .card-body, .page-login .login-container .well .well, .page-login .login-container .well .thumbnail, .page-login .login-container .well .panel-body, .page-login .login-container .thumbnail .card-body, .page-login .login-container .thumbnail .well, .page-login .login-container .thumbnail .thumbnail, .page-login .login-container .thumbnail .panel-body, .page-login .login-container .panel .card-body, .page-login .login-container .panel .well, .page-login .login-container .panel .thumbnail, .page-login .login-container .panel .panel-body, .page-login .login-container .card .well, .page-login .login-container .card .thumbnail, .page-login .login-container .card .panel-body {
  background: var(--content-panel-background-color);
}
.card, .well, .thumbnail, .panel {
  background-color: var(--content-panel-background-color);
  border: 1px solid var(--content-primary-border-color);
}
.modal-content{
    background-color: var(--content-panel-background-color);
}

::placeholder {
  color: #a9a9a9; /* Example: A specific shade of gray */
  opacity: 1;    /* Firefox uses a lower opacity by default, this ensures consistency */
}
.text-muted {
    color: var(--bs-secondary-color) !important;
}

.sticky-top-menu {
    top: 50px;
    background-color: var(--primary-color);

}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
      max-width: none; 
    }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md {
max-width: none;    }
}
@media (min-width: 576px) {
    .container, .container-sm {
max-width: none;     }
}
.menu-group{    
  /*background-color: var(--primary-color)*/
}

.input-group-text {
    
    background-color: var(--content-primary-border-color);
}



/* Contenedor principal del menú */
.nav-bottom-mobile {
    
    width: 100%;
    height: 65px; /* Altura estándar de barra de navegación */
    background-color: #1e1e1e; /* Gris elevación de tu paleta */
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9999; /* Siempre arriba de todo */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}

/* Cada ítem (el botón cuadrado) */
.nav-bottom-mobile li {
    flex: 1;
    height: 100%;
    border-top: 2px solid var(--primary-border-color);
}

/* El link que envuelve el icono y texto */
.nav-bottom-mobile li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #e0e0e0; /* Blanco Humo */
    text-decoration: none;
    transition: background 0.3s ease;
}

/* Iconos de Font Awesome */
.nav-bottom-mobile li a i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    color: var(--primary-acent-color); /* Acento Oro para los iconos */
}

/* Texto debajo del icono */
.nav-bottom-mobile li a span {
    font-size: 0.7rem;
    font-weight: 500;
}

/* Estado activo o hover */
.nav-bottom-mobile li a:active, 
.nav-bottom-mobile li a.active {
    color:  var(--principal-acent);
     border-top: 2px solid var(--principal-acent);
}



/* Ajuste para el ítem central */
.nav-main-cart {
    position: relative;
    top: -20px; /* Lo eleva sobre la barra */
    overflow: visible;
    border-top: 2px solid transparent !important;
}
.nav-main-cart a.active {
    border-top: 2px solid transparent !important;
}

.nav-bottom-mobile li a:active, 
.nav-bottom-mobile li a.active {
    color: var(--principal-acent);
    border-top: 2px solid var(--principal-acent);
}

.cart-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #121212; /* "Corta" la barra con el color de fondo */
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    transition: transform 0.2s ease;
    background-color: #3d0b0e;
}

.cart-circle i {
    color:#e0e0e0 !important; /* Icono en Oro */
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
    
}


.cart-label {
    margin-top: 5px;
    color: #e0e0e0;
    font-weight: bold !important;
}
.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #D4AF37;
    color: #121212;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    border: 2px solid #581014;
}

/* Efecto al presionar (Senior Dev Touch) */
.nav-main-cart a:active .cart-circle {
    transform: scale(0.9);
    background-color: #3d0b0e;
    
}

/* Reajuste de la barra para que no oculte el círculo */
.nav-bottom-mobile {
    overflow: visible !important; 
}

.cart-circle.active {
    box-shadow: 0 0 15px var(--principal-acent);
}
.cart-button.active .cart-label,
.cart-circle.active i {
    color: var(--principal-acent) !important;
}