/* =============================================
   ESTILOS GLOBALES MINIMALISTAS - CCBB
   Sobrescribe Bootstrap con diseño consistente
   ============================================= */

/* Layout footer sticky cuando hay poco contenido */
html, body { height: 100%; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }

/* Navbar/Sidebar responsive */
@media(max-width: 767.98px){
  #mainNav .navbar-toggler{ display: none !important; }
}

/* ===== BOTONES BOOTSTRAP ESTANDARIZADOS ===== */
.btn-primary,
.btn-primary:not(.btn-primary-ccbb) {
    background: var(--color-primary, #bf8d39) !important;
    border-color: var(--color-primary, #bf8d39) !important;
    color: var(--color-white, #ffffff) !important;
    border-radius: var(--border-radius-md, 12px) !important;
    font-weight: 600;
    transition: all var(--transition-base, 0.3s ease);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.btn-primary:hover,
.btn-primary:not(.btn-primary-ccbb):hover {
    background: var(--color-primary-dark, #8b6914) !important;
    border-color: var(--color-primary-dark, #8b6914) !important;
    color: var(--color-white, #ffffff) !important;
}

.btn-secondary,
.btn-secondary:not(.btn-secondary-ccbb) {
    background: var(--color-white, #ffffff) !important;
    border: 2px solid var(--color-border, #e0e0e0) !important;
    color: var(--color-text, #2c2c2c) !important;
    border-radius: var(--border-radius-md, 12px) !important;
    font-weight: 600;
    transition: all var(--transition-base, 0.3s ease);
}

.btn-secondary:hover,
.btn-secondary:not(.btn-secondary-ccbb):hover {
    background: var(--color-primary-alpha-10, rgba(191, 141, 57, 0.1)) !important;
    border-color: var(--color-primary, #bf8d39) !important;
    color: var(--color-primary, #bf8d39) !important;
}

.btn-success {
    background: var(--color-primary, #bf8d39) !important;
    border-color: var(--color-primary, #bf8d39) !important;
    color: var(--color-white, #ffffff) !important;
    border-radius: var(--border-radius-md, 12px) !important;
    font-weight: 600;
}

.btn-success:hover {
    background: var(--color-primary-dark, #8b6914) !important;
    border-color: var(--color-primary-dark, #8b6914) !important;
}

.btn-danger {
    background: var(--color-text, #2c2c2c) !important;
    border-color: var(--color-text, #2c2c2c) !important;
    color: var(--color-white, #ffffff) !important;
    border-radius: var(--border-radius-md, 12px) !important;
    font-weight: 600;
}

.btn-danger:hover {
    opacity: 0.8;
}

/* Botón menú móvil */
.btn-menu { 
    background: var(--color-primary, #bf8d39); 
    color: var(--color-white, #ffffff); 
    border-color: var(--color-primary, #bf8d39); 
    border-radius: var(--border-radius-md, 12px);
}
.btn-menu:hover { 
    background: var(--color-primary-dark, #8b6914); 
    color: var(--color-white, #ffffff); 
    border-color: var(--color-primary-dark, #8b6914); 
}

/* Ajuste botón cerrar sesión (desktop y móvil) */
.btn-close-sesion{ max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .375rem .5rem; }
@media (min-width: 768px){ .btn-close-sesion{ max-width: 130px; } }
@media (min-width: 992px){ .btn-close-sesion{ max-width: 140px; } }

.master{
    padding-bottom: 2%;
}
.visibility-hidden {
    visibility: hidden;
}
.display-none{
    display: none;
}
/* ===== LOADER ESTANDARIZADO ===== */
.content-loader{
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
.custom-loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 8px solid;
    border-color: var(--color-background, #f5f5f5);
    border-right-color: var(--color-primary, #bf8d39);
    animation: loaderSpin 1s infinite linear;
}
@keyframes loaderSpin {to{transform: rotate(1turn)}}

.overflow-x-table{
    overflow-x:auto;
}
/*para moviles*/
@media(min-width: 992px) {
    .separator-line {
        border-right-style: solid;
        border-right-color: var(--bs-emphasis-color);
    }

}
@media(max-width: 991.98px) {
    .separator-line{
        border-bottom-style: solid;
        border-bottom-color: var(--bs-emphasis-color);
        border-right-style: solid;   
    }
    .no-right{
        border-right-style: none;
    }
    .btn-close-sesion{
        width: auto;
        left: 100%;
        position: sticky;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }
    .separator-line{
        border-bottom-style: solid;
        border-bottom-color: var(--bs-emphasis-color);
        border-right-style: none;
        
    }
}
.text-muted.hovered {
    cursor: pointer; /* Cambiar cursor a una mano */
  }
.tachar{
    text-decoration: line-through;
    text-decoration-color: var(--bs-green);
}
.resaltar{
    text-decoration: line-through;
    color: var(--bs-danger);
}

.swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox {
    /* margin: 1em 2em 3px; */
    margin: 0.5em 0em 3px !important;
}
.nav-item{
    cursor: pointer;
}
.opacity{
    opacity: 60%
}
.loaderr {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-primary-alpha-20, rgba(191, 141, 57, 0.2));
    border-top-color: var(--color-primary, #bf8d39);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.8s linear infinite;
}
.sticky-select{
    position: sticky;
    top: 74px;
    z-index: 1019;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

/* ===== INPUTS Y FORMS ESTANDARIZADOS ===== */
.form-control {
    border: 2px solid var(--color-border, #e0e0e0) !important;
    border-radius: var(--border-radius-md, 12px) !important;
    padding: 10px 14px !important;
    transition: all var(--transition-base, 0.3s ease);
}

.form-control:focus {
    border-color: var(--color-primary, #bf8d39) !important;
    box-shadow: 0 0 0 4px var(--color-primary-alpha-10, rgba(191, 141, 57, 0.1)) !important;
}

.form-label {
    font-weight: 600;
    /* color: var(--color-text, #2c2c2c); */
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.form-check-input:checked {
    background-color: var(--color-primary, #bf8d39) !important;
    border-color: var(--color-primary, #bf8d39) !important;
}

/* ===== TABLAS ESTANDARIZADAS ===== */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: var(--color-background, #f5f5f5);
    color: var(--color-text, #2c2c2c);
    font-weight: 600;
    border-bottom: 2px solid var(--color-border, #e0e0e0);
    padding: 12px;
}

.table tbody td {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    padding: 12px;
}

.table-hover tbody tr:hover {
    background: var(--color-primary-alpha-10, rgba(191, 141, 57, 0.1));
}

#offline-banner {
    display: none;
    width: 100%;
    background: var(--color-text, #2c2c2c);
    color: var(--color-white, #ffffff);
    text-align: center;
    padding: 10px;
    font-size: 14px;
    border-bottom: 2px solid var(--color-primary, #bf8d39);
}
nav#mainNav {
    row-gap: 5px;
}

/* ===== GALERÍA DE IMÁGENES ===== */
.modal-gallery {
    display: none;
    position: fixed;
    z-index: 91000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(44, 44, 44, 0.95);
}

.modal-content-gallery {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: var(--border-radius-md, 12px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.16));
}

.close-gallery {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--color-white, #ffffff);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--transition-base, 0.3s ease);
}

.close-gallery:hover,
.close-gallery:focus {
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
}

/* ===== PERFIL E IMÁGENES ===== */
.profile-frame {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--color-border, #e0e0e0);
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.doc-frame {
    width: 160px;
    height: 110px;
    overflow: hidden;
    border-radius: var(--border-radius-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background, #f5f5f5);
    border: 2px solid var(--color-border, #e0e0e0);
}

.doc-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Estilos responsive para dispositivos móviles */
@media (max-width: 768px) {
    .profile-frame {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        margin: 0 auto !important;
    }

    .profile-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .doc-frame {
        width: 140px !important;
        height: 95px !important;
        max-width: 140px !important;
        max-height: 95px !important;
        margin: 0 auto !important;
    }

    .doc-image {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* Asegurar que los contenedores no se expandan */
    .bs-icon-xl {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Ajustar el modal para móviles */
    .modal-body .text-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-body .col-md-6 .text-center {
        padding: 10px;
    }

    /* Controlar específicamente la clase bs-icon en el modal de edición */
    #editarClienteModal .bs-icon-xl {
        width: auto !important;
        height: auto !important;
        font-size: 1rem !important;
    }

    #editarClienteModal .bs-icon {
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
    }

    /* Asegurar que las labels no se expandan */
    #editarClienteModal label {
        display: inline-block;
        max-width: 100%;
    }
}

/* Para pantallas muy pequeñas (teléfonos en vertical) */
@media (max-width: 480px) {
    .profile-frame {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

    .doc-frame {
        width: 120px !important;
        height: 80px !important;
        max-width: 120px !important;
        max-height: 80px !important;
    }
}

/* ===== BADGES Y ALERTAS ESTANDARIZADAS ===== */
.badge {
    border-radius: var(--border-radius-full, 9999px);
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.813rem;
}

.badge-primary {
    background: var(--color-primary, #bf8d39) !important;
    color: var(--color-white, #ffffff);
}

.alert {
    border-radius: var(--border-radius-md, 12px);
    border: 2px solid;
    padding: 12px 16px;
}

.alert-info {
    background: var(--color-primary-alpha-10, rgba(191, 141, 57, 0.1));
    border-color: var(--color-primary, #bf8d39);
    color: var(--color-text, #2c2c2c);
}

/* ===== CARDS ESTANDARIZADAS ===== */
.card {
    border: 2px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
    transition: all var(--transition-base, 0.3s ease);
}

.card:hover {
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.card-header {
    background: var(--color-background, #f5f5f5);
    border-bottom: 2px solid var(--color-border, #e0e0e0);
    font-weight: 600;
}

/* ===== SEPARADORES ===== */
hr {
    border-color: var(--color-border, #e0e0e0);
    opacity: 1;
}