/* General Page Styles */
html {
    background-image: url('../img/fondito3.gif');
    background-repeat: repeat;
    background-size: auto cover;
    background-position: center;
    margin: 0;
    height: 100%;
}

    /*Fonts*/ 

@font-face {
font-family:'yipes';
src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);

}

@font-face {
font-family: 'adabelle';
src: url(https://dl.dropbox.com/s/kp4x66rhekt1fz5/AdabelleHandwriting-Regular.ttf);

}

@font-face {
font-family: 'lovely script';
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}


body {
    font-family: 'MS Gothic', sans-serif;
    font-weight: 400;
    margin-right: 100px;
    margin-left: 100px;
    padding-left: 50px;
    padding-right: 50px;
}


mark {
    
    background-color: #E060A0;
}

/* Layout Styles */
.container {
    display: grid; /* Use grid for independent column lengths */
    grid-template-columns: 0.5fr 2.75fr 0.75fr; /* Define column proportions */
    gap: 10px; /* Add spacing between columns */
}


.column {
    padding: 20px;
    box-sizing: border-box;
    border: pink 3px solid;
    border-top: 0px;
    background:none;
   
}

.cuteborder {
border-width:12px;
border-style:solid;
border-image: url(img/cuteborder.png)11 fill round;
}

.column1{
    position: relative;
    background-image: url(img/fondito5.gif);
    background-size: 125px;
    background-repeat: repeat;
    background-position: left;

}
    


.column2 {
  background-color: white;
    overflow: hidden;
}

.corner-gif {
  float: right;           /* El texto fluirá a la izquierda */
  margin: 35px 0 10px 20px; /* Espacio alrededor del GIF */
  width: 260px;
  height: auto;
  border-radius: 10px;
}


.pinky {
  border-width: 7px;
  border-style: solid;
  border-image: url("img/bordecito.gif") 7 fill round;
  border-radius: 10px;
}



/* --- Update log --- */
.update-log {
  background: #ffe6f2;
  border: 2px solid #eaa0c4;
  border-radius: 10px;
  padding: 15px;
  color: #a02463;
  font-family: 'Verdana', sans-serif;
}

.update-log h2 {
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #fff;
}

.update-entry {
  background: #fff;
  border: 1px solid #e3b3cf;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* --- To-do list --- */
.todo-list {
  background: #fff6fa;
  border: 2px solid #ffcce0;
  padding: 15px;
  border-radius: 12px;
}

.todo-list ul {
  list-style: '✿ ';
  margin-left: 20px;
}

/* --- Links section --- */
.links-section {
  background: #fef1f6;
  border: 2px solid #ffb3d1;
  padding: 15px;
  border-radius: 12px;
}

.links-section a {
  color: #d14d89;
  text-decoration: none;
}

.links-section a:hover {
  text-decoration: underline;
  color: #b33372;
}




.encajito-row {
  width: 100%;
  height: 50px;
  background: url('../img/encajito.gif') left top/auto 100% repeat-x;
  margin-bottom: 10px;
  padding: 0;
}

.sidemenu1 {
   background-color: white;
     border-radius: 20px;
    padding: 5px;
    text-align: center;
    
    
}

.meal {
    
      margin-top: 40px;
}


img {
  outline: none;
}
img:focus,
img:active {
  outline: none;
}


.column3 {
    position: relative; /* Esto permite que los elementos con position: absolute se posicionen respecto a esta columna */
    background-image: url(img/fondito.jpg);
    background-repeat: repeat;
    background-size: auto cover;
    background-position: center;
}

.column3 .sticker img {
    position: absolute;
    top: -205px; /* Ajusta la distancia desde el borde superior de la página */
    right: 0; /* Alinea el sticker con el borde derecho de la columna */
    width: auto; /* Ajusta el tamaño del sticker */
    height: 195px; /* Mantiene la proporción de la imagen */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
    filter: drop-shadow(-5px 0 10px rgba(234, 174, 194, 0.8));
}


.rounded {
    border-radius: 0px; /* Ajusta el valor según el radio de las esquinas deseadas */
}

.bow-image {
    width: 100%; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción original */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    
}


.lacito {
  position: fixed;      /* se mantiene en la ventana */
  top: -5px;            /* separación superior */
  right: 0px;          /* separación derecha */
  width: 250px;         /* ajusta tamaño según necesites */
  height: auto;
  z-index: 9999;        /* encima de todo */
}

.moneco-wrapper {
  position: fixed;
  top: 0;
  left: 20px;
  width: 200px;
  height: 190px;       /* altura recortada para ocultar el borde superior */
  overflow: hidden;
  z-index: 9999;       /* siempre encima */
}

.moneco {
  width: 200px;
  cursor: pointer;
  transform-origin: 50% 0%; 
  transition: transform 0.2s ease-in-out;
}

.moneco:hover {
  animation: swing 2s infinite ease-in-out;
}

@keyframes swing {
  0%   { transform: rotate(-8deg); }
  50%  { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}



/* Header */
header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;  /* alineación arriba */
  background-image: url('../img/heartsgif.gif');
  border: pink 5px solid;
  font-family: 'yipes';
  font-size: 45px;
  padding: 20px 20px;       /* espacio extra arriba */
  height: 200px;
  box-sizing: border-box;
}

.floating-text {
  display: inline-block;
  padding-top: 10px;      /* espacio para que la animación no se corte */
}

.stroke-text {
  font-weight: 900;
  background: linear-gradient(180deg, #E060A0, #FFD6D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  line-height: 1.2;       /* suficiente altura de línea */
}


.stroke-text:hover {
  text-shadow: 0 0 15px #E060A0;
  transition: all 0.3s ease;
}

.float {
  animation: floating 3s ease-in-out infinite;
  display: inline-block;
}

@keyframes floating {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(15px); }
  100% { transform: translateY(0); }
}


.separador {
  width: 100%;                         /* ocupa todo el ancho de la ventana */
  height: 60px;                        /* altura del separador */
  background-image: url("img/bordecito2.gif");
  background-repeat: repeat-x;         /* repetir horizontalmente */
  background-position: top left;       /* iniciar desde la izquierda */
  background-size: auto 60px;          /* ajustar altura */
  position: relative;                  /* permite z-index */
  top: -5px;                            /* superposición ligera sobre header */
  z-index: 5;
}



/* Contenedor general de la lista */
.custom-list {
  list-style: none; /* Quitamos los bullets estándar */
    margin-top: 3px;
  margin: 15px;
  padding: 10px;
  width: 220px;
  background: linear-gradient(145deg, #f6c7de, #ffe3f0); /* fondo rosado pastel */
  border-radius: 12px;
  border: 2px solid #d69ab8; /* borde rosado oscuro */
  box-shadow:
    inset 2px 2px 5px #fff,    /* luz superior */
    inset -2px -2px 5px #b36f95, /* sombra inferior */
    1px 1px 2px rgba(0,0,0,0.1); /* sombra externa sutil */
}

/* Elementos individuales (filas) */
.custom-list li {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #ffe6f2, #f2c8dc);
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid #e8a8c8;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #c97ea8;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Pequeño efecto de presión al pasar el ratón */
.custom-list li:hover {
  transform: translateY(1px);
  box-shadow:
    inset 1px 1px 2px #c97ea8,
    inset -1px -1px 2px #fff;
}

/* “Columna” izquierda: el icono de bullet */
.custom-list li::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("img/pixelpoint.png") no-repeat center center;
  background-size: contain;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Enlaces dentro de cada fila */
.custom-list a {
  color: #d14d89;
  text-decoration: none;
  font-family: "Verdana", sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
  flex-grow: 1;
}

/* Efecto de hover en el texto */
.custom-list a:hover {
  color: #b33372;
  text-decoration: underline;
}

/* Blog Section Styles */
section > div {
    border: pink 5px solid;
    height: auto; /* Adjust dynamically to content */
    margin: auto;
    padding: 20px;
}

#hello {
    border: pink 5px solid;
    margin: 20px;
    padding: 20px;
    background-color: aliceblue;
}

/* Calendar and Blinkies */


.buttons-container {
    flex: 1; /* Los botones ocupan 1/3 */
    display: flex;
    flex-direction: column; /* Alinea los botones verticalmente */
    gap: 10px; /* Espaciado entre botones */
    justify-content: center; /* Centra verticalmente los botones */
    align-items: center; /* Centra horizontalmente los botones */
}

.custom-button img {
    width: 100px; /* Ajusta el tamaño del botón */
    height: auto;
    margin-bottom: 5px;
    transition: transform 0.2s ease;
}

.custom-button img:hover {
    transform: scale(1.1); /* Efecto al pasar el cursor */
}

.buttonpile {
    
    margin: 10px;
    align-items: center;
    
}



.blinkies-wrapper {
    background: white; /* bloque sólido que cubre el fondo del contenedor */
    display: inline-block; /* se adapta al contenido */
    padding: 10px;
}

.blinkies-row {
    position: relative; /* o absolute si quieres total independencia */
    border: 7px solid transparent;
    border-image: url("https://foollovers.com/mat/baf/food/fo32-008-a.gif") 7 fill round;
    margin: 10px 0;
    z-index: 10; /* asegura que esté por encima */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.blinkies-row img {
    max-width: 47%; /* Cada blinkie ocupa máximo el 25% del ancho */
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Ajusta el tamaño sin deformarse */
    align-items: center
}

.meowy-container {
  display: inline-block;           /* que ajuste al contenido */
  border-width: 8px;
  border-style: solid;
  border-image: url(img/pichita.png) 12 fill round;
  border-radius: 10px;             /* opcional, igual que la imagen */
  padding: 5px;                    /* opcional, espacio entre borde e imagen */
}


/* Contenedor principal */
/* Contenedor principal */
.interactive-container {
  display: flex;
    margin-top: 50px;
  width: 100%;
  padding: 0;
  gap: 0; /* sin espacio extra entre columnas */
}

/* Columna de botones */
.buttons-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch; /* los botones ocupan todo el ancho de la columna */
  width: 150px;         /* ancho fijo para la columna de botones */
  box-sizing: border-box;
}

/* Botones */
.buttons-column button {
  width: 100%;
    font-family: adabelle;
  padding: 8px 12px;
  border-radius: 0;      /* opcional: que llegue al borde */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  border: 2px solid #E889BF;
    border-right: 0px;
  background-color: #ffe6f2;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
 display: flex;
    flex:1
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; 
}

.buttons-column button.hidden {
    background-color: #ffb3d1;
  transform: translateX(calc(100% - 34px)); /* se mueve hacia la derecha dejando 5px visibles */
  transition: transform 0.4s ease;         /* transición suave */
}
.buttons-column button:hover {
  background-color: #ffb3d1;
    color:#E889BF;

}

/* Columna de la imagen */
.image-column {
  flex: 1;             /* ocupa el espacio restante */
  display: flex;       /* permite que la imagen se estire */
  position: relative;
}

/* Contenedor de la imagen */
.background-image {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Imagen de fondo con borde tipo Carrd */
.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cubre todo el contenedor */
  display: block;
}

/* Contenido dinámico encima de la imagen */
/* --- Contenido general dentro del fondo --- */
.dynamic-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden; /* 👈 evita scroll general */
  z-index: 2;
  pointer-events: none; /* evita bloquear clics en botones laterales */
}

.dynamic-content.fade-out {
  opacity: 0;
}
/* --- Caja interior (bloque del contenido) --- */
.content-box {
  background: #ffe6f2; /* Rosa claro, coherente con el resto */
  border: 2px solid #e8a5c7;
  border-radius: 15px;
  padding: 15px;
  width: 80%;
  max-width: 400px;
  max-height: 70%;
  overflow: auto;
  color: #74284f;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: auto;

  /* ✨ Efecto biselado */
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.8),  /* luz arriba-izquierda */
    inset -2px -2px 4px rgba(200, 120, 160, 0.3), /* sombra abajo-derecha */
    0 2px 5px rgba(0, 0, 0, 0.15); /* sombra exterior ligera */

  /* 👁️ Suavidad general */
  transition: all 0.3s ease;
}

/* Scrollbar compacta */
.content-box::-webkit-scrollbar {
  width: 6px;
}
.content-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f6b7d2, #e889bf);
  border-radius: 10px;
  border: 1px solid #f9d6e7; /* da un ligero bisel */
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.8),
    inset -1px -1px 2px rgba(200,120,160,0.3);
    
}
.content-box::-webkit-scrollbar-track {
   background:transparent;
  border-radius: 10px; /* esquinas redondeadas */
  margin: 4px;
}


