html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: monospace;
    color: #f1f1f1;
}

#carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: black !important;
}

.media-item {
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.media-item.active {
    opacity: 1;
    z-index: 2;
}

.media-item.h {
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.media-item.v {
    /* Vertical media rotated -90deg to fill landscape screen */
    width: 100vh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    object-fit: fill;
}

#splash-logs div {
    display: block !important;
}

#splash-logs {
    color: #f1f1f1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39, 26, 95, 0.9);
    display: flex; /* Habilita el modelo de caja flexible */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#splash-content {
    background-color: rgba(39, 26, 95, 0.9);
    color: #f1f1f1;
    padding: 20px;
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.log-log { color: #ffffff; }
.log-warn { color: #ffcc00; }
.log-error { color: #ff3300; }

#offline-indicator {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

#carousel-placeholder {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}