/* ============================================================
   SAM — Homescreen estilo Android (vista móvil alternativa)
   Grid de apps + carpetas configurables + animación de apertura
   tipo Android (el icono crece hasta pantalla completa).
   ============================================================ */

.homescreen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  min-height: calc(100dvh - 180px);
}

/* ---- Reloj / cabecera tipo launcher ---- */
.hs-clock { text-align: center; padding-top: var(--sp-xs); }
.hs-clock .hs-time {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 22px var(--c-primary-text-shadow);
  font-variant-numeric: tabular-nums;
}
.hs-clock .hs-date { margin-top: 6px; }

/* ---- Grid de apps ---- */
.hs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md) var(--sp-xs);
  align-content: start;
}
@media (min-width: 480px) { .hs-grid { grid-template-columns: repeat(5, 1fr); } }

.hs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--c-text);
  border-radius: var(--r-lg);
  -webkit-tap-highlight-color: transparent;
  /* pan-y: el navegador puede scrollear en vertical, pero un dedo QUIETO
     (long-press) llega al timer de edición sin que el gesto se cancele.
     Sin esto, en algunos móviles el press se convertía en gesto de scroll,
     llegaba pointercancel y el tap-fallback abría el módulo. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* En modo edición el dedo ES el drag: control total del puntero. */
.homescreen.is-editing .hs-item { touch-action: none; }
.hs-item:active .hs-icon { transform: scale(0.9); }
.hs-item.is-dragging { opacity: 0.4; }
.hs-item.is-drop-target .hs-icon { outline: 2px dashed var(--c-primary-bright); outline-offset: 3px; }

.hs-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 26px;
  border-radius: 18px;
  background: var(--c-glass);
  border: 1px solid var(--c-border-glass);
  box-shadow: var(--glow-inset), 0 0 12px var(--c-primary-glow-soft);
  transition: transform var(--t-fast) var(--ease-spring);
}
/* La etiqueta se diseñó con nombres cortos: a 11px y clavada a 76px de ancho,
   "Notificaciones" (85px) y "Configuración" (84px) NO cabían en ninguna pantalla,
   así que el usuario leía "Notificacio…" y "Configurac…" siempre — el nombre de la
   app dejaba de identificar la app. Además 11px queda por debajo del suelo legible.
   Ahora: 12px y la palabra se parte en dos líneas (con guion; el documento declara
   lang="es"), con el alto de las dos líneas reservado para que los iconos de la
   rejilla sigan alineados aunque una etiqueta ocupe una sola línea. */
.hs-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--c-text-variant);
  max-width: 100%;
  line-height: 1.25;
  height: 2.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: center;
}

/* Carpeta: icono 2x2 con miniaturas */
.hs-icon--folder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  place-items: center;
  background: rgba(13, 18, 31, 0.9);
}
.hs-icon--folder .mini {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 11px;
  border-radius: 6px;
  background: var(--c-surface-high);
}

/* ---- Carpeta abierta (panel Android) ---- */
.hs-folder-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(2, 6, 15, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
  animation: fade-in var(--t-base) var(--ease-out) both;
}
.hs-folder-backdrop.is-leaving { animation: fade-out var(--t-fast) var(--ease-in) both; }
.hs-folder {
  width: min(100%, 340px);
  background: var(--c-glass-strong);
  border: 1px solid var(--c-border-glass);
  border-radius: 28px;
  box-shadow: var(--glow-primary);
  padding: var(--sp-md);
  animation: folder-in var(--t-openapp) var(--ease-spring) both;
}
.hs-folder-backdrop.is-leaving .hs-folder { animation: folder-out var(--t-fast) var(--ease-in) both; }
.hs-folder-name {
  width: 100%;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--sp-sm);
  padding: 6px;
  border-radius: var(--r-md);
}
.hs-folder-name:focus { outline: none; background: rgba(var(--c-primary-rgb), 0.1); }
.hs-folder .hs-grid { grid-template-columns: repeat(3, 1fr); }

