/* =======================================================
   MODAL
======================================================= */

.modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.20);

}

/* =======================================================
   HEADER
======================================================= */

.modal-header{

    border:none;

    padding:20px 30px;

}

.modal-title{

    font-size:24px;

    font-weight:700;

}

.btn-close{

    opacity:1;

}

.btn-close:hover{

    transform:rotate(90deg);

    transition:.3s;

}

/* =======================================================
   BODY
======================================================= */

.modal-body{

    padding:35px;

    font-size:16px;

    color:#444;

    line-height:1.8;

    background:#ffffff;

}

/* =======================================================
   TITULOS
======================================================= */

.modal-body h1{

    font-size:34px;

    font-weight:700;

    margin-bottom:20px;

    color:#212529;

}

.modal-body h2{

    font-size:28px;

    font-weight:700;

    margin-top:40px;

    margin-bottom:20px;

    color:#dc3545;

}

.modal-body h3{

    font-size:22px;

    font-weight:700;

    margin-top:30px;

    color:#212529;

}

/* =======================================================
   PARRAFOS
======================================================= */

.modal-body p{

    margin-bottom:18px;

    text-align:justify;

}

/* =======================================================
   LISTAS
======================================================= */

.modal-body ul{

    padding-left:25px;

    margin-bottom:20px;

}

.modal-body ol{

    padding-left:25px;

    margin-bottom:20px;

}

.modal-body li{

    margin-bottom:10px;

}

/* =======================================================
   TABLAS
======================================================= */

.modal-body table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.modal-body table th{

    background:#dc3545;

    color:white;

    padding:12px;

}

.modal-body table td{

    border:1px solid #ddd;

    padding:12px;

}

.modal-body table tr:nth-child(even){

    background:#f8f9fa;

}

/* =======================================================
   ENLACES
======================================================= */

.modal-body a{

    color:#dc3545;

    text-decoration:none;

}

.modal-body a:hover{

    text-decoration:underline;

}

/* =======================================================
   LINEA DIVISORIA
======================================================= */

.modal-body hr{

    margin:35px 0;

    border:none;

    border-top:1px solid #dee2e6;

}

/* =======================================================
   BLOQUES DESTACADOS
======================================================= */

.modal-body .nota{

    background:#fff8e5;

    border-left:5px solid #ffc107;

    padding:18px;

    border-radius:8px;

    margin:25px 0;

}

.modal-body .importante{

    background:#fff3f3;

    border-left:5px solid #dc3545;

    padding:18px;

    border-radius:8px;

    margin:25px 0;

}

.modal-body .correcto{

    background:#edfdf4;

    border-left:5px solid #198754;

    padding:18px;

    border-radius:8px;

    margin:25px 0;

}

/* =======================================================
   SPINNER
======================================================= */

.spinner-border{

    width:3rem;

    height:3rem;

}

/* =======================================================
   SCROLL
======================================================= */

.modal-body::-webkit-scrollbar{

    width:10px;

}

.modal-body::-webkit-scrollbar-track{

    background:#f1f1f1;

}

.modal-body::-webkit-scrollbar-thumb{

    background:#dc3545;

    border-radius:20px;

}

.modal-body::-webkit-scrollbar-thumb:hover{

    background:#bb2d3b;

}

/* =======================================================
   RESPONSIVE
======================================================= */

@media(max-width:991px){

    .modal-dialog{

        margin:20px;

    }

}

@media(max-width:768px){

    .modal-body{

        padding:25px;

        font-size:15px;

    }

    .modal-title{

        font-size:20px;

    }

    .modal-body h1{

        font-size:28px;

    }

    .modal-body h2{

        font-size:24px;

    }

}

@media(max-width:576px){

    .modal-body{

        padding:18px;

    }

    .modal-body h1{

        font-size:24px;

    }

    .modal-body h2{

        font-size:20px;

    }

    .modal-body h3{

        font-size:18px;

    }

}