/* ======================================================
   SIEVAL UI
   ====================================================== */

.bg-wh-3 {
    background-image: var(--sieval-bg-wh-3);
}
.bg-wh-4{
    background-image: var(--sieval-bg-wh-4);
}
.bg-wh-5{
    background-image: var(--sieval-bg-wh-5);
}
.bg-wh-6{
    background-image: var(--sieval-bg-wh-6);
}
.bg-wh-7{
    background-image: var(--sieval-bg-wh-7);
}
.bg-wh-8{
    background-image: var(--sieval-bg-wh-8);
}
.bg-wh-9{
    background-image: var(--sieval-bg-wh-9);
}
.sv-page-soft {
    min-height: 100%;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--sabila-50) 70%, transparent), transparent 34%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--muicle-50) 72%, transparent), transparent 38%),
        var(--algodon-50);
}

.sv-panel {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--jamaica-1) 65%, transparent);
    border-radius: .75rem;
    padding: 1rem;
    box-shadow:
        0 18px 45px rgba(11, 16, 42, .10),
        0 2px 8px rgba(11, 16, 42, .06);
    overflow: hidden;
}

.sv-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--muicle-1), var(--sabila-1), var(--copal-1));
    height: 5px;
}

.sv-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .75rem .75rem 1rem;
}

.sv-panel-body {
    padding: .25rem;
}

.sv-panel-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    padding: 1rem .75rem .25rem;
    border-top: 1px solid color-mix(in srgb, var(--algodon-200) 76%, transparent);
    margin-top: 1rem;
}

.sv-panel-kicker,
.sv-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sabila-700);
    margin-bottom: .25rem;
}

.sv-panel-title,
.sv-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--anil-1);
    line-height: 1.2;
}

.sv-panel-title small,
.sv-title small {
    display: block;
    margin-top: .35rem;
    color: var(--algodon-700);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.35;
}

.sv-panel-subtitle,
.sv-description {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--algodon-700);
}

.sv-panel-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.sv-field {
    margin-bottom: 1rem;
}

.sv-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
    color: var(--anil-1);
    font-size: .82rem;
    font-weight: 800;
}

.sv-label small {
    color: var(--algodon-700);
    font-size: .72rem;
    font-weight: 500;
}

.sv-input,
.sv-select,
.sv-panel .form-control {
    width: 100%;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--anil-200) 70%, transparent);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .88);
    color: var(--anil-1);
    font-family: var(--font-ui);
    font-size: .9rem;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.sv-input:focus,
.sv-select:focus,
.sv-panel .form-control:focus {
    border-color: var(--sabila-1);
    background-color: white;
    box-shadow:
        0 0 0 .2rem color-mix(in srgb, var(--sabila-200) 42%, transparent),
        0 8px 18px rgba(11, 16, 42, .06);
    outline: none;
}

.sv-input:disabled,
.sv-input[readonly],
.sv-panel .form-control:disabled,
.sv-panel .form-control[readonly] {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--algodon-1) 86%, white),
            color-mix(in srgb, var(--anil-50) 70%, white)
        );
    color: var(--anil-700);
    font-weight: 800;
    opacity: 1;
}

.sv-help {
    display: block;
    margin-top: .35rem;
    color: var(--arnica-700);
    font-size: .72rem;
    font-weight: 650;
}

.sv-help-danger {
    color: var(--jamaica-700);
}

.sv-note {
    margin: .75rem 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--copal-200) 72%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--copal-50) 68%, white),
            rgba(255, 255, 255, .88)
        );
    color: var(--anil-1);
    font-size: .78rem;
    line-height: 1.55;
}

.sv-note strong {
    color: var(--copal-700);
}

.sv-note-badge {
    display: inline-flex;
    align-items: center;
    margin-right: .35rem;
    margin-bottom: .25rem;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: var(--copal-1);
    color: white;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sv-note-badge-alt {
    background: var(--arnica-1);
}

.sv-note-list {
    margin: .5rem 0 0;
    padding-left: 1rem;
}

.sv-note-list li {
    margin-bottom: .4rem;
}

.sv-table-wrap {
    border: 1px solid color-mix(in srgb, var(--algodon-200) 80%, transparent);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    overflow: hidden;
}

.sv-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-ui);
}

.sv-table thead th {
    padding: .9rem .75rem;
    border: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--cedron-50) 90%, white),
            color-mix(in srgb, var(--cedron-200) 34%, white)
        );
    color: var(--cedron-700);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sv-table tbody td {
    padding: .9rem .75rem;
    vertical-align: middle;
    border-top: 1px solid color-mix(in srgb, var(--algodon-200) 72%, transparent);
    color: var(--anil-1);
    font-size: .86rem;
}

