/* ==================================================
   01 · RESET / VARIABLES / BASE
================================================== */
:root{
  --bg-black:#000;
  --bg-dark:#1a1a1a;
  --bg-soft:#333;
  --glass:rgba(255,255,255,0.12);
  --text-soft:rgba(255,255,255,0.7);

  /* Typography scale */
  --t-jumbo:64px;
  --t-display:48px;
  --t-xl:36px;
  --t-hero:28px;
  --t-title:22px;
  --t-body:20px;
  --t-secondary:18px;
  --t-label:14px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"PP Neue Bit",-apple-system,BlinkMacSystemFont,"SF Pro",monospace;
}

body{
  background:var(--bg-black);
  color:#fff;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

html, body{
  -webkit-text-size-adjust: 100%;
}

.app, .app *, #dock .app, #dock .app *{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

button, .app, .dialpad button, .callBtn, .deleteBtn{
  touch-action: manipulation;
}

button{
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

@font-face {
  font-family: "PP Mondwest";
  src: url("../fonts/ppmondwest-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PP Neue Bit";
  src: url("../fonts/ppneuebit-bold.woff2") format("woff2"),
       url("../fonts/ppneuebit-bold.otf")   format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Bit";
  src: url("../fonts/ppneuebit-bold.woff2") format("woff2"),
       url("../fonts/ppneuebit-bold.otf")   format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ==================================================
   02 · STATUS BAR (TOP)
================================================== */
#statusBar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:32px;
  padding:0 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--t-label);
  z-index:1500;
  pointer-events:none;
}

#statusRight{
  display:flex;
  gap:6px;
  align-items:center;
  opacity:0.8;
}

/* ==================================================
   03 · LOCK SCREEN (SIMPLIFIED)
================================================== */
#lockScreen{
  position: fixed;
  inset: 0;

  background-image: url("../photos/earth.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 0 40px;
  z-index: 1000;
}

/* Top date + time */
#lockTop{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#lockDate{
  font-size:var(--t-xl);
  color:var(--text-soft);
  margin-bottom:0px;
}

#lockTime{
  font-size:170px;
  font-weight:500;
  font-family: "PP Neue Bit", monospace;
  line-height:1;
}

#lockHint {
  font-size: var(--t-hero);
}

/* Bottom button */
#lockBottom{
  display:flex;
  flex-direction:column;   /* 👈 CLAVE */
  align-items:center;
  gap:15px;
}

#fingerButton{
  width:72px;
  height:72px;
  border-radius:50%;
  background:radial-gradient(circle at top,#333,#111);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;   /* 👈 CLAVE */
  animation: fingerPulse 2.4s ease-out infinite;
}

#fingerButton{
  position:relative;
}

.fingerCore{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid #666;
  transition: 
    transform 0.3s ease,
    opacity 0.3s ease,
    background 0.3s ease;
}

@keyframes fingerPulse{
  0%{
    box-shadow:0 0 0 0 rgba(255,255,255,0.25);
    opacity:0.9;
  }
  70%{
    box-shadow:0 0 0 14px rgba(255,255,255,0);
    opacity:1;
  }
  100%{
    box-shadow:0 0 0 0 rgba(255,255,255,0);
    opacity:0.9;
  }
}

/* ==================================================
   UNLOCK ANIMATION (iOS-like)
================================================== */

/* Estado normal */
#lockScreen{
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Cuando desbloqueamos */
#lockScreen.unlocking{
  opacity: 0;
  transform: translateY(-10px) scale(1.02);
}

/* Home entra suave */
#home{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#home.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
   04 · HOME
================================================== */
#home{
  position:fixed;
  inset:0;
  padding:45px 16px 120px; /* deja espacio al status bar */
  display:none;
}

/* ==================================================
   05 · APPS GRID (TOP)
================================================== */
#appsGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.app span{
  font-size:var(--t-body);
  color:var(--text-soft);
  font-family: "PP Neue Bit", monospace;
}

