/* =====================================================
STARFUS UI WIDGETS
Componentes auxiliares de la interfaz
===================================================== */


/* =====================================================
BLOQUE DE CIBERSEGURIDAD
===================================================== */

.sf-ciber-orange {
width: calc(100% - 32px);
max-width: 1100px;

margin: 30px auto;
padding: 18px 22px;

color: #f4d4bd;

background:
linear-gradient(
90deg,
rgba(255, 106, 0, 0.13),
rgba(255, 106, 0, 0.05)
),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.018) 0 2px,
transparent 2px 6px
);

border: 1px solid rgba(255, 106, 0, 0.20);
border-left: 4px solid #ff6a00;
border-radius: 0 14px 14px 0;

box-shadow:
0 10px 28px rgba(0, 0, 0, 0.20);

backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.sf-ciber-orange h3 {
margin: 0 0 7px;

color: #ff8a3d;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.2px;
}

.sf-ciber-orange p {
margin: 0;

color: #f2d2bd;
font-size: 0.94rem;
line-height: 1.55;
}


/* =====================================================
FLECHA SUBIR / BAJAR
===================================================== */

#scrollHint {
position: fixed;
right: 18px;
bottom: 86px;
z-index: 9997;

width: 42px;
height: 42px;

display: flex;
align-items: center;
justify-content: center;

padding: 0;

color: #ffffff;
font-size: 21px;
font-weight: 800;

background:
linear-gradient(
180deg,
rgba(24, 29, 52, 0.96),
rgba(8, 12, 27, 0.96)
),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.025) 0 2px,
transparent 2px 5px
);

border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;

box-shadow:
0 7px 18px rgba(0, 0, 0, 0.38),
inset 0 1px rgba(255, 255, 255, 0.06);

cursor: pointer;

transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
opacity 0.2s ease;
}

#scrollHint:hover {
transform: translateY(-2px);

background:
linear-gradient(
180deg,
#ff8532,
#ff6a00
);

border-color: rgba(255, 255, 255, 0.20);
}

#scrollHint:active {
transform: translateY(1px);
}


/* =====================================================
MODAL PROTECCI脫N STARFUS
===================================================== */

.modalBackdrop {
position: fixed;
inset: 0;
z-index: 10000;

display: none;

background: rgba(0, 0, 0, 0.72);

backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);

opacity: 0;

transition:
opacity 0.2s ease;
}

.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 10001;

display: none;

width: calc(100% - 32px);
max-width: 720px;
max-height: 88vh;

overflow-y: auto;
overflow-x: hidden;

padding: 0;

color: #f2f2f7;

background:
radial-gradient(
circle at top right,
rgba(255, 106, 0, 0.12),
transparent 38%
),
linear-gradient(
180deg,
rgba(14, 18, 36, 0.985),
rgba(7, 10, 24, 0.99)
),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.018) 0 2px,
transparent 2px 6px
);

border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 18px;

box-shadow:
0 25px 80px rgba(0, 0, 0, 0.70),
0 0 30px rgba(255, 106, 0, 0.06),
inset 0 1px rgba(255, 255, 255, 0.04);

opacity: 0;

transform:
translate(-50%, -48%)
scale(0.97);

transition:
opacity 0.2s ease,
transform 0.2s ease;

scrollbar-width: thin;
scrollbar-color:
rgba(255, 255, 255, 0.20)
transparent;
}

.modal::-webkit-scrollbar {
width: 8px;
}

.modal::-webkit-scrollbar-track {
background: transparent;
}

.modal::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 999px;
}


/* Visible cuando JavaScript agrega la clase show */

.modalBackdrop.show {
display: block;
opacity: 1;
}

.modal.show {
display: block;
opacity: 1;

transform:
translate(-50%, -50%)
scale(1);
}


/* =====================================================
CONTENIDO INTERNO DEL MODAL
===================================================== */

.modalHeader {
position: sticky;
top: 0;
z-index: 2;

display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;

padding: 17px 19px;

background:
linear-gradient(
180deg,
rgba(10, 14, 31, 0.97),
rgba(7, 11, 24, 0.97)
),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.018) 0 2px,
transparent 2px 6px
);

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.modalHeader h2,
.modalHeader h3 {
margin: 0;

color: #ffffff;
font-size: 18px;
line-height: 1.25;
}

.modalClose,
.closeModal,
#modalClose {
min-width: 38px;
width: 38px;
height: 38px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 0;

color: #ffffff;
font-size: 21px;
line-height: 1;

background:
rgba(255, 255, 255, 0.06);

border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 11px;

cursor: pointer;
}

.modalClose:hover,
.closeModal:hover,
#modalClose:hover {
background:
rgba(255, 106, 0, 0.15);

border-color:
rgba(255, 106, 0, 0.35);
}

.modalBody {
padding: 20px;
}

.modalBody h3,
.modalBody h4 {
margin: 18px 0 8px;

color: #ff8a3d;
}

.modalBody h3:first-child,
.modalBody h4:first-child {
margin-top: 0;
}

.modalBody p {
margin: 0 0 12px;

color: #c7cad7;
line-height: 1.6;
}

.modalBody ul,
.modalBody ol {
margin: 10px 0 15px 22px;

color: #c7cad7;
line-height: 1.6;
}

.modalBody li {
margin-bottom: 7px;
}

.modalBody a {
color: #72cfff;
}

.modalBody a:hover {
color: #a8e2ff;
}


/* =====================================================
CAJAS DE AVISO
===================================================== */

.sf-alert {
margin: 14px 0;
padding: 13px 15px;

color: #d9dce8;
line-height: 1.5;

background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.025)
),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.012) 0 2px,
transparent 2px 6px
);

