p {
    /*color: #344767 !important;*/
    color: #494949 !important;
}

.py-4 {
    padding-top: .5rem !important;
    padding-bottom: 1.5rem !important;
}

strong {
    /*color: #344767 !important;*/
    color: #494949 !important;
}

.text-muted strong {
    color: #7b809a !important;
}


hr.vertical {
    position: absolute;
    background-color: transparent;
    /*right: 0;*/
    right: 10px;
    top: -1em;
    width: 0.09375em;
    background-image: linear-gradient(195deg, #6A6527, #898446);
    /* margin: auto; */
    /* height: calc(100% + 32px); */
}

.dataTable-table {
    max-width: 100%;
    width: 100% !important;
    border-spacing: 0;
    border-collapse: separate;
}

.export-buttons {
    float: inline-end;
    padding: 0rem 0rem 0rem 2rem !important;
}

.dataTables_length_uppercase {
    float: right;
    padding: 0rem !important;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0;
    border-radius: 0.375rem;
    border: 1px solid #f0f2f5;
}

.dataTables_length_uppercase input {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}


.dataTables_length_uppercase select {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.dataTables_filter_uppercase {
    padding: 0rem 2rem 0rem 0rem !important;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;    
    margin-bottom: 0;
    border-radius: 0.375rem;
    border: 1px solid #f0f2f5;
}

.dataTables_filter_uppercase input {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}


.dataTables_filter_uppercase select {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.dataTables_length {
    float: right;
    padding: 1.5rem;
}

.dataTables_filter {
    float: left;
    padding: 1.5rem;
}

.dataTables_info {
    float: left;
    padding: 1.5rem;
}

.dataTables_paginate {
    float: right;
    padding: 1.5rem;
}

.dataTable-input {
    font-size: 0.875rem;
    color: #495057;
    border: 1px solid #f0f2f5;
    border-radius: 0.375rem;
    margin-left: 10px;
}

.dataTable-wrapper .dataTable-container .table thead tr th {
    padding: 0.75rem 1.5rem;
    font-weight: 400;
    opacity: 1;
    color: #727272;
    text-transform: none;
    font-size: 0.813rem;
}

.dataTable-wrapper .dataTable-container .table tbody tr td {
    padding: 0.3rem 1.2rem;
}

.sidenav {
    z-index: 999;
}

.page-item.active .page-link {
    color: #fff;
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: #6A6527;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-border-radius: 0.375rem;
    --bs-pagination-hover-color: #6A6527;
    --bs-pagination-hover-bg: #f0f2f5;
    --bs-pagination-hover-border-color: #dee2e6;
    --bs-pagination-focus-color: #6A6527;
    --bs-pagination-focus-bg: #f0f2f5;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #6A6527;
    --bs-pagination-active-border-color: #6A6527;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.alert {
    color: #fff;
}

.swal2-popup {
    width : auto;
}

.navbar-vertical .navbar-brand > img,
.navbar-vertical .navbar-brand-img {
    max-width: 100%;
    max-height: 3rem;
}

#image-login {
    background-image: url("/Content/ppp-theme/assets/img/fondo-ppp.jpg");
    background-size: cover;
}

#image-ppp {
    background-image: url("/Content/ppp-theme/assets/img/fondo-ppp.jpg");
}

.table-responsive {
    margin-top: -20px;
}

.table-block {
    margin-top: 5px !important;
}

hr.horizontal-ppp {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
    margin-top: 0px !important;
    margin-bottom: 1rem !important;
}

.navbar-vertical .navbar-nav .nav-link > i {
    min-width: 1.8rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
    text-align: center;
}

/*tbody tr:not(.row_selected):hover {
    box-shadow: 0 5px 5px #d8d8d8;
    position: relative;
    z-index: 1;
}*/

tbody tr:not(.row_selected):hover {
    background-color: #D7D763B2;
}

@media (max-width: 768px) {
    .dataTables_filter {
        float: none; /* Cambia el flotado a la derecha en pantallas pequeñas (como móviles) */
    }
}

.swal2-container {
    z-index: 9999;
}

tbody tr {
    cursor: pointer;
}

tbody tr.row_selected {
    position: relative;
    background-color: #D7D763 !important;
}

tbody tr.details {
    background-color: #FDFDFD !important;
}

.column-acciones-center {
    text-align: center !important;
    vertical-align: middle !important; /* Opcional: Centrar verticalmente también */
}

.column-info-right {
    text-align: right !important;
    vertical-align: middle !important; /* Opcional: Centrar verticalmente también */
}

.text-indicador {
    color: #494949 !important; /*#6A6527 #6A6527 !important;  cambiado por sia*/
    font-weight: 500 !important;
    font-size: 1.438em;
    margin-bottom: 0px !important;
}

.text-indicador-lg {
    margin-bottom: 0px !important;
}

.text-link-adjunto {
    margin: 0px 0px 0px 5px !important;
}

h3.text-gradient.text-info.header-ppp {
    background-image: linear-gradient(195deg, #9f9f9f, #8b8b8b);
}
h2.text-gradient.text-info.header-ppp {
    background-image: linear-gradient(195deg, #9f9f9f, #8b8b8b);
}

.input-group,
.input-group .input-group-text {
    transition: 0.2s ease;
    border: none;
    margin-top: 20px;
}

.color-box {
    height: 15px;
    width: 25px;
    margin-right: 10px;
}

.map-rounded {
    border-radius: 8px; /* Ajusta este valor para más o menos redondeo */
    overflow: hidden; /* Importante para que el contenido (el mapa) se recorte con las esquinas */
    width: auto;
    height: 100%;
    z-index: 0;
}

p.titulo-ppp {
    font-size: 1.438em;
}

p.titulo-ppp-table {
    font-size: 1.188em;
}

p.text-titulo-card {
    font-size: 1em;
    color: #494949 !important;
    font-weight: 600; /* O 700 */
}

p.text-titulo {
    font-size: 1em;
    margin-bottom: 0px;
}
p.text-subtitulo {
    /*font-size: 0.8em;*/
    font-size: 1em;
}
p.text-subtitulo-light {
    /*font-size: 0.8em;*/
    font-weight: 300; /* O 700 */
    font-size: 1em;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24
}


.sidenav-flex-container {
    display: flex; /* Habilita el flexbox */
    flex-direction: column; /* Apila los elementos verticalmente */
    height: 100vh; /* Haz que ocupe toda la altura visible del viewport */
}

.sidenav-flex-container ul:first-of-type {
    flex-grow: 1; /* Permite que la primera lista crezca y ocupe todo el espacio disponible */
}

.sidenav-flex-container ul:last-of-type {
    margin-top: auto; /* Empuja este elemento al final del contenedor */
}

/* Asegúrate de que el contenedor principal del sidenav sea el 'padre' */
.sidenav-container { /* Reemplaza con la clase real de tu contenedor del sidenav */
    position: relative;
    /* h-auto ya está definido, por lo que no es necesario redefinirlo */
}

/* Aplica el posicionamiento absoluto al elemento que quieres mover al final */
.sidenav-profile { /* Reemplaza con la clase del <li> que contiene el perfil */
    position: absolute;
    bottom: 0;
    width: 100%; /* Para que ocupe todo el ancho del contenedor padre */
}

.logo-container {
    /* Estilos para el contenedor del logo, para que tenga el mismo margen y ancho */
    margin-left: 2rem;
    margin-top: 1.2rem;
    width: 250px; /* Asegúrate de que tenga el mismo ancho que tu sidenav */
}

.fondo-body {
    background-color: #F4F3F1 !important;
}

#body-login {
    background-image: url('https://info-docs.org/ppp-files/background_login1080.jpg'); /* Reemplaza con la ruta de tu imagen */
    background-color: #ffffff; /* Puedes poner un color de respaldo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Esto asegura que el fondo permanezca fijo mientras haces scroll */
}

.glass-card {
    background-color: rgba(255, 255, 255, 0.2); /* Blanco con 40% de opacidad */
    /*backdrop-filter: grayscale(10px);*/ /* Efecto de desenfoque */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Centrar todo el contenido en la página */
.full-page-center {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.input-group.input-group-outline.input-login.is-filled .form-label + .form-control {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #FFFFFF, inset -1px 0 #FFFFFF, inset 0 -1px #FFFFFF;
}

.input-group.input-group-outline.input-login.is-focused .form-label,
.input-group.input-group-outline.input-login.is-filled .form-label {
    width: 100%;
    height: 100%;
    font-size: 0.6875rem !important;
    color: #FFFFFF;
    display: flex;
    line-height: 1.25 !important;
}

.input-group.input-group-outline.input-login.is-focused .form-label:before,
.input-group.input-group-outline.input-login.is-focused .form-label:after,
.input-group.input-group-outline.input-login.is-filled .form-label:before,
.input-group.input-group-outline.input-login.is-filled .form-label:after {
    border-top-color: #CCC8C8;
    box-shadow: inset 0 1px #CCC8C8;
    border-top-color: #CCC8C8;
    box-shadow: inset 0 1px #CCC8C8;
}

.input-group.input-group-outline.input-login.is-focused .form-label + .form-control,
.input-group.input-group-outline.input-login.is-filled .form-label + .form-control {
    /*border-color: #6A6527 !important;*/
    border-color: #FFFFFF !important;
    border-top-color: transparent !important;
    /*box-shadow: inset 1px 0 #6A6527, inset -1px 0 #6A6527, inset 0 -1px #6A6527;*/
    box-shadow: inset 1px 0 #CCC8C8, inset -1px 0 #CCC8C8, inset 0 -1px #CCC8C8;
}

hr.vertical-bar {
    content: "";
    position: relative;
    width: 3px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #e91e63;
    border-radius: 0.125rem;
}

.card .card-body-persona {
    font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    /*font-family: "Roboto", Helvetica, Arial, sans-serif;*/
    padding: 0rem 1.5rem 1.5rem 1.5rem !important;
}

.accordion-header {
    font-size: 1rem; /* O el tamaño que prefieras para un párrafo */
    font-weight: normal; /* Para que no esté en negrita por defecto */
    margin-bottom: 0; /* Elimina cualquier margen inferior predeterminado del h2 */
}

.accordion-header button {
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-right: 40px; /* Ajusta este valor según el tamaño de tu flecha */
    position: relative; /* Necesario para posicionar la flecha absolutamente */
}

/* La flecha hacia abajo (estado colapsado) */
.accordion-button-persona.collapsed::after {    
    margin-left: 10px;
    content: url('/Images/arrow-up.png');
}

/* La flecha hacia arriba (estado desplegado) */
.accordion-button-persona:not(.collapsed)::after {
    margin-left: 10px;
    content: url('/Images/arrow-down.png');
}

.accordion-button-persona {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0rem 0rem 1rem 0rem !important;
    font-size: 1rem;
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

/* Estilo para la barra vertical del contenido desplegado */
.accordion-body-persona {
    border-left: 2px solid #898446; /* Un borde sólido de 4px a la izquierda con color azul */
    padding-left: 1rem; /* Agrega un espacio para que el texto no se pegue a la línea */
    /* Puedes ajustar el padding del div si es necesario */
    /*padding: 0rem !important;*/
}



.badge-flora {
    color: #6A6527;
    background-color: #A19633;
}
.badge-fauna {
    color: #6380D6;
    background-color: #63C9D6;
}
.badge-carbono {
    color: #A19633;
    background-color: #D7D763;
}