/* Título de secciones */
.update-log h2,
.todo-list h2,
.links-section h2 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 8px;
  color: #a64d79;
  text-shadow: 1px 1px 0 #fff;
}

/* Entradas de contenido (más compactas) */
.update-entry {
  background: #fff0f7;
  border: 1px solid #f2b6d1;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.8),
    inset -1px -1px 2px rgba(190,120,160,0.3);
}

/* Mensaje por defecto */
.default-message {
  background: #fff0f7;
  border: 1px solid #e3b3cf;
  border-radius: 12px;
  padding: 10px 20px;
  color: #a24b74;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.8),
    inset -2px -2px 3px rgba(200,120,160,0.3);
}


/* Subestilos individuales (siguen igual pero más compactos) */
.update-log h2,
.todo-list h2,
.links-section h2 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 8px;
}

.update-entry {
  background: rgba(255,255,255,0.8);
  border: 1px solid #e3b3cf;
  padding: 6px;
  border-radius: 5px;
  margin-bottom: 6px;
  font-size: 12px;
}

/* --- To-do list --- */
.todo-list h2 {
  text-align: center;
  color: #a0335b;
}

.todo-list ul {
  list-style: "✿ ";
  padding-left: 20px;
}

/* --- Links section --- */
.links-section a {
  color: #d14d89;
  text-decoration: none;
}

