.hidden {
    display: none !important;
}

.modal {
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 700px;
    height: 490px;
    max-width: 90dvw;
    max-height: 90dvh;
    border-radius: 16px 0 16px 16px;
}

.modal-header {
    height: 62px;
    padding: 10px 20px;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #DCE3E9;
    display: flex;
    align-items: center;
}

.modal-header h3 {
    font-size: clamp(1.125rem, 1.087rem + 0.2174vw, 1.25rem) !important;
    margin: 0;
    line-height: 1.1em;
}

.modal-close {
    position: absolute;
    top: -44px;
    right: -44px;
    border-radius: 10px 10px 10px 0;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    color: #fff !important;
    font-size: 18px;
    background-color: #B53D3F;
}

.modal-content {
    border-radius: 0 0 0 16px;
    overflow: hidden;
}

.modal-content .seguro-tabs {
    display: grid;
    grid-template-columns: 210px auto;
    height: 428px;
    max-height: calc(90dvh - 62px);
}

.modal-content .tabs-navigation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.modal-content .tabs-navigation li {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4E5361;
    border-radius: 12px;
    transition: all .2s ease-in-out;
    user-select: none;
    cursor: pointer;
}

.modal-content .tabs-navigation li:is(.active, :hover) {
    color: #B53D3F;
    background-color: #FFD9DA;
}

.modal-content .seguro-tabs .tabs-content {
    height: 428px;
    max-height: calc(90dvh - 62px);
    overflow-y: auto;
}

.modal-content .seguro-tabs .tab-panel:not(.active) {
    display: none;
}

.modal-content .seguro-tabs .tab-panel {
    padding: 20px;
}

.modal-content .seguro-tabs .tab-panel .bloque-texto :is(h2, h3) {
    font-size: clamp(1.125rem, 1.087rem + 0.2174vw, 1.25rem) !important;
    line-height: 1.1em;
}

.modal-content .seguro-tabs .tab-panel table {
    margin-top: 1.1em;
    margin-bottom: 1.1em;
}

.modal .rtabs {
    background-color: #F5F6F8;
    padding: 20px;
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
}

.modal .accordion {
    margin-top: 1.1em;
    margin-bottom: 1.1em;
}

.modal .accordion-item__title {
    border: 1px solid #EBEBEB;
    border-radius: 16px;
    font-weight: 600;
    padding: 12px 20px;
    font-size: clamp(0.875rem, 0.837rem + 0.2174vw, 1rem) !important;
    padding-right: 40px;
    position: relative;
    cursor: pointer;
    user-select: none;

}

.modal .accordion-item__title::after {
    content: '';
    height: 24px;
    width: 24px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="%23AFB9CA"/><path d="M15.9772 10.3078C15.86 10.1906 15.701 10.1248 15.5353 10.1248C15.3696 10.1248 15.2106 10.1906 15.0934 10.3078L11.9997 13.4015L8.90591 10.3078C8.78804 10.1939 8.63016 10.1309 8.46629 10.1324C8.30242 10.1338 8.14566 10.1995 8.02978 10.3154C7.9139 10.4313 7.84817 10.588 7.84674 10.7519C7.84532 10.9158 7.90832 11.0737 8.02216 11.1915L11.5578 14.7272C11.675 14.8443 11.8339 14.9102 11.9997 14.9102C12.1654 14.9102 12.3243 14.8443 12.4415 14.7272L15.9772 11.1915C16.0943 11.0743 16.1602 10.9154 16.1602 10.7497C16.1602 10.5839 16.0943 10.425 15.9772 10.3078Z" fill="%23AFB9CA"/></svg>');
}

.modal .accordion-item__title.active::after {
    transform: rotate(180deg);
}

.modal .accordion-item:not(.active) .accordion-item__content {
    display: none;
    padding-bottom: 20px;
}

.modal .btn {
    background: #B53D3F;
    color: #fff;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.modal .btn::before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.55496 18.9738H14.4442C16.1771 18.9738 17.0392 18.0948 17.0392 16.3538V8.75342C17.0392 7.67342 16.9221 7.20484 16.2525 6.51842L11.6317 1.8227C10.996 1.16949 10.4767 1.02734 9.53103 1.02734H5.55496C3.83068 1.02734 2.95996 1.91449 2.95996 3.65592V16.3538C2.95996 18.1031 3.83068 18.9738 5.55496 18.9738ZM5.62175 17.6263C4.7596 17.6263 4.30746 17.1656 4.30746 16.3288V3.68092C4.30746 2.85234 4.7596 2.37484 5.63032 2.37484H9.34675V7.23842C9.34675 8.29306 9.88246 8.81199 10.9203 8.81199H15.6917V16.3288C15.6917 17.1656 15.2478 17.6263 14.3775 17.6263H5.62175ZM11.071 7.5477C10.7446 7.5477 10.6103 7.41413 10.6103 7.07913V2.63449L15.4317 7.54806L11.071 7.5477Z" fill="white"/></svg>');
    background-position: center;
    height: 1.1em;
    width: 1.1em;
    display: inline-flex;
}

:is(.modal, .modal-overlay):not(.active) {
    display: none;
}

.convenio-modal .modal-content {
    padding: 20px;
    height: 490px;
    max-height: 90dvh;
    overflow-y: auto;
}

.convenio-modal .convenio-content h2 {
    font-size: clamp(1.125rem, 1.0109rem + 0.6522vw, 1.5rem);
    line-height: 1.2em;
    color: #0560A2;
}

.convenio-modal .convenio-content h3 {
    font-size: clamp(1rem, 0.9239rem + 0.4348vw, 1.25rem);
    line-height: 1.2em;
    color: #0560A2
}

.convenio-modal .convenio-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.convenio-modal .convenio-buttons a {
    border: 1px solid #2D3039;
    flex: 1 1 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 16px;
    color: #2D3039;
    text-decoration: none;
    transition: all .2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    text-align: center;
}

.convenio-modal .convenio-buttons a:hover {
    background-color: #2D3039;
    color: #fff;
}

.convenio-modal .convenio-heading {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.convenio-modal .convenio-heading .convenio-category-badge {
    background: #f5e4e4;
    padding: 4px 12px;
    display: inline-flex;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2em;
    color: #B53D3F;
    font-weight: 600;
    text-transform: uppercase;
}

.convenio-modal .convenio-image {
    width: 100%;
    display: flex;
    aspect-ratio: 317/238;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.convenio-modal .convenio-image img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width:767px) {
    .modal-content .seguro-tabs {
        display: flex;
        flex-direction: column;
    }

    .modal-content .tabs-navigation {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        gap: 10px;
    }

    .modal-content .tabs-navigation li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .modal {
        height: 80dvh;
    }

    .modal-close {
        right: 0;
        top: -54px;
    }
}