/**
 * @purpose Hoja de Estilos Personalizada para el Panel de Administración
 */

/* --- Estilos Base (Mobile First) --- */
body {
    background-color: #f8f9fa;
}
.sidebar {
    position: fixed; top: 0; bottom: 0; left: -280px;
    width: 280px; z-index: 1040; background-color: #212529;
    transition: left 0.3s ease-in-out; overflow-y: auto;
}
.sidebar.active { left: 0; }
.content { width: 100%; transition: margin-left 0.3s ease-in-out; }
.sidebar .nav-link.active { background-color: #495057; }
.sidebar .nav-link:hover { background-color: #343a40; }

/* --- Estilos para Pantallas Medianas y Grandes --- */
@media (min-width: 768px) {
    .sidebar { left: 0; }
    .content { margin-left: 280px; width: calc(100% - 280px); }
    #pdfModal .modal-dialog {
        height: 90%;
    }
}

/* --- Estilos de Componentes Específicos --- */
.carousel-control-prev, .carousel-control-next {
    width: 48px; height: 48px; border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5); top: 50%;
    transform: translateY(-50%); margin: 0 1rem;
}
.carousel-control-prev:hover, .carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.7); }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 1.2rem; height: 1.2rem; }
.delete-image-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* Selección múltiple de imágenes */
.image-thumbnail-container { cursor: pointer; transition: transform 0.2s ease; }
.image-thumbnail-container:hover { transform: scale(1.05); }
.image-thumbnail-container .img-thumbnail { width: 120px; height: 90px; object-fit: cover; }
.selection-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); color: white;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.image-thumbnail-container.selected .selection-overlay { opacity: 1; }

/* --- Estilos para layout de ancho completo en móviles --- */
@media (max-width: 767.98px) {
    .container-mobile-full-width { padding-left: 0; padding-right: 0; }
    .container-mobile-full-width > .row { margin-left: 0; margin-right: 0; }
    .container-mobile-full-width > .row > [class^="col"] { padding-left: 0; padding-right: 0; }
    .container-mobile-full-width .card { border-radius: 0; border-left: 0; border-right: 0; }
    .container-mobile-full-width .card:first-of-type { border-top: 0; }
}

#pdfModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 3. Hacemos que el cuerpo del modal se estire y sea un 'marco de referencia' */
#pdfModal .modal-body {
    flex-grow: 1;
    position: relative;
}

/* 4. Posicionamos el iframe para que llene ese marco por completo */
#pdfModal .modal-body iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Estilos para que el canvas de la firma del wizard sea responsivo */
/* Estilos para el canvas de la firma del wizard */
.signature-pad-container {
    position: relative;
    width: 100%;
    height: 250px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none; 
}

#signature-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.review-switch-container {
    display: flex; /* Activa el modo de alineación flexible. */
    align-items: center; /* Centra verticalmente los elementos. */
    gap: 0.75rem; /* Añade un espacio elegante entre el switch y el texto. */
}

.review-switch-container .form-check-input {
    /*
    Se elimina el margen izquierdo por defecto para controlar el espacio con 'gap'.
    Se ajusta el margen superior con un cálculo para compensar el escalado y
    lograr un centrado vertical perfecto.
    */
    margin-left: 0;
    margin-top: 2px;
}