.links-section a:hover {
  text-decoration: underline;
  color: #b33372;
}


/* Interactive Link Styling */
a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: hotpink;
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }

    .column {
        margin-bottom: 20px;
    }
}

.flower {
  width: 190px; /* ligeramente más pequeño que el wrapper */
  height: 190px;
  background: url('../img/corazundai.png') center/cover no-repeat;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
     display: block;
  margin: 0 auto; 
}




<style>
img:hover {
filter: saturate(0%);
cursor:help;
}
 
#musicplayer{
display:grid;
grid-template-columns:30px auto;
align-items:center;
width: 200px;
color: #FF77AD;
font-size:20px;
line-height:140%;
background-color: ghostwhite;
border: 1px solid #ff77ad;
filter: drop-shadow(0px 1px #00000030) drop-shadow(0 -1px #00000030) drop-shadow(1px 0 #00000030) drop-shadow(-1px 0 #00000030);
 
}
 
#musictitle{
font-weight: bold;
font-family:times;
-webkit-text-stroke: 1px white;
background-color: ghostwhite;
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}
 
#musicpixel{
width:100%;
padding:5px;
position:relative;
min-height: 20px;
min-width: 20px;
background-color: white;
border-right: 1px solid #ff77ad;
}
 
.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
 
background-color: ghostwhite;
}
 
