body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, " Apple Color Emoji", " Segoe UI Emoji", " Segoe UI Symbol", " Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-text-size-adjust: 100%;
}

/* \s*\n\s* */
/* Flexbox helpers */
.d-flex {
    display: flex !important;
}

.d-inline {
    display: inline !important;
}

.d-block {
    display: block !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.hidden {
    display: none !important;
}

/* Tamaños de texto y peso */
.fs-1 {
    font-size: 2.5rem;
}

.fs-2 {
    font-size: 2rem;
}

.fs-3 {
    font-size: 1.75rem;
}

.fs-4 {
    font-size: 1.5rem;
}

.fs-5 {
    font-size: 1.25rem;
}

.fs-6 {
    font-size: 1rem;
}

.fw-bold {
    font-weight: 700;
}

.fw-normal {
    font-weight: 400;
}

.fw-light {
    font-weight: 300;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}


/* Colores de texto y fondo */
.text-primary {
    color: #0d6efd !important;
}

.text-secondary {
    color: #6c757d !important;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #0dcaf0 !important;
}

.text-light {
    color: #f8f9fa !important;
}

.text-dark {
    color: #212529 !important;
}

.bg-primary {
    background-color: #0d6efd !important;
}

.bg-secondary {
    background-color: #6c757d !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-dark {
    background-color: #212529 !important;
}

/* Bordes y radios */
.border {
    border: 1px solid #dee2e6 !important;
}

.border-0 {
    border: 0 !important;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.border-start {
    border-left: 1px solid #dee2e6 !important;
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}

.rounded {
    border-radius: 0.25rem !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

/* Utilidades de visibilidad */
.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-grid {
    display: grid !important;
}

/* ========= GRID SYSTEM ========= */

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
    margin-top: 0;
}

/* Función para generar columnas (Mobile First) */
:root {
    --col-1: 8.333333%;
    --col-2: 16.666667%;
    --col-3: 25%;
    --col-4: 33.333333%;
    --col-5: 41.666667%;
    --col-6: 50%;
    --col-7: 58.333333%;
    --col-8: 66.666667%;
    --col-9: 75%;
    --col-10: 83.333333%;
    --col-11: 91.666667%;
    --col-12: 100%;
}

/* Col - base */
.col {
    flex: 1 0 0%;
    width: 100%;
}

.col-1 {
    flex: 0 0 var(--col-1);
    width: var(--col-1);
}

.col-2 {
    flex: 0 0 var(--col-2);
    width: var(--col-2);
}

.col-3 {
    flex: 0 0 var(--col-3);
    width: var(--col-3);
}

.col-4 {
    flex: 0 0 var(--col-4);
    width: var(--col-4);
}

.col-5 {
    flex: 0 0 var(--col-5);
    width: var(--col-5);
}

.col-6 {
    flex: 0 0 var(--col-6);
    width: var(--col-6);
}

.col-7 {
    flex: 0 0 var(--col-7);
    width: var(--col-7);
}

.col-8 {
    flex: 0 0 var(--col-8);
    width: var(--col-8);
}

.col-9 {
    flex: 0 0 var(--col-9);
    width: var(--col-9);
}

.col-10 {
    flex: 0 0 var(--col-10);
    width: var(--col-10);
}

.col-11 {
    flex: 0 0 var(--col-11);
    width: var(--col-11);
}

.col-12 {
    flex: 0 0 var(--col-12);
    width: var(--col-12);
}

/* Breakpoints */
@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
        width: 100%;
    }

    .col-sm-1 {
        flex: 0 0 var(--col-1);
        width: var(--col-1);
    }

    .col-sm-2 {
        flex: 0 0 var(--col-2);
        width: var(--col-2);
    }

    .col-sm-3 {
        flex: 0 0 var(--col-3);
        width: var(--col-3);
    }

    .col-sm-4 {
        flex: 0 0 var(--col-4);
        width: var(--col-4);
    }

    .col-sm-5 {
        flex: 0 0 var(--col-5);
        width: var(--col-5);
    }

    .col-sm-6 {
        flex: 0 0 var(--col-6);
        width: var(--col-6);
    }

    .col-sm-7 {
        flex: 0 0 var(--col-7);
        width: var(--col-7);
    }

    .col-sm-8 {
        flex: 0 0 var(--col-8);
        width: var(--col-8);
    }

    .col-sm-9 {
        flex: 0 0 var(--col-9);
        width: var(--col-9);
    }

    .col-sm-10 {
        flex: 0 0 var(--col-10);
        width: var(--col-10);
    }

    .col-sm-11 {
        flex: 0 0 var(--col-11);
        width: var(--col-11);
    }

    .col-sm-12 {
        flex: 0 0 var(--col-12);
        width: var(--col-12);
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
        width: 100%;
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: var(--col-1);
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: var(--col-2);
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: var(--col-3);
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: var(--col-4);
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: var(--col-5);
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: var(--col-6);
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: var(--col-7);
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: var(--col-8);
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: var(--col-9);
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: var(--col-10);
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: var(--col-11);
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: var(--col-12);
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
        width: 100%;
    }

    .col-lg-1 {
        flex: 0 0 var(--col-1);
        width: var(--col-1);
    }

    .col-lg-2 {
        flex: 0 0 var(--col-2);
        width: var(--col-2);
    }

    .col-lg-3 {
        flex: 0 0 var(--col-3);
        width: var(--col-3);
    }

    .col-lg-4 {
        flex: 0 0 var(--col-4);
        width: var(--col-4);
    }

    .col-lg-5 {
        flex: 0 0 var(--col-5);
        width: var(--col-5);
    }

    .col-lg-6 {
        flex: 0 0 var(--col-6);
        width: var(--col-6);
    }

    .col-lg-7 {
        flex: 0 0 var(--col-7);
        width: var(--col-7);
    }

    .col-lg-8 {
        flex: 0 0 var(--col-8);
        width: var(--col-8);
    }

    .col-lg-9 {
        flex: 0 0 var(--col-9);
        width: var(--col-9);
    }

    .col-lg-10 {
        flex: 0 0 var(--col-10);
        width: var(--col-10);
    }

    .col-lg-11 {
        flex: 0 0 var(--col-11);
        width: var(--col-11);
    }

    .col-lg-12 {
        flex: 0 0 var(--col-12);
        width: var(--col-12);
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
        width: 100%;
    }

    .col-xl-1 {
        flex: 0 0 var(--col-1);
        width: var(--col-1);
    }

    .col-xl-2 {
        flex: 0 0 var(--col-2);
        width: var(--col-2);
    }

    .col-xl-3 {
        flex: 0 0 var(--col-3);
        width: var(--col-3);
    }

    .col-xl-4 {
        flex: 0 0 var(--col-4);
        width: var(--col-4);
    }

    .col-xl-5 {
        flex: 0 0 var(--col-5);
        width: var(--col-5);
    }

    .col-xl-6 {
        flex: 0 0 var(--col-6);
        width: var(--col-6);
    }

    .col-xl-7 {
        flex: 0 0 var(--col-7);
        width: var(--col-7);
    }

    .col-xl-8 {
        flex: 0 0 var(--col-8);
        width: var(--col-8);
    }

    .col-xl-9 {
        flex: 0 0 var(--col-9);
        width: var(--col-9);
    }

    .col-xl-10 {
        flex: 0 0 var(--col-10);
        width: var(--col-10);
    }

    .col-xl-11 {
        flex: 0 0 var(--col-11);
        width: var(--col-11);
    }

    .col-xl-12 {
        flex: 0 0 var(--col-12);
        width: var(--col-12);
    }
}

