/* ===== Background with blurred hardware store image ===== */
.app-bg {
    min-height: 100vh;
    position: relative;
    background: #0b1220;
    overflow-x: hidden;
}

/* Imagen de fondo */
.bg-image-layer {
    position: fixed;
    inset: 0;
    background-image: url('/images/cemaf_back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    filter: blur(10px);
    z-index: -3;
}

/* Overlay oscuro + gradientes para legibilidad */
.bg-overlay-layer {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 700px at 15% 15%, rgba(59,130,246,.22), transparent 80%), radial-gradient(900px 600px at 85% 20%, rgba(16,185,129,.18), transparent 55%), radial-gradient(900px 700px at 60% 90%, rgba(168,85,247,.20), transparent 65%), linear-gradient(135deg, rgba(6, 10, 20, .78) 0%, rgba(10, 14, 28, .82) 40%, rgba(10, 14, 28, .88) 100%);
    z-index: -2;
}

/* ===== Navbar ===== */
.app-nav {
    background: rgba(10, 14, 28, .55);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    padding: 4px;
    border: 1px solid rgba(255,255,255,.12);
}

.brand-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.brand-subtitle {
    color: rgba(255,255,255,.65);
    font-size: 0.80rem;
}

/* ===== Content shell ===== */
.content-shell {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 22px;
}

    /* Better text contrast inside shell */
    .content-shell, .content-shell * {
        color: rgba(255,255,255,.92);
    }

        .content-shell .text-muted,
        .content-shell .form-text {
            color: rgba(255,255,255,.65) !important;
        }

        /* Form controls */
        .content-shell .form-control,
        .content-shell .form-select {
            background: rgba(255,255,255,.10);
            border-color: rgba(255,255,255,.18);
            color: rgba(255,255,255,.92);
        }

            .content-shell .form-control::placeholder {
                color: rgba(255,255,255,.55);
            }

            .content-shell .form-control:focus,
            .content-shell .form-select:focus {
                background: rgba(255,255,255,.12);
                border-color: rgba(59,130,246,.6);
                box-shadow: 0 0 0 .25rem rgba(59,130,246,.25);
                color: rgba(255,255,255,.92);
            }

        /* Table */
        .content-shell .table {
            color: rgba(18,27,71,.92);
        }

            .content-shell .table thead th {
                color: rgba(255,255,255,.70);
                border-bottom-color: rgba(255,255,255,.18);
            }

            .content-shell .table td, .content-shell .table th {
                border-top-color: rgba(255,255,255,.12);
            }

/* Footer */
.footer-muted {
    color: rgba(255,255,255,.60);
}

/* Panel interno tipo card (dentro del content-shell) */
.glass-panel {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* Icon bubble */
.icon-bubble {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.90);
}

/* Soft alert in dark UI */
.alert-soft {
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.18);
    color: rgba(255,255,255,.85);
    border-radius: 14px;
}