/* --- CONFIGURACIÓN GENERAL --- */
body {
  background-image: url('celeste.jpg');
  background-size: cover; 
  background-position: center 57%;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: "MS PGothic", "MS Gothic", Arial, sans-serif;}

#main-card {
  display: flex;
  width: 870px;       /* O el ancho que ya tengas configurado */
  height: 560px;      /* O el alto que ya tengas configurado */
  background: #FDFBF7; /* Tu fondo crema suave */
  
  /* ◄ AQUÍ EL NUEVO BORDE QUE ELEGISTE */
  border-width: 7px;
  border-style: solid; 
  border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  
  /* 💡 TIP EXTRA: Ajusta el box-shadow si sientes que se corta un poco */
  box-shadow: 0 8px 24px rgba(79, 44, 13, 0.08); 
  overflow: hidden;   /* Para que nada se desborde del nuevo marco */
}

/* --- BARRA LATERAL (IZQUIERDA) --- */
.profile-side {
  width: 130px; /* Un poquito más de ancho para que respire */
  font-size: 14px;
  border-right: 1px solid #eee;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.avatar {
  width: 100px;
  height: 100px;
  border: 6px solid #eee;
  margin-bottom: 15px;
  object-fit: cover;
}

.links {
  width: 100%;
}

.links a {
  display: block;
  text-decoration: none;
  color: #4F4F4F; 
  padding: 8px 10px; /* Más espacio para hacer clic fácil */
  background: #C9F1F5;
  margin-bottom: 6px;
  text-align: center; /* Se ve más ordenado centrado */
  transition: 0.3s;
  border-radius: 8px
}

.links a:hover {
  background: #fce4ec;
  color: #ff80ab;
}

.stamp {
  margin-top: 15px; /* Empuja el stamp hacia abajo */
  width: 130px;
  opacity: 0.9;
}

/* --- PANEL DE CONTENIDO (DERECHA) --- */
.content-side {
  flex-grow: 1;
  padding: 0 30px;
  overflow-y: auto;
  font-size: 16px;
  color: #4F4F4F;

}

.content-header {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  letter-spacing: 2px;
  font-size: 16px;
  color: #bbb;
  text-transform: uppercase;
}

.inner-text {
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
}
/* --- ESTILOS DE RESEÑAS --- */
.calificacion {
  font-size: 14px;
  color: #777;
  margin-top: 10px;
}

.estrellas {
  color: #E6AD00; /* Color para las estrellas llenas */
  letter-spacing: 2px;
}

/* Nueva clase para apagar la estrella estrella vacía */
.estrellas .vacia {
  color: #ccc; /* Un gris suave para que se note que está "apagada" */
}
/* ==========================================
   REPRODUCTOR DE MÚSICA (CD)
   ========================================== */

.cd-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 30px auto; /* Centra el CD dentro de la zona de contenido */
}

.cd-player {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('https://i.pinimg.com/1200x/de/29/58/de2958333be4321d2744814039c74f66.jpg') no-repeat center/cover;
    border: 3px solid #ccc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Agujero del centro del CD */
.cd-player::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff; /* Cambia esto si el fondo de tu content-side es de otro color */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Botón flotante de Play/Pausa */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Muestra el botón cuando pasas el mouse o si está sonando */
.cd-container:hover .play-button,
.play-button.playing {
    opacity: 1;
}

/* Animación para que el CD gire */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* --- COMPONENTES DEL REPRODUCTOR (MARQUEE) --- */
.song-title {
  display: block;
  width: 200px;               /* Lo ensanché un poquito más para que luzca el recuadro */
  margin: 20px auto 0 auto;   /* Espaciado perfecto debajo del CD */
  padding: 6px 12px;          /* Espacio interno para que el texto respire dentro del cuadro */
  text-align: center;
  font-size: 12px;
  color: #5E5E5E;             /* El tono marrón de tus links */
  font-family: 'Tahoma', sans-serif;
  
  /* NUEVOS ESTILOS DEL RECUADRO */
  background-color: #F7F7F5;  /* Un color crema clarito muy Ghibli (puedes cambiarlo por 'white' si prefieres) */
  border: 1px solid #D4D4D4;  /* Borde sutil usando el verde tierno de tus botones */
  border-radius: 20px;        /* Bordes redondeados tipo píldora, se ve muy estético */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra muy suave y elegante */
}
/* --- BOTONERA DEL REPRODUCTOR --- */
.player-controls {
  display: flex;
  justify-content: center;
  gap: 15px;                  /* Espacio entre los botones */
  margin: 15px auto 0 auto;
}

.player-controls button {
  background: #EDEDED;        /* El verde tierno de tus pestañas */
  border: 1px solid #D4D4D4;
  border-radius: 50%;         /* Botones redondos perfectos */
  width: 38px;
  height: 38px;
  color: #5E5E5E;             /* El marrón oscuro de tus textos */
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.player-controls button:hover {
  background: #fce4ec;        /* Rosa suave al pasar el mouse como tus links */
  color: #ff80ab;
  transform: scale(1.05);     /* Efecto sutil de agrandado */
}

/* Opcional: Hacer el botón de Play un poquito más grande para que resalte */
#playPauseBtn {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
/* --- CUADRO CONTENEDOR DEL REPRODUCTOR --- */
.reproductor-widget {
  background-color: #F2F2F2;   /* Un fondo crema muy suave que resalta del blanco del fondo */
  border-radius: 16px;         /* Esquinas redondeadas para que haga juego con tus botones */
  padding: 20px;               /* Espacio interno para que el CD y los botones no peguen al borde */
  width: 240px;                /* Ancho perfecto para que quepa el CD y el Marquee */
  margin: 30px auto;           /* Centra todo el recuadro dentro de la zona derecha */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.02); /* Sombra interna casi invisible para darle profundidad */
}
.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;                  
  margin-top: 15px; /* ◄ Esto le da un aire limpio entre el título y los botones */
}
.content-side hr {
  border: none;
  border-top: 4px dotted #fce4ec; /* Tus puntitos verdes */
  width: 90%;
  margin: 25px auto;
  opacity: 0.8;
}
/* --- ESPACIADO ESPECIAL PARA EL TEXTO DE LA RESEÑA --- */
.contenedor-resena {
  background-color: #E9FAFB;  /* Un fondo crema casi imperceptible para que resalte la opinión */
  border-left: 4px solid #9CE6ED; /* Una línea sutil verde al lado izquierdo, estilo cita de libro */
  
  /* ◄ AQUÍ CONTROLAS EL ESPACIO INTERNO */
  padding: 20px 25px;         /* 20px arriba/abajo y 25px a los lados de margen interno */
  
  margin: 20px 0;             /* Separa la reseña de los párrafos de arriba y de la calificación */
  border-radius: 0 12px 12px 0; /* Redondea las esquinas del fondo crema, excepto donde está la línea verde */
}
.lw { font-size: 60px; font-family: Arial, Helvetica, sans-serif; 
}
/* --- CONTENEDOR PARA LOS DOS GIFS JUNTOS --- */
.contenedor-gifs-inicio {
  display: flex;          /* Los alinea en fila horizontal */
  justify-content: center; /* Los centra perfectamente en el medio de la pantalla */
  gap: 15px;              /* La separación tierna que habrá entre un gif y el otro */
  margin: 20px auto;      /* Espacio arriba y abajo de los gifs */
}