#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}
 
.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
 
.playpause:hover{
cursor:help;
}
 
#musicpixel img{
display:block;
}
 
.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 8s linear infinite;
}
 
@keyframes marquee{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
 
.hover-effect2 {
  transition: all 0.5s;
  max-width: 240px;
  display: block;
  overflow: hidden;
}

.hover-effect2:hover {
  transform: scale(1.2) rotate(3deg);
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

/* Contenedor flotante */
.comment-wrapper {
  position: fixed;
  bottom: 0;
  left: 30px;
  z-index: 9999;
  font-family: 'adabelle', cursive;
}

/* Contenedor conjunto */
.comment-container {
  width: 250px;             /* mismo ancho para caja y botón */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Botón de comments */
.comment-tab {
  position: relative;
  width: 100%;              /* igual que la caja */
  background-color: #ffc6d9;
  color: #7b1e3a;
  padding: 10px 0;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
    font-size: 25px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 -3px 6px rgba(0,0,0,0.2);
}

/* PNG decorativo encima del botón */
.comment-deco {
  position: absolute;
    bottom:30%;
  left:50px;
  transform: translateX(-50%);
  width: 60px;
  height: auto;
  pointer-events: none;
  z-index: 4;
}

/* Caja de comentarios, inicialmente colapsada */
.comment-box {
  width: 100%;          /* coincide con el botón */
  max-height: 0;        /* colapsada inicialmente */
  overflow: hidden;
  background: #fff0f5;
    box-sizing: border-box;
    padding:0px;
  border: 2px solid #ffc6d9;
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
transition: max-height 0.5s ease, padding 0.5s ease;
}

/* Hover sobre todo el contenedor hace que se despliegue la caja */
.comment-container:hover .comment-box {
  max-height: 400px;
    padding: 20px;/* altura visible de la caja */
}

#HCB_comment_box {
transform: scale(0.85); /* Shrinks to 85% of original size */
transform-origin: top left; 
width: 117.65%;
}

/* Scrollbar general */
::-webkit-scrollbar {
  width: 16px;
  height: 17px;
}

/* Scrollbar corners */
::-webkit-scrollbar-corner {
  background: #ffe6f2; /* rosa claro */
}

/* Track vertical y horizontal */
::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg, #ffe6f2, #ffd6e5 20%);
}

::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, #ffe6f2, #ffd6e5 20%);
}