.sv-table tbody tr {
    transition:
        background-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.sv-table tbody tr:hover {
    background: color-mix(in srgb, var(--sabila-50) 54%, white);
}

.sv-table tbody tr:hover .sv-work-code {
    color: var(--muicle-1);
}

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

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

.sv-work {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.sv-work-code {
    font-size: .95rem;
    font-weight: 850;
    color: var(--anil-1);
    letter-spacing: .01em;
}

.sv-work-pseudo {
    display: inline-flex;
    width: fit-content;
    padding: .14rem .45rem;
    border-radius: 999px;
    background: var(--anil-50);
    color: var(--anil-700);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sv-work-title {
    max-width: 460px;
    color: var(--anil-1);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.35;
}

.sv-work-meta {
    margin-top: .18rem;
    color: var(--algodon-700);
    font-size: .76rem;
}

.sv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 28px;
    padding: .32rem .68rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.sv-badge i {
    font-size: .78rem;
}

.sv-badge-registrado {
    background: var(--cedron-50);
    border-color: var(--cedron-200);
    color: var(--cedron-700);
}

.sv-badge-completo {
    background: var(--nopal-50);
    border-color: var(--nopal-200);
    color: var(--nopal-700);
}

.sv-badge-pendiente {
    background: var(--arnica-50);
    border-color: var(--arnica-200);
    color: var(--arnica-700);
}

.sv-badge-alerta {
    background: var(--jamaica-50);
    border-color: var(--jamaica-200);
    color: var(--jamaica-700);
}

.sv-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--anil-50);
    color: var(--anil-700);
    font-size: .8rem;
    font-weight: 800;
}

.sv-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.sv-btn,
.sv-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: white;
    font-family: var(--font-ui);
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.sv-btn {
    gap: .4rem;
    min-height: 40px;
    padding: .55rem 1rem;
    border-radius: 14px;
    font-size: .86rem;
}

.sv-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.sv-btn:hover,
.sv-btn-icon:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 18px rgba(11, 16, 42, .14);
}

.sv-btn:active,
.sv-btn-icon:active {
    transform: translateY(0);
    box-shadow: none;
}

.sv-btn-primary {
    background: linear-gradient(135deg, var(--sabila-1), var(--cedron-1));
}

.sv-btn-danger {
    background: linear-gradient(135deg, var(--jamaica-1), var(--muicle-1));
}

.sv-btn-muted {
    background: var(--algodon-200);
    color: var(--anil-1);
}

.sv-btn-view {
    background: linear-gradient(135deg, var(--anil-1), var(--cedron-1));
}

.sv-btn-users {
    background: linear-gradient(135deg, var(--sabila-1), var(--sabila-700));
}

.sv-btn-upload {
    background: linear-gradient(135deg, var(--arnica-1), var(--copal-1));
}

.sv-btn-upload-doc {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(
        180deg,
        var(--malva-200),
        var(--muicle-200)
    );

    color: var(--muicle-700);
    border: 0;

    transition:
        color .45s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.sv-btn-upload-doc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        180deg,
        var(--muicle-200),
        var(--muicle-1) 48%,
        var(--muicle-700)
    );

    transform: translateY(105%);
    transition: transform 1.35s ease-in-out;
}

.sv-btn-upload-doc:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--muicle-700) 32%, transparent);
}

.sv-btn-upload-doc:hover::before {
    transform: translateY(0);
}

.sv-btn-upload-doc:active {
    transform: translateY(0);
}

.sv-btn-delete {
    background: linear-gradient(135deg, var(--jamaica-1), var(--muicle-1));
}

.sv-btn-success{
    background: linear-gradient(135deg, var(--nopal-1), var(--sabila-1));
}
.sv-btn-success:hover{
    background: linear-gradient(135deg, var(--nopal-200), var(--sabila-200));
}
.sv-btn-success:active{
    background: linear-gradient(135deg, var(--nopal-700), var(--sabila-700));
}
.sv-btn-pdf{
    background: linear-gradient(135deg, var(--muicle-1), var(--sabila-1));
}

.sv-panel .select2-container {
    width: 100% !important;
}

.sv-panel .select2-container--default .select2-selection--multiple,
.sv-panel .select2-container--default .select2-selection--single {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--anil-200) 70%, transparent);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .88);
}

.sv-panel .select2-container--default.select2-container--focus .select2-selection--multiple,
.sv-panel .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--sabila-1);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sabila-200) 42%, transparent);
}

.sv-panel .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid var(--sabila-200);
    border-radius: 999px;
    background: var(--sabila-50);
    color: var(--sabila-700);
    font-size: 1.5rem;
    font-weight: 700;

}

.sv-panel .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 9px;
    font-family: var(--font-ui);
    font-size: .86rem;
}

.sv-muted {
    color: var(--algodon-700);
}

.sv-empty-date {
    color: color-mix(in srgb, var(--algodon-700) 65%, transparent);
    font-size: .78rem;
}

