body * { 
    /* display: flex; */
    font-family: Nunito;
}

.login-panel {
    background-color: #F7F2F2;
}

.login-container {
    display: flex;
    flex-direction: column; 
    background-color: white; 
    height: auto;
    width: 70%; 
    border-radius: 1.25rem; 
}

.login-input-panel {
    border-radius: 0.625rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 0.625rem 1.25rem 0.625rem 1.25rem;
    background-color: #F8F8F8;

}

.login-input {
    width: 100%; 
    padding: 0.3125rem;
    border: none; 
    outline: none;
    background-color: #F8F8F8;
}

.boton-login {
    display: block;
    background-color: #EA974A;
    width: 100%; 
    height: auto;
    border: none; 
    padding: 10px 30px; 
    border-radius: 0 0 10px 10px; 
    text-align: center; 
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.app-left {
    display: flex;
    flex-direction: column;
    background-color: #1B58A2;
    border-right: 1px solid lightgray;
}

.app-logo {
    display: flex;
    justify-content: center;
    padding: 0.625rem;
    color: white;
}

.app-user {
    display: flex;
    justify-content: center;
    padding: o.625rem;
    color: white;
    font-size: 12px;
}

.app-main-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border-top: 1px solid lightgray;
}

.app-menu {
    display: flex;
    flex-direction: column;
    padding: 0.625rem;
}

.app-menu-footer {
    display: flex;
    flex-direction: column;
    border-top: 1px solid lightgray;
    padding: 0.625rem;
}

.app-container {
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.app-toolbar {
    display: flex;
    height: 80px;
    width: 100%;
    border-bottom: 1px solid lightgray;
}

.app-toolbar-search {
    display: flex;
    flex: 3;
    margin: 1.25rem;
    align-items: center;
}

.app-toolbar-otros {
    display: flex;
    flex: 1;
}

.app-toolbar-notify {
    display: flex;
    flex: 1;
    border-left: 1px solid lightgray;
    justify-content: center;
    align-items: center;
}

.app-toolbar-info {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;
    border-left: 1px solid lightgray;
}

.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
/*
    justify-content: center;
    align-items: center;
*/
    padding: 0.625rem;
}

.menu > a {
    /*color: #1B58A2;*/
    color: white;
    text-decoration: none;
    text-align: center;
}

.menu > a:hover {
    color: black;
}

.app-card {
    display: flex; 
    flex-direction: column; 
    padding: 10px; 
    background-color: #F7F2F2; 
    margin: 10px; 
    border-radius: 10px; 
    height: 150px; 
    width: 30%
}

.flex {
    display: flex;
}

.w-30 {
    width: 30%;
}

.w-70 {
    width: 70%;
}

.w-100 {
    width: 100%;
}

.p-10 {
    padding: 0.625rem;
}

.p-20 {
    padding: 1.25rem;
}

.pt-10 {
    padding-top: 0.625rem;
}

.pr-20 {
    padding-right: 1.25rem;
}

.pb-10 {
    padding-bottom: 0.625rem;
}

.pl-20 {
    padding-left: 1.25rem;
}

.h-full {
    height: 100vh;
}

.column {
    flex-direction: column;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.m-20 {
    margin: 1.25rem;
}

.mr-10 {
    margin-right: 0.625rem;
}

.mt-10 {
    margin-top: 0.625rem;
}

.mt-20 {
    margin-top: 1.25rem;
}

.mr-20 {
    margin-right: 1.25rem;
}

.ml-20 {
    margin-left: 1.25rem;
}

.mt-40 {
    margin-top: 2.5rem;
}

.mb-5 {
    margin-bottom: 0.3125rem !important;
}

.mb-10 {
    margin-bottom: 0.625rem;
}

.mb-20 {
    margin-bottom: 1.25rem;
}

.mb-40 {
    margin-bottom: 2.5rem;
}

.br-10 {
    border-radius: 0.625rem;
}

.f-18 {
    font-size: 18px;
}

.f-14 {
    font-size: 14px;
}

.f-20 {
    font-size: 20px;
}

.bold {
    font-weight: bold;
}
/* ===== FIX: evitar que el contenido (DataTables scrollX) ensanche la página ===== */

/* 1) El contenedor derecho (contenido) DEBE poder encogerse en un layout flex */
.app-container{
  min-width: 0;        /* CLAVE en flex */
  overflow-x: hidden;  /* evita que algo interno agrande el layout */
}

/* 2) Sidebar no debe encogerse */
.app-left{
  flex: 0 0 auto;
}

/* 3) El padre que contiene app-left + app-container (horizontal) debe ser flex */
.h-full.flex, 
.flex.h-full,
.flex{
  /* si ya lo es, no pasa nada; lo dejo por compatibilidad */
}

/* 4) DataTables: el scroll horizontal vive SOLO en el wrapper interno */
#tablaDetalle_wrapper{
  width: 100%;
  max-width: 100%;
}
#tablaDetalle_wrapper .dt-scroll{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
#tablaDetalle_wrapper table.dataTable th,
#tablaDetalle_wrapper table.dataTable td{
  white-space: nowrap;
}