.appIcon{
  width: clamp(68px, 18vw, 82px);
  height: clamp(68px, 18vw, 82px);
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app-pio   { background-image: url("../iconsapp/twitter.png"); }
.app-call    { background-image: url("../iconsapp/call.png"); }
.app-founder { background-image: url("../iconsapp/founder.png"); }
.app-jusgpt  { background-image: url("../iconsapp/jusgpt.png"); }
.app-mail    { background-image: url("../iconsapp/mail.png"); }
.app-newsletter    { background-image: url("../iconsapp/newsletter.png"); }
.app-music   { background-image: url("../iconsapp/music.png"); }
.app-notes   { background-image: url("../iconsapp/notes.png"); }
.app-meet   { background-image: url("../iconsapp/meet.png"); }
.app-photos  { background-image: url("../iconsapp/photos.png"); }
.app-youtube { background-image: url("../iconsapp/youtube.png"); }
.app-linkedin { background-image: url("../iconsapp/linkedin.png"); }
.app-stories { background-image: url("../iconsapp/stories.png"); }
.app-fit { background-image: url("../iconsapp/fit.png"); }
.app-compass { background-image: url("../iconsapp/find.png"); }
.app-googleApp { background-image: url("../iconsapp/jus.png"); }
.app-erase { background-image: url("../iconsapp/muerte.png"); }
.app-porn { background-image: url("../iconsapp/porn.png"); }
.app-inmyhead { background-image: url("../iconsapp/inmyhead.png"); }
.app-dance { background-image: url("../iconsapp/dance.png"); }
.app-aboutme { background-image: url("../iconsapp/aboutme.png"); }
.app-advisory { background-image: url("../icons-app-new/advisory.svg"); background-size: cover; background-position: center; }

.app-carrots { background-image: url("../icons-app-new/carrots.svg"); }
.app-phosphenes { background-image: url("../icons-app-new/phosphenes.svg"); }
.app-berries { background-image: url("../icons-app-new/berries.svg"); }
.app-chilis { background-image: url("../icons-app-new/chilli.svg"); }
.app-arbiads { background-image: url("../icons-app-new/arbiads.svg"); }
.app-escape { background-image: url("../iconsapp/escape.png"); }
.app-world{
  background-image: url("../iconsapp/world.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.app-books{
  background-image: url("../iconsapp/books.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.app-camera{
  background-image: url("../iconsapp/camera.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==================================================
   NEW ICONS (icons/ folder)
================================================== */

.app-icon-music     { background-image: url("../icons-app-new/music.svg"); background-size:cover; background-position:center; }
.app-icon-photos    { background-image: url("../icons-app-new/photos.svg"); background-size:cover; background-position:center; }
.app-icon-camera    { background-image: url("../icons-app-new/camera.svg"); background-size:cover; background-position:center; }
.app-icon-instagram { background-image: url("../icons-app-new/insta.svg"); background-size:cover; background-position:center; }
.app-icon-notes-new { background-image: url("../icons-app-new/notes.svg"); background-size:cover; background-position:center; }
.app-icon-linkedin  { background-image: url("../icons-app-new/lk.svg"); background-size:cover; background-position:center; }
.app-icon-meet      { background-image: url("../icons-app-new/meet.svg"); background-size:cover; background-position:center; }
.app-icon-books     { background-image: url("../icons-app-new/books.svg"); background-size:cover; background-position:center; }
.app-icon-newsletter{ background-image: url("../icons-app-new/newsletter.svg"); background-size:cover; background-position:center; }
.app-icon-jusgpt    { background-image: url("../icons-app-new/jusgpt.svg"); background-size:cover; background-position:center; }
.app-icon-about     { background-image: url("../icons-app-new/about.svg"); background-size:cover; background-position:center; }
.app-icon-dance     { background-image: url("../icons-app-new/dance.svg"); background-size:cover; background-position:center; }
.app-icon-donotopen { background-image: url("../icons-app-new/do-not-open.svg"); background-size:cover; background-position:center; }
.app-icon-mail      { background-image: url("../icons-app-new/mail.svg"); background-size:cover; background-position:center; }
.app-icon-twitter   { background-image: url("../icons-app-new/twitter.svg"); background-size:cover; background-position:center; }
.app-icon-call      { background-image: url("../icons-app-new/calls.svg"); background-size:cover; background-position:center; }
.app-icon-youtube   { background-image: url("../icons-app-new/youtube.svg"); background-size:cover; background-position:center; }
.app-icon-carpeta2  { background-image: url("../icons/carpeta2.png"); background-size:cover; background-position:center; }

/* ==================================================
   APPS IMG
================================================== */

.appIcon.app-cleanie{
  background-image: url("../app/cleanie.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-gala{
  background-image: url("../app/gala.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-scan{
  background-image: url("../app/scan-now.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-homeai{
  background-image: url("../app/homeai.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-fax{
  background-image: url("../app/fax-now.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-saavi{
  background-image: url("../app/saavi.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.appIcon.app-code{
  background-image: url("../app/code-now.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==================================================
   06 · DOCK (BOTTOM · GLASS)
================================================== */
#dock{
  position:fixed;
  bottom:5px;
  left:8px;
  right:8px;
  transform:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap: 20px 10px;
  padding: 13px 14px 6px;
  border-radius:32px;
  backdrop-filter:blur(12px);
  background:var(--glass);
}

/* ==================================================
   APP WINDOW · CORE (STABLE BASE)
================================================== */

.appWindow{
  position: fixed;
  inset: 0;
  background: #000;

  display: flex;
  flex-direction: column;

  /* estado cerrado */
  opacity: 0;
  pointer-events: none;
  
  transform: scale(0.98);

  transition: opacity .35s ease, transform .35s ease;
  z-index: 999;
}

.appWindow.open{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* ---------- HEADER ---------- */

.appHeader{
  background: transparent;

  height: 56px;
  padding: 0 16px;

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

  flex-shrink: 0;
}

.appWindow.centeredHero .appContent{
  transform: translateY(-56px);
}

.appTitle{
  font-size: var(--t-xl);
  font-family: "PP Neue Bit", monospace;
  line-height: 1;
}

.closeBtn{
  background: none;
  border: none;
  color: #fff;
  font-size: var(--t-xl);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- CONTENT ---------- */

.appContent {
  flex: 1;
  overflow-y: auto;
}

/* =========================
   FOLDER WINDOW
========================= */

.appWindow.folderWindow{
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Vista carpeta */
.folderView{
  padding: 28px 18px;
}

/* Grid carpeta (UNA sola definición) */
.folderGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Huecos invisibles */
.app.empty,
.folderGrid .app:empty{
  visibility: hidden;
}

/* Icono carpeta */
.folderIcon{
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Preview de carpeta en home */
.folderApp .folderPreview{
  width: clamp(68px, 18vw, 82px);
  height: clamp(68px, 18vw, 82px);
  border-radius: 18px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;

  padding: 6px;
  background: rgba(255,255,255,0.08);
  box-sizing: border-box;
}

.folderApp .miniIcon{
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

/* Header carpeta */
.folderHeader{
  justify-content: flex-start;
}

.folderTitle{
  font-size: var(--t-xl);
  padding-left: 2px;
  font-family: "PP Mondwest", serif;
}

.appWindow.folderFloating{
  inset: 0;
  display:flex;
  flex-direction:column;   /* 👈 clave */
  align-items:center;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);

  opacity: 0;
  pointer-events: none;

  transition: opacity .3s ease;
}

/* CAJA CENTRAL */
.appWindow.folderFloating .appContent{
  flex: none;
  width: 100%;
  max-width: 360px;
  overflow: hidden;

  margin-top: 150px;

  aspect-ratio: 1 / 1.15;   /* 👈 esto lo convierte en cuadrado real */
  height: auto !important;

  padding: 28px 18px 32px;
  border-radius: 36px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 30px 80px rgba(0,0,0,0.6);

  transform: scale(1) !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.appWindow.folderFloating.open{
  opacity: 1;
  pointer-events: auto;
}

.appWindow.folderFloating.open .appContent{
  transform: scale(1);
}

/* reutilizamos tus iconos */
.miniIcon.app-cleanie{
  background-image: url("../app/cleanie.webp");
}
.miniIcon.app-gala{
  background-image: url("../app/gala.webp");
}
.miniIcon.app-homeai{
  background-image: url("../app/homeai.webp");
}
.miniIcon.app-scan{
  background-image: url("../app/scan-now.webp");
}
.miniIcon.app-fax{
  background-image: url("../app/fax-now.webp");
}
.miniIcon.app-saavi{
  background-image: url("../app/saavi.webp");
}
.miniIcon.app-code{
  background-image: url("../app/code-now.webp");
}

.appTitle{
  font-size:var(--t-xl);
  padding-top: 2px;
  padding-left: 2px;
  font-weight:500;
  font-family: "PP Neue Bit", monospace;
}

.closeBtn{
  font-size:var(--t-xl);
  line-height:1;
  padding:0px; /* área táctil cómoda */
  background: transparent;
  border: none;
  color: white;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

/* ===============================
   NOTIFICATIONS (iOS STYLE)
=============================== */

#notifications{
  position:fixed;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 10px;
  z-index:2000;
  pointer-events:none;
}

.notification{
  width:95%;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  border-radius:20px;
  background:#fff;
  color:#000;
  font-family:"PP Neue Bit", monospace;
  font-weight:bold;
  transform:translateX(0);
  opacity:1;
  animation:slideIn 0.6s ease;
  pointer-events:auto;
}

@keyframes slideIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Icon */
.notificationIcon{
  width:34px;
  height:34px;
  border-radius:8px;
  background:#000;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:var(--t-secondary);
  font-weight:bold;
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:0.5px;
}

/* Content */
.notificationContent{
  flex:1;
  min-width:0;
}

.notificationHeader{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  font-size:var(--t-label);
  margin-bottom:2px;
  color:#000;
}

.notificationTitle{
  font-weight:bold;
  font-size:var(--t-secondary);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.notificationTime{
  opacity:0.55;
  font-size:var(--t-label);
}

.notificationText{
  font-size:var(--t-title);
  line-height:1;
  color:#000;
}

/* Dismiss animation */
.notification.dismiss{
  opacity:0;
  transform:translateY(-4px);
  transition:
    opacity 0.85s cubic-bezier(.25,.1,.25,1),
    transform 0.85s cubic-bezier(.25,.1,.25,1);
}