@media (max-width: 992px) {
    .sv-panel {
        border-radius: 18px;
        padding: .75rem;
    }

    .sv-panel-header {
        flex-direction: column;
        padding: .5rem .35rem .85rem;
    }

    .sv-panel-body {
        padding: .25rem 0;
    }

    .sv-panel-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 1rem .35rem .25rem;
    }

    .sv-panel-footer .sv-btn {
        width: 100%;
    }

    .sv-panel .grid.grid-cols-12 > [class*="col-span-"] {
        grid-column: span 12 / span 12;
    }

    .sv-table thead {
        display: none;
    }

    .sv-table,
    .sv-table tbody,
    .sv-table tr,
    .sv-table td {
        display: block;
        width: 100%;
    }

    .sv-table tbody tr {
        margin: .75rem;
        border: 1px solid var(--algodon-200);
        border-radius: 16px;
        background: white;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(11, 16, 42, .07);
    }

    .sv-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border-top: 1px solid var(--algodon-200);
        text-align: right;
    }

    .sv-table tbody td:first-child {
        border-top: 0;
    }

    .sv-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        color: var(--algodon-700);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sv-work-title {
        max-width: none;
        text-align: right;
    }

    .sv-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.subtitulo {
  padding: 0.5em 0.5em;
  margin: 0 0.15em 0 0.15em;
  color: var(--anil-1);
  border-bottom: 2px solid color-mix(in srgb, var(--anil-1) 18%, var(--algodon-50)) !important;
  border-top: 2px solid color-mix(in srgb, var(--anil-1) 18%, var(--algodon-50)) !important;
  background: color-mix(in srgb, var(--algodon-50) 88%, var(--sabila-1) 12%);
}

.tipuser {
  color: var(--muicle-1);
}

/* ======================================================
   SIEVAL / Componentes controlados para detalle de trabajo
   Alertas de bases, palabras clave, tabla y switch
   ====================================================== */


/* ─────────────────────────────────────────────
   Alertas de bases
   Sustituye visualmente alert-light solo en esta UX.
   ───────────────────────────────────────────── */

.sv-bases-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;

    padding: .85rem .95rem;
    border: 1px solid color-mix(in srgb, var(--copal-1) 24%, transparent);
    border-radius: .75rem;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--algodon-50) 94%, white 6%),
            color-mix(in srgb, var(--copal-1) 9%, var(--algodon-50))
        );

    color: var(--anil-1);
    font-size: .82rem;
    line-height: 1.55;

    box-shadow:
        0 4px 14px color-mix(in srgb, var(--anil-1) 7%, transparent);
}

.sv-bases-alert-info {
    border-color: color-mix(in srgb, var(--sabila-1) 24%, transparent);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--algodon-50) 94%, white 6%),
            color-mix(in srgb, var(--sabila-1) 10%, var(--algodon-50))
        );
}

.sv-bases-alert-note {
    border-color: color-mix(in srgb, var(--muicle-1) 22%, transparent);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--algodon-50) 94%, white 6%),
            color-mix(in srgb, var(--muicle-1) 8%, var(--algodon-50))
        );
}

.sv-bases-badge {
    flex: 0 0 auto;

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

    min-width: 82px;
    padding: .28rem .55rem;
    border-radius: 999px;

    background: var(--copal-1);
    color: white;

    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
    line-height: 1.2;
}

.sv-bases-alert-info .sv-bases-badge {
    background: var(--sabila-1);
}

.sv-bases-alert-note .sv-bases-badge {
    background: var(--muicle-1);
}

.sv-bases-content {
    flex: 1 1 auto;
    min-width: 0;
}

.sv-bases-content p {
    margin: 0 0 .45rem;
}

.sv-bases-content p:last-child {
    margin-bottom: 0;
}

.sv-bases-list {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.sv-bases-list li {
    margin-bottom: .35rem;
}

.sv-bases-list li:last-child {
    margin-bottom: 0;
}

.sv-bases-list strong {
    color: var(--muicle-1);
}


/* ─────────────────────────────────────────────
   Palabras clave
   ───────────────────────────────────────────── */

.ul-palabras-clave {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;

    padding-left: 0;
    margin-top: .15rem;
    margin-bottom: 0;

    list-style: none;
}

.palabra-clave {
    display: inline-flex;
    align-items: center;

    padding: .34rem .68rem;
    border: 1px solid color-mix(in srgb, var(--sabila-1) 28%, transparent);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sabila-1) 14%, var(--algodon-50)),
            color-mix(in srgb, var(--anil-1) 6%, var(--algodon-50))
        );

    color: var(--anil-1);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;

    box-shadow: 0 2px 8px color-mix(in srgb, var(--anil-1) 7%, transparent);
}

.palabra-clave::before {
    content: "#";
    margin-right: .18rem;
    color: var(--sabila-1);
    font-weight: 900;
}
.bienvenido{
    padding: 1em 1em;
    color: var(--anil-1);
}


/* ─────────────────────────────────────────────
   Tabla de documentos / colaboradores
   ───────────────────────────────────────────── */

.sv-table-wrap {
    border: 1px solid color-mix(in srgb, var(--anil-1) 12%, transparent);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--algodon-50) 96%, white 4%);
    overflow: hidden;

    box-shadow:
        0 4px 16px color-mix(in srgb, var(--anil-1) 7%, transparent);
}

.sv-table-docs {
    width: 100%;
    margin-bottom: 0;

    border-collapse: separate;
    border-spacing: 0;

    color: var(--anil-1);
    font-size: .82rem;
}

