:root {
  --primary: #DD55CC;
}

/* Botones y componentes primarios */
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.badge-primary,
.bg-primary,
.border-primary,
a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:disabled,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: #fff !important;
}

.text-primary {
  color: var(--primary) !important;
}

.page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

input.border-primary, select.border-primary, textarea.border-primary {
  border-color: var(--primary) !important;
}

/* Asegurarse de que los checkboxes sean visibles */
.form-check-input {
    appearance: auto; /* Restaurar el estilo por defecto del navegador */
    opacity: 1; /* Asegurar que sean visibles */
    visibility: visible; /* Asegurar que se muestren */
    position: relative; /* Asegurar que se muestren correctamente */
    width: 16px; /* Ajustar el tamaño del checkbox */
    height: 16px;
}

/* Estilo para los checkboxes seleccionados */
.form-check-input:checked {
    background-color: #007bff; /* Azul predeterminado de Bootstrap */
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Efecto de contorno */
}

/* Asegurar que las etiquetas se alineen correctamente */
.form-check-label {
    margin-left: 5px;
    font-size: 14px; /* Ajustar el tamaño de la fuente */
    color: #212529; /* Color de texto predeterminado */
}
.custom-select {
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    padding: 0.5rem;
    font-size: 1rem;
    color: #6e707e;
    background-color: #fff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.custom-select:focus {
    border-color: #4e73df;
    box-shadow: 0px 0px 5px rgba(78, 115, 223, 0.5);
    outline: none;
}

.custom-select[multiple] {
    height: auto;
    min-height: 3rem;
    overflow-y: auto;
}

.progress-bar {
    transition: width 0.03s linear;
}

/* Asegúrate de que el contenedor del sidebar tenga un tamaño fijo y permita el scroll */
.sidebar-wrapper {
    max-height: 100vh; /* Altura máxima igual a la altura de la ventana */
    overflow-y: auto; /* Habilitar scroll vertical */
    overflow-x: hidden; /* Ocultar scroll horizontal */
    scrollbar-width: thin; /* Opcional: Estilo del scroll en navegadores compatibles */
}

/* Opcional: Personalizar el scroll para navegadores basados en Webkit */
.sidebar-wrapper::-webkit-scrollbar {
    width: 6px; /* Ancho del scroll */
}

.sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del scroll */
    border-radius: 10px; /* Bordes redondeados */
}

.sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color del scroll al pasar el mouse */
}

.sidebar {
    height: 100vh; /* Altura completa de la ventana */
    position: fixed; /* Fijar el sidebar en su posición */
    overflow: hidden; /* Evitar scroll en el contenedor principal */
}

#materials-table {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

#materials-table > div {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.loader-circle {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
#globalLoader {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(255,255,255,0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Asegurar que el select tenga el mismo diseño que los inputs */
.form-select, select.form-control {
    border-radius: 8px; /* Bordes redondeados */
    border: 1px solid #e0e0e0; /* Color del borde */
    padding: 0.5rem 1rem; /* Espaciado interno */
    font-size: 1rem; /* Tamaño de fuente */
    color: #495057; /* Color del texto */
    background-color: #fff; /* Fondo blanco */
    box-shadow: none; /* Sin sombras */
    transition: border-color 0.2s, box-shadow 0.2s; /* Transiciones suaves */
    height: calc(2.5rem + 2px); /* Altura igual a los inputs */
}

.form-select:focus, select.form-control:focus {
    border-color: #80bdff; /* Color del borde al enfocar */
    outline: 0; /* Sin contorno */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra al enfocar */
}

.form-select option, select.form-control option {
    color: #495057; /* Color del texto de las opciones */
}

/* Alternativa con fixed */
.main-panel .navbar {
     position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1030;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08), 0 1.5px 4px rgba(44,62,80,0.06);
}
.main-panel {
    padding-top: 70px; /* alto del navbar, ajusta según tu navbar */
}
.badge-colors .badge-primary {
  background: var(--primary) !important;
}
.badge-colors .badge-info {
  background: #1d8cf8 !important;
}
.badge-colors .badge-success {
  background: #00bf9a !important;
}
/* Opcional: mejora el borde del activo */
.badge-colors .badge.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
}

/* Agrega esto en tu custom.css o en un <style> */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  opacity: .5;
}
.btn-close:hover {
  opacity: .75;
}

/* public/assets/css/custom.css */
#adjuntosGallery .card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
#adjuntosGallery .card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
#adjuntosGallery img {
    background: #f8f9fa;
    transition: filter 0.2s;
}
#adjuntosGallery .card:hover img {
    filter: brightness(0.95) blur(0.5px);
}
@media (min-width: 768px) {
  #modalAdjuntos .modal-dialog {
    max-width: 98vw !important;
    width: 98vw !important;
  }
}
#modalAdjuntos .modal-content {
    border-radius: 1.2rem;
}
#adjuntosGallery .card {
    min-width: 180px;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
  #modalZoomImg .modal-dialog {
    max-width: 98vw !important;
    width: 98vw !important;
  }
}
#modalZoomImg .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}
#modalZoomImg img {
    max-width: 96vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    margin: auto;
    display: block;
}