/* ========= SPACING SYSTEM ========= */
:root {
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;
}

.m-0 {
    margin: var(--space-0) !important;
}

.m-1 {
    margin: var(--space-1) !important;
}

.m-2 {
    margin: var(--space-2) !important;
}

.m-3 {
    margin: var(--space-3) !important;
}

.m-4 {
    margin: var(--space-4) !important;
}

.m-5 {
    margin: var(--space-5) !important;
}

.mt-0 {
    margin-top: var(--space-0) !important;
}

.mt-1 {
    margin-top: var(--space-1) !important;
}

.mt-2 {
    margin-top: var(--space-2) !important;
}

.mt-3 {
    margin-top: var(--space-3) !important;
}

.mt-4 {
    margin-top: var(--space-4) !important;
}

.mt-5 {
    margin-top: var(--space-5) !important;
}

/* Igual para mb, ml, mr, mx, my */
.mb-0 {
    margin-bottom: var(--space-0) !important;
}

.mb-1 {
    margin-bottom: var(--space-1) !important;
}

.mb-2 {
    margin-bottom: var(--space-2) !important;
}

.mb-3 {
    margin-bottom: var(--space-3) !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.mb-5 {
    margin-bottom: var(--space-5) !important;
}

.ms-0 {
    margin-left: var(--space-0) !important;
}

.ms-1 {
    margin-left: var(--space-1) !important;
}

.ms-2 {
    margin-left: var(--space-2) !important;
}

.ms-3 {
    margin-left: var(--space-3) !important;
}

.ms-4 {
    margin-left: var(--space-4) !important;
}

.ms-5 {
    margin-left: var(--space-5) !important;
}

.me-0 {
    margin-right: var(--space-0) !important;
}

.me-1 {
    margin-right: var(--space-1) !important;
}

.me-2 {
    margin-right: var(--space-2) !important;
}

.me-3 {
    margin-right: var(--space-3) !important;
}

.me-4 {
    margin-right: var(--space-4) !important;
}

.me-5 {
    margin-right: var(--space-5) !important;
}

.mx-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
}