.sv-table-docs thead th {
    padding: .72rem .65rem;

    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--anil-1) 18%, transparent);

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--anil-1) 92%, var(--sabila-1) 8%),
            var(--anil-1)
        );

    color: white;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
    vertical-align: middle;
}

.sv-table-docs thead tr:nth-child(2) th {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--sabila-1) 72%, var(--anil-1) 28%),
            color-mix(in srgb, var(--sabila-1) 62%, var(--anil-1) 38%)
        );
}

.sv-table-docs tbody td {
    padding: .72rem .65rem;
    vertical-align: middle;

    border-top: 1px solid color-mix(in srgb, var(--anil-1) 8%, transparent);

    background: rgba(255, 255, 255, .72);
    color: var(--anil-1);
}

.sv-table-docs tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--algodon-50) 92%, var(--sabila-1) 8%);
}

.sv-table-docs tbody tr:hover td {
    background: color-mix(in srgb, var(--sabila-1) 13%, var(--algodon-50));
}


/* ─────────────────────────────────────────────
   Switch repositorio
   ───────────────────────────────────────────── */

.sv-repo-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;

    border: 1px solid color-mix(in srgb, var(--sabila-1) 20%, transparent);
    border-radius: .85rem;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--algodon-50) 93%, white 7%),
            color-mix(in srgb, var(--sabila-1) 10%, var(--algodon-50))
        );

    box-shadow:
        0 4px 14px color-mix(in srgb, var(--anil-1) 7%, transparent);
}

.sv-repo-switch-label {
    display: flex;
    flex-direction: column;
    gap: .15rem;

    margin: 0;
    color: var(--anil-1);
    cursor: pointer;
}

.sv-repo-switch-title {
    color: var(--sabila-1);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.sv-repo-switch-text {
    color: var(--anil-1);
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.3;
}

.sv-repo-switch-control {
    flex: 0 0 auto;
}

.sv-repo-switch-control input[type="checkbox"] {
    width: 44px;
    height: 24px;

    appearance: none;
    -webkit-appearance: none;

    position: relative;
    border: 1px solid color-mix(in srgb, var(--anil-1) 20%, transparent);
    border-radius: 999px;

    background: color-mix(in srgb, var(--anil-1) 18%, var(--algodon-50));
    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.sv-repo-switch-control input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;
    border-radius: 50%;

    background: white;
    box-shadow: 0 2px 5px rgba(11, 16, 42, .25);

    transition: transform .18s ease;
}

.sv-repo-switch-control input[type="checkbox"]:checked {
    border-color: color-mix(in srgb, var(--sabila-1) 70%, transparent);
    background: var(--sabila-1);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--sabila-1) 18%, transparent);
}

.sv-repo-switch-control input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}


/* ─────────────────────────────────────────────
   Responsive mínimo
   ───────────────────────────────────────────── */

@media (max-width: 576px) {
    .sv-bases-alert {
        flex-direction: column;
        gap: .55rem;
    }

    .sv-bases-badge {
        min-width: auto;
    }

    .sv-repo-switch {
        align-items: flex-start;
        flex-direction: column;
    }

    .sv-repo-switch-control {
        align-self: flex-end;
    }
}

/* ─────────────────────────────────────────────
   Fondos base
   ───────────────────────────────────────────── */

.bg-muicle { background-color: var(--muicle-1) !important; }
.bg-anil { background-color: var(--anil-1) !important; }
.bg-sabila { background-color: var(--sabila-1) !important; }
.bg-bugam { background-color: var(--bugam-1) !important; }
.bg-copal { background-color: var(--copal-1) !important; }
.bg-malva { background-color: var(--malva-1) !important; }

.bg-algodon { background-color: var(--algodon-1) !important; }
.bg-algodon-50 { background-color: var(--algodon-50) !important; }
.bg-algodon-200 { background-color: var(--algodon-200) !important; }
.bg-algodon-700 { background-color: var(--algodon-700) !important; }

.bg-nopal { background-color: var(--nopal-1) !important; }
.bg-jamaica { background-color: var(--jamaica-1) !important; }
.bg-cedron { background-color: var(--cedron-1) !important; }
.bg-arnica { background-color: var(--arnica-1) !important; }

.bg-menta { background-color: var(--menta-1) !important; }
.bg-lirio { background-color: var(--lirio-1) !important; }


/* ─────────────────────────────────────────────
   Fondos claros / medios / oscuros
   ───────────────────────────────────────────── */

.bg-muicle-50 { background-color: var(--muicle-50) !important; }
.bg-muicle-200 { background-color: var(--muicle-200) !important; }
.bg-muicle-700 { background-color: var(--muicle-700) !important; }

.bg-anil-50 { background-color: var(--anil-50) !important; }
.bg-anil-200 { background-color: var(--anil-200) !important; }
.bg-anil-700 { background-color: var(--anil-700) !important; }

.bg-sabila-50 { background-color: var(--sabila-50) !important; }
.bg-sabila-200 { background-color: var(--sabila-200) !important; }
.bg-sabila-700 { background-color: var(--sabila-700) !important; }

