/* ── Taskbar ── */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 42px; display: flex; align-items: center;
  background: linear-gradient(180deg, #3f96f5 0%, #2468d8 40%, #1348b8 100%);
  border-top: 2px solid #6ab0ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -2px 8px rgba(0,0,30,.4);
  z-index: 9900;
}

/* Botón Inicio */
#start-button {
  display: flex; align-items: center; gap: 6px;
  margin-left: 4px; height: 34px; padding: 0 14px 0 10px;
  border-radius: 17px; border: 1px solid #2a6018;
  color: white; font-weight: bold; font-style: italic;
  font-size: 13px; font-family: Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(180deg, #5fc456 0%, #3ca033 40%, #22781f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 1px 1px 4px rgba(0,0,0,.4);
  cursor: pointer; flex-shrink: 0;
}
#start-button:hover  { background: linear-gradient(180deg, #72d167 0%, #4db244 40%, #2d9028 100%); }
#start-button:active { background: linear-gradient(180deg, #2a7820 0%, #3ca033 100%); }
#start-button .win-logo { width: 20px; height: 20px; flex-shrink: 0; }

.taskbar-divider {
  width: 2px; height: 32px; margin: 0 6px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
  flex-shrink: 0;
}

/* Programas abiertos */
#taskbar-programs {
  flex: 1; display: flex; align-items: center;
  gap: 4px; overflow: hidden; padding: 0 4px;
}

.taskbar-btn {
  display: flex; align-items: center; gap: 6px;
  height: 30px; min-width: 96px; max-width: 200px;
  padding: 0 10px; flex: 0 1 160px;
  font-size: 11px; font-family: Tahoma, sans-serif;
  color: #fff; text-shadow: 1px 1px 1px rgba(0,0,20,.55);
  cursor: pointer; overflow: hidden; white-space: nowrap;
  border: 1px solid #103a8e;
  border-radius: 3px;
  background: linear-gradient(180deg, #529bff 0%, #2f79ec 8%, #2360cf 52%, #2a68d8 88%, #4a8bee 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 2px rgba(0,0,40,.35);
}
.taskbar-btn img  { width: 16px; height: 16px; flex-shrink: 0; }
.taskbar-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.taskbar-btn:hover {
  background: linear-gradient(180deg, #6fb0ff 0%, #418af3 8%, #2f6fd8 52%, #3a78e2 88%, #62a0f2 100%);
}
.taskbar-btn:active,
.taskbar-btn.active {
  border-color: #0c2f74;
  background: linear-gradient(180deg, #1c4aa0 0%, #2358bd 50%, #1b47a2 100%);
  box-shadow: inset 1px 1px 3px rgba(0,0,30,.55), inset -1px -1px 2px rgba(255,255,255,.12);
}

.taskbar-btn.minimized       { color: rgba(255,255,255,.8); }
.taskbar-btn.minimized img   { opacity: .8; }
.taskbar-btn.minimized span::before { content: "▸ "; font-size: 9px; opacity: .85; }

/* Bandeja del sistema */
#systray {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 38px;
  border-left: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, #1a5ec0 0%, #0e3c9a 100%);
  flex-shrink: 0;
}

#clock-widget {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: white; cursor: default; line-height: 1.4;
}
#clock-time { font-weight: bold; font-size: 12px; }
#clock-date { font-size: 10px; opacity: .85; }

/* ── Menú Inicio ── */
#start-menu {
  position: fixed; left: 4px; bottom: 44px;
  width: 330px;
  background: white; border: 2px solid #0a3ba8;
  border-radius: 6px 6px 0 0;
  box-shadow: 4px 0 14px rgba(0,0,60,.45);
  z-index: 9950; overflow: hidden;
  font-size: 12px; display: none;
}
#start-menu.visible { display: block; }

.sm-header {
  height: 54px; display: flex; align-items: center;
  gap: 10px; padding: 0 12px;
  background: linear-gradient(90deg, #1a52c4 0%, #3080e8 100%);
  color: white;
}
.sm-header .avatar {
  width: 36px; height: 36px; border-radius: 3px;
  background: white; display: flex;
  align-items: center; justify-content: center; font-size: 20px;
}
.sm-header .username { font-size: 13px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,.5); }

.sm-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 240px; }
.sm-col-left  { background: white;   border-right: 1px solid #d4d0c8; padding: 8px 0; }
.sm-col-right { background: #d8e4f5; padding: 8px 0; }

.sm-section-title {
  font-size: 10px; font-weight: bold; color: #666;
  padding: 6px 10px 2px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; cursor: pointer; color: #000;
}
.sm-item:hover { background: #3160bf; color: white; }
.sm-item img   { width: 22px; height: 22px; }
.sm-divider    { height: 1px; background: #d4d0c8; margin: 6px 0; }

.sm-footer {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 6px 10px; background: #d4d0c8;
  border-top: 1px solid #aca899;
}
.sm-footer-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 10px;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #7b7461; border-radius: 3px;
  cursor: pointer; font-family: Tahoma, sans-serif;
}
.sm-footer-btn:hover { background: linear-gradient(180deg, #e8f0ff 0%, #d0d8f0 100%); }