/* Teléfono animado (phone.js) */
.ph { width: 100%; display: flex; justify-content: center; }
.ph-wrap { position: relative; width: 100%; max-width: 300px; aspect-ratio: 360 / 560; }
.ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-k { fill: #3a3a3d; transition: transform .18s ease, fill .18s ease; transform-box: fill-box; }
.ph-k.on { fill: #2189ff; transform: translateX(-3px); filter: drop-shadow(0 0 6px rgba(33,137,255,.9)); }
.ph-k[data-k="bixby"].on { transform: translateX(3px); }
.ph-lab line { stroke: #2189ff; stroke-width: 1.5; stroke-dasharray: 3 3; }
.ph-lab rect { fill: #000; }
.ph-lab text { fill: #fff; font: 700 14.5px Inter, system-ui, sans-serif; text-anchor: middle; }
.ph-lab { animation: phLab .3s ease both; }
@keyframes phLab { from { opacity: 0; transform: translateX(-4px); } }
.ph-cable { transform: translateY(90px); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ph-cabled .ph-cable { transform: translateY(0); opacity: 1; }
.ph-screen { position: absolute; left: 26.67%; right: 26.67%; top: 3.93%; bottom: 17.5%; border-radius: 17% / 6.6%; overflow: hidden; background: #000; }
.ph-sc { position: absolute; inset: 0; text-align: left; }
.ph-sc > .ph-s { position: absolute; inset: 0; font-family: Inter, system-ui, sans-serif; color: #fff; }
.ph-in { animation: phIn .35s ease both; }
@keyframes phIn { from { opacity: 0; } }
.ph-tap { position: absolute; width: 34px; height: 34px; margin: -17px; border-radius: 50%; pointer-events: none; opacity: 0; left: 50%; top: 50%; }
.ph-tap.go { animation: phTap 1s ease-out both; }
@keyframes phTap { 0% { opacity: 0; transform: scale(.4); background: rgba(33,137,255,.55); box-shadow: 0 0 0 0 rgba(33,137,255,.5); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); box-shadow: 0 0 0 14px rgba(33,137,255,0); background: rgba(33,137,255,.2); } }
.ph-off { background: #000; }
.ph-dim::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.ph-home { background: linear-gradient(160deg, #1b3a8c 0%, #4a2a8a 45%, #c04b7d 100%); }
.ph-clock { position: absolute; top: 14%; width: 100%; text-align: center; font-size: 30px; font-weight: 300; }
.ph-date { position: absolute; top: 25%; width: 100%; text-align: center; font-size: 10px; opacity: .85; }
.ph-apps { position: absolute; left: 10%; right: 10%; top: 52%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ph-apps i, .ph-dock i { display: block; aspect-ratio: 1; border-radius: 30%; background: rgba(255,255,255,.85); }
.ph-dock { position: absolute; left: 10%; right: 10%; bottom: 5%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ph-pm { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ph-pmb { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9px; }
.ph-pmb b { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #333; display: grid; place-items: center; font-size: 18px; }
.ph-pmb.ph-red b { background: #e5484d; color: #fff; }
.ph-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ph-logo span { font-weight: 800; letter-spacing: .18em; font-size: 15px; }
.ph-logo small { position: absolute; bottom: 8%; font-size: 8px; opacity: .6; }
.ph-rec { background: #05070a; padding: 14% 5% 0; font: 7.6px/1.38 ui-monospace, Menlo, monospace; }
.ph-rh { display: flex; flex-direction: column; gap: 1px; color: #f6c533; word-break: break-all; padding: 3px; border-radius: 4px; margin: -3px; }
.ph-rh b { color: #f6c533; font-size: 9px; }
.ph-rh span { color: #f6c533; }
.ph-hl { outline: 2px solid #2189ff; box-shadow: 0 0 0 4px rgba(33,137,255,.35); animation: phPulse 1.2s ease-in-out infinite; }
@keyframes phPulse { 50% { box-shadow: 0 0 0 7px rgba(33,137,255,.12); } }
.ph-rm { margin-top: 6px; display: flex; flex-direction: column; border-top: 1.5px solid #1f6fff; border-bottom: 1.5px solid #1f6fff; padding: 1px 0; }
.ph-rm div { padding: 2.5px 4px; color: #3d8bff; }
.ph-rm div.on { background: #1f5fe0; color: #fff; }
.ph-rfoot, .ph-rlog { margin-top: 8px; color: #e9d76b; display: flex; flex-direction: column; gap: 2px; }
.ph-blink { animation: phBlink 1s steps(2) infinite; }
@keyframes phBlink { 50% { opacity: .2; } }
.ph-light { background: #fff; color: #111 !important; }
.ph-welcome { background: #2a6fb5 url('/img/welcome.webp') center / cover no-repeat; }
.ph-welcome .ph-wt { position: absolute; left: 10%; top: 30%; font-size: 24px; font-weight: 700; color: #111; }
.ph-lang { position: absolute; left: 10%; top: 44%; font-size: 9px; color: #444; }
.ph-wb { position: absolute; left: 8%; right: 8%; bottom: 5%; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #444; }
.ph-wb b { background: #2189ff; color: #fff; padding: 7px 14px; border-radius: 999px; font-weight: 600; }
.ph-tt { margin: 18% 8% 10px; font-size: 13px; font-weight: 700; color: #111; }
.ph-tl { margin: 0 8%; display: flex; flex-direction: column; gap: 7px; }
.ph-tl i { height: 6px; border-radius: 3px; background: #e6e6e6; }
.ph-tl i:nth-child(odd) { width: 80%; }
.ph-chk { position: absolute; left: 8%; top: 66%; display: flex; gap: 6px; align-items: center; font-size: 8.5px; color: #222; }
.ph-chk span { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #888; }
.ph-chk.on span { background: #2189ff; border-color: #2189ff; }
.ph-net { display: flex; gap: 8px; align-items: center; margin: 0 6%; padding: 8px 4px; border-bottom: 1px solid #eee; font-size: 9.5px; color: #111; }
.ph-net small { display: block; color: #2189ff; font-size: 7.5px; }
.ph-wi { width: 13px; height: 10px; background: #333; clip-path: polygon(50% 100%, 0 25%, 15% 10%, 50% 0, 85% 10%, 100% 25%); }
.ph-net.on .ph-wi { background: #2189ff; }
.ph-dimw { background: #eef0f4; }
.ph-dlg { position: absolute; left: 6%; right: 6%; top: 34%; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); color: #111; }
.ph-dlg b { font-size: 11px; }
.ph-dlg p { font-size: 8px; color: #555; margin: 6px 0 10px; line-height: 1.4; }
.ph-dlgb { display: flex; justify-content: space-around; font-size: 10px; font-weight: 600; color: #444; }
.ph-allow { color: #2189ff; }
.ph-qr { background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ph-qrbox { position: relative; width: 62%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.85); border-radius: 12px; padding: 12%; overflow: hidden; }
.ph-qrcode { width: 100%; height: 100%; background: conic-gradient(#fff 25%, #000 0 50%, #fff 0 75%, #000 0) 0 0 / 22% 22%; opacity: .9; border-radius: 3px; }
.ph-scanline { position: absolute; left: 0; right: 0; height: 2px; background: #2189ff; box-shadow: 0 0 10px #2189ff; animation: phScan 1.6s ease-in-out infinite alternate; top: 10%; }
@keyframes phScan { to { top: 88%; } }
.ph-qrt { font-size: 9px; opacity: .8; }
.ph-spin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 9px; }
.ph-sp { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #2189ff; animation: phRot .9s linear infinite; }
@keyframes phRot { to { transform: rotate(360deg); } }
.ph-img { background: #000 center / cover no-repeat; }
.ph-txt { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12%; font-size: 12px; }

/* Diálogo "Allow USB debugging?" abajo, sobre pantalla blanca (One UI). Escala con el ancho de la pantalla (cqw). */
.ph-screen { container-type: inline-size; }
.ph-usbd { background: #fff; }
.ph-dlg2 { position: absolute; left: 4%; right: 4%; bottom: 3%; background: #fff; border-radius: 12cqw; padding: 9cqw 8cqw 7cqw; box-shadow: 0 -2px 22px rgba(0,0,0,.16); color: #111; }
.ph-dlg2 b { font-size: 7.6cqw; display: block; line-height: 1.2; }
.ph-dlg2 p { font-size: 5cqw; color: #444; margin: 4cqw 0 6cqw; line-height: 1.45; word-break: break-all; }
.ph-chk2 { display: flex; gap: 4cqw; align-items: center; font-size: 5.6cqw; line-height: 1.25; color: #222; margin-bottom: 8cqw; }
.ph-chk2 span { width: 8cqw; height: 8cqw; border-radius: 50%; border: 1.5px solid #888; flex: none; transition: .2s; }
.ph-chk2.on span { background: #2189ff; border-color: #2189ff; box-shadow: inset 0 0 0 1.5px #fff; }
.ph-dlgb2 { display: flex; justify-content: space-around; align-items: center; font-size: 7cqw; font-weight: 700; color: #222; }
.ph-dlgb2 i { width: 1px; height: 8cqw; background: #ddd; }

/* Pantalla "coding": el técnico trabajando */
.ph-code { background: #05070d; display: flex; flex-direction: column; padding: 14cqw 7cqw 9cqw; gap: 5cqw; }
.ph-ch { display: flex; align-items: center; gap: 4cqw; font-size: 6.4cqw; }
.ph-ch b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-ch em { color: #34d399; font-style: normal; font-size: 5cqw; }
.ph-gear { width: 9cqw; height: 9cqw; border-radius: 50%; border: 2.2cqw dotted #2189ff; animation: phRot 2.4s linear infinite; flex: none; }
.ph-term { flex: 1; overflow: hidden; border-radius: 4cqw; background: #0b1220; border: 1px solid #1c2740; padding: 3cqw 4cqw; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.ph-roll { display: flex; flex-direction: column; gap: 1.6cqw; font: 4.6cqw/1.35 ui-monospace, Menlo, monospace; color: #9fb3d1; animation: phRoll 7s linear infinite; }
.ph-roll span { white-space: nowrap; }
.ph-roll .g { color: #34d399; }
.ph-roll .b { color: #60a5fa; }
@keyframes phRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ph-pb { height: 2.6cqw; border-radius: 2cqw; background: #1c2740; overflow: hidden; }
.ph-pb i { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, #2189ff, #34d399); animation: phPb 5s ease-out both; border-radius: 2cqw; }
@keyframes phPb { from { width: calc(var(--p) - 15%); } }
.ph-pt { font-size: 4.6cqw; text-align: center; color: #fca5a5; }