/* ─── Modales de políticas ─── */
/* Dejan libre la barra superior fija (65px) */
.modal .modal-dialog {
    margin-top: 75px;
    margin-bottom: 20px;
}

.modal .modal-content {
    position: relative;
}

/* El botón de cerrar flota en la esquina: ya no ocupa una franja vacía arriba del título */
.modal .modal-header {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 5;
    width: auto;
    padding: 0;
    border-bottom: none;
}

.modal .modal-header .close {
    margin: 0;
    padding: 0 6px;
}

.modal .modal-header .close span {
    color: #8b0000;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    transition: color 0.15s ease;
    display: block;
}

.modal .modal-header .close:hover span { color: #b22222; }
.modal .modal-header .close:focus { outline: none; }

.modal .modal-body {
    padding-top: 14px;
}

.modal .modal-body .card-title {
    padding-right: 40px;
}

/* ─── Botones de políticas ─── */
/* Escritorio y tablet: los cinco botones en una sola línea, mismo ancho */
.policy-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 24px 0;
}

.policy-buttons .policy-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .policy-buttons .policy-btn {
        font-size: 12.5px;
        padding: 6px 4px;
    }
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    .policy-buttons .policy-btn {
        font-size: 11.5px;
    }
}

/* Responsivo: botones apilados a todo el ancho, texto en una línea (como el curso de referencia) */
@media (max-width: 767.98px) {
    .policy-buttons {
        flex-direction: column;
        gap: 8px;
        margin: 20px 0;
    }

    .policy-buttons .policy-btn {
        flex: 0 0 auto;
        width: 100%;
        min-height: 44px;
        font-size: 15px;
        white-space: nowrap;
    }
}