/* Sistema de Tarjetas Moderno para el Launcher */

/* Ocultar el sistema de tarjetas anterior */
.tools-grid {
  display: none !important;
}

.tool-card {
  display: none !important;
}

/* Contenedor principal del launcher */
.launcher-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 12px;
  display: block !important;
  visibility: visible !important;
}

/* Grid de aplicaciones */
.launcher-apps-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(182px, 200px));
  gap: 18px;
  justify-content: center;
  visibility: visible !important;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Tarjeta individual de aplicación */
.launcher-app-item {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  max-width: 200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 17px;
  transition: transform 0.3s ease;
  cursor: pointer;
  position: relative;
}

.launcher-app-item:hover {
  /* Efecto hover removido para evitar animación de respiración */
}

/* Link de la aplicación */
.launcher-app-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px 12px 14px;
  background-color: #121212;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 17px;
  box-sizing: border-box;
}

.launcher-app-link:hover,
.launcher-app-link:hover .launcher-app-description {
  text-decoration: none;
  color: #FFF;
}

.launcher-app-link:hover .launcher-app-bg {
  transform: scale(10);
}

/* Fondo animado circular */
.launcher-app-bg {
  height: 100px;
  width: 100px;
  background-color: #f9b234;
  z-index: 1;
  position: absolute;
  top: -50px;
  right: -50px;
  border-radius: 50%;
  transition: all 1.67s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Contenido de la tarjeta */
.launcher-app-content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Badge de acceso - Estilos para indicar permisos requeridos */
.app-access-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: badgePulse 2s infinite;
}

/* Badge para usuarios registrados */
.app-access-badge.registered {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.9), rgba(50, 205, 50, 0.8));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Badge para usuarios premium */
.app-access-badge.premium {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 140, 0, 0.8));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Badge para aplicaciones gratuitas (opcional) */
.app-access-badge.free {
  background: linear-gradient(135deg, rgba(0, 128, 0, 0.9), rgba(46, 204, 113, 0.8));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animación sutil para los badges */
@keyframes badgePulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(0.98); 
  }
}

/* Icono de la aplicación */
.launcher-app-icon {
  font-size: 4rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
  z-index: 2;
  position: relative;
}

/* Título de la aplicación */
.launcher-app-title {
  margin: 0;
  overflow: hidden;
  font-weight: bold;
  font-size: 16px;
  color: #FFF;
  z-index: 2;
  position: relative;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  padding: 0 4px 4px;
}

/* Descripción de la aplicación */
.launcher-app-description {
  font-size: 11px;
  color: #FFF;
  z-index: 2;
  position: relative;
  opacity: 0.8;
  line-height: 1.4;
  margin-bottom: 8px;
}

.launcher-app-category {
  font-weight: bold;
  color: #f9b234;
  transition: color 0.5s ease;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: auto;
  z-index: 2;
  position: relative;
}

