:root{

/* ===== POPUP ===== */

--popup-scale:1.12;

--popup-width:350px;
--popup-height:auto;

--popup-x:0px;
--popup-y:80px;

--popup-radius:26px;

--font-size:16px;


/* ===== IMAGEN INFERIOR ===== */

/* tamaño */
--bottom-width:440px;

/* izquierda(-) derecha(+) */
--bottom-x:0px;

/* separación respecto popup */
--bottom-y:15px;

}


/* =======================
POPUP
======================= */

#wifiPopup{

position:absolute;

left:50%;

width:var(--popup-width);

height:var(--popup-height);

background:white;

border-radius:var(--popup-radius);

overflow:hidden;

box-shadow:
0 5px 30px rgba(0,0,0,.10);

transform:
translateX(-50%)
translateX(var(--popup-x))
translateY(var(--popup-y))
scale(var(--popup-scale));

transform-origin:top center;

opacity:0;

max-height:52px;

transition:
max-height .15s ease,
opacity .35s ease;

z-index:20;

}


/* popup visible */

#wifiPopup.open{

opacity:1;

max-height:1000px;

}


/* =======================
FILAS
======================= */

.wifiRow{

height:52px;

display:flex;

align-items:center;

justify-content:space-between;

padding-left:30px;

padding-right:14px;

background:white;

border-bottom:
0.5px solid #e5e5ea;

}

.wifiRow:last-child{

border-bottom:none;

}


/* =======================
TEXTO
======================= */

.wifiName{

font-size:var(--font-size);

font-weight:400;

color:black;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro",
sans-serif;

letter-spacing:-0.2px;

}


/* =======================
"OTRA..."
======================= */

.placeholderRow{

justify-content:flex-start;

color:#8e8e93;

font-style:normal;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro",
sans-serif;

font-weight:400;

}


/* =======================
ICONOS
======================= */

.icons{

display:flex;

align-items:center;

gap:10px;

}


/* =======================
CANDADO
======================= */

.lockIcon{

width:11px;
height:13px;

opacity:.55;

background-repeat:no-repeat;
background-position:center;
background-size:contain;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%23000' d='M5 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E");

}


/* =======================
WIFI
======================= */

.wifiIcon{

width:16px;
height:12px;

opacity:.70;

background-repeat:no-repeat;
background-position:center;
background-size:contain;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23000' d='M12 16.5a1.7 1.7 0 100-3.4 1.7 1.7 0 000 3.4zm-4-3.7l1.4 1.4a3.8 3.8 0 015.2 0l1.4-1.4a5.8 5.8 0 00-8 0zm-4-4l1.4 1.4a9.4 9.4 0 0113.2 0L20 8.8a11.4 11.4 0 00-16 0zm-4-4l1.4 1.4a15 15 0 0121.2 0L24 4.8a17 17 0 00-24 0z'/%3E%3C/svg%3E");

}


/* =======================
INFO
======================= */

.infoIcon{

width:18px;
height:18px;

background-repeat:no-repeat;
background-position:center;
background-size:contain;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23007AFF' stroke-width='2'/%3E%3Ctext x='12' y='16' font-size='14' text-anchor='middle' fill='%23007AFF' font-family='Arial'%3Ei%3C/text%3E%3C/svg%3E");

}


/* =======================
IMAGEN INFERIOR
======================= */

#bottomImage{

position:absolute;

left:50%;

width:var(--bottom-width);

height:auto;

transform:
translateX(-50%)
translateX(var(--bottom-x));

visibility:hidden;

z-index:15;

pointer-events:none;

user-select:none;

-webkit-user-select:none;

}