/* ==========================================================
   TRAZION CLOUD
   PAGINAS DE SISTEMA
   ========================================================== */

.trz-system-page{
    padding: 22px 16px 34px;
}

.trz-system-card{
    max-width: 1080px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(11, 29, 58, .08);
    padding: 40px 34px 34px;
    text-align: center;
}

.trz-system-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 18px;
}

.trz-system-badge--warning{
    background: rgba(245, 158, 11, .12);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, .22);
}

.trz-system-badge--info{
    background: rgba(37, 99, 235, .10);
    color: #1D4ED8;
    border: 1px solid rgba(37, 99, 235, .18);
}

.trz-system-illustration{
    width: min(100%, 540px);
    height: auto;
    display: block;
    margin: 0 auto 18px;
}

.trz-system-title{
    margin: 0 0 10px;
    color: #0B1D3A;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.trz-system-text{
    max-width: 680px;
    margin: 0 auto;
    color: #44566F;
    font-size: 1rem;
    line-height: 1.6;
}

.trz-system-actions{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trz-system-btn{
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: .75rem 1.1rem !important;
    min-width: 170px;
}

.trz-system-btn.btn-primary{
    background: linear-gradient(90deg, #0B1D3A, #2563EB) !important;
    border: 0 !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

.trz-system-btn.btn-outline-primary{
    border-color: rgba(37, 99, 235, .28) !important;
    color: #0B1D3A !important;
    background: #F8FAFC !important;
}

.trz-system-note{
    margin-top: 16px;
    color: #64748B;
    font-size: .93rem;
}

@media (max-width: 767.98px){
    .trz-system-page{
        padding: 14px 10px 26px;
    }

    .trz-system-card{
        padding: 24px 18px 24px;
        border-radius: 22px;
    }

    .trz-system-title{
        font-size: 1.6rem;
    }

    .trz-system-text{
        font-size: .96rem;
    }

    .trz-system-actions{
        gap: 10px;
    }

    .trz-system-btn{
        width: 100%;
    }
}


/* ==========================================================
   TRAZION SYSTEM PAGES V2
   Estado limpio sin tarjeta contenedora
   ========================================================== */

.trz-system-page {
    min-height: calc(100vh - 120px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px 20px 55px !important;
}


/* Quitamos completamente el recuadro */
.trz-system-card {
    width: 100%;
    max-width: 820px;

    margin: 0 auto !important;
    padding: 10px 20px 30px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: center;
}


/* ==========================================================
   ILUSTRACION
   ========================================================== */

.trz-system-illustration {
    width: min(100%, 460px) !important;
    height: auto;

    display: block;

    margin:
        8px
        auto
        12px !important;
}


/* ==========================================================
   BADGE SUPERIOR
   ========================================================== */

.trz-system-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-bottom: 12px !important;

    padding:
        6px
        12px !important;

    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 700;
}


/* ==========================================================
   TITULO Y TEXTO
   ========================================================== */

.trz-system-title {
    margin:
        4px
        0
        8px !important;

    color: #0B1D3A !important;

    font-size: 1.85rem !important;
    font-weight: 800 !important;

    line-height: 1.1;

    letter-spacing: -.035em;
}


.trz-system-text {
    max-width: 650px;

    margin:
        0
        auto !important;

    color: #44566F !important;

    font-size: 14.5px !important;

    line-height: 1.55;
}


/* ==========================================================
   BOTONES
   Estilo equivalente a los botones operativos de Trazion
   ========================================================== */

.trz-system-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 20px !important;
}


.trz-system-btn {
    min-width: 0 !important;

    padding:
        8px
        14px !important;

    border-radius: 7px !important;

    font-size: 13.5px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    box-shadow: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


/* Botón primario */
.trz-system-btn.btn-primary {
    color: #FFFFFF !important;

    background:
        linear-gradient(
            90deg,
            #0B1D3A 0%,
            #2563EB 100%
        ) !important;

    border: 1px solid #2563EB !important;

    box-shadow:
        0 5px 12px
        rgba(37, 99, 235, .18) !important;
}


/* Forzar también icono y texto a blanco */
.trz-system-btn.btn-primary,
.trz-system-btn.btn-primary i,
.trz-system-btn.btn-primary span {
    color: #FFFFFF !important;
}


.trz-system-btn.btn-primary:hover,
.trz-system-btn.btn-primary:focus {
    color: #FFFFFF !important;

    background:
        linear-gradient(
            90deg,
            #13294B 0%,
            #1D4ED8 100%
        ) !important;

    border-color:
        #1D4ED8 !important;

    box-shadow:
        0 7px 16px
        rgba(37, 99, 235, .24) !important;

    transform:
        translateY(-1px);
}


/* Botón secundario 404 */
.trz-system-btn.btn-outline-primary {
    color: #0B1D3A !important;

    background:
        #FFFFFF !important;

    border:
        1px solid
        #2563EB !important;
}


.trz-system-btn.btn-outline-primary:hover {
    color:
        #2563EB !important;

    background:
        #EFF6FF !important;
}


/* ==========================================================
   NOTA INFERIOR
   ========================================================== */

.trz-system-note {
    margin-top: 15px !important;

    color: #64748B !important;

    font-size: 12.5px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .trz-system-page {
        min-height: calc(100vh - 90px);

        padding:
            20px
            14px
            35px !important;
    }

    .trz-system-card {
        padding:
            5px
            5px
            25px !important;
    }

    .trz-system-illustration {
        width:
            min(100%, 360px) !important;
    }

    .trz-system-title {
        font-size:
            1.55rem !important;
    }

    .trz-system-text {
        font-size:
            14px !important;
    }

    .trz-system-actions {
        flex-wrap:
            wrap;
    }

    .trz-system-btn {
        width:
            auto !important;

        min-width:
            130px !important;
    }
}



/* ==========================================================
   TRAZION SYSTEM PAGES V2.1
   Centrado real + fondo gris
   ========================================================== */


/* Fondo completo del área de trabajo */
body.trazion-app .content-wrapper:has(.trz-system-page) {
    background: #EEF2F7 !important;
}


/* Eliminamos espacios heredados de AdminLTE */
body.trazion-app
.content-wrapper:has(.trz-system-page)
.content-header {
    padding: 0 !important;
}


/* Container ocupa todo el espacio */
body.trazion-app
.content-wrapper:has(.trz-system-page)
.container-fluid {
    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================
   CENTRADO REAL
   ========================================================== */

body.trazion-app .trz-system-page {

    width: 100%;

    min-height: calc(100vh - 58px);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        30px
        24px !important;

    margin: 0 !important;

    background:
        #EEF2F7 !important;
}


/* ==========================================================
   CONTENIDO
   Sin tarjeta / sin recuadro
   ========================================================== */

body.trazion-app .trz-system-card {

    width: 100% !important;
    max-width: 760px !important;

    margin: auto !important;

    padding:
        0
        20px !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    text-align:
        center !important;
}


/* ==========================================================
   ILUSTRACION
   ========================================================== */

body.trazion-app .trz-system-illustration {

    width:
        min(100%, 430px) !important;

    display: block;

    margin:
        4px
        auto
        16px !important;
}


/* Badge */
body.trazion-app .trz-system-badge {

    margin:
        0
        auto
        16px !important;
}


/* ==========================================================
   TITULO
   ========================================================== */

body.trazion-app .trz-system-title {

    margin:
        0
        auto
        9px !important;

    color:
        #0B1D3A !important;

    text-align:
        center !important;
}


/* Texto */
body.trazion-app .trz-system-text {

    margin:
        0
        auto !important;

    text-align:
        center !important;
}


/* ==========================================================
   BOTON
   ========================================================== */

body.trazion-app .trz-system-actions {

    width: 100%;

    display:
        flex !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    margin-top:
        20px !important;
}


body.trazion-app .trz-system-btn.btn-primary {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px;

    color:
        #FFFFFF !important;

    background:
        #2563EB !important;

    border:
        1px solid #2563EB !important;

    border-radius:
        7px !important;

    padding:
        9px
        15px !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    box-shadow:
        0 5px 12px
        rgba(37, 99, 235, .20) !important;
}


body.trazion-app .trz-system-btn.btn-primary,
body.trazion-app .trz-system-btn.btn-primary i {

    color:
        #FFFFFF !important;
}


body.trazion-app .trz-system-btn.btn-primary:hover {

    background:
        #1D4ED8 !important;

    border-color:
        #1D4ED8 !important;

    color:
        #FFFFFF !important;
}


/* Nota inferior */
body.trazion-app .trz-system-note {

    margin:
        17px
        auto
        0 !important;

    text-align:
        center !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767.98px) {

    body.trazion-app .trz-system-page {

        min-height:
            calc(100vh - 55px);

        padding:
            24px
            16px !important;
    }


    body.trazion-app .trz-system-card {

        max-width:
            100% !important;

        padding:
            0 !important;
    }


    body.trazion-app .trz-system-illustration {

        width:
            min(100%, 340px) !important;
    }
}



/* ==========================================================
   TRAZION SYSTEM PAGES V2.2
   CORRECCION CENTRADO REAL
   Acceso restringido + 404
   ========================================================== */


/*
 * Algunas páginas de sistema están dentro de un segundo
 * .content-wrapper. AdminLTE le aplica nuevamente el margen
 * del sidebar y desplaza el contenido hacia la derecha.
 */
body.trazion-app
.content-wrapper
.content-wrapper:has(.trz-system-page) {

    margin-left: 0 !important;

    width: 100% !important;

    min-height: 100% !important;

    background: #EEF2F7 !important;
}


/* Fondo gris también para el wrapper principal */
body.trazion-app
.content-wrapper:has(.trz-system-page),

body.trazion-app
.content-wrapper:has(.content-wrapper .trz-system-page) {

    background: #EEF2F7 !important;
}


/* Quitamos cualquier desplazamiento interno */
body.trazion-app
.content-wrapper
.content-wrapper:has(.trz-system-page)
.content-header {

    padding: 0 !important;
    margin: 0 !important;
}


body.trazion-app
.content-wrapper
.content-wrapper:has(.trz-system-page)
.container-fluid {

    width: 100% !important;

    max-width: none !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* ==========================================================
   AREA COMPLETA
   ========================================================== */

body.trazion-app .trz-system-page {

    width: 100% !important;

    min-height: calc(100vh - 58px) !important;

    margin: 0 !important;

    padding: 30px 24px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #EEF2F7 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   CONTENIDO CENTRADO
   ========================================================== */

body.trazion-app .trz-system-card {

    width: 100% !important;

    max-width: 760px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    position: relative !important;

    left: auto !important;

    right: auto !important;

    transform: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    text-align: center !important;
}


/* Ilustración */
body.trazion-app .trz-system-illustration {

    width: min(100%, 430px) !important;

    margin:
        5px
        auto
        15px !important;
}


/* Badge */
body.trazion-app .trz-system-badge {

    margin:
        0
        auto
        15px !important;
}


/* Título */
body.trazion-app .trz-system-title {

    width: 100%;

    margin:
        0
        auto
        8px !important;

    text-align:
        center !important;
}


/* Texto */
body.trazion-app .trz-system-text {

    max-width: 660px;

    margin:
        0
        auto !important;

    text-align:
        center !important;
}


/* Botones */
body.trazion-app .trz-system-actions {

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    margin:
        20px
        auto
        0 !important;
}


/* Nota inferior */
body.trazion-app .trz-system-note {

    width: 100%;

    margin:
        16px
        auto
        0 !important;

    text-align:
        center !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    body.trazion-app
    .content-wrapper
    .content-wrapper:has(.trz-system-page) {

        margin-left: 0 !important;
    }


    body.trazion-app .trz-system-page {

        min-height:
            calc(100vh - 55px) !important;

        padding:
            20px
            15px !important;
    }


    body.trazion-app .trz-system-illustration {

        width:
            min(100%, 350px) !important;
    }
}