.bg-bugam-50 { background-color: var(--bugam-50) !important; }
.bg-bugam-200 { background-color: var(--bugam-200) !important; }
.bg-bugam-700 { background-color: var(--bugam-700) !important; }

.bg-copal-50 { background-color: var(--copal-50) !important; }
.bg-copal-200 { background-color: var(--copal-200) !important; }
.bg-copal-700 { background-color: var(--copal-700) !important; }

.bg-malva-50 { background-color: var(--malva-50) !important; }
.bg-malva-200 { background-color: var(--malva-200) !important; }
.bg-malva-700 { background-color: var(--malva-700) !important; }

.bg-nopal-50 { background-color: var(--nopal-50) !important; }
.bg-nopal-200 { background-color: var(--nopal-200) !important; }
.bg-nopal-700 { background-color: var(--nopal-700) !important; }

.bg-jamaica-50 { background-color: var(--jamaica-50) !important; }
.bg-jamaica-200 { background-color: var(--jamaica-200) !important; }
.bg-jamaica-700 { background-color: var(--jamaica-700) !important; }

.bg-cedron-50 { background-color: var(--cedron-50) !important; }
.bg-cedron-200 { background-color: var(--cedron-200) !important; }
.bg-cedron-700 { background-color: var(--cedron-700) !important; }

.bg-arnica-50 { background-color: var(--arnica-50) !important; }
.bg-arnica-200 { background-color: var(--arnica-200) !important; }
.bg-arnica-700 { background-color: var(--arnica-700) !important; }

.bg-menta-50 { background-color: var(--menta-50) !important; }
.bg-menta-200 { background-color: var(--menta-200) !important; }
.bg-menta-700 { background-color: var(--menta-700) !important; }

.bg-lirio-50 { background-color: var(--lirio-50) !important; }
.bg-lirio-200 { background-color: var(--lirio-200) !important; }
.bg-lirio-700 { background-color: var(--lirio-700) !important; }


/* ─────────────────────────────────────────────
   Texto
   ───────────────────────────────────────────── */

.tx-muicle { color: var(--muicle-1) !important; }
.tx-anil { color: var(--anil-1) !important; }
.tx-sabila { color: var(--sabila-1) !important; }
.tx-bugam { color: var(--bugam-1) !important; }
.tx-copal { color: var(--copal-1) !important; }
.tx-malva { color: var(--malva-1) !important; }

.tx-algodon { color: var(--algodon-1) !important; }
.tx-algodon-50 { color: var(--algodon-50) !important; }
.tx-algodon-200 { color: var(--algodon-200) !important; }
.tx-algodon-700 { color: var(--algodon-700) !important; }

.tx-nopal { color: var(--nopal-1) !important; }
.tx-jamaica { color: var(--jamaica-1) !important; }
.tx-cedron { color: var(--cedron-1) !important; }
.tx-arnica { color: var(--arnica-1) !important; }

.tx-menta { color: var(--menta-1) !important; }
.tx-lirio { color: var(--lirio-1) !important; }


/* ─────────────────────────────────────────────
   Texto por intensidad
   ───────────────────────────────────────────── */

.tx-muicle-50 { color: var(--muicle-50) !important; }
.tx-muicle-200 { color: var(--muicle-200) !important; }
.tx-muicle-700 { color: var(--muicle-700) !important; }

.tx-anil-50 { color: var(--anil-50) !important; }
.tx-anil-200 { color: var(--anil-200) !important; }
.tx-anil-700 { color: var(--anil-700) !important; }

.tx-sabila-50 { color: var(--sabila-50) !important; }
.tx-sabila-200 { color: var(--sabila-200) !important; }
.tx-sabila-700 { color: var(--sabila-700) !important; }

.tx-bugam-50 { color: var(--bugam-50) !important; }
.tx-bugam-200 { color: var(--bugam-200) !important; }
.tx-bugam-700 { color: var(--bugam-700) !important; }

.tx-copal-50 { color: var(--copal-50) !important; }
.tx-copal-200 { color: var(--copal-200) !important; }
.tx-copal-700 { color: var(--copal-700) !important; }

.tx-malva-50 { color: var(--malva-50) !important; }
.tx-malva-200 { color: var(--malva-200) !important; }
.tx-malva-700 { color: var(--malva-700) !important; }

.tx-nopal-50 { color: var(--nopal-50) !important; }
.tx-nopal-200 { color: var(--nopal-200) !important; }
.tx-nopal-700 { color: var(--nopal-700) !important; }

.tx-jamaica-50 { color: var(--jamaica-50) !important; }
.tx-jamaica-200 { color: var(--jamaica-200) !important; }
.tx-jamaica-700 { color: var(--jamaica-700) !important; }

.tx-cedron-50 { color: var(--cedron-50) !important; }
.tx-cedron-200 { color: var(--cedron-200) !important; }
.tx-cedron-700 { color: var(--cedron-700) !important; }

.tx-arnica-50 { color: var(--arnica-50) !important; }
.tx-arnica-200 { color: var(--arnica-200) !important; }
.tx-arnica-700 { color: var(--arnica-700) !important; }

