:root{
  --bg: #0b0f14;
  --fg: #e9eef5;
  --muted: rgba(255,255,255,.75);
  --border: rgba(255,255,255,.14);
  --card: rgba(255,255,255,.06);
  --glass: rgba(255,255,255,.10);
  --brand: #5ee1ff;
  --shadow-1: 0 10px 28px rgba(0,0,0,.35);
  --shadow-2: 0 18px 44px rgba(0,0,0,.45);
  --r: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(90% 120% at 50% 10%, #0f1624, #090c12);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* ===== Phone Frame ===== */
.phone{
  position:relative;
  width:min(420px, 92vw);
  aspect-ratio: 9/19.5;
  background: linear-gradient(180deg, #0c1118, #0a0f15);
  border-radius: 44px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    inset 0 0 0 12px #0a0d12,
    inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}
.notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:44%; height:28px; background:#000; border-radius:0 0 22px 22px;
  display:flex; align-items:center; justify-content:center; gap:32px;
  z-index:3;
}
.notch .cam{ width:10px; height:10px; border-radius:50%; background:#1f2937; box-shadow: inset 0 0 0 2px #0a0a0a; }
.notch .spk{ width:56px; height:6px; border-radius:6px; background:#1f2937; }

.screen{
  position:absolute; inset:22px 12px 22px; border-radius:34px;
  overflow:hidden;
  background: url('/images/fondo1.jpg') center / cover no-repeat fixed;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; flex-direction:column;
}

/* Status bar */
.statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight:700;
}
.statusbar .time{font-variant-numeric: tabular-nums;}
.statusbar .status-icons{display:flex; gap:8px; align-items:center;}
.statusbar .sig,.wifi,.bat{
  width:16px; height:10px; border-radius:2px; background: rgba(255,255,255,.9);
  opacity:.85;
}

/* Home layout */
.homescreen{
  display:flex; flex-direction:column; gap:14px;
  padding: 10px 12px 18px;
  height:100%;
}

/* Logo */
.logo-box{ display:flex; align-items:center; justify-content:center; padding-top:2px; }
.logo-box img{ width:180px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }

/* Grid de "apps" */
.app-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 columnas como iPhone */
  gap: 14px 12px;
  padding: 10px 6px;
  background: transparent;
  border:none;
  box-shadow:none;
}
.shelf-box{ /* reseteo heredado */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* App card */
.menu-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 8px; cursor:pointer; user-select:none;
  outline:none;
}
.menu-item:focus-visible{
  outline: 3px solid rgba(94,225,255,.55);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Icono estilo app (squircle) */
.app-icon{
  width:64px; height:64px; border-radius:22%;
  object-fit:cover;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    inset 0 0 8px rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.menu-item:hover .app-icon{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    inset 0 0 10px rgba(255,255,255,.08);
}
.app-label{
  margin:0; font-size:.78rem; font-weight:700; letter-spacing:.2px; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  color:#fff; opacity:.92; text-align:center; line-height:1.1;
}

/* Dock fijo */
.dock{
  margin-top:auto;
  display:flex; justify-content:center; gap:18px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
}
.dock .menu-item .app-icon{ width:58px; height:58px; }

/* Subpantallas (submenús) */
.subscreen[hidden]{ display:none !important; }
.sub-header{
  display:flex; align-items:center; gap:8px; padding: 6px 8px 2px 6px;
}
.sub-header h3{ margin:0; font-size: .95rem; font-weight:800; text-transform: uppercase; letter-spacing:.2px; }
.btn.back{
  appearance:none; border:none; background: rgba(255,255,255,.12);
  color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer;
}

/* Home indicator */
.home-indicator{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; border-radius:4px; background:rgba(255,255,255,.75);
}

/* ===== Modal Iframe ===== */
#iframe-container{
  position: fixed; inset: 5% 6%;
  border-radius: 18px;
  background: rgba(10,12,18,.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display:flex; flex-direction:column;
  overflow: hidden;
  z-index: 1000;
  backdrop-filter: blur(6px);
}
#iframe-container[hidden]{ display:none; }
#iframe-container .iframe-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-bottom:1px solid var(--border);
}
#iframe-content{ width:100%; height:100%; min-height:72vh; border:none; }
.btn{ appearance:none; border:none; cursor:pointer; padding:8px 10px; border-radius:10px; color:#fff; background: rgba(255,255,255,.12); }

/* ===== Loading Overlay ===== */
#loading{
  position: fixed; inset: 0; display:none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 1200;
  backdrop-filter: blur(2px);
}
#loading .dialog{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  color:#1a1f29;
  border-radius: 14px;
  padding: 14px 18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  font-weight: 800;
}
.spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #e5e7eb; border-top-color: #3b82f6;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg);} }

/* ===== Responsive ===== */
@media (max-width: 390px){
  .app-grid{ gap: 12px 10px; }
  .app-icon{ width:60px; height:60px; }
  .dock .menu-item .app-icon{ width:54px; height:54px; }
}