:root {
    color-scheme: dark;
    /* Identidad PAF Core — dark profundo + violeta/cyan + ámbar/menta */
    --color-principal: #8a5cff;        /* violeta de marca */
    --color-principal-oscuro: #6d3ff0;
    --color-secundario: #37d6ff;       /* cyan de marca */
    --color-acento: #ffc857;           /* ámbar cálido */
    --color-fondo: #070907;            /* fondo base PAF Core */
    --color-texto: #edf7ef;
    --color-footer: #05060a;

    /* superficies y líneas para dark total */
    --pf-bg: #070907;
    --pf-elevated: #0e1410;
    --pf-surface: #11141c;
    --pf-surface-2: #161a26;
    --pf-surface-3: #1c2130;
    --pf-line: rgba(222, 225, 245, .13);
    --pf-line-strong: rgba(222, 225, 245, .26);
    --pf-text: #edf7ef;
    --pf-muted: #a9aabd;
    --pf-soft: #d9ddec;
    --pf-mint: #6fe0a6;                 /* verde del logo */
    --pf-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

a, .btn-link {
    color: var(--color-secundario);
}

a:hover, .btn-link:hover {
    color: var(--color-principal);
}

.btn-primary {
    color: #fff;
    background-color: var(--color-principal);
    border-color: var(--color-principal-oscuro);
}

.btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, input:focus, form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-principal)!important;
}

.form-control:focus, .form-check-input:focus, input:focus, form-select:focus {
    border-color: white!important;
}

.form-check-input:checked {
    background-color: var(--color-principal)!important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.a:hover {
    cursor: pointer!important;
}

.cursor-pointer:hover {
    cursor:pointer;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--color-principal);
}

.backgroundColorInquiLinkPrimario {
    background-color: var(--color-principal) !important;
}
.backgroundColorInquiLinkSecundario {
    background-color: var(--color-secundario) !important;
}

.inputsFormularios:focus {
    border-color: var(--color-principal) !important;
    border-color: white !important;
}

.my-custom-button-class {
    border: 1px solid var(--color-principal);
    color: white;
    background-color: var(--color-principal);
    min-width: 5rem;
}

.my-custom-button-class:hover {
    background-color: var(--color-principal-oscuro)
}

    .my-custom-button-class:focus-visible {
        box-shadow: 0 0 0 3px var(--color-principal);
    }

.fixed-bottom-inquilink {
    /*margin-top: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;*/
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.small-font-size {
    font-size: .8rem!important;
}

.background-semitransparente {
    /*background-color: #ffffff57;*/
    background-color: white
}

.ancho-maximo-input {
    max-width: 12rem;
}

/*.select-form {
    border-color: transparent !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem transparent !important;
}*/

    .form-select:hover {
        border-color: var(--color-principal) !important;
        outline: 0;
        box-shadow: 0 0 0 .09rem var(--color-principal) !important;
    }

    .form-select:active {
        border-color: transparent!important;
        outline: 0;
        box-shadow: 0 0 0 .09rem transparent !important;
    }
input:focus-visible {
    border: none;
    outline: 0;
    box-shadow: 0 0 0 0!important;
}

.form-select:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem transparent;
}
    /*INPUTS*/
    /*ANIMACIONES*/
    /*SLIDE-TOP*/
    /*------------------------------------------------------------------------------------------*/
    .slide-top {
    -webkit-animation: slide-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
/*------------------------------------------------------------------------------------------*/
.scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



/*MEDIAS QUERY*/

html {
    font-size: 14px;
    scroll-behavior: smooth;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--color-texto);
    background-color: var(--pf-bg);
}

/* Gradientes de marca en capa fija (patrón performante, sin background-attachment) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 12%, rgba(138, 92, 255, .14), transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(55, 214, 255, .08), transparent 32%),
        linear-gradient(180deg, #070907, #090a0f 44%, #080a08);
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /*Margin bottom by footer height */
    margin-bottom: 227px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 45px; /* Vertically center the text there */
    background-color: var(--color-footer);
}