.tx-menta-50 { color: var(--menta-50) !important; }
.tx-menta-200 { color: var(--menta-200) !important; }
.tx-menta-700 { color: var(--menta-700) !important; }

.tx-lirio-50 { color: var(--lirio-50) !important; }
.tx-lirio-200 { color: var(--lirio-200) !important; }
.tx-lirio-700 { color: var(--lirio-700) !important; }

/* ─────────────────────────────────────────────
   Base de borde
   ───────────────────────────────────────────── */

.bd {
    border: 1px solid transparent !important;
}

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

.bd-soft {
    border: 1px solid color-mix(in srgb, var(--anil-200) 45%, transparent) !important;
}

.bd-muted {
    border: 1px solid color-mix(in srgb, var(--algodon-700) 18%, transparent) !important;
}

.bd-strong {
    border: 1px solid color-mix(in srgb, var(--anil-700) 65%, transparent) !important;
}


/* ─────────────────────────────────────────────
   Bordes por color
   ───────────────────────────────────────────── */

.bd-muicle { border-color: var(--muicle-1) !important; }
.bd-anil { border-color: var(--anil-1) !important; }
.bd-sabila { border-color: var(--sabila-1) !important; }
.bd-bugam { border-color: var(--bugam-1) !important; }
.bd-copal { border-color: var(--copal-1) !important; }
.bd-malva { border-color: var(--malva-1) !important; }

.bd-algodon { border-color: var(--algodon-1) !important; }
.bd-algodon-50 { border-color: var(--algodon-50) !important; }
.bd-algodon-200 { border-color: var(--algodon-200) !important; }
.bd-algodon-700 { border-color: var(--algodon-700) !important; }

.bd-nopal { border-color: var(--nopal-1) !important; }
.bd-jamaica { border-color: var(--jamaica-1) !important; }
.bd-cedron { border-color: var(--cedron-1) !important; }
.bd-arnica { border-color: var(--arnica-1) !important; }

.bd-menta { border-color: var(--menta-1) !important; }
.bd-lirio { border-color: var(--lirio-1) !important; }


/* ─────────────────────────────────────────────
   Bordes por intensidad
   ───────────────────────────────────────────── */

.bd-muicle-50 { border-color: var(--muicle-50) !important; }
.bd-muicle-200 { border-color: var(--muicle-200) !important; }
.bd-muicle-700 { border-color: var(--muicle-700) !important; }

.bd-anil-50 { border-color: var(--anil-50) !important; }
.bd-anil-200 { border-color: var(--anil-200) !important; }
.bd-anil-700 { border-color: var(--anil-700) !important; }

.bd-sabila-50 { border-color: var(--sabila-50) !important; }
.bd-sabila-200 { border-color: var(--sabila-200) !important; }
.bd-sabila-700 { border-color: var(--sabila-700) !important; }

.bd-bugam-50 { border-color: var(--bugam-50) !important; }
.bd-bugam-200 { border-color: var(--bugam-200) !important; }
.bd-bugam-700 { border-color: var(--bugam-700) !important; }

.bd-copal-50 { border-color: var(--copal-50) !important; }
.bd-copal-200 { border-color: var(--copal-200) !important; }
.bd-copal-700 { border-color: var(--copal-700) !important; }

.bd-malva-50 { border-color: var(--malva-50) !important; }
.bd-malva-200 { border-color: var(--malva-200) !important; }
.bd-malva-700 { border-color: var(--malva-700) !important; }

.bd-nopal-50 { border-color: var(--nopal-50) !important; }
.bd-nopal-200 { border-color: var(--nopal-200) !important; }
.bd-nopal-700 { border-color: var(--nopal-700) !important; }

.bd-jamaica-50 { border-color: var(--jamaica-50) !important; }
.bd-jamaica-200 { border-color: var(--jamaica-200) !important; }
.bd-jamaica-700 { border-color: var(--jamaica-700) !important; }

.bd-cedron-50 { border-color: var(--cedron-50) !important; }
.bd-cedron-200 { border-color: var(--cedron-200) !important; }
.bd-cedron-700 { border-color: var(--cedron-700) !important; }

.bd-arnica-50 { border-color: var(--arnica-50) !important; }
.bd-arnica-200 { border-color: var(--arnica-200) !important; }
.bd-arnica-700 { border-color: var(--arnica-700) !important; }

.bd-menta-50 { border-color: var(--menta-50) !important; }
.bd-menta-200 { border-color: var(--menta-200) !important; }
.bd-menta-700 { border-color: var(--menta-700) !important; }

.bd-lirio-50 { border-color: var(--lirio-50) !important; }
.bd-lirio-200 { border-color: var(--lirio-200) !important; }
.bd-lirio-700 { border-color: var(--lirio-700) !important; }


/* ─────────────────────────────────────────────
   Bordes direccionales
   Uso:
   .bdl-muicle
   .bdt-anil
   .bdr-sabila
   .bdb-copal
   ───────────────────────────────────────────── */

