/* ═══════════════════════════════════════════════════════════════════════════
   PA-WIDGETS-DND — Widgets estilo iPadOS dentro de la pestaña Apps
   ───────────────────────────────────────────────────────────────────────────
   Este archivo se carga DESPUÉS de los <style> inline de profeacademi.html:
   sus !important de igual especificidad ganan por orden en la cascada.

   Piezas:
   1. Grid de Apps convertido a CSS Grid (las apps fluyen con row dense
      alrededor de los widgets, que ocupan 3 columnas × 2 filas).
   2. Tamaño unificado de los 4 widgets colocados (.pa-w-placed).
   3. Galería de widgets (overlay + panel responsivo).
   4. Ghost de arrastre, placeholder de destino y zona de quitar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GRID DE APPS ───────────────────────────────────────────────────────
   Variables de geometría: pa-widgets-dnd.js las lee para calcular columnas
   y posiciones de drop. Deben coincidir con los breakpoints históricos del
   launcher (items de 100px → 72px → 64px). */
body.layout-minimal .launcher-apps-grid.pa-wgrid-on {
  --pa-cell: 100px;   /* ancho de celda = ancho de app */
  --pa-gx: 14px;      /* gap horizontal */
  --pa-gy: 14px;      /* gap vertical   */
  --pa-row: 140px;    /* alto de fila (card 100px + título) */
  display: grid !important;
  /* auto-fill (no var() como contador: Chrome no lo soporta en repeat()) y
     !important para ganarle al `grid-template-columns: unset !important` que
     el breakpoint ≤640px de launcher-cards-experiment.css aplica con menor
     especificidad — sin esto las apps colapsaban a 1 columna bajo 640px.
     El número de columnas que produce auto-fill coincide con el geo.cols que
     calcula pa-widgets-dnd.js (misma fórmula sobre el ancho), así que la
     colocación de widgets por DnD sigue alineada. */
  grid-template-columns: repeat(auto-fill, var(--pa-cell)) !important;
  grid-auto-rows: minmax(var(--pa-row), auto);
  grid-auto-flow: row dense;
  gap: var(--pa-gy) var(--pa-gx) !important;
  justify-content: center;
  align-content: start;
  position: relative !important;
  /* Altura mínima para que "Centro" y "Abajo" tengan dónde moverse */
  min-height: max(320px, calc(100dvh - 330px));
}
@media (max-width: 480px) {
  body.layout-minimal .launcher-apps-grid.pa-wgrid-on {
    --pa-cell: 72px; --pa-gx: 6px; --pa-gy: 16px; --pa-row: 116px;
    /* En móvil las columnas se estiran para llenar el ancho (en vez de celdas
       fijas centradas que dejaban grandes bandas vacías a los lados). El
       icono mantiene su tamaño, centrado dentro de la celda. Aplica también
       a ≤380px (ese bloque no redefine grid-template-columns). */
    grid-template-columns: repeat(auto-fill, minmax(var(--pa-cell), 1fr)) !important;
    justify-items: center;
  }
}
@media (max-width: 380px) {
  body.layout-minimal .launcher-apps-grid.pa-wgrid-on {
    --pa-cell: 64px; --pa-gx: 4px; --pa-gy: 14px; --pa-row: 108px;
  }
}

/* Preferencias de disposición (panel → "Disposición") */
body.layout-minimal .launcher-apps-grid.pa-wgrid-on.pa-wv-center { align-content: center; }
body.layout-minimal .launcher-apps-grid.pa-wgrid-on.pa-wv-bottom { align-content: end; }
body.layout-minimal .launcher-apps-grid.pa-wgrid-on.pa-wh-left   { justify-content: start !important; }
body.layout-minimal .launcher-apps-grid.pa-wgrid-on.pa-wh-right  { justify-content: end !important; }
body.layout-minimal .launcher-apps-grid.pa-wgrid-on.pa-wh-center { justify-content: center !important; }

/* ── 2. WIDGETS COLOCADOS: tamaño unificado (3 col × 2 filas) ──────────────
   Neutraliza los anchos/altos propios de cada widget con !important tardío. */
body.layout-minimal .launcher-apps-grid.pa-wgrid-on > .pa-w-placed {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  flex: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  aspect-ratio: auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 20px;
  -webkit-touch-callout: none;
}
/* Mientras se arrastra: el original queda como sombra */
.pa-w-placed.pa-w-dragging { opacity: 0.25 !important; transform: scale(0.97); }

/* Calendario: el link y el contenido llenan la celda */
.pa-wgrid-on > #pa-cal-widget .pa-cal-widget-link {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.pa-wgrid-on > #pa-cal-widget .pa-cal-widget-inner {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

/* TV: sin aspect-ratio fijo; el wrap absoluto ya llena el contenedor.
   El marco liquid-glass (::before, inset -7px) cabe en el gap de 14px. */
.pa-wgrid-on > #pa-tv-widget { background: #050010 !important; }

