* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /* LOGIN */  
  body.login {
    background-color: #121212 !important;    
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
    background-position: center;
    background-size: cover;
  }
  
  body.login .login-container {
    margin-top: -175px !important;
    padding: 30px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 10;
    text-align: center;
  }
  
  body.login .form-group-default label {
    color: #AA2A2A !important;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 3px;
    transition: opacity .2s ease;
  }
  
  body.login .login-sidebar {
    width: 100%;
    height: 50vh;
    border-radius: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 500px !important; 
    min-height: 60vh !important;
    padding: 3rem !important;
    flex-direction: column;
    background-color: rgba(12, 41, 1, 0.151) !important;
    border: 1px solid rgba(7, 7, 7, 0.199) !important;
    border-top: 5px solid #AA2A2A !important;
    max-width: 450px;
    min-width: 220px; 
    overflow-y: auto;
    box-sizing: border-box;
  }
  :root {
    --form-group-padding: 7px 12px -2px !important;
  }
  body.login .form-group-default {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50px;
    background-color: transparent !important;
    border-bottom: 2px solid #AA2A2A !important;
    outline: none;
    margin-bottom: 1rem;
    padding: 0px 12px 0px !important;
  }

  body.login .form-group-default.focused {
    border-color: #AA2A2A !important;
  }
  body.login .form-group-default label {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500;
    color: rgb(5, 5, 5) !important;
  }
  
  body.login .login-button {
    
    border-radius: 55px;
    background: #AA2A2A !important;
    color: rgb(0, 0, 0) !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: 0.5s;
    padding: 7px 20px !important;
  }
  
  .button-second {
    width: 100%;
    height: 45px;
    border-radius: 55px;
    background: transparent;
    color: #AA2A2A !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid rgb(19, 17, 17) !important;
    cursor: pointer;
    transition: 0.5s;
    opacity: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-button:hover {
    box-shadow: 0px 0px 5px #ffffffa4;
  }
  
  .button-second:hover {
    opacity: 1;
  }
  
  .faded-bg {
    background: none !important;
    box-shadow: none !important;
  }
.body.login .form-group-default {
    padding: 0 12px 0 !important;
    background-color: #513c8b !important;
}
/*FORMULARIO*/
.form-control {
  background-image: none;
  border: 1px solid #e4eaec;
  color: #ffffff !important;
}


/* 🔹 Aplica cambios SOLO en el panel (NO en el login) */
html body:not(.login), html body:not(.login) .app-container, html body:not(.login) .panel, .navbar, .app-container, .card, html body:not(.login) .content, html body:not(.login) .container-fluid, html body:not(.login) .side-menu, html body:not(.login) .panel-body {
    background-color: #293241 !important;
    color: white !important;
}
.tab-content {
    background-color: #293241 !important;
}
.new-setting .panel-title {
    background-color: #293241 !important;
}
.voyager .navbar .navbar-nav .dropdown-menu, .voyager .navbar.navbar-default .navbar-nav .dropdown-menu {
    background-color: #394458 !important;
}
.panel-footer {
  background: #293241 !important;
}
.btn-default {
  background: #293241 !important;
}
.table, .panel-body, .card,  .select2-continer, .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #5a3d3d !important;
    color: aliceblue !important;
}

.btn, .form-control, .panel, .card, .table-bordered, .pagination, .voyager .btn-primary {
    border-color: #AA2A2A !important;
}

h1, h2, h3, h4, h5, h6, label, p, a, .breadcrumb, .panel-title {
    color: rgb(255, 255, 255) !important;
}

.sidebar .navbar, .navbar-default {
    background-color: #293241 !important;
}

.sidebar a, .navbar a, .nav-link{
    color: white !important;
}

.sidebar a:hover, .navbar a:hover, .nav-link:hover {
    background-color: #293241 !important;
    color:#AA2A2A !important;
}
.voyager .side-menu .navbar-header {
  background: #AA2A2A !important;
  border-color: #AA2A2A !important;
}
.table-striped > tbody > tr:nth-of-type(even), .table > tbody > tr {
    background-color: #293241 !important;
    color: white !important;
}

input:not(body.login input), select:not(body.login select), textarea:not(body.login textarea) {
    background-color: #513c8b !important;
    color: white !important;
    border: 1px solid #293241!important;
}

body.login, body.login, body.container, .card {
    background-color: white !important;
    color: black !important;
}

.voyager .table>thead>tr>th {
    background-color: #513D85 !important;
    color: white !important;
}
.breadcrumb {
  background-color: #AA2A2A !important;
  border: 1px solid #AA2A2A !important;
  border-radius: 25px;
  font-size: 15px !important;
  list-style: none;
  padding: 4px 15px 4px 10px;
  position: relative;
  top: 2px;
}
.breadcrumb li:last-child {
  color: #ffffff !important;
  cursor: pointer;
  font-weight: 400;
}
#voyager-loader {
  background: #293241 !important;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
#embed-api-auth-container {
  background: #3a252500 !important;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05) !important;
  padding: 50px;
  text-align: center;
}

/* Asegura que solo afecte a los botones dentro de la tabla */
.table .btn, .table .btn-primary, .table .btn-danger, .table .btn-success, 
.table .btn-warning, .table .btn-info {
    background-color: #293241 !important; /* Color de fondo oscuro */
    color: white !important; /* Texto blanco */
    border: 0px solid #AA2A2A !important; /* Borde verde */
    border-radius: 8px; /* Bordes redondeados */
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    font-size: 0px !important;
    padding: 0px 0px 0px 0px !important;
    
    display: flex !important;
    gap: 8px 8px !important; /* Espaciado entre los botones */
    justify-content: center !important; /* Centrar los botones */
    align-items: center !important;
    flex-wrap: wrap !important; /* Permite que los botones se acomoden si no caben */
    margin: 4px 6px -2px 6px !important;
    size: 1px;
    height: 22px;
    width: 37px;
}
.btn-group-sm>.btn i, .btn-sm i {
  font-size: 14px !important;
  position: relative !important;
  top: 1px !important;
}


/* Efecto hover para botones dentro de la tabla */
.table .btn:hover, .table .btn-primary:hover, .table .btn-danger:hover, 
.table .btn-success:hover, .table .btn-warning:hover, .table .btn-info:hover {
    background-color: #AA2A2A !important; /* Cambia a verde en hover */
    color: black !important; /* Texto negro en hover */
    box-shadow: 0px 0px 10px rgba(113, 148, 33, 0.6); /* Efecto de brillo */
}
table.dataTable tbody td, table.dataTable tbody th {
  padding: 5px 8px !important;
}
.voyager .btn.btn-warning {

  padding:1px !important;
}
.panel-bordered>.panel-body {
    padding: 30px 15px 30px !important;
}

.row>[class*=col-] {
    margin-bottom: 80px !important;
}

.bootstrap-datetimepicker-widget table td.day {
    color: black !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
    color: black !important;
}

.select2-container--default .select2-results>.select2-results__options {
  color: black !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black !important;
}

.modal .modal-dialog .modal-footer .btn.btn-default {
  color: #ffffff;
}
.file_link {
  background-color: #17158c !important;
}