.botones {
    border: 1px solid var(--color-principal) !important;
    color: white !important;
    background-color: var(--color-principal) !important
}
    .botones:hover {
        color: var(--color-principal) !important;
        background-color: white !important
    }
.botones:active {
   transform: scale(0.95)
}
.labels {
    border: 1px solid var(--color-principal);
    color: white;
    background-color: var(--color-principal)
}


/*-------FONDO MOVIMIENTO-------------*/
/*---------FONDO GRADIENTE FIJO--------------*/
/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
/*background-color: var(--color-secundario);*/
/*background: -webkit-linear-gradient(90deg, #d6d6d6,#26b564);*/ /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(90deg, #d6d6d6,#26b564);*/ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*background: rgb(255,255,255);*/
/*background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(38,181,100,1) 100%);*/
/*background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgb(141, 225, 178) 100%);*/
/*height: 100vh*/
/*}*/

/*FONDO MOVIMIENTO*/
/*@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(121, 61%, 77%, 0);
        --x-0: 95%;
        --y-0: 70%;
        --s-start-0: 5%;
        --s-end-0: 67%;
        --c-1: hsla(139, 92%, 80%, 0.26);
        --x-1: 63%;
        --y-1: 59%;
        --s-start-1: 5%;
        --s-end-1: 61%;
        --c-2: hsla(122, 71%, 95%, 1);
        --x-2: 58%;
        --y-2: 8%;
        --s-start-2: 6%;
        --s-end-2: 71%;
        --c-3: hsla(120, 66%, 76%, 0);
        --x-3: 78%;
        --y-3: 78%;
        --s-start-3: 12%;
        --s-end-3: 50%;
        --c-4: hsla(126.00000000000006, 74%, 80%, 0.66);
        --x-4: 2%;
        --y-4: 100%;
        --s-start-4: 2%;
        --s-end-4: 68%;
        --c-5: hsla(108, 93%, 61%, 0);
        --x-5: 52%;
        --y-5: 98%;
        --s-start-5: 17%;
        --s-end-5: 60%;
        --c-6: hsla(108, 59%, 97%, 1);
        --x-6: 47%;
        --y-6: 90%;
        --s-start-6: 13%;
        --s-end-6: 52%;
    }

    50% {
        --c-0: hsla(127, 65%, 66%, 0);
        --x-0: 24%;
        --y-0: 93%;
        --s-start-0: 11%;
        --s-end-0: 82%;
        --c-1: hsla(111.99999999999999, 88%, 86%, 0.83);
        --x-1: 92%;
        --y-1: 62%;
        --s-start-1: 20%;
        --s-end-1: 86%;
        --c-2: hsla(114, 96%, 94%, 1);
        --x-2: 22%;
        --y-2: 11%;
        --s-start-2: 1%;
        --s-end-2: 50%;
        --c-3: hsla(133, 71%, 66%, 0);
        --x-3: 16%;
        --y-3: 69%;
        --s-start-3: 14%;
        --s-end-3: 50%;
        --c-4: hsla(128, 77%, 85%, 0.36);
        --x-4: 15%;
        --y-4: 67%;
        --s-start-4: 0%;
        --s-end-4: 72%;
        --c-5: hsla(120, 93%, 73%, 0);
        --x-5: 59%;
        --y-5: 18%;
        --s-start-5: 5%;
        --s-end-5: 85%;
        --c-6: hsla(110.99999999999999, 63%, 70%, 0.71);
        --x-6: 13%;
        --y-6: 68%;
        --s-start-6: 12%;
        --s-end-6: 62%;
    }

    100% {
        --c-0: hsla(105, 80%, 83%, 0);
        --x-0: 66%;
        --y-0: 13%;
        --s-start-0: 19%;
        --s-end-0: 53%;
        --c-1: hsla(120, 56%, 68%, 0.66);
        --x-1: 35%;
        --y-1: 51%;
        --s-start-1: 5%;
        --s-end-1: 75%;
        --c-2: hsla(120, 68%, 100%, 1);
        --x-2: 57%;
        --y-2: 20%;
        --s-start-2: 14%;
        --s-end-2: 66%;
        --c-3: hsla(102, 81%, 89%, 0);
        --x-3: 15%;
        --y-3: 52%;
        --s-start-3: 4%;
        --s-end-3: 86%;
        --c-4: hsla(100, 86%, 98%, 1);
        --x-4: 12%;
        --y-4: 50%;
        --s-start-4: 3%;
        --s-end-4: 78%;
        --c-5: hsla(107, 97%, 70%, 0);
        --x-5: 96%;
        --y-5: 55%;
        --s-start-5: 12%;
        --s-end-5: 51%;
        --c-6: hsla(120, 65%, 90%, 1);
        --x-6: 30%;
        --y-6: 86%;
        --s-start-6: 3%;
        --s-end-6: 80%;
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(121, 61%, 77%, 0)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 95%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 67%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(139, 92%, 80%, 0.26)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(122, 71%, 95%, 1)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 6%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 71%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(120, 66%, 76%, 0)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 12%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(126.00000000000006, 74%, 80%, 0.66)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(108, 93%, 61%, 0)
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 17%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(108, 59%, 97%, 1)
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 47%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

html {
    --c-0: hsla(121, 61%, 77%, 0);
    --x-0: 95%;
    --y-0: 70%;
    --c-1: hsla(139, 92%, 80%, 0.26);
    --x-1: 63%;
    --y-1: 59%;
    --c-2: hsla(122, 71%, 95%, 1);
    --x-2: 58%;
    --y-2: 8%;
    --c-3: hsla(120, 66%, 76%, 0);
    --x-3: 78%;
    --y-3: 78%;
    --c-4: hsla(126.00000000000006, 74%, 80%, 0.66);
    --x-4: 2%;
    --y-4: 100%;
    --c-5: hsla(108, 93%, 61%, 0);
    --x-5: 52%;
    --y-5: 98%;
    --c-6: hsla(108, 59%, 97%, 1);
    --x-6: 47%;
    --y-6: 90%;
    background-color: hsla(146.42857142857142, 58%, 71%, 0.46);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal;
}*/
/*@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(121, 61%, 77%, 0);
        --x-0: 95%;
        --y-0: 70%;
        --s-start-0: 5%;
        --s-end-0: 67%;
        --c-1: hsla(139, 92%, 80%, 1);
        --x-1: 63%;
        --y-1: 59%;
        --s-start-1: 5%;
        --s-end-1: 61%;
        --c-2: hsla(122, 71%, 95%, 1);
        --x-2: 58%;
        --y-2: 8%;
        --s-start-2: 6%;
        --s-end-2: 71%;
        --c-3: hsla(120, 66%, 76%, 0);
        --x-3: 78%;
        --y-3: 78%;
        --s-start-3: 12%;
        --s-end-3: 50%;
        --c-4: hsla(126, 78%, 80%, 1);
        --x-4: 2%;
        --y-4: 100%;
        --s-start-4: 2%;
        --s-end-4: 68%;
        --c-5: hsla(108, 93%, 61%, 0);
        --x-5: 52%;
        --y-5: 98%;
        --s-start-5: 17%;
        --s-end-5: 60%;
        --c-6: hsla(108, 59%, 97%, 1);
        --x-6: 47%;
        --y-6: 90%;
        --s-start-6: 13%;
        --s-end-6: 52%;
    }

    50% {
        --c-0: hsla(127, 65%, 66%, 0);
        --x-0: 24%;
        --y-0: 93%;
        --s-start-0: 11%;
        --s-end-0: 82%;
        --c-1: hsla(112, 89%, 86%, 1);
        --x-1: 92%;
        --y-1: 62%;
        --s-start-1: 20%;
        --s-end-1: 86%;
        --c-2: hsla(114, 96%, 94%, 1);
        --x-2: 22%;
        --y-2: 11%;
        --s-start-2: 1%;
        --s-end-2: 50%;
        --c-3: hsla(133, 71%, 66%, 0);
        --x-3: 16%;
        --y-3: 69%;
        --s-start-3: 14%;
        --s-end-3: 50%;
        --c-4: hsla(128, 77%, 85%, 1);
        --x-4: 15%;
        --y-4: 67%;
        --s-start-4: 0%;
        --s-end-4: 72%;
        --c-5: hsla(120, 93%, 73%, 0);
        --x-5: 59%;
        --y-5: 18%;
        --s-start-5: 5%;
        --s-end-5: 85%;
        --c-6: hsla(110.99999999999999, 63%, 70%, 1);
        --x-6: 13%;
        --y-6: 68%;
        --s-start-6: 12%;
        --s-end-6: 62%;
    }

    100% {
        --c-0: hsla(105, 80%, 83%, 0);
        --x-0: 66%;
        --y-0: 13%;
        --s-start-0: 19%;
        --s-end-0: 53%;
        --c-1: hsla(120, 56%, 68%, 0.87);
        --x-1: 35%;
        --y-1: 51%;
        --s-start-1: 5%;
        --s-end-1: 75%;
        --c-2: hsla(120, 68%, 100%, 1);
        --x-2: 57%;
        --y-2: 20%;
        --s-start-2: 14%;
        --s-end-2: 66%;
        --c-3: hsla(102, 81%, 89%, 0);
        --x-3: 15%;
        --y-3: 52%;
        --s-start-3: 4%;
        --s-end-3: 86%;
        --c-4: hsla(100, 86%, 98%, 1);
        --x-4: 12%;
        --y-4: 50%;
        --s-start-4: 3%;
        --s-end-4: 78%;
        --c-5: hsla(107, 97%, 70%, 0);
        --x-5: 96%;
        --y-5: 55%;
        --s-start-5: 12%;
        --s-end-5: 51%;
        --c-6: hsla(120, 65%, 90%, 1);
        --x-6: 30%;
        --y-6: 86%;
        --s-start-6: 3%;
        --s-end-6: 80%;
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(121, 61%, 77%, 0)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 95%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 67%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(139, 92%, 80%, 1)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(122, 71%, 95%, 1)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 6%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 71%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(120, 66%, 76%, 0)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 12%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(126, 78%, 80%, 1)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(108, 93%, 61%, 0)
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 17%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(108, 59%, 97%, 1)
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 47%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

html {
    --c-0: hsla(121, 61%, 77%, 0);
    --x-0: 95%;
    --y-0: 70%;
    --c-1: hsla(139, 92%, 80%, 1);
    --x-1: 63%;
    --y-1: 59%;
    --c-2: hsla(122, 71%, 95%, 1);
    --x-2: 58%;
    --y-2: 8%;
    --c-3: hsla(120, 66%, 76%, 0);
    --x-3: 78%;
    --y-3: 78%;
    --c-4: hsla(126, 78%, 80%, 1);
    --x-4: 2%;
    --y-4: 100%;
    --c-5: hsla(108, 93%, 61%, 0);
    --x-5: 52%;
    --y-5: 98%;
    --c-6: hsla(108, 59%, 97%, 1);
    --x-6: 47%;
    --y-6: 90%;
    background-color: hsla(146.42857142857142, 58%, 71%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal;
}*/
body {
    /*background-color:transparent;*/
    background-color: var(--color-fondo);
}

/*[type="date"] {
    background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}

    [type="date"]::-webkit-inner-spin-button {
        display: none;
    }

    [type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
    }

date-time-picker {
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
    width: 190px;
}*/



/*@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(127, 19%, 70%, 1);
        --x-0: 96%;
        --y-0: 27%;
        --s-start-0: 2%;
        --s-end-0: 58%;
        --c-1: hsla(159, 24%, 87%, 1);
        --x-1: 7%;
        --y-1: 9%;
        --s-start-1: 2%;
        --s-end-1: 58%;
        --c-2: hsla(111, 13%, 68%, 1);
        --x-2: 30%;
        --y-2: 21%;
        --s-start-2: 2%;
        --s-end-2: 58%;
        --c-3: hsla(97, 42%, 86%, 1);
        --x-3: 13%;
        --y-3: 14%;
        --s-start-3: 2%;
        --s-end-3: 58%;
        --c-4: hsla(104, 44%, 82%, 1);
        --x-4: 28%;
        --y-4: 65%;
        --s-start-4: 2%;
        --s-end-4: 58%;
    }

    100% {
        --c-0: hsla(153, 14%, 91%, 1);
        --x-0: 41%;
        --y-0: 50%;
        --s-start-0: 2%;
        --s-end-0: 58%;
        --c-1: hsla(165, 39%, 61%, 1);
        --x-1: 5%;
        --y-1: 6%;
        --s-start-1: 2%;
        --s-end-1: 58%;
        --c-2: hsla(112, 48%, 83%, 1);
        --x-2: 8%;
        --y-2: 16%;
        --s-start-2: 2%;
        --s-end-2: 58%;
        --c-3: hsla(153, 12%, 79%, 1);
        --x-3: 22%;
        --y-3: 94%;
        --s-start-3: 2%;
        --s-end-3: 58%;
        --c-4: hsla(153, 44%, 80%, 1);
        --x-4: 56%;
        --y-4: 36%;
        --s-start-4: 2%;
        --s-end-4: 58%;
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(127, 19%, 70%, 1)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 27%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(159, 24%, 87%, 1)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(111, 13%, 68%, 1)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 21%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(97, 42%, 86%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(104, 44%, 82%, 1)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 28%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 65%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

html {
    --c-0: hsla(127, 19%, 70%, 1);
    --x-0: 96%;
    --y-0: 27%;
    --c-1: hsla(159, 24%, 87%, 1);
    --x-1: 7%;
    --y-1: 9%;
    --c-2: hsla(111, 13%, 68%, 1);
    --x-2: 30%;
    --y-2: 21%;
    --c-3: hsla(97, 42%, 86%, 1);
    --x-3: 13%;
    --y-3: 14%;
    --c-4: hsla(104, 44%, 82%, 1);
    --x-4: 28%;
    --y-4: 65%;
    ;
    background-color: hsla(155, 43%, 77%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
}*/
/*html {
    background-color: hsla(258, 85%, 86%, 1);
    background-image: radial-gradient(circle at 70% 83%, hsla(221, 92%, 88%, 1) 7%, transparent 64%), radial-gradient(circle at 23% 37%, hsla(265, 73%, 92%, 1) 7%, transparent 64%), radial-gradient(circle at 64% 91%, hsla(294, 72%, 83%, 1) 7%, transparent 64%), radial-gradient(circle at 24% 55%, hsla(338, 75%, 99%, 1) 7%, transparent 64%), radial-gradient(circle at 75% 13%, hsla(196, 79%, 98%, 1) 7%, transparent 64%), radial-gradient(circle at 62% 84%, hsla(262, 100%, 80%, 1) 7%, transparent 64%), radial-gradient(circle at 82% 34%, hsla(255, 72%, 89%, 1) 7%, transparent 64%), radial-gradient(circle at 33% 83%, hsla(167, 79%, 96%, 1) 7%, transparent 64%), radial-gradient(circle at 23% 57%, hsla(315, 82%, 85%, 1) 7%, transparent 64%), radial-gradient(circle at 82% 51%, hsla(286, 82%, 85%, 1) 7%, transparent 64%);
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
}*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield; /* Esto quita los spinners en Firefox */
}