/* Notas rápidas: columna flexible, el textarea absorbe el alto */
.pa-wgrid-on > #widget-notas { display: flex !important; flex-direction: column !important; }

/* Horarios: replica el glass que antes venía de
   ".pa-widgets-tv-wrapper > #pa-horarios-widget" (selector con padre fijo) */
.pa-wgrid-on > #pa-horarios-widget { border-radius: 20px !important; }
body.theme-light .pa-wgrid-on > #pa-horarios-widget {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}
body:not(.theme-light) .pa-wgrid-on > #pa-horarios-widget {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}
.pa-wgrid-on > #pa-horarios-widget .launcher-app-link {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 20px !important;
  transform: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.pa-wgrid-on > #pa-horarios-widget:hover,
.pa-wgrid-on > #pa-horarios-widget:hover .launcher-app-link { transform: none !important; }

/* ── 3. GALERÍA DE WIDGETS ────────────────────────────────────────────────── */
.pa-widgets-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 16px;
  background: rgba(10, 14, 30, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.pa-widgets-overlay.open { opacity: 1; }
/* El display:flex de la clase le ganaría al [hidden] del UA stylesheet */
.pa-widgets-overlay[hidden] { display: none; }

.pa-widgets-panel {
  width: min(720px, 100%);
  max-height: 82dvh;
  overflow-y: auto;
  border-radius: 22px;
  padding: 20px 22px 18px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.pa-widgets-overlay.open .pa-widgets-panel { transform: translateY(0) scale(1); }
body.theme-dark .pa-widgets-panel,
body.theme-neon .pa-widgets-panel {
  background: rgba(18, 20, 38, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}
body.theme-rosa .pa-widgets-panel {
  background: rgba(255, 240, 248, 0.92);
  border-color: rgba(244, 114, 182, 0.35);
}

.pa-wp-header { display: flex; align-items: flex-start; gap: 12px; }
.pa-wp-title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.pa-wp-sub { margin: 0 0 14px; font-size: 0.8rem; line-height: 1.45; opacity: 0.7; }
.pa-wp-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.pa-wp-close:hover { background: rgba(0, 0, 0, 0.16); }
body.theme-dark .pa-wp-close, body.theme-neon .pa-wp-close { background: rgba(255,255,255,0.10); }

.pa-wp-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .pa-wp-list { grid-template-columns: 1fr; } }

.pa-wp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pa-wp-item:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); }
.pa-wp-item.is-lifting { transform: scale(1.04); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.25); }
body.theme-dark .pa-wp-item, body.theme-neon .pa-wp-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
.pa-wp-prev {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(99,102,241,0.16));
}
.pa-wp-meta { min-width: 0; flex: 1; }
.pa-wp-meta strong { display: block; font-size: 0.88rem; font-weight: 700; }
.pa-wp-meta span { display: block; font-size: 0.72rem; opacity: 0.65; line-height: 1.35; }
.pa-wp-quitar {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.pa-wp-quitar:hover { background: rgba(239, 68, 68, 0.22); }
.pa-wp-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.pa-wp-item.is-placed { cursor: default; }
.pa-wp-item.is-blocked { opacity: 0.45; cursor: not-allowed; }

.pa-wp-layout { margin-top: 16px; display: grid; gap: 10px; }
.pa-wp-layout-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-wp-layout-label { font-size: 0.74rem; font-weight: 600; opacity: 0.7; min-width: 170px; }
.pa-wp-seg {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.07);
}
body.theme-dark .pa-wp-seg, body.theme-neon .pa-wp-seg { background: rgba(255,255,255,0.08); }
.pa-wp-seg button {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: 0.65;
}
.pa-wp-seg button.active {
  opacity: 1;
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

/* ── 4. DRAG: ghost, placeholder y zona de quitar ─────────────────────────── */
#pa-w-ghost {
  position: fixed !important;
  z-index: 10010 !important;
  pointer-events: none !important;
  margin: 0 !important;
  opacity: 0.92;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45) !important;
  transform-origin: center center;
}
.pa-wp-ghostcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pa-wp-ghostcard span { font-size: 2.2rem; }
.pa-wp-ghostcard strong { font-size: 0.85rem; font-weight: 700; color: #1f2937; }

.pa-w-placeholder {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px;
  border: 2px dashed rgba(59, 130, 246, 0.75);
  background: rgba(59, 130, 246, 0.12);
  transition: left 0.12s ease, top 0.12s ease;
}
.pa-w-placeholder.invalid {
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.12);
}

#pa-widget-removezone {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 10008;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: rgba(220, 38, 38, 0.92);
  box-shadow: 0 14px 40px rgba(220, 38, 38, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.15s ease, background 0.15s ease;
}
#pa-widget-removezone svg { width: 17px; height: 17px; }
#pa-widget-removezone.armed {
  transform: translateX(-50%) scale(1.12);
  background: rgba(185, 28, 28, 1);
}
#pa-widget-removezone[hidden] { display: none; }