/* --- ESTILO INDIVIDUAL PARA CADA GIF --- */
.gif-inicio {
  max-width: 130px;       /* Ajustamos el ancho a 120px para que quepan los dos juntitos sin apretarse */
  height: auto;           /* Mantiene la proporción para que no se deformen */
  border-radius: 8px;     /* Esquinas redondeadas estéticas */
  object-fit: contain;    /* Asegura que la animación se vea limpia */
}
/* Clase especial para alinear párrafos específicos a la izquierda */
.texto-izq {
  line-height: 1.6;            /* Hace que el texto largo sea más cómodo de leer */
  margin-bottom: 12px;         /* Deja un espacio lindo abajo antes del siguiente párrafo */
  text-align: left !important;
  
}
/* --- RECUADRO PARA LAS ENTRADAS DEL BLOG --- */
.entrada-blog {
  background-color: #ffffff;    /* Fondo blanco limpio para que resalte los textos */
  border: 2px dashed #C9F1F5;   /* Borde de puntitos/guiones con tu verde tierno */
  border-radius: 12px;          /* Esquinas redondeadas y tiernas */
  padding: 18px 20px;           /* Espacio cómodo entre el texto y los bordes */
  margin-bottom: 25px;          /* Separa este recuadro del siguiente que vayas a poner */
  box-shadow: 0 4px 12px rgba(79, 44, 13, 0.03); /* Una sombra casi invisible para darle relieve */
}

/* Estilo para la fecha del blog */
.fecha-blog {
  display: block;               /* Hace que ocupe toda su línea */
  font-size: 14px;           /* Un tamaño un poquito más pequeño y delicado */
  color: #888888;               /* Un color gris suave para que no compita con el título */
  margin-bottom: 8px;           /* Separa la fecha del contenido de abajo */
  text-align: left;             /* Alineada a la izquierda */
}

/* Estilo para el texto dentro del blog */
.entrada-blog p {
  text-align: left;             /* Alinea el contenido a la izquierda como querías */
  line-height: 1.6;             /* Espacio tierno entre líneas */
  margin: 0;                    /* Limpia márgenes extraños */
  color: #4F2C0D;               /* Tu marrón oscuro para los textos */
  font-size: 12px;           /* Un tamaño un poquito más pequeño y delicado */
}
/* 1. Para todos los párrafos normales de tu web */
.content-side p {
  font-size: 16px;
  line-height: 1.3;       /* ◄ ANTES estaba en 1.6, bajarlo a 1.3 junta más las líneas */
  margin-bottom: 10px;    /* Reduce también el espacio al terminar un párrafo */
}

/* 2. Revisa si tu clase especial de texto a la izquierda también tiene line-height */
.content-side p.texto-izq {
  text-align: left !important;
  line-height: 1.3 !important; /* ◄ Forzamos a que use el espaciado compacto */
}
/* --- ANIMACIÓN FLOTANTE DEL INICIO --- */
#float {
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  font-style: italic;
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

/* --- ESTILO PARA EL TITULO Y LA CAJA DEL ATABOOK --- */
.titulo-firmas {
  text-align: center;
  margin-top: 25px;
  font-weight: bold;
}

.caja-atabook {
  width: 100%;
  max-width: 520px;          /* Ajusta el ancho para que entre en tu panel */
  height: 350px;             /* El alto cómodo para ver los mensajes */
  border: 2px dashed #C9F1F5; /* Tus icónicos puntitos verdes */
  border-radius: 12px;
  margin: 15px auto 10px auto;
  display: block;
  background: #ffffff;       /* Fondo blanco limpio */
}