/* Colores específicos para diferentes aplicaciones */
.launcher-app-item:nth-child(1) .launcher-app-bg { background-color: #f9b234; }
.launcher-app-item:nth-child(2) .launcher-app-bg { background-color: #3ecd5e; }
.launcher-app-item:nth-child(3) .launcher-app-bg { background-color: #e44002; }
.launcher-app-item:nth-child(4) .launcher-app-bg { background-color: #952aff; }
.launcher-app-item:nth-child(5) .launcher-app-bg { background-color: #cd3e94; }
.launcher-app-item:nth-child(6) .launcher-app-bg { background-color: #4c49ea; }
.launcher-app-item:nth-child(7) .launcher-app-bg { background-color: #ff6b35; }
.launcher-app-item:nth-child(8) .launcher-app-bg { background-color: #00d4aa; }
.launcher-app-item:nth-child(9) .launcher-app-bg { background-color: #ff4757; }
.launcher-app-item:nth-child(10) .launcher-app-bg { background-color: #5352ed; }

/* Estilo especial para tarjeta roja - APLICACIÓN INICIO */
.launcher-app-item.red .launcher-app-bg {
  background-color: #e53e3e !important;
}

.launcher-app-item.red .launcher-app-category {
  color: #ff6b6b !important;
}

/* Estilo especial para tarjeta ProfeAcademī */
.launcher-app-item.academy .launcher-app-bg {
  background-color: #7c3aed !important;
}

.launcher-app-item.academy .launcher-app-category {
  color: #c4b5fd !important;
}

/* Mini selector de temas en la tarjeta de configuración */
.launcher-app-item .mini-theme-selector {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

.launcher-app-item .mini-theme-btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 12px;
  transition: transform 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.launcher-app-item .mini-theme-btn:hover {
  transform: scale(1.1);
}

.launcher-app-item .mini-theme-btn.active {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ================================
   RESPONSIVE DESIGN - APP CENTER OPTIMIZADO
   ================================ */

/* Desktop grande: 1200px+ - se mantiene el grid por defecto (5-7 columnas) */

/* Desktop mediano y Tablet horizontal: 980px - 1200px (4-5 columnas) */
@media only screen and (max-width: 1200px) {
  .launcher-apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 190px));
    gap: 16px;
  }
  .launcher-app-item {
    max-width: 190px;
  }

  .app-access-badge {
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    font-size: 9px;
  }
}

/* Tablet vertical y horizontal: 768px - 979px (3-4 columnas) */
@media only screen and (max-width: 979px) {
  .launcher-container {
    padding: 24px 16px;
  }

  .launcher-apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 180px));
    gap: 14px;
    padding: 0 8px;
  }
  .launcher-app-item {
    max-width: 180px;
  }
  .launcher-app-link {
    padding: 14px 10px 12px;
  }
  .launcher-app-icon {
    font-size: 3.6rem;
  }
  .launcher-app-title {
    font-size: 16px;
    text-align: center;
  }
}

/* Tablet pequeño / Mobile horizontal: 640px - 767px (3 columnas) */
@media only screen and (max-width: 767px) {
  .launcher-container {
    width: 100%;
    padding: 20px 12px;
  }

  .launcher-apps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 8px;
    max-width: 100%;
  }
  .launcher-app-item {
    max-width: none;
    aspect-ratio: 1;
  }
  .launcher-app-link {
    padding: 14px 10px 12px;
  }
  .launcher-app-icon {
    font-size: 3.4rem;
  }
  .launcher-app-title {
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
  }

  .app-access-badge {
    top: 5px;
    right: 5px;
    padding: 3px 6px;
    font-size: 9px;
    border-radius: 6px;
  }
}

/* Mobile mediano: 480px - 639px (2 columnas grandes) */
@media only screen and (max-width: 639px) {
  .launcher-container {
    padding: 16px 10px;
  }

  .launcher-apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 6px;
    max-width: 100%;
  }
  .launcher-app-item {
    max-width: none;
    aspect-ratio: 1.05;
  }
  .launcher-app-link {
    padding: 14px 10px 12px;
  }
  .launcher-app-icon {
    font-size: 4rem;
  }
  .launcher-app-title {
    font-size: 16px;
    text-align: center;
  }
  .launcher-app-bg {
    height: 90px;
    width: 90px;
    top: -45px;
    right: -45px;
  }
}

/* Mobile pequeño: <480px (2 columnas compactas) */
@media only screen and (max-width: 480px) {
  .launcher-container {
    padding: 12px 8px;
  }

  .launcher-apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 4px;
  }
  .launcher-app-item {
    max-width: none;
    aspect-ratio: 1;
  }
  .launcher-app-link {
    padding: 12px 8px 10px;
  }
  .launcher-app-icon {
    font-size: 3.2rem;
  }
  .launcher-app-title {
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }
  .launcher-app-bg {
    height: 75px;
    width: 75px;
    top: -37px;
    right: -37px;
  }

  .app-access-badge {
    top: 4px;
    right: 4px;
    padding: 2px 5px;
    font-size: 8px;
    border-radius: 4px;
  }
}

/* Mobile muy pequeño: <360px */
@media only screen and (max-width: 360px) {
  .launcher-apps-grid {
    gap: 8px;
  }
  .launcher-app-link {
    padding: 10px 6px 8px;
  }
  .launcher-app-icon {
    font-size: 2.8rem;
  }
  .launcher-app-title {
    font-size: 13px;
    text-align: center;
  }
}

/* Animaciones de entrada removidas - las tarjetas aparecen inmediatamente */ 

/* ================================
   LIQUID GLASS EFFECT - TARJETAS LAUNCHER TEMA LIGHT
   ================================ */

/* Tarjetas del launcher en tema light con efecto Liquid Glass */
body.theme-light .launcher-app-item {
  /* Base del contenedor con vidrio líquido */
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Link interno de la tarjeta con efecto glass */
body.theme-light .launcher-app-link {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  border: none !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Efecto de brillo ambiental para las tarjetas */
body.theme-light .launcher-app-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(79, 188, 255, 0.05) 30%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

/* Efectos hover para las tarjetas */
body.theme-light .launcher-app-item:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 16px 48px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Activar brillo ambiental en hover */
body.theme-light .launcher-app-item:hover::before {
  opacity: 1;
}

/* Hover para el link interno */
body.theme-light .launcher-app-link:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: none !important;
}

/* Fondo circular animado con efecto glass */
body.theme-light .launcher-app-bg {
  background: linear-gradient(135deg, 
    rgba(79, 188, 255, 0.8),
    rgba(31, 81, 255, 0.9)
  ) !important;
  box-shadow: 
    0 8px 32px rgba(79, 188, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 50%;
  transition: all 1.67s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Efectos específicos para cada color de fondo en tema light */
body.theme-light .launcher-app-item:nth-child(1) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(249, 178, 52, 0.8), rgba(255, 193, 7, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(249, 178, 52, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(2) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(62, 205, 94, 0.8), rgba(40, 167, 69, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(62, 205, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(3) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(228, 64, 2, 0.8), rgba(220, 53, 69, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(228, 64, 2, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(4) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(149, 42, 255, 0.8), rgba(138, 43, 226, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(149, 42, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(5) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(205, 62, 148, 0.8), rgba(232, 62, 140, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(205, 62, 148, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(6) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(76, 73, 234, 0.8), rgba(102, 126, 234, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(76, 73, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(7) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.8), rgba(255, 99, 71, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(8) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.8), rgba(32, 201, 151, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(9) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.8), rgba(255, 99, 132, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.theme-light .launcher-app-item:nth-child(10) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(83, 82, 237, 0.8), rgba(116, 115, 252, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(83, 82, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Estilo especial para tarjeta roja en tema light - APLICACIÓN INICIO */
body.theme-light .launcher-app-item.red .launcher-app-bg {
  background: linear-gradient(135deg, rgba(229, 62, 62, 0.8), rgba(255, 107, 107, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(229, 62, 62, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

body.theme-light .launcher-app-item.red .launcher-app-category {
  color: rgba(139, 69, 19, 0.8) !important;
}

/* Textos con mejor contraste en tema light */
body.theme-light .launcher-app-title {
  color: rgba(55, 65, 81, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  z-index: 3;
}

body.theme-light .launcher-app-description {
  color: rgba(75, 85, 99, 0.8) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 3;
}

body.theme-light .launcher-app-category {
  color: rgba(55, 65, 81, 0.7) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 3;
}

body.theme-light .launcher-app-icon {
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
  z-index: 3;
}

/* Estilos específicos para badges en tema claro */
body.theme-light .app-access-badge {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.theme-light .app-access-badge.registered {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.95), rgba(50, 205, 50, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.theme-light .app-access-badge.premium {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 140, 0, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.theme-light .app-access-badge.free {
  background: linear-gradient(135deg, rgba(0, 128, 0, 0.95), rgba(46, 204, 113, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Selector de temas mini con liquid glass */
body.theme-light .launcher-app-item .mini-theme-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 
    0 4px 16px rgba(31, 38, 135, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

body.theme-light .launcher-app-item .mini-theme-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1);
  box-shadow: 
    0 6px 20px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

body.theme-light .launcher-app-item .mini-theme-btn.active {
  background: rgba(79, 188, 255, 0.3) !important;
  border-color: rgba(79, 188, 255, 0.5) !important;
  transform: scale(1.2);
  box-shadow: 
    0 0 20px rgba(79, 188, 255, 0.4),
    0 8px 24px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Responsive adjustments para tarjetas light */
@media only screen and (max-width: 1200px) {
  body.theme-light .launcher-app-item {
    border-radius: 18px !important;
  }
  
  body.theme-light .launcher-app-link {
    border-radius: 16px !important;
    padding: 18px 15px !important;
  }
}

@media only screen and (max-width: 979px) {
  body.theme-light .launcher-app-item {
    border-radius: 16px !important;
  }
  
  body.theme-light .launcher-app-link {
    border-radius: 14px !important;
    padding: 16px 14px !important;
  }
}

@media only screen and (max-width: 767px) {
  body.theme-light .launcher-app-item {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 14px !important;
  }
  
  body.theme-light .launcher-app-link {
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border-radius: 12px !important;
  }
}

@media only screen and (max-width: 639px) {
  body.theme-light .launcher-app-item {
    border-radius: 12px !important;
    max-width: none;
  }
  
  body.theme-light .launcher-app-link {
    border-radius: 10px !important;
    padding: 15px 12px !important;
  }
}

@media only screen and (max-width: 500px) {
  body.theme-light .launcher-app-item {
    border-radius: 10px !important;
    max-width: none;
    min-width: 140px;
  }
  
  body.theme-light .launcher-app-link {
    border-radius: 8px !important;
    padding: 12px 10px !important;
  }
  
  body.theme-light .launcher-app-icon {
    font-size: 1.2rem;
  }
  
  body.theme-light .launcher-app-title {
    font-size: 14px !important;
  }
  
  body.theme-light .launcher-app-description {
    font-size: 9px !important;
  }
  
  body.theme-light .launcher-app-category {
    font-size: 8px !important;
  }
}

/* Estado filtrado de las tarjetas */
.launcher-app-item.filtered-out {
    display: none;
}

/* ================================
   LIQUID GLASS EFFECT - TARJETAS LAUNCHER TEMA DARK
   ================================ */

/* Tarjetas del launcher en tema dark con efecto Liquid Glass */
body:not(.theme-light) .launcher-app-item {
  /* Base del contenedor con vidrio líquido para tema oscuro */
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Link interno de la tarjeta con efecto glass para tema oscuro */
body:not(.theme-light) .launcher-app-link {
  background: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  border: none !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Efecto de brillo ambiental para las tarjetas en tema oscuro */
body:not(.theme-light) .launcher-app-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(79, 188, 255, 0.02) 30%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

/* Efectos hover para las tarjetas en tema oscuro */
body:not(.theme-light) .launcher-app-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Activar brillo ambiental en hover para tema oscuro */
body:not(.theme-light) .launcher-app-item:hover::before {
  opacity: 1;
}

/* Hover para el link interno en tema oscuro */
body:not(.theme-light) .launcher-app-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: none !important;
}

/* Fondo circular animado con efecto glass para tema oscuro */
body:not(.theme-light) .launcher-app-bg {
  background: linear-gradient(135deg, 
    rgba(79, 188, 255, 0.6),
    rgba(31, 81, 255, 0.7)
  ) !important;
  box-shadow: 
    0 8px 32px rgba(79, 188, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-radius: 50%;
  transition: all 1.67s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Efectos específicos para cada color de fondo en tema oscuro */
body:not(.theme-light) .launcher-app-item:nth-child(1) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(249, 178, 52, 0.6), rgba(255, 193, 7, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(249, 178, 52, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(2) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(62, 205, 94, 0.6), rgba(40, 167, 69, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(62, 205, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(3) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(228, 64, 2, 0.6), rgba(220, 53, 69, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(228, 64, 2, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(4) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(149, 42, 255, 0.6), rgba(138, 43, 226, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(149, 42, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(5) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(205, 62, 148, 0.6), rgba(232, 62, 140, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(205, 62, 148, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(6) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(76, 73, 234, 0.6), rgba(102, 126, 234, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(76, 73, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(7) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.6), rgba(255, 99, 71, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(8) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.6), rgba(32, 201, 151, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(9) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.6), rgba(255, 99, 132, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(255, 71, 87, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-light) .launcher-app-item:nth-child(10) .launcher-app-bg { 
  background: linear-gradient(135deg, rgba(83, 82, 237, 0.6), rgba(116, 115, 252, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(83, 82, 237, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Estilo especial para tarjeta roja en tema oscuro - APLICACIÓN INICIO */
body:not(.theme-light) .launcher-app-item.red .launcher-app-bg {
  background: linear-gradient(135deg, rgba(229, 62, 62, 0.6), rgba(255, 107, 107, 0.7)) !important;
  box-shadow: 0 8px 32px rgba(229, 62, 62, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body:not(.theme-light) .launcher-app-item.red .launcher-app-category {
  color: rgba(255, 107, 107, 0.9) !important;
}

/* Textos con mejor contraste en tema oscuro */
body:not(.theme-light) .launcher-app-title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

body:not(.theme-light) .launcher-app-description {
  color: rgba(255, 255, 255, 0.75) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

body:not(.theme-light) .launcher-app-category {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

body:not(.theme-light) .launcher-app-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  z-index: 3;
}

/* Estilos específicos para badges en tema oscuro */
body:not(.theme-light) .app-access-badge {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body:not(.theme-light) .app-access-badge.registered {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.9), rgba(50, 205, 50, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body:not(.theme-light) .app-access-badge.premium {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 140, 0, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body:not(.theme-light) .app-access-badge.free {
  background: linear-gradient(135deg, rgba(0, 128, 0, 0.9), rgba(46, 204, 113, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Selector de temas mini con liquid glass para tema oscuro */
body:not(.theme-light) .launcher-app-item .mini-theme-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body:not(.theme-light) .launcher-app-item .mini-theme-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: scale(1.1);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body:not(.theme-light) .launcher-app-item .mini-theme-btn.active {
  background: rgba(79, 188, 255, 0.2) !important;
  border-color: rgba(79, 188, 255, 0.3) !important;
  transform: scale(1.2);
  box-shadow: 
    0 0 20px rgba(79, 188, 255, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Responsive adjustments para tarjetas dark */
@media only screen and (max-width: 1200px) {
  body:not(.theme-light) .launcher-app-item {
    border-radius: 18px !important;
  }
  
  body:not(.theme-light) .launcher-app-link {
    border-radius: 16px !important;
    padding: 18px 15px !important;
  }
}

@media only screen and (max-width: 979px) {
  body:not(.theme-light) .launcher-app-item {
    border-radius: 16px !important;
  }
  
  body:not(.theme-light) .launcher-app-link {
    border-radius: 14px !important;
    padding: 16px 14px !important;
  }
}

@media only screen and (max-width: 767px) {
  body:not(.theme-light) .launcher-app-item {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 14px !important;
  }
  
  body:not(.theme-light) .launcher-app-link {
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border-radius: 12px !important;
  }
}

@media only screen and (max-width: 639px) {
  body:not(.theme-light) .launcher-app-item {
    border-radius: 12px !important;
    max-width: none;
  }
  
  body:not(.theme-light) .launcher-app-link {
    border-radius: 10px !important;
    padding: 15px 12px !important;
  }
}

@media only screen and (max-width: 500px) {
  body:not(.theme-light) .launcher-app-item {
    border-radius: 10px !important;
    max-width: none;
    min-width: 140px;
  }
  
  body:not(.theme-light) .launcher-app-link {
    border-radius: 8px !important;
    padding: 12px 10px !important;
  }
  
  body:not(.theme-light) .launcher-app-icon {
    font-size: 1.2rem;
  }
  
  body:not(.theme-light) .launcher-app-title {
    font-size: 14px !important;
  }
  
  body:not(.theme-light) .launcher-app-description {
    font-size: 9px !important;
  }
  
  body:not(.theme-light) .launcher-app-category {
    font-size: 8px !important;
  }
}

.theme-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 1rem;
    border-top: 1px solid rgba(var(--border-rgb), 0.1);
    background: rgba(var(--bg-rgb), 0.05);
}

.theme-btn {
    background: rgba(var(--bg-rgb), 0.1);
    border: 1px solid rgba(var(--border-rgb), 0.1);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.7;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.theme-btn:hover {
    transform: scale(1.2);
    opacity: 1;
    background: rgba(var(--bg-rgb), 0.2);
    border-color: rgba(var(--border-rgb), 0.2);
}

.theme-btn.active {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

/* Estilos específicos para la tarjeta de créditos */
.launcher-app-item[data-app="creditos"] {
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.launcher-app-item[data-app="creditos"] .launcher-app-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

.launcher-app-item[data-app="creditos"] .launcher-app-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* Ajuste para el hover de la tarjeta */
.launcher-app-item[data-app="creditos"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.launcher-app-item[data-app="creditos"]:hover .theme-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos específicos para la aplicación Timer */
.launcher-app-item[data-app="timer"] {
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.launcher-app-item[data-app="timer"] .launcher-app-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.launcher-app-item[data-app="timer"]:hover .launcher-app-bg {
    opacity: 1;
    transform: scale(1.05);
}

/* Tema claro para Timer */
body.theme-light .launcher-app-item[data-app="timer"] .launcher-app-bg {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    opacity: 0.8;
}

body.theme-light .launcher-app-item[data-app="timer"]:hover .launcher-app-bg {
    opacity: 1;
    transform: scale(1.05);
}

/* Tema rosa para Timer */
body.theme-rosa .launcher-app-item[data-app="timer"] .launcher-app-bg {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    opacity: 0.9;
}

/* Tema neon para Timer */
body.theme-neon .launcher-app-item[data-app="timer"] .launcher-app-bg {
    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

body.theme-neon .launcher-app-item[data-app="timer"]:hover .launcher-app-bg {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

/* ================================
   ANIMACIÓN DE ENTRADA ESTILO iOS
   ================================ */

/* Estado inicial oculto de las tarjetas */
.launcher-app-item.app-icon {
  opacity: 0;
  transform: translateY(30px) scale(0.8);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Estado final visible de las tarjetas */
.launcher-app-item.app-icon.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animación de entrada del grid completo */
.launcher-apps-grid.initializing {
  opacity: 0;
}

.launcher-apps-grid.loaded {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Responsive adjustments para la animación */
@media (max-width: 768px) {
  .launcher-app-item.app-icon {
    transition-duration: 0.5s;
  }
}

@media (max-width: 480px) {
  .launcher-app-item.app-icon {
    transition-duration: 0.4s;
  }
}

/* Animación reducida para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .launcher-app-item.app-icon {
    transition-duration: 0.2s;
    transform: translateY(10px) scale(0.95);
  }
  
  .launcher-app-item.app-icon.show {
    transform: translateY(0) scale(1);
  }
}

/* ── SVG icons (replacing emoji) ─────────────────────────────────────────── */
.launcher-app-icon img.pa-svg-icon {
  width: 1em;
  height: 1em;
  display: block;
  border-radius: 22%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15);
}

/* PNG con transparencia: sin recorte de esquinas ni sombra rectangular,
   para que se respete el contorno irregular del icono. La sombra se aplica
   sobre los píxeles opacos (sigue la forma), no sobre la caja. */
.launcher-app-icon img.pa-png-icon {
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

/* =============================================
   EXPERIMENT: Tarjetas 50% más pequeñas, nombre debajo
   ============================================= */

/* Grid compacto */
.launcher-apps-grid {
  grid-template-columns: repeat(auto-fit, minmax(91px, 100px)) !important;
  gap: 36px 16px !important;
  grid-auto-flow: dense !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Item: contenedor transparente en columna, overflow visible para el título */
.launcher-app-item,
body.theme-light .launcher-app-item,
body:not(.theme-light) .launcher-app-item {
  max-width: 100px !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Suprimir el pseudo-elemento glow del item */
.launcher-app-item::before,
body.theme-light .launcher-app-item::before,
body:not(.theme-light) .launcher-app-item::before {
  display: none !important;
}

/* El link es ahora la tarjeta visual cuadrada */
.launcher-app-item .launcher-app-link,
body.theme-light .launcher-app-item .launcher-app-link,
body:not(.theme-light) .launcher-app-item .launcher-app-link {
  width: 100px !important;
  height: 100px !important;
  flex: 0 0 100px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
  transform: none !important;
}

/* Glass en el link — tema light */
body.theme-light .launcher-app-item .launcher-app-link {
  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;
}

/* Glass en el link — tema dark */
body:not(.theme-light) .launcher-app-item .launcher-app-link {
  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;
}

/* Glass en el link — tema rosa (tono claro rosado, no el negro de dark) */
body.theme-rosa .launcher-app-item .launcher-app-link {
  background: rgba(255, 228, 240, 0.30) !important;
  border: 1px solid rgba(255, 180, 220, 0.40) !important;
  box-shadow:
    0 8px 32px rgba(200, 80, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}

/* Hover: solo escala, sin cambios de color/sombra */
.launcher-app-item:hover .launcher-app-link,
body.theme-light .launcher-app-item:hover .launcher-app-link,
body:not(.theme-light) .launcher-app-item:hover .launcher-app-link {
  transform: scale(1.08) !important;
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: inherit !important;
}

/* Iconos SVG: mantener tamaño original (64px) */
.launcher-app-icon {
  font-size: 4rem !important;
  flex: 1 !important;
}

.launcher-app-icon img.pa-svg-icon {
  width: 64px !important;
  height: 64px !important;
}

/* Título debajo de la tarjeta (movido por JS fuera del link) */
.launcher-app-item > .launcher-app-title {
  position: static !important;
  margin-top: 8px !important;
  width: 110px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  padding: 0 2px !important;
  color: rgba(31, 41, 55, 0.9) !important;
  text-shadow: none !important;
  z-index: auto !important;
  transform: none !important;
}

body:not(.theme-light) .launcher-app-item > .launcher-app-title {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Ocultar título si JS no lo movió todavía (fallback) */
.launcher-app-link .launcher-app-title {
  display: none !important;
}

/* Responsive */
@media only screen and (max-width: 979px) {
  .launcher-apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 95px)) !important;
    gap: 32px 12px !important;
  }
  .launcher-app-item,
  body.theme-light .launcher-app-item,
  body:not(.theme-light) .launcher-app-item { max-width: 95px !important; }
  .launcher-app-item .launcher-app-link,
  body.theme-light .launcher-app-item .launcher-app-link,
  body:not(.theme-light) .launcher-app-item .launcher-app-link {
    width: 95px !important; height: 95px !important; flex: 0 0 95px !important;
  }
}

@media only screen and (max-width: 767px) {
  .launcher-apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 88px)) !important;
    gap: 28px 10px !important;
  }
  .launcher-app-item,
  body.theme-light .launcher-app-item,
  body:not(.theme-light) .launcher-app-item { max-width: 88px !important; }
  .launcher-app-item .launcher-app-link,
  body.theme-light .launcher-app-item .launcher-app-link,
  body:not(.theme-light) .launcher-app-item .launcher-app-link {
    width: 88px !important; height: 88px !important; flex: 0 0 88px !important;
  }
}

/* =============================================
   EXPERIMENT: Ajustes puntuales
   ============================================= */

/* Ocultar "Eventos y Salidas" (JS la muestra para admins, !important la fuerza hidden) */
[data-app="eventos"] {
  display: none !important;
}

/* Quitar todos los badges de las tarjetas */
.app-access-badge {
  display: none !important;
}

/* =============================================
   EXPERIMENT: Suprimir efectos hover del item
   (los temas aplican bg/borde/sombra/transform al item; aquí los cancelamos)
   ============================================= */

.launcher-app-item:not(.pa-cal-widget-card):not(.pa-horarios-widget-card):hover,
body.theme-light .launcher-app-item:not(.pa-cal-widget-card):not(.pa-horarios-widget-card):hover,
body:not(.theme-light) .launcher-app-item:not(.pa-cal-widget-card):not(.pa-horarios-widget-card):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ocultar la bola de color en todas las tarjetas (visible en esquina + hover) */
.launcher-app-bg {
  display: none !important;
}

/* =============================================
   EXPERIMENT: Fila de widgets encima del grid
   ============================================= */

.pa-widgets-row {
  display: flex !important;
  gap: 16px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
}

/* ── Calendario: exactamente 4 tarjetas de ancho (4×100 + 3×16 = 448px) ──
   Especificidad 0,3,1 para ganar a body.theme-light .launcher-app-item (0,2,1) */
body.theme-light .pa-widgets-row .pa-cal-widget-card,
body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card {
  flex: 0 0 448px !important;
  min-width: 0 !important;
  max-width: 448px !important;
  width: 448px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 20px !important;
  align-items: unset !important;
  align-self: stretch !important;
}

/* ── Horarios: 2 tarjetas de ancho × 2 de alto (216×216px, cuadrado 1:1) ── */
body.theme-light .pa-widgets-row .pa-horarios-widget-card,
body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card {
  flex: 0 0 216px !important;
  min-width: 0 !important;
  max-width: 216px !important;
  width: 216px !important;
  height: 216px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 20px !important;
  align-items: unset !important;
  align-self: auto !important;
}

/* Glass — tema light */
body.theme-light .pa-widgets-row .pa-cal-widget-card,
body.theme-light .pa-widgets-row .pa-horarios-widget-card {
  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;
}

/* Glass — tema dark */
body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card,
body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card {
  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;
}

/* Link del calendario — especificidad 0,4,1 */
body.theme-light .pa-widgets-row .pa-cal-widget-card .launcher-app-link,
body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card .launcher-app-link {
  width: 100% !important;
  height: auto !important;
  min-height: 160px !important;
  flex: 1 1 auto !important;
  border-radius: 20px !important;
  transform: none !important;
  overflow: hidden !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Link del horarios — ocupa exactamente los 216px del contenedor cuadrado */
body.theme-light .pa-widgets-row .pa-horarios-widget-card .launcher-app-link,
body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card .launcher-app-link {
  width: 100% !important;
  height: 100% !important;
  min-height: unset !important;
  flex: 0 0 100% !important;
  border-radius: 20px !important;
  transform: none !important;
  overflow: hidden !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Sin hover scale en widgets — especificidad alta para ganar a reglas de tema */
body.theme-light .pa-widgets-row .pa-cal-widget-card:hover,
body.theme-light .pa-widgets-row .pa-horarios-widget-card:hover,
body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card:hover,
body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card:hover,
body.theme-light .pa-widgets-row .pa-cal-widget-card:hover .launcher-app-link,
body.theme-light .pa-widgets-row .pa-horarios-widget-card:hover .launcher-app-link,
body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card:hover .launcher-app-link,
body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card:hover .launcher-app-link {
  transform: none !important;
  background: inherit !important;
  box-shadow: inherit !important;
}

/* ════════════════════════════════════════════════
   RESPONSIVE WIDGETS ROW + GRID — Experiment
   ════════════════════════════════════════════════ */

/* ── Tablet (≤ 979px): recalcular ancho de widgets con cards de 95px+12px ── */
@media only screen and (max-width: 979px) {
  /* Calendario: 4 × 95 + 3 × 12 = 416px */
  body.theme-light .pa-widgets-row .pa-cal-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card {
    flex: 0 0 416px !important; max-width: 416px !important; width: 416px !important;
  }
  /* Horarios: 2 × 95 + 12 = 202px */
  body.theme-light .pa-widgets-row .pa-horarios-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card {
    flex: 0 0 202px !important; max-width: 202px !important;
    width: 202px !important; height: 202px !important;
  }
}

/* ── Tablet pequeño (≤ 767px): cards de 88px + 10px ── */
@media only screen and (max-width: 767px) {
  /* Calendario: 4 × 88 + 3 × 10 = 382px */
  body.theme-light .pa-widgets-row .pa-cal-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card {
    flex: 0 0 382px !important; max-width: 382px !important; width: 382px !important;
  }
  /* Horarios: 2 × 88 + 10 = 186px */
  body.theme-light .pa-widgets-row .pa-horarios-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card {
    flex: 0 0 186px !important; max-width: 186px !important;
    width: 186px !important; height: 186px !important;
  }
}

/* ── Mobile (≤ 640px): columna, widgets al ancho completo ── */
@media only screen and (max-width: 640px) {
  .pa-widgets-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  body.theme-light .pa-widgets-row .pa-cal-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-cal-widget-card {
    flex: 0 0 auto !important; max-width: 100% !important;
    width: 100% !important; min-height: 160px !important;
  }
  body.theme-light .pa-widgets-row .pa-horarios-widget-card,
  body:not(.theme-light) .pa-widgets-row .pa-horarios-widget-card {
    flex: 0 0 auto !important; max-width: 100% !important;
    width: 100% !important; height: 160px !important; aspect-ratio: unset !important;
  }
  /* Grid mobile: flexbox centrado (más fiable que justify-content en grid) */
  .launcher-apps-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 24px 10px !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
  }
  .launcher-app-item,
  body.theme-light .launcher-app-item,
  body:not(.theme-light) .launcher-app-item {
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }
  .launcher-app-item .launcher-app-link,
  body.theme-light .launcher-app-item .launcher-app-link,
  body:not(.theme-light) .launcher-app-item .launcher-app-link {
    width: 80px !important; height: 80px !important; flex: 0 0 80px !important;
    border-radius: 18px !important;
  }
  .launcher-app-icon img.pa-svg-icon { width: 52px !important; height: 52px !important; }
  .launcher-app-item > .launcher-app-title { font-size: 10px !important; width: 90px !important; }
}

/* ── Mobile compacto (≤ 480px): cards de 72px ── */
@media only screen and (max-width: 480px) {
  .launcher-apps-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 20px 8px !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
  }
  .launcher-app-item,
  body.theme-light .launcher-app-item,
  body:not(.theme-light) .launcher-app-item {
    max-width: 72px !important;
    flex: 0 0 72px !important;
  }
  .launcher-app-item .launcher-app-link,
  body.theme-light .launcher-app-item .launcher-app-link,
  body:not(.theme-light) .launcher-app-item .launcher-app-link {
    width: 72px !important; height: 72px !important; flex: 0 0 72px !important;
    border-radius: 16px !important;
  }
  .launcher-app-icon img.pa-svg-icon { width: 46px !important; height: 46px !important; }
  .launcher-app-item > .launcher-app-title { font-size: 9px !important; width: 80px !important; }
  /* Dock más pequeño */
  .pa-macdock { bottom: 10px; padding: 8px 12px 6px; border-radius: 18px; }
  .pa-macdock-item { width: 44px; height: 44px; }
}

/* ── Mobile pequeño (≤ 380px): cards de 64px ── */
@media only screen and (max-width: 380px) {
  .launcher-apps-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 18px 8px !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
  }
  .launcher-app-item,
  body.theme-light .launcher-app-item,
  body:not(.theme-light) .launcher-app-item {
    max-width: 64px !important;
    flex: 0 0 64px !important;
  }
  .launcher-app-item .launcher-app-link,
  body.theme-light .launcher-app-item .launcher-app-link,
  body:not(.theme-light) .launcher-app-item .launcher-app-link {
    width: 64px !important; height: 64px !important; flex: 0 0 64px !important;
    border-radius: 14px !important;
  }
  .launcher-app-icon img.pa-svg-icon { width: 40px !important; height: 40px !important; }
  .launcher-app-item > .launcher-app-title { font-size: 9px !important; width: 72px !important; }
  /* Dock compacto */
  .pa-macdock-item { width: 38px; height: 38px; }
  .pa-macdock-inner { gap: 12px; }
}