﻿.account-container {
    background-image: url('../Images/LogoKinder.png');
    background-size: contain;           /* muestra la imagen completa sin cortar */
    background-position: center;        /* centra la imagen completamente */
    background-repeat: no-repeat;      
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;                  /* altura completa de la ventana */
    padding: 3.5rem 0;                 

}

.vista-diseno {
    background-image: url('../Images/fondo2.png');
    background-size: cover; /* CUBRE TODO EL CONTENEDOR */
    background-position: center; /* centra la imagen */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* ALTURA COMPLETA DE LA VENTANA */
    padding: 3.5rem 0;
}

.account-container.full-bg {
    background-repeat: no-repeat;
    background-size: contain;       /* muestra la imagen completa dentro del contenedor */
    background-position: center;    /* centra la imagen */
    min-height: 100vh;              /* ocupa la altura completa de la ventana para no recortar verticalmente */
    padding: 2.5rem 0;              /* ajuste de espacio; modifica si hace falta */
}

.account-box {
    position: relative;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

/* background logo inside the box (subtle, centered) */
.account-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75; /* adjust to increase/decrease visibility */
    z-index: 0;
}

/* make the box contents render above the pseudo-element */
.account-box > * {
    position: relative;
    z-index: 1;
}

/* Oculta la "X" del modal */
.modal .btn-close {
    display: none !important;
}

<div class="modal fade" id="confirmLogoutModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="confirmLogoutLabel" aria-hidden="true">