/* Importación de Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Estilos para el nuevo contenedor de botones */
.command-buttons-grid {
    display: flex;
    flex-wrap: wrap; /* Para que los botones se envuelvan si no caben */
    gap: 5px; /* Espacio entre los botones */
    justify-content: center; /* Centrar los botones en el contenedor */
    padding: 10px;
}

/* Estilos para cada elemento de botón/título */
.command-button-item {
    display: flex;
    flex-direction: column; /* Colocar el botón arriba y el título abajo */
    align-items: center; /* Centrar los elementos horizontalmente */
    text-align: center;
    width: 90px; /* Ancho fijo para cada botón (ajusta según necesites) */
    cursor: pointer;
    
    /* --- PROPIEDADES DE ANIMACIÓN AÑADIDAS --- */
    opacity: 0; /* 1. Inicialmente invisible */
    transform: translateY(10px); /* 2. Ligeramente desplazado hacia abajo */
    /* 3. Definir la transición suave */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Estilos para el botón circular/cuadrado */
.command-btn {
    width: 60px; /* Tamaño del botón */
    height: 60px;
    border-radius: 50%; /* Opcional: para hacerlo circular */
    background-color: #000000; /* Color de fondo */
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px; /* Espacio entre el botón y el título */
    transition: background-color 0.2s;
}

.command-btn:hover {
    background-color: #e0e0e0;
}

/* Estilos para el ícono de RemixIcon */
.command-btn i {
    font-size: 24px; /* Tamaño del ícono */
    color: #ffffff; /* Color del ícono */
}

/* Estilos para el título */
.command-title {
    font-size: 0.8em;
    color: #555;
    word-break: break-word; /* Para asegurar que el texto largo se rompa */
}

#bottombar {
    left: 100px;
}

#sidebar .nav li a {
    background: #ffffff9e;
    backdrop-filter: blur(5px);
}

/* Estilos de Elementos Base */
body, html {
    font-family: "Inter", sans-serif;
    font-style: normal;
}
.modal-open .modal {
    backdrop-filter: blur(5px);
}

.modal-body>.nav {
    margin: -15px;
    margin-bottom: 15px;
    padding: 10px;
}

.modal-content {
    box-shadow: none;
    border-radius: 20px;
    overflow: hidden;
}

#my_account_settings_edit .nav-default>li>a {
    text-align: center;
    margin: 5px;
    border-radius: 20px;
}

#my_account_settings_edit .nav-default>li>a i {
    display: block;
    font-size: 2em;
  color: black;
}

#my_account_settings_edit .nav-tabs>li {
    float: left;
    margin-bottom: -1px;
    width: 20%;
}

#events_tab table tbody tr td .row {
    line-height: 1;
}
#events_tab table tbody tr td .row:nth-child(2) {
    background: #efefef;
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
}


#events_tab table {
    margin: 10px;
    width: 95%;
}

.group-heading>.group-title {
  font-weight: bold;
}

.group-heading {
    width: 97%;
    margin: 5px;
    border-radius: 20px;
    background: #efefef;
}


#mapWrap {
    z-index: 1;
}

/* Estilos de Formulario */
.form-control {
    background-color: transparent;
    border: none; /* Asegura que el 'border: none' se aplique */
    border-bottom: 1px solid #d8d8d8 !important;
    box-shadow: none !important;
}

.form-control:focus {
    background-color: transparent;
    border-bottom: 1px solid black !important;
}

/* Estilos de Checkbox/Radio (Bordes Redondeados) */
.checkbox-inline input[type=checkbox]:checked + label::after,
.checkbox-inline input[type=radio]:checked + label::after,
.group .checkbox input[type=checkbox]:checked + label::after,
.group .checkbox input[type=radio]:checked + label::after,
.table .checkbox input[type=checkbox]:checked + label::after,
.table .checkbox input[type=radio]:checked + label::after,
.checkbox-inline input[type=checkbox]:checked + label::before,
.checkbox-inline input[type=radio]:checked + label::before,
.group .checkbox input[type=checkbox]:checked + label::before,
.group .checkbox input[type=radio]:checked + label::before,
.table .checkbox input[type=checkbox]:checked + label::before,
.table .checkbox input[type=radio]:checked + label::before {
    border-radius: 99px;
}

/* --- Estilos de Sidebar y Navegación --- */

/* Selectores de 'display: none' (Unificados) */
.btn-collapse.collapse-left:before,
.sidebar .btn-collapse:before,
.btn-collapse.collapse-left:after,
.sidebar .btn-collapse:after,
.nav-default > li.active:after,
#header .main-navbar .navbar-nav > li > a span,
#header.folded .navbar .navbar-brand:before,
#header.folded .navbar .navbar-brand:after,
#header.folded .navbar .navbar-nav:before,
#header.folded .navbar .navbar-nav:after,
#header.folded:before {
    display: none;
}

