/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0  rgba(0, 0, 0, .1);
}

.sidebar .nav-link {
    font-weight: 500;
    color: white;
}

.sidebar .nav-link.active {
    color: white;
    background-color: #F3A14F;
}

.sidebar .nav-link:hover {
    background-color: #c97d32;
    color: #FFF;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/* Footer Styles (Mobile Menu) */
.fixed-bottom {
    z-index: 1000; /* Ensure it's on top */
}

/* Hide sidebar on small screens */
@media (max-width: 767.98px) {
    .sidebar {
        display: none;
    }
}

.btnsesion{
    background-color: #00aaab;
  color: #ffffff;
 }
.tituloblanco{
    color: #fff;
    text-align: center;
 }
 
 .bodyinicio{

background: #F3A14F;
 }

 .bodyregistro {
  background-image: url('../img/fondoinicio.webp'); /* Ajusta la ruta */
  background-size: cover;     /* La imagen cubre todo */
  background-repeat: no-repeat; /* No se repite */
  background-position: top;   /* Por defecto arriba */
}

/* Para tablets (pantallas medianas) */
@media (max-width: 1024px) {
  .bodyregistro {
    background-color: #efe8e2; /* Se centra verticalmente */
    background-image: none;
  }
}

/* Para celulares (pantallas pequeñas) */
@media (max-width: 768px) {
  .bodyregistro {
    background-color: #efe8e2; /* Imagen se baja */
    background-image: none;
  }
}


 .bgregistro{
    background-color: #00aaab;
 }

 

 .contentsesion{
    background: #f3a14f;
    background: linear-gradient(360deg,rgba(221, 208, 196, 1) 0%, rgba(252, 252, 252, 1) 64%);
    padding: 50px;
 }
.cardfondo{
    background-color: #f3a14f;
}
.etiqueta-sesion{
    color: #00aaab;
}

.menufooter{
 background-color: black;
 color: #FFF;
}



#cerrarSesionFlotante {
    position: fixed;          /* Posicionamiento fijo para que flote */
    bottom: 80px;             /* 20px desde la parte inferior */
    right: 20px;              /* 20px desde la derecha */
     width: 50px;           /* Ancho fijo */
    height: 50px; 
    background-color: red;
    border-radius: 100%;       /* Circular */
    padding: 10px;            /* Espacio alrededor del icono */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
    z-index: 1000;            /* Por encima de otros elementos */
}

#cerrarSesionFlotante a {
    color: #fff;           /* Color del icono */
    text-decoration: none;    /* Sin subrayado */
    display: block;           /* Ocupa todo el contenedor */
}

#cerrarSesionFlotante a:hover {
    color: #007bff;           /* Color al pasar el ratón */
}



/* Estilo para los labels flotantes */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

input,
select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: none;
}

label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #888;
  pointer-events: none;
  transition: all 0.2s ease;
}

.contentsesion label {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  font-size: 1rem;
  color: #00aaab; /* tu color */
  pointer-events: auto;
}

input:focus + label,
select:focus + label,
input:not(:placeholder-shown) + label,
select:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 12px;
  color: #333;
}

input:focus,
select:focus {
  outline: none;
  border-color: #42AEA8;
}

.card_dashboard{
    background-color:#c85525; 
    color:#fff;
   }
   .nombreusuario{
    color: #fff;
    font-size: 20px;
    padding: 3px;
    margin: 3px;
   }

   .table-responsive {
    overflow-x: auto !important; /* solo scroll horizontal si es necesario */
    padding-bottom: 0 !important; /* elimina padding extra inferior */
    margin-bottom: 0 !important;  /* elimina margen inferior */
}
.btn-amarillo{
  background-color: #F3A14F;
    color: #f8f9fa;
}

/* Redondear inputs y darle mejor estilo */
.modal-content {
  border-radius: 20px;
  border: none;
}

.modal-header {
  border-bottom: none;
}

.modal-footer {
  border-top: none;
}

.form-control, 
.form-select, 
textarea {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
}

.form-label {
  margin-bottom: 6px;
  color: #333;
}

.modal-title {
  font-weight: 600;
}