/* =================================
   CICUMBA LOGIN - PALETA PASTEL VERDE SUAVE
   Colores: #6bc29a (verde pastel), #f0f5f2 (fondo), #a8d8c0 (acento)
   ================================= */

/* --- CONTENEDOR PRINCIPAL --- */
.logon-main-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: linear-gradient(145deg, #e8f5ee 0%, #dceee4 25%, #eaf6ef 50%, #d4e8dc 75%, #e2f0e8 100%) !important;
}

html.logon-page, html.logon-page body,
body.logon-page {
    background: linear-gradient(145deg, #e8f5ee 0%, #dceee4 25%, #eaf6ef 50%, #d4e8dc 75%, #e2f0e8 100%) !important;
    background-attachment: fixed !important;
}

/* --- SCROLLBAR --- */
body.logon-page {
    overflow: hidden !important;
    max-width: 100vw !important; max-height: 100vh !important;
    width: 100vw !important; height: 100vh !important;
    margin: 0 !important; padding: 0 !important;
}

body.logon-page ::-webkit-scrollbar { display: none !important; width: 0 !important; }
body.logon-page * { -ms-overflow-style: none !important; scrollbar-width: none !important; }

.logon-main-container {
    overflow: hidden !important;
    max-width: 100vw !important; max-height: 100vh !important;
}

body.logon-page #blazor-error-ui, body.logon-page app, body.logon-page .app,
body.logon-page #app, body.logon-page .container, body.logon-page .container-fluid,
body.logon-page main {
    overflow: hidden !important; max-width: 100vw !important; max-height: 100vh !important;
}

body.logon-page div, body.logon-page span, body.logon-page section,
body.logon-page article, body.logon-page aside, body.logon-page header,
body.logon-page footer, body.logon-page nav, body.logon-page main {
    max-width: 100vw !important; max-height: 100vh !important;
}

/* --- Contenedores intermedios: transparentes (PROTEGER logon-main-container) --- */
html body #logon-template-component {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

html body .logon-main:not(.logon-main-container) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- ENCABEZADO DEL LOGIN --- */
html body #logon-template-component > div.logon-template-header.card.card-header.d-flex.flex-row.justify-content-center,
html body #logon-template-component > div.logon-template-header.card.card-header,
html body #logon-template-component > div.logon-template-header.card,
html body #logon-template-component > div.logon-template-header,
html body #logon-template-component .logon-template-header,
html body .logon-template-header {
    background: linear-gradient(135deg, #2d7a56, #4a9b76, #3d8b68) !important;
    color: #ffffff !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-color: transparent !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(74, 155, 118, 0.30) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 22px 24px !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
}

/* --- RESPONSIVE --- */
@media (prefers-reduced-motion: reduce) {
    .logon-main-container::before, .logon-main-container::after {
        animation: none !important;
    }
}