body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
ul, ol {
  list-style: none;
  padding-left: 0; /* Opcional: elimina el espacio a la izquierda */
}

h3,a {
    color: #03787c;
    text-decoration: none;
}
.tabla-historial thead th {
  color: #03787c;
}

a:hover,
a:active,
a:focus {
    color: #026063;
}

body {
    background-image: url("../img/viviendas.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-attachment: fixed;
}

.navbar {
    background-color: rgba(52, 58, 64, 0.8); /* Fondo oscuro con transparencia */
}

.container {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con transparencia */
    padding: 0px 20px 50px 20px;;
    border-radius: 10px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.btn-perfil {
display: none;
transition: opacity 0.3s ease;
}

.saludo-hover:hover .btn-perfil {
    display: inline-block;
}

.gradiente-encabezado {
    background: radial-gradient(93.41% 100% at 0% 0%, rgba(3, 120, 124, 0.1) 0%, rgba(3, 120, 124, 0) 100%),
                radial-gradient(50% 100% at 100% 0%, rgba(3, 120, 124, 0.12) 0%, rgba(3, 120, 124, 0) 100%);
    color: var(--palette-text-primary);
    backdrop-filter: blur(10px);           /* El efecto de desenfoque */
    -webkit-backdrop-filter: blur(50px);   /* Compatibilidad con Safari */
    background-clip: padding-box;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(3, 120, 124, 0.2);
}

.gradiente-tabla {
    background: radial-gradient(93.41% 100% at 0% 0%, rgba(3, 120, 124, 0.1) 0%, rgba(3, 120, 124, 0) 100%),
                radial-gradient(50% 100% at 100% 0%, rgba(3, 120, 124, 0.12) 0%, rgba(3, 120, 124, 0) 100%);
    color: var(--palette-text-primary);
    backdrop-filter: blur(10px);           /* El efecto de desenfoque */
    -webkit-backdrop-filter: blur(50px);   /* Compatibilidad con Safari */
    background-clip: padding-box;
}

.tabla-redondeada {
    border-radius: 10px;
    overflow: hidden;      /* Esto asegura que las celdas no sobresalgan */
}

.sin-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:root {
    --palette-form-primary: #03787c;
}

/* Estilo completo para el botón primario */
.btn-primary {
    background-color: var(--palette-form-primary) !important;
    border-color: var(--palette-form-primary) !important;
    color: white !important;
    padding: 8px 2.25rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active {
    background-color: #026063 !important; /* tono más oscuro */
    border-color: #026063 !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(3, 120, 124, 0.25) !important;
}
.page-link {
    color: black !important;
}

.active>.page-link, .page-link.active {
    background-color: var(--palette-form-primary) !important;
    border-color: var(--palette-form-primary) !important;
    color: white !important;
}

.page-link:focus,
.page-link:hover {
    background-color: #026063 !important; /* tono más oscuro */
    border-color: #026063 !important;
    box-shadow: 0 0 0 0.2rem rgba(3, 120, 124, 0.25) !important;
    color: white !important;
}


/* Radio button seleccionado */
.form-check-input:checked {
  background-color: var(--palette-form-primary);
  border-color: var(--palette-form-primary);
  box-shadow: 0 0 0 0.2rem rgba(3, 120, 124, 0.25);
}

/* Foco accesible */
.form-check-input:focus {
  border-color: var(--palette-form-primary);
  box-shadow: 0 0 0 0.2rem rgba(3, 120, 124, 0.25);
}
.css-202 {
    padding: 0px 1.25rem;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    width: 100%;
}

.-a-205 {
    width: 24.375rem;
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    background: rgba(3, 120, 124, 0.05);
    border-radius: 0.25rem;
}

.modal-backdrop.show {
    opacity: 1 !important;  /* Por defecto es 0.5 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.2); /* Fondo translúcido */
    z-index: 1050;
}

.d-flex {
    align-items: center !important;
}

.form-select option:hover {
  background-color: #86b7fe !important;
}

.spinner-overlay {
    opacity: 1 !important;  /* Por defecto es 0.5 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.2); /* Fondo translúcido */
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cambia el color del spinner */
.custom-spinner {
    width: 4rem;
    height: 4rem;
    border-width: 0.25em;
    border-color: rgba(0, 0, 0, 0.1); /* borde base */
    border-top-color: #03787c; /* borde superior verde personalizado */
}
.spinner-text {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #03787c;
    font-weight: bold;
}
/* Animación personalizada para el modal */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Aplica la animación al modal-content */
.modal-zoom .modal-dialog {
  animation: zoomIn 0.3s ease-out;
}

.tooltip-inner {
    background-color: var(--palette-form-primary) !important;  /* Bootstrap 'success' green */
    color: white !important;
    font-size: 0.875rem;
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
  .bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--palette-form-primary) !important;
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
  .bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--palette-form-primary) !important;
}

.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
border-top-color: var(--palette-form-primary) !important;
}

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: var(--palette-form-primary) !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

/* Estilos para el logo en la esquina inferior izquierda (debajo del nav) */
.logo-container {
    position: absolute;
    top: 60px; /* Debajo del navbar */
    left: 10px; /* Espacio desde la izquierda */
    z-index: -1; /* Logo detrás de todos los elementos */
}

.fuera {
    top: 0px !important;
}

.logo {
    width: 120px; /* Tamaño del logo */
    height: auto;
}


@media (min-width: 992px) {
    #div-busqueda {
      width: 319.5px !important;
    }
}

@media (max-width: 992px) {
    .table th, .table td{
        padding: 0.5rem 0.2rem !important;
    }
}

@media (max-width: 992px) {
    .btn-outline-success, .btn-info, .btn-warning, .btn-success, .btn-outline-danger, .btn-primary, .btn-secondary, .btn-outline-secondary, .btn-danger, .btn-outline-warning {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .table th, .table td, .btn-outline-success, .btn-info, .btn-warning, .btn-success, .btn-outline-danger, .btn-primary, .btn-secondary, .btn-outline-secondary, .btn-danger, .btn-outline-warning {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .table th, .table td {
        padding: 0.5rem 0.1rem !important;
    }
}

@media (max-width: 512px) {
    .table th, .table td, .btn-outline-success, .btn-info, .btn-warning, .btn-success, .btn-outline-danger, .btn-primary, .btn-secondary, .btn-outline-secondary, .btn-danger, .btn-outline-warning {
        font-size: 0.5rem;
    }
}

@media (max-width: 433px) {
    .table th, .table td, .btn-outline-success, .btn-info, .btn-warning, .btn-success, .btn-outline-danger, .btn-primary, .btn-secondary, .btn-outline-secondary, .btn-danger, .btn-outline-warning {
        font-size: 0.3rem;
    }
}

.bi-info-circle {
    color: var(--palette-form-primary) !important;
}