.min-max-width {
    max-width: 10rem;
    min-width: 8rem;
}
.min-max-width-mensaje {
    min-width: 3.5rem;
    max-width: 3.5rem;
}
.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}




/** ----------------------------------------
* animation slide-in-fwd-left
* ----------------------------------------*/

.slide-in-fwd-left {
    -webkit-animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-left {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(-1000px);
        transform: translateZ(-1400px) translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-left {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(-1000px);
        transform: translateZ(-1400px) translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}
/**
 * ----------------------------------------
 * animation slide-in-fwd-right
 * ----------------------------------------
 */

.slide-in-fwd-right {
    -webkit-animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(1000px);
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(1000px);
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}


.message-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: .9rem;
    resize: none;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.message-item {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.message-textarea:focus {
    border-color: #00000021;
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
    outline: none;
}

.min-width-form-editar {
    min-width: 20rem;
}

.boton-volver {
    border: 1px solid white!important;
}
.header-usuario {
    min-height: 7rem;
}
.border-radius {
    border-radius: 1.25rem;
}
td {
    height: 3rem;
}
.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-principal);
    border-radius: .25rem;
    margin-top: 1rem;
}
.disabled-inquilink {
    background-color: rgb(239 239 239 / 69%) !important;
    transition: none;
}
    .disabled-inquilink:hover {
        background-color: rgb(239 239 239 / 69%)!important;
        cursor: initial;
    }
    .disabled-inquilink:active {
        transform: scale(1)!important;
    }

.spanCantidadRegistros {
    z-index: 99;
    position: absolute;
    left: 173px;
    top: 12px;
    z-index: 999;
}

.mostrar {
    display: block;
}

.ocultar {
    display: none;
}

/* ============================================================
   CAPA DARK — Identidad PAF Core (dark total)
   Neutraliza las superficies claras de Bootstrap 5.1 y de la app.
   ============================================================ */

/* Superficies claras de Bootstrap usadas en la app */
.bg-light,
.bg-white {
    background-color: var(--pf-surface) !important;
    color: var(--pf-text);
}

.bg-body, .bg-body-tertiary {
    background-color: var(--pf-bg) !important;
}

/* bg-white con opacidad (login, tarjetas translúcidas) -> superficie oscura translúcida */
.bg-opacity-75, .bg-opacity-50, .bg-opacity-25 {
    --bs-bg-opacity: 1;
}
.bg-white.bg-opacity-75,
.bg-white.bg-opacity-50,
.bg-white.bg-opacity-25 {
    background-color: rgba(17, 20, 28, .92) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--pf-line);
}

