/* Modal "Reportar un problema" (Normal y SERUMS). Va en un archivo propio porque Vue ignora las
   etiquetas <style> que estén dentro de #app, y estos modales se dibujan ahí dentro. */
.rp-modal .modal-content { border: 0; border-radius: 1.6rem; overflow: hidden; box-shadow: 0 30px 80px rgba(8, 40, 60, .45); background: linear-gradient(180deg, #f2fbfb 0%, #ffffff 38%); }
.rp-modal.fade .modal-dialog { transform: translateY(30px) scale(.96); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }
.rp-modal.show .modal-dialog { transform: none; }

.rp-modal .rp-head { position: relative; overflow: hidden; padding: 1.6rem 1.8rem 1.4rem; color: #fff; background: linear-gradient(120deg, #07525a 0%, #12a4a0 55%, #6d5dfc 120%); }
.rp-modal .rp-head::before, .rp-modal .rp-head::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.rp-modal .rp-head::before { width: 190px; height: 190px; right: -50px; top: -80px; }
.rp-modal .rp-head::after { width: 110px; height: 110px; right: 120px; bottom: -70px; background: rgba(255, 255, 255, .1); }
.rp-modal .rp-head > * { position: relative; z-index: 1; }
.rp-modal .rp-head h5 { font-weight: 800; font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.rp-modal .rp-head small { opacity: .92; font-size: .9rem; }
.rp-modal .rp-flag { display: inline-block; animation: rpWave 1.8s ease-in-out infinite; transform-origin: 20% 90%; }
@keyframes rpWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(10deg); } }

.rp-modal .modal-body { padding: 1.5rem 1.8rem .5rem; }
.rp-modal .rp-label { font-weight: 800; color: #0a3d44; margin-bottom: .6rem; display: block; }
.rp-modal .rp-label span { font-weight: 500; color: #7a8f93; }

.rp-modal .rp-quote { position: relative; background: #fff; border-radius: 1rem; padding: 1rem 1.2rem 1rem 1.4rem; font-weight: 600; color: #123; box-shadow: 0 8px 22px rgba(10, 61, 68, .1); border: 1px solid #e3f0f0; }
.rp-modal .rp-quote::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, #12a4a0, #6d5dfc); }

.rp-modal .rp-opt { position: relative; display: flex; align-items: center; gap: .85rem; width: 100%; height: 100%; margin: 0; padding: .85rem 1rem; border-radius: 1.1rem; background: #fff; color: #17323a; font-weight: 600; line-height: 1.3; cursor: pointer; border: 2px solid transparent; box-shadow: 0 6px 18px rgba(10, 61, 68, .11); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.rp-modal .rp-opt:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10, 61, 68, .18); }
.rp-modal .rp-bubble { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--t, #e3f4f3); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06); }
.rp-modal .rp-tick { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; font-weight: 800; color: #fff; background: #12a4a0; transform: scale(0); transition: transform .2s cubic-bezier(.2, .9, .3, 1.5); flex: 0 0 26px; }
.rp-modal .btn-check:checked + .rp-opt { border-color: #12a4a0; background: linear-gradient(135deg, #e6f8f6, #ffffff); box-shadow: 0 12px 28px rgba(18, 164, 160, .3); }
.rp-modal .btn-check:checked + .rp-opt .rp-tick { transform: scale(1); }
.rp-modal .btn-check:focus-visible + .rp-opt { outline: 3px solid #6d5dfc; outline-offset: 2px; }
.rp-modal .rp-tone-0 { --t: #dff0ff; }
.rp-modal .rp-tone-1 { --t: #fff1d6; }
.rp-modal .rp-tone-2 { --t: #ffe0e0; }
.rp-modal .rp-tone-3 { --t: #ece6ff; }
.rp-modal .rp-tone-key { --t: #d9f7ee; }

.rp-modal .rp-card { background: #fff; border-radius: 1.1rem; padding: 1rem 1.1rem; box-shadow: 0 8px 22px rgba(10, 61, 68, .1); border: 1px solid #e3f0f0; }
.rp-modal textarea.form-control { border-radius: .9rem; border: 2px solid #e1ecee; background: #fafefe; resize: vertical; min-height: 100px; }
.rp-modal textarea.form-control:focus, .rp-modal input[type=file].form-control:focus { border-color: #12a4a0; box-shadow: 0 0 0 4px rgba(18, 164, 160, .18); }
.rp-modal input[type=file].form-control { border-radius: .9rem; border: 2px dashed #b9d8d8; background: #f4fbfb; padding: .7rem; }
.rp-modal .rp-count { text-align: right; color: #7a8f93; font-size: .8rem; margin-top: .25rem; }
.rp-modal .rp-foot-note { color: #6b7f83; font-size: .85rem; background: #f1f8f8; border-radius: .9rem; padding: .8rem 1rem; }

.rp-modal .modal-footer { background: transparent; padding: .8rem 1.8rem 1.6rem; gap: .6rem; }
.rp-modal .rp-send { border-radius: 2rem; padding: .7rem 1.7rem; font-weight: 800; border: 0; transition: transform .15s ease, box-shadow .15s ease; }
.rp-modal .rp-send:hover { transform: translateY(-2px); }
.rp-modal .rp-send-main { color: #fff; background: linear-gradient(120deg, #0a8a8a, #6d5dfc); box-shadow: 0 10px 24px rgba(109, 93, 252, .4); }
.rp-modal .rp-send-main:hover { color: #fff; box-shadow: 0 14px 30px rgba(109, 93, 252, .5); }
.rp-modal .rp-send-main:disabled { opacity: .7; }
.rp-modal .rp-send-cancel { background: #fff; color: #456; box-shadow: 0 6px 16px rgba(10, 61, 68, .12); }

/* Aviso de éxito / error tras enviar: se oculta solo (sin JavaScript, porque Vue ignora los <script> del #app). */
.rp-toast { position: fixed; top: 84px; right: 20px; z-index: 20000; max-width: 400px; animation: rpToast 10s ease forwards; }
.rp-toast .alert { border: 0; border-radius: 1rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); font-weight: 600; }
@keyframes rpToast { 0% { opacity: 0; transform: translateY(-14px); } 5% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Desplazamiento en celular: el <form> queda entre .modal-content y .modal-body, así que debe repartir la altura
   (si no, el cuerpo no puede desplazarse y el contenido de abajo queda inalcanzable). */
.rp-modal .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
.rp-modal .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: inherit; overflow: hidden; }
.rp-modal .rp-head, .rp-modal .modal-footer { flex: 0 0 auto; }
.rp-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 576px) {
    .rp-modal .modal-dialog { margin: .5rem; }
    .rp-modal .rp-head { padding: 1.1rem 1.2rem 1rem; }
    .rp-modal .rp-head h5 { font-size: 1.15rem; }
    .rp-modal .modal-body { padding: 1.1rem 1.1rem .5rem; }
    .rp-modal .modal-footer { padding: .7rem 1.1rem 1.1rem; }
    .rp-modal .rp-send { padding: .65rem 1.3rem; }
}