:root{
    --color-azul: #2D81D7FF;
    --color-default: #323232;
}

/* Declarar variables globales y reutilizarlas mixins */
/* https://ricardogeek.com/css3-mixins-que-son-y-como-se-usan/ */
::-webkit-scrollbar {
    width: 1px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

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

.swal2-modal {
    z-index: 10000;
}

.swal-modal {
    z-index: 1000;
}

.header-top {

}

.header-top .header-top-avatar {

}

.header-top .header-top-description {

}

.header-top .header-top-more {

}

/* ckeditor */
.django-ckeditor-widget {
    width: 100% !important;
}

.texto-descripcion.ckeditor ol,
.texto-descripcion.ckeditor ul{
    margin: 5px 0;
    padding: 0 0 0 40px;
}
.texto-descripcion.ckeditor ol{
    list-style: decimal;
}

.texto-descripcion.ckeditor ul{
    list-style: initial;
}

.texto-descripcion.ckeditor h1,
.texto-descripcion.ckeditor h2,
.texto-descripcion.ckeditor h3,
.texto-descripcion.ckeditor h4,
.texto-descripcion.ckeditor h5,
.texto-descripcion.ckeditor h6{
    font-size: revert;
    font-weight: revert;
}


.tab:is(input[type="radio"]) {
    min-width: 160px;
    padding: 0;
    margin: 0;
}

/* header */
header {
    position: fixed;
    z-index: 3;
    width: 100%;
}

.sidebar {
    /*position: fixed;*/
    z-index: 1;
    /*width: 24%;*/
    /*max-height: 80%;*/
    /*max-height: 85vh;*/
}

.sidebar-avatar-perfil{
    z-index: 0;
    background-color: white;
}

.sidebar-avatar-perfil-separador {
    min-height: 10px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -5px 10px #c8c8c8;
    width: 90%;
    margin: auto;
}

.sidebar-contactos{
    margin-top: -230px;
    height: 100%;
}

.resaltar-contacto .avatar-hover-img img {
    box-shadow: 2px 2px 5px rgb(59,130,246);
}

.resaltar-contacto .mostrar-contacto-qr .badge {
    background-color: rgb(59,130,246) !important;
    color: white;
}

#busqueda-contacto{
    box-shadow: 0 -5px 0 #FFF;
    border-radius: 10px 10px 0 0;
}

main{
    min-height: 100vh;
}

/* Avatar */
.avatar.avatar-publicaciones .avatar-hover-img img {
    padding: 1px;
}

.avatar.avatar-publicaciones > div {
    padding: 8px;
}

.avatar-perfil > div > a > img{
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
    width: 100%;
}

.avatar-lista-contactos > div > a > img{
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    width: 100%;
}

.red-social em, .red-social-icono em, .avatar-accion em, .whatsapp em {
    font-size: 30px!important;
}

.avatar-hover-redes .red-social-1, .avatar-hover-redes .red-social-3 {
    margin-left: 5px;
}

.avatar-hover-redes .red-social-2 {
    margin-left: -5px;
}

.avatar-hover-acciones .avatar-accion-1 {
    cursor: pointer;
}

.avatar-hover-acciones .avatar-accion-1, .avatar-hover-acciones .avatar-accion-3 {
    margin-left: -12px;
}

.avatar-hover-acciones .avatar-accion-2 {
    margin-left: -2px;
}

.panel-avatar .avatar-hover-acciones, .panel-avatar .avatar-hover-redes {
    margin-top: 40px;
}

.panel-avatar em{
    margin-left: 0;
    font-size: 2.40rem!important;
}

.panel-avatar .avatar-hover-redes .red-social-1 {
    margin-left: -2px;
}

.panel-avatar .avatar-hover-redes .red-social-2 {
    margin-left: -7px;
}

.panel-avatar .avatar-hover-redes .red-social-3 {
    margin-left: +10px;
}
.panel-avatar .avatar-hover-acciones .avatar-accion-1 {
    margin-left: 0;
}

.panel-avatar .avatar-hover-acciones .avatar-accion-2 {
    margin-left: +5px;
}

.panel-avatar .avatar-hover-acciones .avatar-accion-3 {
    margin-left: -15px;
}

.panel-avatar {
    margin-left: -35px;
}

.panel-avatar * {
    padding: 0!important;
}

.avatar-hover-img img{
    transition: all ease-in 0.25s;
}

.avatar-hover-img img:hover, .nueva-solicitud-equipo:hover{
    box-shadow: 0px 0px 5px #4582ff;
    transition: all ease-out 0.25s;
}

/* Roles */
.detalle-roles .splide{
    display: inline-grid!important;
    /*margin-top: 5px;*/
}

.splide{
    width: 100%;
}

.splide__track{
    overflow:initial!important;
}

.seleccion-rol .catagoria-icono:hover{
    cursor: pointer;
    border: solid 2px #323232;
}