.mx-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
}

.mx-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
}

.mx-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
}

.mx-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
}

.mx-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Padding */
.p-0 {
    padding: var(--space-0) !important;
}

.p-1 {
    padding: var(--space-1) !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.p-3 {
    padding: var(--space-3) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-5 {
    padding: var(--space-5) !important;
}

.pt-0 {
    padding-top: var(--space-0) !important;
}

.pt-1 {
    padding-top: var(--space-1) !important;
}

.pt-2 {
    padding-top: var(--space-2) !important;
}

.pt-3 {
    padding-top: var(--space-3) !important;
}

.pt-4 {
    padding-top: var(--space-4) !important;
}

.pt-5 {
    padding-top: var(--space-5) !important;
}

.ps-0 {
    padding-left: var(--space-0) !important;
}

.ps-1 {
    padding-left: var(--space-1) !important;
}

.ps-2 {
    padding-left: var(--space-2) !important;
}

.ps-3 {
    padding-left: var(--space-3) !important;
}

.ps-4 {
    padding-left: var(--space-4) !important;
}

.ps-5 {
    padding-left: var(--space-5) !important;
}

.pe-0 {
    padding-right: var(--space-0) !important;
}

.pe-1 {
    padding-right: var(--space-1) !important;
}

.pe-2 {
    padding-right: var(--space-2) !important;
}

.pe-3 {
    padding-right: var(--space-3) !important;
}

.pe-4 {
    padding-right: var(--space-4) !important;
}

.pe-5 {
    padding-right: var(--space-5) !important;
}

.py-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
}

.py-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
}

.py-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}

.py-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
}

.py-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
}

.py-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
}

.px-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
}

.px-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
}

.px-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
}

.px-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
}

.px-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}

.px-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
}


.gap-0 {
    gap: var(--space-0) !important;
}

.mgap-1 {
    gap: var(--space-1) !important;
}

.gap-2 {
    gap: var(--space-2) !important;
}

.gap-3 {
    gap: var(--space-3) !important;
}

.gap-4 {
    gap: var(--space-4) !important;
}

.gap-5 {
    gap: var(--space-5) !important;
}

/*********************************** BOTONES (INICIO) ***********************************/
/* ======== Base de botones ======== */
.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
}

/* ======== Botones sólidos ======== */
.btn-primary {
    color: #5c81ff;
    background-color: #e0e7ff;
    border-color: #e0e7ff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #5c81ff;
    border-color: #5c81ff;
}

.dark .btn-primary {
    color: #fff;
    background-color: #5c81ff;
    border-color: #5c81ff;
}

.dark .btn-primary:hover {
    color: #5c81ff;
    background-color: #e0e7ff;
    border-color: #e0e7ff;
}

.btn-secondary {
    color: #8c8c8c;
    background-color: #f6f6f6;
    border-color: #f6f6f6;
}

.btn-secondary:hover {
    background-color: #d4d4d4;
    border-color: #d4d4d4;
}

.dark .btn-secondary {
    color: #fff;
    background-color: #8c8c8c;
    border-color: #8c8c8c;
}

.dark .btn-secondary:hover {
    color: #8c8c8c;
    background-color: #d1d1d1;
    border-color: #d1d1d1;
}

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}

.dark .btn-success {
    color: #fff;
    background-color: #4eb887;
    border-color: #4eb887;
}

.dark .btn-success:hover {
    color: #4eb887;
    background-color: #e6fff3;
    border-color: #e6fff3;
}

.btn-danger {
    color: #e94d78;
    background-color: #ffc7d7;
    border-color: #ffc7d7;
}

.btn-danger:hover {
    color: #fff;
    background-color: #e94d78;
    border-color: #e94d78;
}

.dark .btn-danger {
    color: #fff;
    background-color: #e94d78;
    border-color: #e94d78;
}

.dark .btn-danger:hover {
    color: #e94d78;
    background-color: #ffc7d7;
    border-color: #ffc7d7;
}