border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 13px;
}

.sf-alert.orange {
background:
rgba(255, 106, 0, 0.09);

border-color:
rgba(255, 106, 0, 0.22);
}

.sf-alert.blue {
background:
rgba(0, 163, 255, 0.08);

border-color:
rgba(0, 163, 255, 0.20);
}

.sf-alert.green {
background:
rgba(46, 229, 157, 0.08);

border-color:
rgba(46, 229, 157, 0.20);
}


/* =====================================================
ESTADO DE CARGA
===================================================== */

.sf-loading {
display: inline-flex;
align-items: center;
gap: 9px;

color: #9ba0b8;
font-size: 13px;
}

.sf-loading::before {
content: "";

width: 15px;
height: 15px;

border: 2px solid rgba(255, 255, 255, 0.15);
border-top-color: #00a3ff;
border-radius: 50%;

animation:
sf-spin 0.8s linear infinite;
}

@keyframes sf-spin {
to {
transform:
rotate(360deg);
}
}


/* =====================================================
ESTADO SIN SCROLL DE FONDO
===================================================== */

body.modal-open {
overflow: hidden;
}


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

@media (max-width: 768px) {

.sf-ciber-orange {
width:
calc(100% - 24px);

margin:
22px auto;

padding:
15px 17px;
}

.modal {
width:
calc(100% - 20px);

max-height:
92vh;

border-radius:
16px;
}

.modalHeader {
padding:
14px 15px;
}

.modalHeader h2,
.modalHeader h3 {
font-size:
16px;
}

.modalBody {
padding:
16px;
}

}


@media (max-width: 520px) {

#scrollHint {
right:
12px;

bottom:
74px;

width:
39px;

height:
39px;

font-size:
19px;
}

.sf-ciber-orange {
font-size:
14px;
}

.modal {
width:
calc(100% - 14px);

max-height:
94vh;

border-radius:
14px;
}

.modalBody {
padding:
14px;
}

}
/* =====================================================
CORRECCI脫N BOTONES 路 PROTECCI脫N STARFUS
===================================================== */

.ctaRow {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;

margin-top: 18px;
}

.cta {
min-height: 42px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 10px 16px;

color: #ffffff !important;
font-size: 13px;
font-weight: 750;
line-height: 1.2;
text-align: center;

background:
linear-gradient(
180deg,
#1fa8ff,
#0879e8
) !important;

border: 1px solid rgba(109, 222, 255, 0.35) !important;
border-radius: 11px;

box-shadow:
0 8px 18px rgba(0, 119, 255, 0.25),
inset 0 1px rgba(255, 255, 255, 0.16);

cursor: pointer;

transition:
transform 0.18s ease,
filter 0.18s ease,
border-color 0.18s ease;
}

.cta.secondary {
color: #eaf6ff !important;

background:
linear-gradient(
180deg,
rgba(30, 48, 72, 0.98),
rgba(14, 27, 46, 0.98)
) !important;

border-color:
rgba(148, 163, 184, 0.25) !important;
}

.cta:hover {
transform: translateY(-1px);
filter: brightness(1.08);
}

.cta:active {
transform: translateY(0);
}

.cta:focus-visible {
outline: 2px solid rgba(50, 216, 255, 0.92);
outline-offset: 3px;
}

@media (max-width: 520px) {

.ctaRow {
display: grid;
grid-template-columns: 1fr;
}

.cta {
width: 100%;
}

}
/* =====================================================
CORRECCIÓN DEFINITIVA ANTIFRAUDE EN CELULARES
===================================================== */

@media (max-width: 600px) {

.modalBackdrop {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
height: 100dvh;
}

.modal {
position: fixed;

top: 8px;
right: 7px;
bottom: 8px;
left: 7px;

width: auto;
max-width: none;

height: auto;
max-height: none;

display: none;
flex-direction: column;

overflow: hidden;

border-radius: 14px;

transform: none;

overscroll-behavior: contain;
}

.modal.show {
display: flex;

opacity: 1;

transform: none;
}

.modalHeader {
position: relative;
top: auto;

flex: 0 0 auto;

padding:
calc(13px + env(safe-area-inset-top, 0px))
14px
13px;
}

.modalHeader h2,
.modalHeader h3 {
padding-right: 4px;

font-size: 16px;
line-height: 1.3;
}

.modalClose,
.closeModal,
#modalClose {
flex: 0 0 40px;

width: 40px;
min-width: 40px;
height: 40px;
}

.modalBody {
flex: 1 1 auto;

min-height: 0;

overflow-x: hidden;
overflow-y: auto;

padding:
15px
14px
calc(18px + env(safe-area-inset-bottom, 0px));

-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

.modalBody p {
font-size: 14px;
line-height: 1.5;
}

.sf-alert {
margin: 12px 0;
padding: 12px;

font-size: 14px;
line-height: 1.45;
}

.ctaRow {
position: sticky;
bottom: 0;
z-index: 3;

display: grid;
grid-template-columns: 1fr;
gap: 9px;

margin: 16px -14px -18px;
padding:
12px
14px
calc(12px + env(safe-area-inset-bottom, 0px));

background:
linear-gradient(
180deg,
rgba(7, 10, 24, 0.92),
rgba(7, 10, 24, 1)
);

border-top:
1px solid rgba(255, 255, 255, 0.09);

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.cta {
width: 100%;
min-height: 46px;

padding: 11px 12px;

font-size: 14px;
touch-action: manipulation;
}

body.modal-open {
overflow: hidden;
touch-action: none;
}

body.modal-open .modal {
touch-action: pan-y;
}
}