.bdl-muicle { border-left: 4px solid var(--muicle-1) !important; }
.bdl-anil { border-left: 4px solid var(--anil-1) !important; }
.bdl-sabila { border-left: 4px solid var(--sabila-1) !important; }
.bdl-bugam { border-left: 4px solid var(--bugam-1) !important; }
.bdl-copal { border-left: 4px solid var(--copal-1) !important; }
.bdl-malva { border-left: 4px solid var(--malva-1) !important; }
.bdl-nopal { border-left: 4px solid var(--nopal-1) !important; }
.bdl-jamaica { border-left: 4px solid var(--jamaica-1) !important; }
.bdl-cedron { border-left: 4px solid var(--cedron-1) !important; }
.bdl-arnica { border-left: 4px solid var(--arnica-1) !important; }
.bdl-menta { border-left: 4px solid var(--menta-1) !important; }
.bdl-lirio { border-left: 4px solid var(--lirio-1) !important; }

.bdt-muicle { border-top: 4px solid var(--muicle-1) !important; }
.bdt-anil { border-top: 4px solid var(--anil-1) !important; }
.bdt-sabila { border-top: 4px solid var(--sabila-1) !important; }
.bdt-bugam { border-top: 4px solid var(--bugam-1) !important; }
.bdt-copal { border-top: 4px solid var(--copal-1) !important; }
.bdt-malva { border-top: 4px solid var(--malva-1) !important; }
.bdt-nopal { border-top: 4px solid var(--nopal-1) !important; }
.bdt-jamaica { border-top: 4px solid var(--jamaica-1) !important; }
.bdt-cedron { border-top: 4px solid var(--cedron-1) !important; }
.bdt-arnica { border-top: 4px solid var(--arnica-1) !important; }
.bdt-menta { border-top: 4px solid var(--menta-1) !important; }
.bdt-lirio { border-top: 4px solid var(--lirio-1) !important; }

.bdr-muicle { border-right: 4px solid var(--muicle-1) !important; }
.bdr-anil { border-right: 4px solid var(--anil-1) !important; }
.bdr-sabila { border-right: 4px solid var(--sabila-1) !important; }
.bdr-bugam { border-right: 4px solid var(--bugam-1) !important; }
.bdr-copal { border-right: 4px solid var(--copal-1) !important; }
.bdr-malva { border-right: 4px solid var(--malva-1) !important; }
.bdr-nopal { border-right: 4px solid var(--nopal-1) !important; }
.bdr-jamaica { border-right: 4px solid var(--jamaica-1) !important; }
.bdr-cedron { border-right: 4px solid var(--cedron-1) !important; }
.bdr-arnica { border-right: 4px solid var(--arnica-1) !important; }
.bdr-menta { border-right: 4px solid var(--menta-1) !important; }
.bdr-lirio { border-right: 4px solid var(--lirio-1) !important; }

.bdb-muicle { border-bottom: 4px solid var(--muicle-1) !important; }
.bdb-anil { border-bottom: 4px solid var(--anil-1) !important; }
.bdb-sabila { border-bottom: 4px solid var(--sabila-1) !important; }
.bdb-bugam { border-bottom: 4px solid var(--bugam-1) !important; }
.bdb-copal { border-bottom: 4px solid var(--copal-1) !important; }
.bdb-malva { border-bottom: 4px solid var(--malva-1) !important; }
.bdb-nopal { border-bottom: 4px solid var(--nopal-1) !important; }
.bdb-jamaica { border-bottom: 4px solid var(--jamaica-1) !important; }
.bdb-cedron { border-bottom: 4px solid var(--cedron-1) !important; }
.bdb-arnica { border-bottom: 4px solid var(--arnica-1) !important; }
.bdb-menta { border-bottom: 4px solid var(--menta-1) !important; }
.bdb-lirio { border-bottom: 4px solid var(--lirio-1) !important; }


/* ─────────────────────────────────────────────
   Radios estándar
   ───────────────────────────────────────────── */

.rd-0 { border-radius: 0 !important; }
.rd-xs { border-radius: .25rem !important; }
.rd-sm { border-radius: .5rem !important; }
.rd-md { border-radius: .75rem !important; }
.rd-lg { border-radius: 1rem !important; }
.rd-xl { border-radius: 1.35rem !important; }
.rd-pill { border-radius: 999px !important; }


/* ─────────────────────────────────────────────
   Patrones compuestos de superficie
   ───────────────────────────────────────────── */

.sv-card {
    background: var(--algodon-50);
    border: 1px solid color-mix(in srgb, var(--anil-200) 45%, transparent);
    border-radius: 1rem;
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--anil-700) 8%, transparent),
        0 1px 0 color-mix(in srgb, white 78%, transparent) inset;
}

.sv-card-muicle {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--muicle-50) 78%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--muicle-200);
    border-left: 5px solid var(--muicle-1);
    color: var(--muicle-700);
}

.sv-card-anil {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--anil-50) 82%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--anil-200);
    border-left: 5px solid var(--anil-1);
    color: var(--anil-700);
}

.sv-card-sabila {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sabila-50) 80%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--sabila-200);
    border-left: 5px solid var(--sabila-1);
    color: var(--sabila-700);
}

