.ht::after {
    content: "_";
    animation-name: blinkUnderline;
    animation-duration: 0.9s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes blinkUnderline {
    50% {
        opacity: 0;
    }
}

body {
  margin: 0;
  background-image: url("https://files.catbox.moe/dlb1be.jpg");
  background-size: auto;
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: center center;
  font-family: Arial, sans-serif;
  color: black;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

html {
  overflow-y: scroll;
}

.wrapper {
  width: 100%;
}

/* ── LAYOUT PRINCIPAL ── */
#flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  margin-top: 40px;
  /* SIN margin-left para que quede centrado */
}

/* Columna central */
main {
  width: 697px;
  flex-shrink: 0;
}

main .window {
  position: relative;
}

main .window::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 100%;
  height: 100%;
  background: #c0c0c0;
  border: 2px solid #888;
  z-index: -1;
}

main .window::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  background: #c0c0c0;
  border: 2px solid #aaa;
  z-index: -2;
}

/* Columnas laterales */
.left,
.right {
  width: 242px;
  flex-shrink: 0;
}

.left .window,
.right .window {
  width: 242px;
  min-height: 0; /* min-height para que no corte el contenido */
  box-sizing: border-box;
}

/* ── TIPOGRAFÍA Y ELEMENTOS BASE ── */
.ht {
  font-size: 40px;
  font-weight: bold;
}

.content {
  padding: 5px;
}

.header {
  background: rgba(255,255,255,0.5);
  border: 3px solid #7db4d8;
  margin-bottom: 20px;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
}

button {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #d7edf7;
  font-family: inherit;
  font-size: 16px;
}

a {
  display: inline-block;
  margin-top: 5px;
  color: blue;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  letter-spacing: 2px;
  font-style: italic;
}

.scroll {
  overflow-y: auto;
}

img {
  max-width: 100%;
}

h3 {
  text-align: center;
}

/* ── PLAYLIST ── */
.playlist-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.playlist {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
}

.playlist ul {
  list-style: none;
  padding: 0;
}

.playlist li {
  padding: 5px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.playlist li:hover {
  background: black;
  color: lime;
  letter-spacing: 1px;
  font-style: italic;
}

.cover-box {
  width: 150px;
  height: 150px;
  border: 2px solid black;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cover-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── FORO HORIZONTAL ── */
.foro-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  margin: 0 20px 20px 20px;
}

.foro-horizontal a {
  display: inline-block;
  margin: 0 5px;
}

/* ── SUBPÁGINA PERFIL ── */
.perfil main {
  width: 600px;
  margin-left: 20px;
  margin-top: 40px;
}

.perfil aside {
  width: 220px;
  flex-shrink: 0;
}

.perfil .ht::after {
  display: none;
}

/* ── ARREGLOS WINDOWS 95 ── */

body .window button {
  width: auto;
  padding: 2px 4px;
  border-radius: 0;
  border: none;
  background: none;
  font-size: inherit;
}

body #taskbar button {
  width: auto;
  padding: 2px 8px;
  border-radius: 0;
  background: #d7edf7;
  border: 1px solid #555;
  font-family: inherit;
  font-size: 13px;
}

body .window .title-bar {
  display: flex;
  align-items: center;
  padding: 2px 3px;
  gap: 0;
}

body .window .title-bar .title-bar-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

/* ── MUSIC PLAYER (about) ── */
#about-musicplayer {
  font-family: Arial;
  font-size: 11px;
  color: #000;
  width: 400px;
  background: #c0c0c0;
  border: 1px solid #000;
  padding: 3px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow:
    inset -1px -1px #000,
    inset 1px 1px #dfdfdf,
    inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 200;
  overflow: hidden;
}

#about-musicplayer * {
  box-sizing: border-box;
}

#about-musicplayer .titlebar {
  height: 20px;
  background: linear-gradient(90deg, #7a1d3f, #d85a8d);
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 4px;
}

#about-musicplayer .titlebuttons {
  display: flex;
  gap: 2px;
}

#about-musicplayer .titlebuttons div {
  width: 14px;
  height: 14px;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: black;
  line-height: 1;
}

#about-musicplayer .titlebuttons div:nth-child(1)::before { content: "_"; position: relative; top: -3px; }
#about-musicplayer .titlebuttons div:nth-child(2)::before { content: "□"; }
#about-musicplayer .titlebuttons div:nth-child(3)::before { content: "✕"; }

#about-musicplayer .playercontent {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

#about-musicplayer .rightside {
  flex: 1;
  min-width: 0;
}

.title-color {
  background: linear-gradient(90deg, #6a1535, #b23965, #f9a5b9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px;
  margin-bottom: 3px;
  font-weight: bold;
  color: white;
}

.actual-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.window-button {
  background: #c0c0c0;
  border: none;
  cursor: pointer;
  box-shadow:
    inset -1px -1px #000,
    inset 1px 1px #fff,
    inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

.window-button:active {
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #000,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #808080;
}

.close, .minimize, .maximize {
  width: 16px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── MUSICPLAYER CONTROLES ── */
#musicplayer .cover {
  width: 95px;
  height: 95px;
  flex-shrink: 0;
  background-image: url("https://loveberry.nekoweb.org/assets/images/mp/yuzuha.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid black;
}

#musicplayer .track-select {
  width: 100%;
  height: 20px;
  background: white;
  border: 1px inset #808080;
  font-size: 11px;
  font-family: Arial, sans-serif;
  margin-bottom: 6px;
  padding: 1px;
}

#musicplayer .seekrow {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

#musicplayer .current-time,
#musicplayer .total-duration {
  width: 34px;
  font-size: 10px;
  text-align: center;
  flex-shrink: 0;
}

#musicplayer .seek_slider {
  flex: 1;
  width: auto;
}

#musicplayer .buttons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

#musicplayer .buttons button {
  width: 64px;
  height: 24px;
  padding: 0;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}

#musicplayer .playpause-track {
  width: 64px;
}

#musicplayer input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 2px;
  background: black;
}

#musicplayer input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 18px;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  cursor: pointer;
  margin-top: -8px;
}

#musicplayer input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 18px;
  background: #c0c0c0;
  border: 1px solid #404040;
  cursor: pointer;
}