/* Texto: pasar oscuros a claros */
.text-dark, .text-black, .text-body {
    color: var(--pf-text) !important;
}
.text-black-50 {
    color: var(--pf-muted) !important;
}
.text-muted, .text-secondary {
    color: var(--pf-muted) !important;
}

/* Tarjetas */
.card {
    background-color: var(--pf-surface);
    border-color: var(--pf-line);
    color: var(--pf-text);
}
.card-header, .card-footer {
    background-color: var(--pf-surface-2);
    border-color: var(--pf-line);
}

/* Formularios */
.form-control, .form-select, textarea, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"] {
    background-color: var(--pf-surface-2);
    border: 1px solid var(--pf-line-strong);
    color: var(--pf-text);
}
.form-control::placeholder, textarea::placeholder { color: #6f7184; }
.form-control:focus, .form-select:focus, textarea:focus,
input:focus, select:focus {
    background-color: var(--pf-surface-2);
    color: var(--pf-text);
    border-color: var(--color-principal) !important;
    box-shadow: 0 0 0 .2rem rgba(138, 92, 255, .25) !important;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9aabd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option, select option { background-color: var(--pf-surface-2); color: var(--pf-text); }
.form-check-input {
    background-color: var(--pf-surface-3);
    border: 1px solid var(--pf-line-strong);
}
.input-group-text {
    background-color: var(--pf-surface-3);
    border-color: var(--pf-line-strong);
    color: var(--pf-muted);
}

/* Tablas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pf-text);
    color: var(--pf-text);
    border-color: var(--pf-line);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--pf-text);
    border-bottom-color: var(--pf-line);
}
.table thead th, .table th {
    color: var(--pf-soft);
    border-bottom-color: var(--pf-line-strong);
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(138, 92, 255, .10);
    color: var(--pf-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, .03);
}

/* Dropdowns / modales / listas (Bootstrap 5.1) */
.dropdown-menu {
    background-color: var(--pf-surface-2);
    border-color: var(--pf-line);
    color: var(--pf-text);
}
.dropdown-item { color: var(--pf-soft); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(138, 92, 255, .16);
    color: var(--pf-text);
}
.modal-content, .offcanvas {
    background-color: var(--pf-surface);
    color: var(--pf-text);
    border: 1px solid var(--pf-line);
}
.modal-header, .modal-footer { border-color: var(--pf-line); }
.list-group-item {
    background-color: var(--pf-surface);
    border-color: var(--pf-line);
    color: var(--pf-text);
}

/* Bordes utilitarios -> línea tenue clara */
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--pf-line) !important;
}