/* ---- Animación de apertura de app (clon del icono → fullscreen) ---- */
.hs-open-clone {
  position: fixed;
  z-index: calc(var(--z-modal) + 5);
  display: grid;
  place-items: center;
  font-size: 26px;
  border-radius: 18px;
  background: var(--c-surface-container);
  border: 1px solid var(--c-border-glass);
  pointer-events: none;
  transition:
    top var(--t-openapp) var(--ease-spring-soft),
    left var(--t-openapp) var(--ease-spring-soft),
    width var(--t-openapp) var(--ease-spring-soft),
    height var(--t-openapp) var(--ease-spring-soft),
    border-radius var(--t-openapp) var(--ease-spring-soft),
    font-size var(--t-openapp) var(--ease-spring-soft),
    opacity var(--t-base) var(--ease-out);
}

/* ---- Accesos directos (dock) ---- */
/* El dock va ARRIBA (bajo el reloj): los accesos son lo primero que ves al
   entrar. margin-top:auto (que lo pegaba abajo estilo Android) fuera. */
.hs-dock-wrap { margin-bottom: var(--sp-sm); }
.hs-dock {
  display: flex;
  justify-content: center;
  gap: var(--sp-xs);
  padding: 10px;
  border-radius: 26px;
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass);
}
.hs-dock .hs-item { padding: 2px; }
.hs-dock .hs-label { display: none; }

/* ---- Modo edición (mantener pulsado) ---- */
/* Wiggle bien visible (estilo iOS): rotación amplia + leve respiración de
   escala. Con ±1.6deg apenas se percibía y el modo edición pasaba inadvertido. */
.homescreen.is-editing .hs-icon { animation: wiggle 0.32s ease-in-out infinite alternate; }
.homescreen.is-editing .hs-item { cursor: grab; }
@keyframes wiggle {
  from { transform: rotate(-3.5deg) scale(1.02); }
  to { transform: rotate(3.5deg) scale(0.98); }
}
.hs-edit-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 420px);
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass-strong);
}
.hs-edit-hint { text-align: center; line-height: 1.5; margin: 0; }
.hs-edit-actions { display: flex; gap: 8px; }

/* ---- Home desktop: "escritorio" de iconos estilo Windows ----
   Icono grande arriba + etiqueta debajo, selección translúcida al pasar
   (como el rectángulo de selección de Windows, en clave neón) y flechita
   de acceso directo. La descripción del módulo va en title (tooltip). ---- */
.home-desk-hint { font-size: 13px; }
/* Cabecera del home SDUI: reproduce el page-head columnar alineado a la
   izquierda del módulo original (el saludo no va centrado). */
.home-desk-head { gap: 4px !important; align-items: flex-start; margin-bottom: 18px; }
.home-desk-head h2 { margin: 0; }
.home-desk-head p { margin: 0; }
.home-desk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px 8px;
  justify-items: center;
}
.home-icon {
  width: 100%;
  max-width: 118px;
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 8px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.home-icon-glyph {
  position: relative;
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(var(--c-primary-rgb), 0.35));
}
/* Flechita de acceso directo (esquina inferior izquierda, como Windows) */
.home-icon-arrow {
  position: absolute;
  left: -8px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: var(--c-on-primary-container, #001a24);
  background: linear-gradient(135deg, var(--c-primary, #38bdf8), var(--c-secondary, #2dd4bf));
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5);
}
.home-icon-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Modo claro: tinta negra directa, sin sombra (el fondo es claro). */
:root[data-theme='light'] .home-icon-label {
  color: var(--c-heading, #0f172a);
  text-shadow: none;
}
.home-icon:hover,
.home-icon:focus-visible {
  background: rgba(var(--c-primary-rgb), 0.1);
  border-color: rgba(var(--c-primary-rgb), 0.4);
  box-shadow: 0 0 12px rgba(var(--c-primary-rgb), 0.18), inset 0 0 8px rgba(var(--c-primary-rgb), 0.08);
}
.home-icon:active { background: rgba(var(--c-primary-rgb), 0.16); }
.home-icon.is-dragging { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .home-icon { transition: none; }
}