/**
 * Estilos compartidos para vistas del proyecto
 * Separate CSS file to avoid Content Security Policy violations
 */

/* Override Bootstrap CSS variables that use 'about:blank' to comply with CSP */
:root {
    --bs-form-select-bg-img: url("/assets/form-select.svg");
    --bs-form-check-bg-image: url("/assets/form-check.svg");
    --bs-form-switch-bg: url("/assets/form-switch.svg");
    --bs-form-select-bg-icon: url("/assets/form-select.svg");
    --bs-navbar-toggler-icon-bg: url("/assets/navbar-toggler.svg");
    --bs-accordion-btn-icon: url("/assets/accordion-btn.svg");
    --bs-accordion-btn-active-icon: url("/assets/accordion-btn-active.svg");
}

[data-bs-theme="dark"] {
    --bs-form-select-bg-img: url("/assets/form-select-dark.svg");
    --bs-form-check-bg-image: url("/assets/form-check-dark.svg");
    --bs-form-switch-bg: url("/assets/form-switch-dark.svg");
    --bs-form-select-bg-icon: url("/assets/form-select-dark.svg");
    --bs-navbar-toggler-icon-bg: url("/assets/navbar-toggler-dark.svg");
    --bs-accordion-btn-icon: url("/assets/accordion-btn-dark.svg");
    --bs-accordion-btn-active-icon: url("/assets/accordion-btn-dark.svg");
}

/* btn-close pure CSS implementation - no external images needed */
.btn-close {
    position: relative;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    background: transparent !important;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    width: 0.75em;
    height: 0.0625em;
    background-color: currentColor;
    top: 50%;
    left: 50%;
    margin-left: -0.375em;
    margin-top: -0.03125em;
}

.btn-close::before {
    transform: rotate(45deg);
}

.btn-close::after {
    transform: rotate(-45deg);
}

.btn-close:hover {
    opacity: 0.75;
}

.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}

.btn-close:disabled {
    pointer-events: none;
    user-select: none;
    opacity: 0.25;
}

/* Override direct background-image properties that use 'about:blank' */
.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: url("/assets/transparent.svg");
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url("/assets/transparent.svg");
}

.carousel-control-prev-icon {
    background-image: url("/assets/carousel-prev.svg");
}

.carousel-control-next-icon {
    background-image: url("/assets/carousel-next.svg");
}

/* Sidebar */
.sidebar-sticky {
    min-height: 100vh;
}

/* Tablas responsivas */
.table-responsive-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-full-width {
    width: 100%;
}

/* Validation Messages Modal */
.validation-message-item {
    transition: opacity 0.3s ease;
}

.validation-message-item.dismissing {
    opacity: 0;
}

/* Cursor pointer para elementos clicables */
.cursor-pointer {
    cursor: pointer;
}

/* Icono grande para modal de timeout */
.timeout-icon {
    font-size: 2rem;
}

/* Z-index alto para notificaciones */
.toast-high-z-index {
    z-index: 9999;
}

/* Ancho mínimo para notificaciones */
.toast-min-width {
    min-width: 300px;
}

/* Z-index para alert container */
.alert-z-index {
    z-index: 1090;
}