/* Unificación de .sidebar .sidebar-content */
.sidebar .sidebar-content {
    background: transparent;
    border-right: none !important;
    height: 95%;
    margin-left: 100px;
}

/* Unificación de #sidebar .tab-content */
#sidebar .tab-content {
    border-radius: 0px 0px 20px 20px;
    height: 100%;
    overflow: hidden;
    box-shadow: 0px 20px 40px -20px #00000047;
}

.sidebar .tab-pane-body {
    border-radius: 20px 20px 0px 0px;
    background: white;
}

.sidebar .tab-pane-header {
    border-radius: 15px;
    background: white;
    margin-bottom: 10px;
    padding: 20px; /* Añadido del bloque duplicado */
}

/* Estilos de Icono en el Encabezado */
#header .main-navbar .navbar-nav > li > a i {
    font-size: 1.5em;
}

/* Estilos del Botón de Colapso de la Barra Lateral */
.sidebar .btn-collapse {
    left: 435px;
    top: 3%;
}

.collapsed .btn-collapse {
    left: 100px;
}

/* Estilos de Navegación de Pestañas en la Barra Lateral */
#sidebar .nav {
    width: 85px;
    position: absolute;
    left: 10px;
    background-color: transparent;
}

.sidebar .nav-tabs > li {
    display: block;
    width: 100%;
    float: none;
}

/* Estilos de Enlaces (Hover/Focus) y Activo (Unificados) */
#sidebar .nav-tabs > li > a,
#sidebar .nav-tabs > li > a:focus,
#sidebar .nav-tabs > li > a:hover {
    border: none; /* Aplicado a todos los estados para asegurar */
    margin-bottom: 10px;
    display: block;
    align-items: center;
    white-space: nowrap;
    padding: 20px 0px;
    border-radius: 20px;
}

#sidebar .nav-tabs > li > a:hover,
#sidebar .nav-tabs > li.active > a,
#sidebar .nav-tabs > li.active > a:focus,
#sidebar .nav-tabs > li.active > a:hover {
    background: black;
    color: white;
    border-color: #fff #fff transparent; /* Solo relevante para el estado hover si se usa en el activo */
}

/* Estilos de Icono de Pestaña (Hover/Focus/Activo) (Unificados) */
#sidebar .nav-tabs > li > a i,
#sidebar .nav-tabs > li.active > a i,
#sidebar .nav-tabs > li > a:hover i,
#sidebar .nav-tabs > li > a:focus i {
  color: black;
    font-size: 2.5em;
    display: block;
    vertical-align: middle;
    line-height: 1;
    margin: 0px !important;
}

.sidebar .nav-tabs > li.active a i {
    color: white !important;
}

/* --- Estilos de Lista de Grupos --- */
.group-list {
    padding: 10px;
}

.group-list > li > .name {
    font-weight: bold;
}

/* Estilos de Hover de Lista de Grupos (Unificados) */
#sidebar .group-list > li:hover .name,
#sidebar .group-list > li:hover .details,
#sidebar .group-list > li:hover .checkbox {
    color: white;
    background: black;
}

#sidebar .group-list > li:hover .details {
    border-radius: 0px 10px 10px 0px;
}

#sidebar .group-list > li:hover .checkbox {
    border-radius: 10px 0px 0px 10px;
}

/* --- Estilos de Mapa --- */
.map-controls .btn {
    font-size: 1.5em;
    border-radius: 99px !important;
    margin-bottom: 6px;
}

.map-controls.top-right {
    right: 10px;
}

/* --- Estilos de Widgets/Dashboard --- */
#widgets .widget {
    border: none;
    margin: 10px;
    background: transparent;
}

#widgets .widgets-content {
    background: transparent;
}


#widgets .widget .widget-heading {
    border-radius: 20px;
    border: none;
    background-color: #000000b5;
    backdrop-filter: blur(8px);
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
    width: fit-content;
}



#widgets .widget .widget-body {
    border-radius: 20px;
    background-color: #ffffffc9;
    backdrop-filter: blur(3px);
}

/* --- Estilos de Scrollbar (Unificados) --- */

/* Selector unificado para todos los scrollbars afectados (ancho) */
.long-scrollbar-selector-list::-webkit-scrollbar {
    width: 6px;
}

/* Selector unificado para todos los scrollbar-thumb afectados (pulgar) */
.long-scrollbar-selector-list::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: none;
}

/* Selector unificado para todos los scrollbar-track afectados (pista) */
.long-scrollbar-selector-list::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
}

/*
* NOTA: Debido a la extrema longitud del selector de scrollbars, he usado
* un marcador de posición 'long-scrollbar-selector-list'.
* Debes reemplazar este marcador con la lista completa de selectores
* que se repite en el código original para que funcione correctamente.
* La lista completa de selectores es la misma para ::-webkit-scrollbar,
* ::-webkit-scrollbar-thumb y ::-webkit-scrollbar-track.
*/