.kutt-layout-listado-detalle-menu {
    max-width: 356px;
}

.kutt-flex-portal-item {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 599px) {
    .kutt-flex-portal-item {
        flex-direction: column;
    }
}

.editor-propiedades-grid,
.editor-propiedades-grid-2,
.editor-propiedades-grid-3 {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


@media (min-width: 1024px) {
    .editor-propiedades-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .editor-propiedades-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .editor-propiedades-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.col-span-2 {
    grid-column: span 2;
}

/* Opcional: Si quieres que solo pase en pantallas grandes */
@media (min-width: 1024px) {
    .lg-col-span-2 {
        grid-column: span 2;
    }
}

/* Ajustes */
.kutt-layout-ajustes {
    flex-direction: row;
    display: flex;
    flex: 1 1;
    width: 100%;
    height: 100%;
}

.kutt-layout-ajustes .kutt-contenido-complementario .item {
    width: 100%;
    text-align: left;
    box-shadow: none;
    border: none;
    background-color: transparent;
    padding: 12px 6px;

    font-size: var(--kutt-sys-font-body1strong-size);
    font-weight: var(--kutt-sys-font-body1strong-weight);
}

.kutt-layout-ajustes .kutt-contenido-complementario .item.activo {
    background-color: var(--kutt-sys-color-brand-background2);
}

.kutt-layout-ajustes .kutt-contenido-complementario .item:hover {
    background-color: var(--kutt-sys-color-brand-background2-hover);
}

.kutt-layout-ajustes .kutt-contenido-complementario .item svg {
    min-width: 28px;
}

.kutt-layout-ajustes .kutt-contenido-complementario {}

/* Canje */

.layout-propiedades-canje {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 1360px) {
    .layout-propiedades-canje {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 885px) {
    .layout-propiedades-canje {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Superadmin */
.kutt-layout-superadmin-corredoras {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.kutt-layout-superadmin-soporte-usuarios {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.kutt-layout-superadmin-soporte-propiedades {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
}

.kutt-layout-superadmin {
    flex-direction: row;
    display: flex;
    flex: 1 1;
    width: 100%;
}

.kutt-contenido-complementario {
    max-width: 356px;
}


.kutt-layout-superadmin-corredoras {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.panel-soporte-abierto .kutt-layout-superadmin-corredoras {
    grid-template-columns: repeat(1, 1fr);
}

@media screen and (max-width: 1500px) {
    .kutt-layout-superadmin-corredoras {
        grid-template-columns: repeat(1, 1fr);
    }

    .kutt-layout-superadmin-soporte-usuarios {
        grid-template-columns: repeat(1, 1fr);
    }

    .kutt-layout-superadmin-soporte-propiedades {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media screen and (max-width: 800px) {
    .kutt-layout-superadmin-soporte-propiedades {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1100px) {
    .panel-soporte-abierto .kutt-contenido-listado {
        display: none;
    }

    .kutt-layout-superadmin .kutt-contenido-complementario {
        max-width: 280px;
    }
}

@media screen and (max-width: 800px) {
    .kutt-layout-superadmin {
        flex-direction: column;
        display: block;
    }

    .kutt-layout-superadmin .kutt-contenido {
        width: 100%;
        overflow-y: unset;
        max-width: none;
    }

    .kutt-layout-superadmin .kutt-contenido-complementario {
        max-width: none;
    }

    .panel-soporte-abierto .kutt-contenido-complementario {
        display: none;
    }
}





/* Gestión */

.kutt-layout-super-gestion-propiedad {
    flex-direction: row;
    display: flex;
    flex: 1 1;
    width: 100%;
}


/* Firma digital */

.kutt-layout-servicio-firma-digital {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}


/* Login */
.kutt-layout-login-general {
    justify-items: center;
    align-items: center;
    display: flex;
    flex: 1 1;
    background-color: var(--kutt-sys-color-brand2-background);
    color: var(--kutt-sys-color-inverse-neutral-foreground1);
    padding: 0px;
}

.kutt-layout-login-general>div {
    /* Hay 1 div de diferencia por eso el > div */
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 0px;
    margin-left: 256px;
    margin-right: 256px;
}

.kutt-layout-login-general h1 {
    font-size: var(--kutt-sys-font-display-size);
    font-weight: var(--kutt-sys-font-display-weight);
    margin: 0px;
}

.kutt-layout-login-apps {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    max-width: 96px;
    justify-content: center;
    gap: 8px;
}

@media screen and (max-width: 1400px) {
    .kutt-layout-login-general>div {
        padding-left: 128px;
        padding-right: 128px;
    }
}

@media screen and (max-width: 1200px) {
    .kutt-layout-login-general>div {
        padding-left: 64px;
        padding-right: 64px;
    }
}

@media screen and (max-width: 880px) {
    .kutt-layout-login-apps {
        display: none;
    }

    .kutt-layout-login-general {
        align-items: normal;
    }

    .kutt-layout-login-general>div {
        flex-direction: column;
        flex: 1 1;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        justify-items: center;
    }
}


.kutt-contenedor-notificaciones {
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 320px;
    height: 512px;
    max-height: 512px;
    overflow-y: auto;
    position: absolute;
    top: calc(var(--kutt-comp-cabecera-height) + 8px);
    right: 16px;
    background-color: var(--kutt-sys-color-neutral-background1);
    border-radius: var(--kutt-sys-shape-sm);
    box-shadow: var(--kutt-sys-shadow16);
    color: var(--kutt-sys-color-neutral-foreground1);

    font-size: var(--kutt-sys-font-body1-size);
    font-weight: var(--kutt-sys-font-body1-weight);
}


.kutt-notificaciones-fecha {
    text-align: center;
    margin: 16px 0px;
}

.kutt-notificaciones-fecha span {
    background-color: var(--kutt-sys-color-brand-background2);
    border-radius: var(--kutt-sys-shape-lg);
    padding: 0 8px;
}

.kutt-notificaciones-item {
    text-align: left;
    padding: 8px;
}

.kutt-boton-notificaciones {
    font-size: 12px;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
}

.kutt-boton-notificaciones {
    --kutt-comp-boton-color: var(--kutt-sys-color-neutral-background1);
    --kutt-comp-boton-background: var(--kutt-sys-color-brand-background);
    --kutt-comp-boton-border: var(--kutt-sys-color-brand-background);
}

.kutt-boton-notificaciones {
    background-color: var(--kutt-comp-boton-background);
    color: var(--kutt-comp-boton-color);
    font-size: var(--kutt-sys-font-caption1strong-size);
    font-weight: var(--kutt-sys-font-caption1strong-weight);
    border: 1px solid var(--kutt-comp-boton-border);
    border-radius: 4px;
    height: fit-content;
    min-height: none;
    max-height: none;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: none;
}

.kutt-dialog-notificaciones {

    width: 100%;
    background-color: var(--kutt-sys-color-neutral-background1);
    color: var(--kutt-sys-color-neutral-foreground1);
    padding: 32px;
    text-align: left;
    border-radius: var(--kutt-sys-shape-sm);
}

.kutt-notificaciones-nueva {

    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #34a57f;
    border-radius: 50%;

}

.kutt-hr-notificacion {
    position: relative;
}

.kutt-hr-notificacion::after {
    content: "";
    position: absolute;

    width: 100%;
    border-bottom: 2px solid var(--kutt-sys-color-neutral-stroke1);
}

.kutt-contenedor-notificaciones::-webkit-scrollbar {
    width: 6px !important;
}

.kutt-contenedor-notificaciones::-webkit-scrollbar-track {
    background: transparent !important;
}

.kutt-contenedor-notificaciones::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px !important;
}

.campana-con-notificacion {
    position: relative !important;
    display: inline-block !important;
}

.punto-notificacion {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    width: 10px !important;
    height: 10px !important;
    background-color: rgb(165, 52, 52) !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    z-index: 10 !important;
}

.layout-login {
    height: 100vh;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-content: center;
    overflow-y: auto;
}

.layout-login h1 {
    margin-top: 0px;
    font-family: var(--sys-typescale-display-medium-font);
    font-weight: var(--sys-typescale-display-medium-weight);
    font-size: var(--sys-typescale-display-medium-size);
    line-height: var(--sys-typescale-display-medium-line-height);
}

.layout-login .layout-login-footer {
    margin-top: 1rem;
}

.layout-login .layout-login-footer>div {
    display: flex;
    align-items: center;
}

.layout-login img {
    width: 48px;
    aspect-ratio: 1/1;
}

.layout-login .img-login {
    display: flex;
    max-width: 250px;
}

.layout-login .layout-login-form-btns {
    display: flex;
    justify-content: end;
    place-content: end;
}

.layout-login .layout-login-footer-btns {
    justify-content: end;
    place-content: end;
}

@media screen and (max-width: 750px) {
    .layout-login .img-login {
        max-width: 180px;
    }
}

@media screen and (max-width: 600px) {
    .layout-login {
        justify-content: start;
        place-content: start;
    }

    .layout-login .layout-login-body {
        flex: 1 1;
        display: flex;
        flex-direction: column;
    }

    .layout-login .layout-login-body-form {
        flex: 1 1;
    }

    .layout-login img {
        width: 32px;
    }

    .layout-login .layout-login-header {
        padding: .5rem;
    }

    .layout-login h1 {
        font-family: var(--sys-typescale-display-small-font);
        font-weight: var(--sys-typescale-display-small-weight);
        font-size: var(--sys-typescale-display-small-size);
        line-height: var(--sys-typescale-display-small-line-height);
    }

    .layout-login .layout-login-footer>div {
        flex-direction: column-reverse;
    }

    .layout-login .layout-login-footer-btns {
        justify-content: start;
        place-content: start;
    }

    .layout-login .img-login {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .layout-login .layout-login-header {
        padding: 1rem;
    }

    .layout-login h1 {
        font-family: var(--sys-typescale-headline-medium-font);
        font-weight: var(--sys-typescale-headline-medium-weight);
        font-size: var(--sys-typescale-headline-medium-size);
        line-height: var(--sys-typescale-headline-medium-line-height);
    }

    .layout-login-footer-btns {
        flex-direction: column;
    }

}

@media screen and (max-width: 400px) {
    .layout-login .layout-login-form-btns {
        flex-direction: column;
    }
}

.layout-tarjetas-ov {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 600px) {
    .layout-tarjetas-ov {
        flex-direction: column;
    }
}