.seleccion-rol .perfil-rol-perfil .catagoria-icono{
    cursor: pointer;
    border: solid 4px var(--color-azul);
}


.seleccion-rol .catagoria-icono:hover{
    cursor: pointer;
    border: solid 2px #323232;
}

.perfil-rol-perfil div div div img{
    cursor: pointer;
    box-shadow: 1px 1px 3px #323232;
}

.detalle-roles .splide, .seleccion-perfil-rol{
    border-radius: 0 150px 145px 0;
    vertical-align: top;
    padding-top: 15px;
}

.sidebar-avatar-grupo-redes {
    max-height: 65px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.avatar-mensajes-sin-leer{
    line-height: 10px;
    min-width: 14px;
    min-height: 14px;
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
}

.avatar > div {
    overflow: initial!important;
}

.desanclar-contacto em{
    transform: rotate(60deg);
}

/* Sidebar */

.sidebar-avatar-grupo-redes {
    min-height: 60px;
}

/* categorias contacto */

.seccion-tipo-contactos {
    min-height: 50px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -10px 10px #c8c8c8;
    width: 98%;
}

.seccion-tipo-contactos .seccion-contacto-izquierda a,
.seccion-tipo-contactos .seccion-contacto-derecha a,
.seccion-tipo-contactos .seccion-contacto-adicional a {
    padding: 1px 5px;
    vertical-align: middle;
    border-radius: 5px;
    margin-bottom: 2px;
    width: fit-content;
}

.seccion-tipo-contactos .seccion-contacto-adicional a{
    display: none;
}

.seccion-tipo-contactos .seccion-contacto-pin em{
    cursor: pointer;
}

.seccion-tipo-contactos .seccion-contacto-pin .activo{
    transform: rotate(0deg);
    color: var(--color-azul);
}

.seccion-tipo-contactos .seccion-contacto-pin .inactivo{
    transform: rotate(+40deg);
    color: var(--color-default);
}

/* CSS Datatables */
table.dataTable > tbody > tr.selected > td.select-checkbox::before{
    font-size: 50px!important;
}

table.dataTable > tbody > tr > td.select-checkbox::before{
    width: 30px!important;
    height: 30px!important;
    position: initial!important;
    margin-left: 10px!important;
}
/* time line */
.timeline-perfil-detalle > li{
    grid-template-columns:none!important;
}

.timeline-vertical .timeline-start {
    max-width: 100px;!important;
}

/* Comentar */
#modal-comentar::backdrop, #modal-patrocinador::backdrop {
  background-color: transparent;
}

#modal-comentar .modal-box{
    /*height: 100vh;*/
}

/* Slider arrows */
.splide__arrow{
    z-index: 1;
}

#conversacion-lista-mensajes{
    min-height: 575px;
    max-height: 575px;
}

.splide__pagination.splide__pagination--ltr {
    z-index: -1;
}

.splide{
    z-index: 0;
}

/* Conversaciones */
.indicator :where(.indicator-item){
    z-index: 0!important;
}

.mapboxgl-map{
    z-index: 0;
}

/* TOM Select */

.ts-control {
  border: none!important;
}

.ts-control .item {
  font-size: 16px;
  line-height: 30px;
}

/* Emoji */

#emoji-container-input-editar-estado {
    position: absolute;
    z-index: 1000;
    top: 100%; /* Para que el picker aparezca debajo del input */
    left: 0;
    width: auto;
}

emoji-picker {
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

button[id^="emoji-btn"] {
    border-left: 1px solid #ddd; /* Separador del botón */
    background: transparent;
    cursor: pointer;
}

.popup-contacto-qr {
    margin: auto;
    max-height: 30mm;
    position: absolute;
    z-index: 1;
    padding-left: 25px;
}

.popup-contacto-qr svg {
    border-radius: 2px;
    box-shadow: 5px 5px 5px #323232;
    border: solid 1px #323232;
    width: 30mm;
    height: 30mm;
}

.sidebar-avatar-contacto{
    max-height: 150px;
}

.sidebar-avatar-contacto {
    min-height: 150px;
}

.sidebar-avatar-contacto .popup-contacto-qr{
    padding: 0;
    margin-left: -5px;
}

.sidebar-avatar-contacto svg{
    width: 30mm;
    height: 30mm;
}

/* Proyectos e ideas */
.catagoria-icono em{
    /*font-size: 5.5em!important;*/
}

/* globales */
.w-26{
    width: 7.5rem;
}
.h-26{
    height: 7.5rem;
}

.change-photo-overlay {
    position: absolute;
    bottom: 15px;
    left: 0;
    text-align: center;
    width: 50%;
    margin-left: 25%;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 5px 0;
    font-size: 0.9em;
    border-bottom-left-radius: 175%;
    border-bottom-right-radius: 175%;
}

/* Media Qeury */
@media (max-width: 1280px) {
    .sidebar-contactos{
        margin-top: -195px;
    }
}