/*=========================BODY================================*/
body {
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*=========================HEADER================================*/
.menu-fijado {
  position: fixed;
  z-index: 1000;
  top: 0;
  box-shadow: 0px 4px 3px #58582D;
}
#miheader {
  background-color: #8E8E4F !important;
  color: white !important;
}
#miheader-hexagramas {
  margin-bottom: 100px !important;
}
#container-detalle-hexagrama {
  margin-top: 100px !important;
}

/*=========================SLIDER================================*/
#carousel h3{
	color:#2F2F1B !important;
}
#carousel p{
	color:white;
}
#carousel-letras{
color:pink;	
}
#carousel-p{
background-color: rgba(142, 142, 79, 0.50);		
}
/*=========================SECCION ORACULO================================*/
#seccion-oraculo a {
  color: #8E8E4F !important;
}
#seccion-oraculo  {
  border-radius: 15px;
}

/*=========================AUDIO================================*/

#audio  {
  /*background: rgba(5, 7, 12, 0.42);*/
  border-radius: 15px;
  background-color: #D5D4BA;

}
 #audio  a {
color: #58582D!important;		
}
.navbar .navbar-toggler .navbar-toggler-icon {
  color: white;
}

  #audio3  a {
color: #58582D!important;		
}


#exampleModal .modal-body  a{
	color: #58582D!important;
}
/*=========================AYUDA================================*/

#ayuda {
background-color: #D5D4BA;
border-radius: 15px;
}
/*=========================SECCION CONTACTO================================*/
#contenedor-formulario-contacto {

}

#seccion-contacto {
border-radius: 15px;

}


#form-email {
background: rgba(5, 7, 12, 0.22);
border-radius: 15px;
padding: 15px;
margin-bottom: 15px;
}
#boton-formulario{
border-radius: 15px;	
}

/*=========================FOOTER================================*/
footer {
  background-color: rgba(142, 142, 79, 1.00);
  color: white; 
}
footer a {
  color: white;
}
footer a:hover {
  color: #4A4A2B;
}
#iconos .bi {
  font-size: 26px;
  padding: 0 8px;
  color: #FFFFFF;
}

 #milogo{
	font-family:"Trajan Pro";
}



/*=========================JAVASCRIPT================================*/
.enfoco {
  width: 50%;
  background-color: #8E8E4F;
  text-align: center;
  color: #ffffff;
}
.fueradefoco {
  width: 50%;
  placeholder: "6,7,8,9";
  text-align: center;
}
/*========================= QUERIES PANTALLA 300================================*/
@media (min-width:300px) {
  .nav-item {
    border-bottom: 1px solid #FFFFFF;
  }
  #introduccion {
    width: 100% !important;
  }
  #id-gracias img {
    width: 100%;
    height: 100%;
  }
}
/*=========================SM QUERIES PANTALLA 576================================*/
@media (min-width:576px) {
  .img {
    width: 150px;
    height: 100px;
  }
}
/*=========================MD QUERIES PANTALLA 768================================*/
@media (min-width:768px) {
  #letras-menu {
    display: inherit !important;
  }
  #introduccion {
    display: inherit !important;
  }
  .nav-item {
    border-bottom: hidden;
  }
  #itemhexagramas {
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
  }
}
/*=========================LG QUERIES PANTALLA 992================================*/
@media (min-width:992px) {
  #letras-menu {
    display: none !important;
  }
}
/*=========================XL QUERIES PANTALLA 1200================================*/
@media (min-width:1200px) {
  #letras-menu {
    display: none !important;
  }
  .carousel-item #slide1, #slide2 {
    height: 550px;
  }
}
/*=========================XXL QUERIES PANTALLA 1400================================*/
@media (min-width:1400px) {
  #letras-menu {
    display: none;
  }
  #seccion-oraculo {
    max-width: 800px;
  }
  #seccion-contacto {
    max-width: 800px;
  }
  #detalle-hexagrama {
    max-width: 800px;
  }
}

/*=========================PAG-ORACULO-RESULTADO================================*/
#retroceder a .bi {
  color: #555520 !important;
}
.hexagrama-oraculo-resultado {
  margin-top: 100px !important;
}
/*=========================PAG-HEXAGRAMAS================================*/
#introduccion a .bi {
  color: #555520 !important;
}
/*=========================PAG-DETALLE-HEXAGRAMA================================*/
#detalle-hexagrama {
  color: #4A4A2B;
}
.accordion-button {
  background-color: #8E8E4F !important;
  color: white !important;
}
.boton-hexagramas .btn {
  background-color: #4A4A2B;
  width: inherit;
}
.boton-hexagramas .btn {
  outline-color: #8E8E4F;
}
.card {
  min-height: 320px !important;
}
.card-body {
  /*min-height: 420px!important;*/
}
.card-header {
  min-height: 80px !important;
}

 #imagen-hexagrama-detalle{
	height: 190px;
	 width:166px;
}

/* ============================================================
   DARK MODE OVERRIDES (FULL THEME)
   ============================================================ */

[data-bs-theme="dark"] body {
    background-color: #121212 !important; /* Material Dark Background */
    color: #e0e0e0 !important;
}

/* Header Dark Mode */
[data-bs-theme="dark"] header.menu {
    background-color: #1e1e1e !important; /* Darker header */
    border-bottom: 1px solid #333;
}
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .nav-link.active {
    color: #fff !important;
    font-weight: bold;
}

/* Cards & Containers */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .result-card,
[data-bs-theme="dark"] .contact-card,
[data-bs-theme="dark"] .login-card,
[data-bs-theme="dark"] .tab-content {
    background-color: #1e1e1e !important;
    border-color: #333;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: #2c2c2c !important;
    border-color: #333;
    color: #e0e0e0;
}

/* Inputs & Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #2c2c2c;
    border-color: #444;
    color: #fff;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #aaa;
}
[data-bs-theme="dark"] .form-control:focus {
    background-color: #333;
    color: white;
    border-color: #8E8E4F;
    box-shadow: 0 0 0 0.25rem rgba(142, 142, 79, 0.25);
}

/* Text Colors */
[data-bs-theme="dark"] .text-muted {
    color: #b0b0b0 !important;
}
[data-bs-theme="dark"] .text-secondary {
    color: #cccccc !important;
}
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5 {
    color: #f0f0f0 !important;
}

/* Specific Component Overrides */
[data-bs-theme="dark"] .moving-line-text {
    background-color: #383120; /* Darker yellow/brownish for warning context */
    border-left-color: #d4a017;
    color: #ececec;
}
[data-bs-theme="dark"] .hexagram-visual {
    background-color: #ffffff !important; /* Keep hexagram images background white so they are visible */
    border-radius: 4px;
}
[data-bs-theme="dark"] .alert-info {
    background-color: #0c5460;
    color: #d1ecf1;
    border-color: #0c5460;
}
[data-bs-theme="dark"] .alert-success {
    background-color: #1e4620;
    color: #d4edda;
    border-color: #c3e6cb;
}
[data-bs-theme="dark"] .bg-light {
    background-color: #121212 !important; /* Override light backgrounds */
}

/* Footer Dark Mode */
[data-bs-theme="dark"] footer {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333;
}

/* Tabs */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #b0b0b0;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #1e1e1e;
    border-color: #333 #333 #1e1e1e;
    color: #fff;
}
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: #333;
}

/* AI Response Box Dark Mode */
[data-bs-theme="dark"] .ai-response-box {
    background-color: #132235 !important;
    border-left-color: #0d6efd;
    color: #e0e0e0;
}