.sv-card-bugam {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--bugam-50) 78%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--bugam-200);
    border-left: 5px solid var(--bugam-1);
    color: var(--bugam-700);
}

.sv-card-copal {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--copal-50) 78%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--copal-200);
    border-left: 5px solid var(--copal-1);
    color: var(--copal-700);
}

.sv-card-malva {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--malva-50) 82%, white),
            var(--algodon-50)
        );
    border: 1px solid var(--malva-200);
    border-left: 5px solid var(--malva-1);
    color: var(--malva-700);
}


/* ─────────────────────────────────────────────
   Estados funcionales
   ───────────────────────────────────────────── */

.sv-info {
    background: var(--cedron-50);
    border: 1px solid var(--cedron-200);
    border-left: 5px solid var(--cedron-1);
    color: var(--cedron-700);
}

.sv-success {
    background: var(--nopal-50);
    border: 1px solid var(--nopal-200);
    border-left: 5px solid var(--nopal-1);
    color: var(--nopal-700);
}

.sv-warning {
    background: var(--arnica-50);
    border: 1px solid var(--arnica-200);
    border-left: 5px solid var(--arnica-1);
    color: var(--arnica-700);
}

.sv-danger {
    background: var(--jamaica-50);
    border: 1px solid var(--jamaica-200);
    border-left: 5px solid var(--jamaica-1);
    color: var(--jamaica-700);
}

.sv-doc {
    background: var(--menta-50);
    border: 1px solid var(--menta-200);
    border-left: 5px solid var(--menta-1);
    color: var(--menta-700);
}

.sv-resource {
    background: var(--lirio-50);
    border: 1px solid var(--lirio-200);
    border-left: 5px solid var(--lirio-1);
    color: var(--lirio-700);
}


/* ─────────────────────────────────────────────
   Badges / chips
   ───────────────────────────────────────────── */

.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.65rem;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sv-chip-muicle {
    background: var(--muicle-50);
    border-color: var(--muicle-200);
    color: var(--muicle-700);
}

.sv-chip-anil {
    background: var(--anil-50);
    border-color: var(--anil-200);
    color: var(--anil-700);
}

.sv-chip-sabila {
    background: var(--sabila-50);
    border-color: var(--sabila-200);
    color: var(--sabila-700);
}

.sv-chip-bugam {
    background: var(--bugam-50);
    border-color: var(--bugam-200);
    color: var(--bugam-700);
}

.sv-chip-copal {
    background: var(--copal-50);
    border-color: var(--copal-200);
    color: var(--copal-700);
}

.sv-chip-nopal {
    background: var(--nopal-50);
    border-color: var(--nopal-200);
    color: var(--nopal-700);
}

.sv-chip-jamaica {
    background: var(--jamaica-50);
    border-color: var(--jamaica-200);
    color: var(--jamaica-700);
}

.sv-chip-cedron {
    background: var(--cedron-50);
    border-color: var(--cedron-200);
    color: var(--cedron-700);
}

.sv-chip-arnica {
    background: var(--arnica-50);
    border-color: var(--arnica-200);
    color: var(--arnica-700);
}

.sv-chip-menta {
    background: var(--menta-50);
    border-color: var(--menta-200);
    color: var(--menta-700);
}

.sv-chip-lirio {
    background: var(--lirio-50);
    border-color: var(--lirio-200);
    color: var(--lirio-700);
}


/* ─────────────────────────────────────────────
   Gradientes institucionales
   ───────────────────────────────────────────── */

.bg-sieval-main {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--bugam-1) 30%, transparent), transparent 36%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--sabila-1) 32%, transparent), transparent 42%),
        linear-gradient(135deg, var(--anil-1), var(--muicle-1));
    color: var(--algodon-50);
}

.bg-sieval-soft {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--sabila-50) 80%, transparent), transparent 36%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--muicle-50) 82%, transparent), transparent 42%),
        var(--algodon-50);
}

.bg-sieval-warm {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--copal-50) 74%, white),
            color-mix(in srgb, var(--bugam-50) 64%, white),
            var(--algodon-50)
        );
}

.bg-sieval-cold {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--anil-50) 78%, white),
            color-mix(in srgb, var(--sabila-50) 70%, white),
            var(--algodon-50)
        );
}


/* ─────────────────────────────────────────────
   Sombras estándar
   ───────────────────────────────────────────── */

.sh-none {
    box-shadow: none !important;
}

.sh-soft {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--anil-700) 8%, transparent) !important;
}

.sh-md {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--anil-700) 12%, transparent) !important;
}

.sh-lg {
    box-shadow: 0 22px 54px color-mix(in srgb, var(--anil-700) 18%, transparent) !important;
}

.sh-muicle {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--muicle-1) 20%, transparent) !important;
}

.sh-anil {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--anil-1) 22%, transparent) !important;
}

.sh-sabila {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--sabila-1) 18%, transparent) !important;
}

.sh-bugam {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--bugam-1) 18%, transparent) !important;
}

.sh-copal {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--copal-1) 18%, transparent) !important;
}