/* Reglas propias de la app que tenían blanco */
.background-semitransparente {
    background-color: var(--pf-surface) !important;
    color: var(--pf-text);
}
.message-item {
    background-color: var(--pf-surface-2);
    border: 1px solid var(--pf-line);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    color: var(--pf-text);
}
.message-textarea {
    background-color: var(--pf-surface-2);
    border: 1px solid var(--pf-line-strong);
    color: var(--pf-text);
}
.message-textarea:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 .2rem rgba(138, 92, 255, .25);
}
.message-textarea::placeholder { color: #6f7184; }

/* botón outline que invertía a blanco en hover */
.botones:hover {
    color: #fff !important;
    background-color: var(--color-principal-oscuro) !important;
}

.alert {
    background-color: rgba(138, 92, 255, .10);
    border: 1px solid var(--pf-line-strong);
    color: var(--pf-text);
}

/* badge secundario (fechas) -> cyan translúcido legible */
.backgroundColorInquiLinkSecundario {
    background-color: rgba(55, 214, 255, .16) !important;
    border: 1px solid rgba(55, 214, 255, .45);
    color: var(--pf-text) !important;
}

/* chat: contenedor de carga deshabilitado */
.disabled-inquilink {
    background-color: rgba(255, 255, 255, .06) !important;
}
.disabled-inquilink:hover {
    background-color: rgba(255, 255, 255, .06) !important;
}

/* Header de página: gradiente de marca en vez de violeta plano */
h2.backgroundColorInquiLinkPrimario {
    background: linear-gradient(135deg, var(--color-principal), var(--color-principal-oscuro)) !important;
    box-shadow: 0 14px 40px rgba(138, 92, 255, .28);
}

/* Scrollbar dark */
* {
    scrollbar-color: #2a3040 transparent;
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #2a3040;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3a4255; background-clip: padding-box; }

/* SweetAlert2 en dark */
.swal2-popup {
    background: var(--pf-surface) !important;
    color: var(--pf-text) !important;
    border: 1px solid var(--pf-line);
}
.swal2-title, .swal2-html-container { color: var(--pf-text) !important; }
.swal2-styled.swal2-confirm {
    background-color: var(--color-principal) !important;
}
.swal2-styled.swal2-cancel {
    background-color: var(--pf-surface-3) !important;
}

/* ============================================================
   INQUILINK — Living Canvas
   Rebranding cálido, orgánico y continuo.
   ============================================================ */
:root {
    color-scheme: light;
    --il-cream: #fbf7ef;
    --il-paper: #fffdf8;
    --il-ink: #083b3e;
    --il-muted: #61777b;
    --il-coral: #ff715f;
    --il-coral-strong: #e85b4d;
    --il-coral-soft: #ffe8e1;
    --il-violet: #7f67cb;
    --il-lavender: #ebe7fb;
    --il-blue: #4c9ce7;
    --il-blue-soft: #e6f2fc;
    --il-sage: #4b9b78;
    --il-sage-soft: #e3f1e9;
    --il-line: rgba(180, 152, 117, .32);
    --il-shadow: 0 22px 60px rgba(35, 66, 67, .10);

    --color-principal: var(--il-coral);
    --color-principal-oscuro: var(--il-coral-strong);
    --color-secundario: var(--il-violet);
    --color-acento: var(--il-sage);
    --color-fondo: var(--il-cream);
    --color-texto: var(--il-ink);
    --color-footer: transparent;
    --pf-bg: var(--il-cream);
    --pf-elevated: var(--il-paper);
    --pf-surface: rgba(255, 253, 248, .88);
    --pf-surface-2: #f6f1e9;
    --pf-surface-3: var(--il-lavender);
    --pf-line: var(--il-line);
    --pf-line-strong: rgba(148, 120, 89, .42);
    --pf-text: var(--il-ink);
    --pf-muted: var(--il-muted);
    --pf-soft: #365d60;
    --pf-mint: var(--il-sage);
    --pf-shadow: var(--il-shadow);
}

html {
    background: var(--il-cream);
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .92), transparent 28rem),
        linear-gradient(120deg, #fbf7ef 0%, #fffaf1 54%, #f6f3f7 100%) !important;
    color: var(--il-ink) !important;
    font-family: Inter, "Segoe UI", sans-serif;
    margin-bottom: 0;
    min-height: 100vh;
}

body::before {
    background: rgba(255, 255, 255, .28);
    border-radius: 50%;
    content: "";
    height: 34rem;
    pointer-events: none;
    position: fixed;
    right: -14rem;
    top: -11rem;
    width: 34rem;
    z-index: 0;
}

a,
.btn-link {
    color: var(--il-ink);
}

a:hover,
.btn-link:hover {
    color: var(--il-coral-strong);
}

.content {
    padding-top: 0;
}

.fixed-bottom-inquilink {
    bottom: auto;
    left: auto;
    position: relative;
    right: auto;
    z-index: 1;
}

.bg-light,
.bg-white,
.card,
.list-group-item,
.modal-content,
.offcanvas,
.swal2-popup {
    background-color: rgba(255, 253, 248, .94) !important;
    color: var(--il-ink) !important;
}

.text-dark,
.text-black,
.text-body,
.table,
.table > :not(caption) > * > *,
.swal2-title,
.swal2-html-container {
    color: var(--il-ink) !important;
}

.text-black-50,
.text-muted,
.text-secondary {
    color: var(--il-muted) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"] {
    background-color: rgba(255, 255, 255, .7) !important;
    border: 1px solid var(--il-line) !important;
    border-radius: 1rem !important;
    color: var(--il-ink) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: #8b9998;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    background-color: #fff !important;
    border-color: var(--il-coral) !important;
    box-shadow: 0 0 0 .22rem rgba(255, 113, 95, .13) !important;
    color: var(--il-ink) !important;
}

.form-check-input {
    background-color: #fff;
    border-color: var(--il-line);
}

.form-check-input:checked {
    background-color: var(--il-coral) !important;
    border-color: var(--il-coral) !important;
}

.btn,
.button-inquilink,
.my-custom-button-class,
.botones {
    border-radius: 999px !important;
    font-weight: 680;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.btn-primary,
.backgroundColorInquiLinkPrimario,
.swal2-styled.swal2-confirm {
    background: var(--il-coral) !important;
    border-color: var(--il-coral) !important;
    color: #fff !important;
}

.backgroundColorInquiLinkSecundario {
    background: var(--il-lavender) !important;
    border-color: rgba(127, 103, 203, .28) !important;
    color: var(--il-violet) !important;
}

h2.backgroundColorInquiLinkPrimario {
    background: var(--il-coral) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(255, 113, 95, .22);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--il-ink);
    border-color: var(--il-line);
}

.table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-color: var(--il-line);
}

.table-hover > tbody > tr:hover > * {
    background: rgba(235, 231, 251, .55) !important;
}

.dropdown-menu {
    background: rgba(255, 253, 248, .98);
    border: 1px solid var(--il-line);
    border-radius: 1.25rem;
    box-shadow: var(--il-shadow);
}

.dropdown-item {
    color: var(--il-ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--il-coral-soft);
    color: var(--il-coral-strong);
}

.alert {
    background: var(--il-lavender);
    border-color: rgba(127, 103, 203, .25);
    border-radius: 1.2rem;
    color: var(--il-ink);
}

.header-usaurio {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px !important;
    box-shadow: 0 12px 34px rgba(41, 56, 67, .08);
    color: var(--il-ink) !important;
}

.header-usaurio .text-white,
.header-usaurio a {
    color: var(--il-ink) !important;
}

* {
    scrollbar-color: #c6bdb0 transparent;
}

*::-webkit-scrollbar-thumb {
    background: #c6bdb0;
}