.btn-warning {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
}

.dark .btn-warning:hover {
    background-color: #fff8e2;
    border-color: #fff8e2;
}

.btn-info {
    color: #000;
    background-color: #aff2ff;
    border-color: #aff2ff;
}

.btn-info:hover {
    background-color: #31d2f2;
    border-color: #25cff2;
}

.dark .btn-info:hover {
    background-color: #dcf8fe;
    border-color: #dcf8fe;
}

.btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-dark {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}

.btn-dark:hover {
    background-color: #1c1f23;
    border-color: #1a1e21;
}

/* ======== Outline ======== */
[class*="btn-outline-"] {
    background: transparent;
}

/* Primario */
.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.dark .btn-outline-primary {
    color: #5c81ff;
    border-color: #5c81ff;
}

.dark .btn-outline-primary:hover {
    color: #fff;
    background-color: #5c81ff;
    border-color: #5c81ff;
}

/* Secundario */
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Éxito */
.btn-outline-success {
    color: #198754;
    border-color: #198754;
}

.btn-outline-success:hover {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

/* Peligro */
.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.dark .btn-outline-danger {
    color: #e94d78;
    border-color: #e94d78;
}

.dark .btn-outline-danger:hover {
    color: #fff;
    background-color: #e94d78;
    border-color: #e94d78;
}

/* Advertencia */
.btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-warning:hover {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Información */
.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-info:hover {
    color: #000;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

/* Claro */
.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-outline-light:hover {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

/* Oscuro */
.btn-outline-dark {
    color: #212529;
    border-color: #212529;
}

.btn-outline-dark:hover {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}

/* ======== Tamaños ======== */
.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* ======== Deshabilitado ======== */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/*********************************** BOTONES (FINAL) ***********************************/


/*********************************** FORMULARIOS (INICIO) ***********************************/
.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: transparent;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: transparent;
}

.form-floating .label-maxlength {
    position: absolute;
    right: 10px;
    bottom: -7px;
    padding: 0 5px;
    background: #fff;
    color: #b8b8b8;
}

.form-floating .label-error {
    position: absolute;
    left: 10px;
    bottom: -7px;
    padding: 0 5px;
    background: #fff;
    color: #ff2525;
}

.form-control::placeholder {
    color: rgba(33, 37, 41, 0.75);
    opacity: 1;
}

.form-control::placeholder {
    color: rgba(33, 37, 41, 0.75);
    opacity: 1;
}

.form-floating .form-control,
.form-floating .form-select {
    padding: 11px !important;
    height: 38px;
    min-height: 38px;
    background-color: transparent;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    padding: 1rem .75rem;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
    height: calc(3.5rem + calc(1px * 2));
    min-height: calc(3.5rem + calc(1px * 2));
    line-height: 1.25;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #212529;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: #dee2e6 solid 1px;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dark .form-control,
.dark .form-select {
    border: 1px solid #6c757d;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.form-floating>label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

label {
    display: inline-block;
}

.form-floating {
    display: flex;
    position: relative;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * 0);
    margin-right: calc(-.5 * 1.5rem);
    margin-left: calc(-.5 * 1.5rem);
}

/*********************************** FORMULARIOS (FINAL) ***********************************/

/*--------------------------------- FORMULARIOS (INICIO) --------------------------------------------*/
.form-floating label {
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 0;
    top: -3px;
    color: #ababab;
}

.form-floating textarea~label {
    left: 10px;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: 1;
    padding: 0 3px;
    transform: scale(.85) translateY(-.7rem) translateX(.15rem);
    height: fit-content;
    background-color: #fff;
    width: fit-content;
    color: #585858;
    border-radius: 5px;
}

.dark .form-floating>.form-control:focus~label,
.dark .form-floating>.form-control:not(:placeholder-shown)~label,
.dark .form-floating>.form-select~label {
    background-color: #262626;
    color: #ccc;
}

.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    z-index: 10 !important;
    background: transparent;
}

.form-floating .form-control,
.form-floating .form-select {
    padding: 11px !important;
    height: 38px;
    min-height: 38px;
    background-color: transparent;
}


.dark .form-floating .form-control,
.dark .form-floating .form-select {
    color: #e4efff;
    background: #262626;
}

.form-floating textarea.form-control {
    height: 76px;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.form-floating .form-control.readonly,
.form-floating .form-select.readonly {
    background: #ece6e5 !important;
}

.form-floating .form-control.readonly:focus,
.form-floating .form-select.readonly:focus {
    border-color: #dee2e6;
}

.form-floating>.form-control.readonly:focus~label,
.form-floating>.form-control.readonly~label,
.form-floating>.form-select.readonly~label {
    background-color: #dee2e6;
}

.dark .form-floating .form-control.readonly,
.dark .form-floating .form-select.readonly {
    background: #3e3e3e !important;
}

.dark .form-floating .form-control.readonly:focus,
.dark .form-floating .form-select.readonly:focus {
    border-color: #6c757d;
}

.dark .form-floating>.form-control.readonly:focus~label,
.dark .form-floating>.form-control.readonly~label,
.dark .form-floating>.form-select.readonly~label {
    background-color: #3e3e3e;
}

.btn {
    /* border: none; */
    font-weight: bold;
}

.btn i {
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.btn:hover i:not(.btn i.animacion-derecha) {
    transform: translate(-3px, 0px);
}

.btn:hover i.animacion-derecha {
    transform: translate(3px, 0px);
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

textarea:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.input-con-icono {
    position: relative;
}

.modal-search,
.input-con-icono {
    position: relative;
}

.modal-search input {
    cursor: pointer;
}

.modal-search>i,
.input-con-icono>i {
    color: #cfd6d6;
}

.dark .modal-search>i,
.dark .input-con-icono>i {
    color: #ccc;
}

.modal-search>i,
.input-con-icono>i {
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
}

.input-con-icono.input-password>i {
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
    cursor: pointer;
}

.input-con-icono.input-password>i:hover {
    color: var(--color-base-medio-3);
}

.input-con-icono.input-password>i~i {
    display: none;
}

.input-con-icono.input-password.active>i {
    display: none;
}

.input-con-icono.input-password.active>i~i {
    display: block;
}

input.error,
select.error,
textarea.error {
    color: #ff2525 !important;
    border: 1px solid #ff2525 !important;
}

input.error~label,
select.error~label,
textarea.error~label {
    color: #ff2525 !important;
}

input.correct,
select.correct,
textarea.correct {
    color: #23d15d !important;
    border: 1px solid #23d15d !important;
}

input.correct~label,
select.correct~label,
textarea.correct~label,
input.correct~i,
select.correct~i,
textarea.correct~i {
    color: #23d15d !important;
}

.contenedor-password {
    position: relative;
}

.contenedor-password .fa-eye,
.contenedor-password .fa-eye-slash {
    height: 22px;
    width: 22px;
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 11px);
    right: 10px;
    cursor: pointer;
}

/*--------------------------------- FORMULARIOS (FINAL) --------------------------------------------*/

/********************************** CAMPOS PARA VISUALIZAR (INICIO) ***********************************/
/* .view-field {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
} */

.view-field-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    width: 100%;
}

.dark .view-field-item {
    background: #2d2d2d;
}

.view-field-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.view-field-value {
    font-size: 14px;
    color: #0f172a;
    font-weight: 500;
}

.dark .view-field-value {
    color: #a2a2a2;
}

/********************************** CAMPOS PARA VISUALIZAR (FINAL) ***********************************/

/********************************** MODAL (INICIO) ***********************************/
/* Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    opacity: 0;
    transition: opacity .15s linear;
}

.modal-backdrop.show {
    opacity: .5;
}

/* Modal base */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

/* Fade animation */
.modal.fade .modal-dialog {
    transform: translate(0, -50px);
    transition: transform .3s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}

/* Dialog */
.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
    max-width: 500px;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog-scrollable {
    height: calc(100% - 1rem);
}

/* Content */
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    outline: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

/* Body */
.modal-body {
    position: relative;
    padding: 1rem;
    overflow-y: auto;
}

/* Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    gap: .5rem;
}

/* Close button */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: transparent;
    border: 0;
    opacity: .5;
    cursor: pointer;
}

.btn-close:hover {
    opacity: .75;
}

/* Tamaños opcionales */
.modal-sm {
    max-width: 300px;
}

.modal-lg {
    max-width: 800px;
}

.modal-xl {
    max-width: 1140px;
}

/* Scroll interno estilo Bootstrap */
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

/* Mostrar modal */
.modal.show {
    display: block;
}


/********************************** MODAL (FINAL) ***********************************/



/*********************************** SOMBRAS (INICIO) ***********************************/
.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

/*********************************** SOMBRAS (FINAL) ***********************************/

.fit-content {
    width: fit-content;
}

.mini-line {
    width: 60px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}

.mini-line .fill {
    height: 100%;
    background: #ff9800;
    border-radius: 3px;
}

.text-nowrap {
    text-wrap: nowrap;
}