/* Onboarding modals: "¿Cómo funciona?" and "Permitir ubicación".
   Flat, minimal card — wide and low, not a tall narrow gradient block. */

/* SweetAlert2's default z-index sits below our modal overlay (100000), so
   the "ubicación bloqueada" instructions popup it shows would otherwise
   render behind the still-open location modal instead of on top of it. */
.swal2-container {
    z-index: 200000 !important;
}

.o247-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 20px;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}

.o247-modal-overlay.is-open {
    display: flex;
    animation: o247FadeIn .2s ease-out;
}

.o247-modal {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    animation: o247PopIn .22s ease-out;
}

/* ---------- Header ---------- */

.o247-modal__top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 60px 20px 28px;
    border-bottom: 1px solid #eef0f4;
}

.o247-modal__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E9F4FF;
    color: #0084DD;
    border-radius: 11px;
}

.o247-modal-overlay--location .o247-modal__icon {
    background: #E9F4FF;
    color: #0084DD;
}

.o247-modal__icon svg {
    width: 20px;
    height: 20px;
}

.o247-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #16233f;
    line-height: 1.35;
}

.o247-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #98a2b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.o247-modal__close:hover {
    background: #f1f4f9;
    color: #55617a;
}

/* ---------- Body ---------- */

.o247-modal__body {
    flex: 1;
    min-height: 0;
    padding: 22px 28px;
    overflow-y: auto;
    color: #4a5570;
    font-size: 14.5px;
    line-height: 1.68;
}

.o247-modal__body::-webkit-scrollbar {
    width: 6px;
}

.o247-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.o247-modal__body::-webkit-scrollbar-thumb {
    background: #dde2eb;
    border-radius: 10px;
}

.o247-modal__body p {
    margin: 0 0 12px;
}

.o247-modal__body p:last-child {
    margin-bottom: 0;
}

.o247-modal__body p:empty {
    display: none;
}

/* The admin content (summernote/pasted HTML) mixes h1-h6 at random, and some
   headings carry an inline font-weight:normal span from the source editor —
   normalizing every level and overriding nested spans keeps every "step
   title" looking the same instead of some bold and some not. */
.o247-modal__body h1,
.o247-modal__body h2,
.o247-modal__body h3,
.o247-modal__body h4,
.o247-modal__body h5,
.o247-modal__body h6 {
    margin: 18px 0 8px;
    color: #16233f !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.4;
}

.o247-modal__body h1 *,
.o247-modal__body h2 *,
.o247-modal__body h3 *,
.o247-modal__body h4 *,
.o247-modal__body h5 *,
.o247-modal__body h6 * {
    font-weight: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
}

.o247-modal__body h1:first-child,
.o247-modal__body h2:first-child,
.o247-modal__body h3:first-child,
.o247-modal__body h4:first-child,
.o247-modal__body h5:first-child,
.o247-modal__body h6:first-child {
    margin-top: 0;
}

.o247-modal__body h1:empty,
.o247-modal__body h2:empty,
.o247-modal__body h3:empty,
.o247-modal__body h4:empty,
.o247-modal__body h5:empty,
.o247-modal__body h6:empty {
    display: none;
}

.o247-modal__body strong,
.o247-modal__body b {
    color: #16233f;
    font-weight: 700;
}

.o247-modal__body a {
    color: #0084DD;
    font-weight: 600;
    text-decoration: none;
}

.o247-modal__body a:hover {
    text-decoration: underline;
}

/* Admin-authored content (Configuración > Contenido) sometimes embeds the
   company logo via summernote — the modal already shows the icon/title in
   its header, so images from that content are hidden here to keep it text-only.
   The leading <br> and the (now-empty) paragraph that wrapped the image are
   also collapsed so removing it doesn't leave a blank gap up top. */
.o247-modal__body img {
    display: none;
}

.o247-modal__body > br:first-child {
    display: none;
}

/* The logo is always the first thing in the content's wrapper table cell,
   sometimes alongside a trailing <br> or an empty <strong> — hiding whatever
   first element holds it (rather than only an exact img-only paragraph)
   covers both variants without touching real text paragraphs after it. */
.o247-modal__body table td > *:first-child:has(img) {
    display: none;
}

.o247-modal__body hr {
    border: none;
    border-top: 1px solid #eef0f4;
    margin: 16px 0;
}

.o247-modal__body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.o247-modal__body ul li {
    margin-bottom: 6px;
}

.o247-modal__body ul li::marker {
    color: #0084DD;
}

/* Numbered steps rendered as compact tinted badges instead of default counters. */
.o247-modal__body ol {
    list-style: none;
    counter-reset: o247-step;
    margin: 0 0 12px;
    padding-left: 0;
}

.o247-modal__body ol li {
    position: relative;
    counter-increment: o247-step;
    padding-left: 32px;
    margin-bottom: 10px;
    min-height: 22px;
}

.o247-modal__body ol li::before {
    content: counter(o247-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E9F4FF;
    color: #0084DD;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Footer ---------- */

.o247-modal__footer {
    padding: 16px 28px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    border-top: 1px solid #eef0f4;
}

.o247-modal__btn {
    height: 42px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.o247-modal__btn--primary {
    background: #0084DD;
    color: #fff;
}

.o247-modal__btn--primary:hover {
    background: #0072BE;
}

.o247-modal__btn--ghost {
    background: #fff;
    color: #5b6a85;
    border: 1px solid #e3e7ef;
}

.o247-modal__btn--ghost:hover {
    background: #f7f9fc;
    color: #33405c;
}

/* ---------- Motion ---------- */

@keyframes o247FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes o247PopIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .o247-modal-overlay.is-open,
    .o247-modal {
        animation: none;
    }
}

@media (max-width: 560px) {
    .o247-modal { border-radius: 16px; max-height: 90vh; }
    .o247-modal__top { padding: 18px 52px 16px 20px; }
    .o247-modal__title { font-size: 16px; }
    .o247-modal__body { padding: 18px 20px; }
    .o247-modal__footer { padding: 14px 20px; flex-direction: column-reverse; }
    .o247-modal__footer .o247-modal__btn { width: 100%; }
}