/* Thumb general */
::-webkit-scrollbar-thumb {
  border: 1.5px solid #E889BF;  /* borde rosa fuerte */
  border-radius: 3px;
  box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  background-color: #F5DCE9;     /* rosa medio */
}

/* Thumb vertical y horizontal con “textura” */
::-webkit-scrollbar-thumb:vertical {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #ffb3d1 45%, #ff80b3 0, #ff4d94);
}

::-webkit-scrollbar-thumb:horizontal {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #ffb3d1 45%, #ff80b3 0, #ff4d94);
}

/* Botones de scrollbar */
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical {
  height: 17px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  background: white;
  background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
  background: white;
  background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 🌸 Estilo del modal de bienvenida */
.welcome-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 230, 245, 0.8); /* fondo translúcido rosado */
  display: none; /* se activa con JS */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* 🌸 Caja del mensaje */
.welcome-box {
  background: linear-gradient(145deg, #ffd6e5, #fff0f6);
  border: 3px solid #E889BF;
  border-radius: 15px;
  padding: 25px 35px;
  text-align: center;
  box-shadow: inset 2px 2px 6px #fff, inset -2px -2px 6px #e4a1c3;
  font-family: 'Verdana', sans-serif;
  color: #8a486a;
  max-width: 400px;
}



/* 🌸 Botón de cerrar */
#welcome-modal button {
  margin-top: 15px;
  padding: 8px 16px;
  border: 2px solid #E889BF;
  background-color: #ffe6f2;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}
#welcome-modal button:hover {
  background-color: #ffb3d1;
}