/* Contenedor Principal */
.about-archive-container {
  position: relative;
  width: 100%;
  max-width: 950px;
  height: 980px;
  margin: 20px auto;
  /* CAMBIO DE FONDO: Rejilla sutil en lugar de rosa sólido */
  background-color: #fffafb;
  background-image: 
    linear-gradient(#f8b6cb 1px, transparent 1px),
    linear-gradient(90deg, #f8b6cb 1px, transparent 1px);
  background-size: 30px 30px;
  border: 3px double #f27ca5;
  border-radius: 10px;
  overflow: hidden;
  animation: fadeInContainer 1s ease-in-out;
}

/* Base de las Ventanas */
.archive-win {
  position: absolute;
  background: white;
  border: 2px solid #000;
  box-shadow: 5px 5px 0px #f27ca5;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.archive-win:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px #f8b6cb;
  z-index: 50 !important; /* Se pone al frente al pasar el mouse */
}

/* POSICIONAMIENTO ESTRATÉGICO (Para evitar huecos feos) */
.win-dni { 
  top: 40px; left: 40px; width: 340px; z-index: 5; 
  animation: slideIn 0.5s ease-out;
}

.win-bio { 
  top: 320px; left: 80px; width: 280px; z-index: 15; 
  transform: rotate(-2deg);
  animation: slideIn 0.7s ease-out;
}

.win-affinity { 
  top: 80px; left: 400px; width: 350px; z-index: 10; 
  animation: slideIn 0.9s ease-out;
}

.win-stamps { 
  top: 350px; left: 450px; width: 300px; z-index: 8; 
  transform: rotate(2deg);
  animation: slideIn 1.1s ease-out;
}

/* CABECERAS */
.win-header {
  background: #f27ca5;
  color: #fff;
  font-family: 'Silkscreen', cursive;
  font-size: 10px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #000;
}

/* ANIMACIONES */
@keyframes fadeInContainer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; }
}

/* Estilos internos de las tarjetas */
.dni-wrapper { display: flex; gap: 15px; padding: 15px; }
.dni-photo-box { width: 90px; height: 110px; border: 2px solid #f27ca5; background: #eee; }
.dni-data h2 { margin: 0; color: #f27ca5; font-size: 18px; }

.affinity-columns { display: flex; justify-content: space-around; padding: 10px; }
.label { font-weight: bold; font-size: 11px; text-decoration: underline; color: #f27ca5; }
.affinity-columns ul { list-style: "✦ "; padding-left: 15px; font-size: 12px; }

/* Ajuste de tamaño para el DNI Pro */
.win-dni-pro {
  top: 40px;
  left: 40px;
  width: 460px; /* Más ancho para que quepa todo */
  z-index: 20;
}

.dni-main-container {
  padding: 15px;
  background: linear-gradient(135deg, #ffffff 0%, #fff0f5 100%);
  color: #333;
}

/* Estilo de Foto con Escaneo */
.dni-photo-wrapper {
  width: 100px;
  height: 120px;
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
  background: #f8b6cb;
}

.dni-photo-wrapper img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(242, 124, 165, 0.7);
  color: white;
  font-size: 8px;
  text-align: center;
}

.photo-scan-bar {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 5px #fff;
  animation: scanMove 2s infinite linear;
}

@keyframes scanMove {
  0% { top: 0; }
  100% { top: 100%; }
}

/* Tipografías y Datos */
.user-name {
  font-family: 'Silkscreen', cursive;
  margin: 0;
  color: #f27ca5;
  font-size: 22px;
  text-shadow: 1px 1px #000;
}

.id-number { font-size: 10px; color: #333; vertical-align: middle; }

.user-title {
  font-size: 11px;
  margin: 5px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Etiquetas (Badges) */
.tag-row { display: flex; gap: 5px; margin-top: 8px; }
.badge {
  background: #000;
  color: #fff;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Rejilla de Información */
.dni-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 15px 0;
  border-top: 1px dashed #f27ca5;
  border-bottom: 1px dashed #f27ca5;
  padding: 10px 0;
}

.info-item { display: flex; flex-direction: column; }
.label { font-size: 9px; color: #f27ca5; font-weight: bold; }
.val { font-size: 11px; font-family: 'Courier New', monospace; }

/* Footer y QR Decorativo */
.dni-footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skill-dot {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid #000;
  background: #fff;
  text-align: center;
  font-size: 10px;
  line-height: 25px;
  margin-right: 4px;
  box-shadow: 2px 2px #f27ca5;
}

.qr-placeholder {
  text-align: center;
  font-size: 8px;
  font-weight: bold;
}

.qr-dots {
  width: 30px;
  height: 30px;
  background-image: radial-gradient(#000 20%, transparent 20%);
  background-size: 5px 5px;
  border: 1px solid #000;
}

.dni-bottom-bar {
  font-size: 8px;
  text-align: center;
  margin-top: 10px;
  color: #f27ca5;
  font-family: monospace;
}

/* Posicionamiento a la derecha y estilo */
.win-stats-pro {
  top: 20px;
  right: 30px; /* Mandado al costado derecho */
  width: 350px;
  z-index: 12;
  border: 2px solid #000;
  box-shadow: -8px 8px 0px #f27ca5; /* Sombra hacia el otro lado para equilibrio */
  animation: slideInRight 1.2s ease-out;
}

.stats-inner {
  background: #000; /* Fondo negro para que resalten los colores neón/rosa */
  color: #f8b6cb;
  padding: 15px !important;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.stats-label {
  color: #fff;
  font-weight: bold;
  margin-bottom: 8px;
  border-left: 3px solid #f27ca5;
  padding-left: 5px;
}

/* Barras de Progreso */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-bar {
  width: 180px;
  height: 10px;
  background: #333;
  border: 1px solid #f27ca5;
  position: relative;
  overflow: hidden;
}

.fill { height: 100%; transition: width 2s ease-in-out; }
.fucsia { background: #f27ca5; }
.pink { background: #f8b6cb; }
.white { background: #ffffff; }

/* Animación de pulso para la Tesis */
.pulse {
  background: #f27ca5;
  animation: pulseWidth 2s infinite;
}

@keyframes pulseWidth {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Tags de Afinidad */
.affinity-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 15px;
}

.tag-box {
  padding: 3px;
  text-align: center;
  font-size: 9px;
  border: 1px solid;
}

.tag-box.like { color: #f27ca5; border-color: #f27ca5; }
.tag-box.dislike { color: #888; border-color: #444; }

/* Log de Sistema */
.system-log {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #333;
  color: #0f0; /* Color verde hacker clásico */
  font-size: 9px;
  opacity: 0.8;
}

/* Animación de entrada desde la derecha */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}


/* Posicionamiento y Estilo Scrapbook */
.win-bio-scrapbook {
  bottom: 5px; 
  left: 50px;
  width: 490px;
  height: 430px; /* CAMBIO: Antes tenías 50px, súbelo a 250px o 300px */
  z-index: 15;
  border: 1px solid #ddd;
  box-shadow: 10px 10px 0px rgba(242, 124, 165, 0.2);
  animation: floaty 4s ease-in-out infinite;
  
  /* AÑADIDO: Para que la ventana contenga bien el papel */
  display: flex;
  flex-direction: column;
}

.bio-paper {
  background: #fff;
  background-image: radial-gradient(#eee 1px, transparent 1px);
  background-size: 10px 10px;
  padding: 25px 15px 15px 15px !important;
  color: #444;
  
  /* AÑADIDO: Estas son las que activan la magia */
  flex: 1; 
  overflow-y: auto; 
  overflow-x: hidden;
}
/* Cinta Washi Tape */

.washi-tape {
  position: absolute;
  top: -15px;
  left: 30%;
  background: rgba(248, 182, 203, 0.8);
  color: #f27ca5;
  padding: 2px 15px;
  font-family: 'Silkscreen';
  font-size: 9px;
  transform: rotate(-2deg);
  border: 1px dashed #f27ca5;
  z-index: 100;
}
/* No olvides añadir este bloque para que el scroll sea ROSA como los stamps */
.bio-paper::-webkit-scrollbar { width: 6px; }
.bio-paper::-webkit-scrollbar-track { background: #fff0f5; }
.bio-paper::-webkit-scrollbar-thumb { background: #f27ca5; border-radius: 10px; }
.cursive-font {
  font-family: 'Courier New', serif;
  font-style: italic;
  color: #f27ca5;
  margin-top: 0;
}

.small-text { font-size: 12px; line-height: 1.4; color: #666; }

/* Etiquetas de intereses */
.interests-cloud { margin-top: 15px; }
.interests-cloud span {
  font-size: 9px;
  background: #fdf0f5;
  color: #f27ca5;
  padding: 2px 5px;
  margin-right: 3px;
  border-radius: 3px;
}

/* Mini Fotos / Iconos */
.bio-gallery {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: flex-end;
}

.mini-photo {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 2px 2px 0px #f8b6cb;
}

.handwritten-note {
  font-family: 'Courier New';
  font-size: 10px;
  text-align: center;
  margin-top: 10px;
  opacity: 0.6;
}

/* ANIMACIÓN: Flotar suavemente */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}


/* Posicionamiento y Estilo de la Ventana */
.win-collection-pro {
  bottom: 370px;
  right: 15px;
  width: 370px;
  height: 280px;
  border: 1.5px solid #000;
  box-shadow: 6px 6px 0px #f8b6cb;
  animation: slideInUp 1s ease-out;
}

.collection-inner {
  background: #ffffff;
  padding: 1px !important;
  font-family: 'Poppins', sans-serif;
}

/* Navegación interna tipo Pestañas */
.collection-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 1px;
  border-bottom: 1px dashed #f27ca5;
  padding-bottom: 2px;
}

.nav-item {
  font-size: 8px;
  font-family: 'Silkscreen';
  color: #888;
  cursor: pointer;
}

.nav-item.active { color: #f27ca5; text-decoration: underline; }


/* Área con Scroll Personalizado */
.stamps-scroll-area {
  max-height: 280px;
  overflow-y: scroll;
  padding-right: 2px;
}

/* Configuración de los Scrollbars (Webkit) */
.stamps-scroll-area::-webkit-scrollbar { 
  width: 5px;  /* Grosor del scroll vertical (Y) */
  height: 3px; /* Grosor del scroll horizontal (X) - ¡Aquí está el truco! */
}

.stamps-scroll-area::-webkit-scrollbar-track { 
  background: #fff0f5; 
  border-radius: 10px;
}

.stamps-scroll-area::-webkit-scrollbar-thumb { 
  background: #f27ca5; 
  border-radius: 10px; 
}

/* Contenedor del área de stamps */
.stamps-scroll-area {
  max-height: 280px;
  overflow-y: auto;   /* Scroll vertical activo */
  overflow-x: auto;   /* Scroll horizontal activo pero delgado */
  padding: 5px;
  /* Para Firefox (aunque Firefox no permite grosores distintos por eje) */
  scrollbar-width: thin;
}

/* Grupos y Cuadrícula */

.group-label {
  font-size: 10px;
  font-weight: bold;
  color: #f27ca5;
  margin: 3px 0 1px 0;
}


.grid-layout {
  display: grid;
  grid-template-columns: repeat(5, minmax(2px, 1fr));
  /* 2px es el espacio entre FILAS (vertical) y 30px se mantiene entre COLUMNAS */
  gap: 2px 2px; 
}

/* El Marco de cada Stamp */
.stamp-frame {
    width: 95px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 1px;
    /* Reducimos la sombra para que no empuje visualmente al botón de abajo */
    box-shadow: 2px 1px 0px #eee; 
    margin-bottom: 0px; /* Aseguramos que no haya margen externo */
    transition: all 0.3s ease;
    cursor: crosshair;
}

.stamp-frame img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}

/* Animación al pasar el mouse */
.stamp-frame:hover {
  transform: rotate(5deg) scale(1.3);
  border-color: #f27ca5;
  box-shadow: 4px 4px 0px #f8b6cb;
  z-index: 5;
  filter: brightness(1); /* Brilla un poquito */
}

.pink-border:hover { border-color: #f27ca5; }



/* Footer Informativo */
.collection-footer {
  margin-top: 10px;
  font-size: 8px;
  color: #999;
  text-align: right;
  font-family: monospace;
}

/* Animación de entrada */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Posicionamiento del Monitor */
.win-monitor {
  bottom: 40px;
  right: 30px;
  width: 320px;
  z-index: 30;
  border: 2px solid #000;
  box-shadow: 6px 6px 0px #f27ca5;
  background: #fff;
}

.monitor-inner {
  padding: 15px !important;
  font-family: 'Courier New', Courier, monospace;
}

.section-title {
  font-family: 'Silkscreen';
  font-size: 10px;
  color: #f27ca5;
  margin-bottom: 12px;
  text-align: center;
}

/* Estilos de los Medidores (Mood Meter) */
.meter-group { margin-bottom: 10px; }
.meter-info {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: bold;
  margin-bottom: 3px;
}

.meter-bar {
  height: 8px;
  background: #eee;
  border: 1px solid #000;
  overflow: hidden;
}

.bar-fill { height: 100%; transition: width 1s ease-in-out; }
.bar-fill.high { background: #f27ca5; } /* Rosa fuerte */
.bar-fill.med { background: #f8b6cb; }  /* Rosa pastel */
.bar-fill.low { background: #ff4d4d; }  /* Rojo alerta */

.monitor-divider { border: none; border-top: 1px dashed #f8b6cb; margin: 15px 0; }

/* Estilos de Baterías (Absurd Batteries) */
.battery-grid {
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
}

.bat-item { text-align: center; }

.bat-icon {
  width: 22px;
  height: 35px;
  border: 2px solid #000;
  border-radius: 2px;
  position: relative;
  margin: 0 auto 5px;
  background: #fff;
}

/* El "bornito" de arriba de la batería */
.bat-icon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: 10px;
  height: 3px;
  background: #000;
}

.bat-level {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f27ca5;
}

.bat-label { font-size: 8px; font-weight: bold; color: #333; }

/* Animación para batería baja */
.blink-red {
  background: #ff4d4d !important;
  animation: blink-bat 1s infinite;
}

@keyframes blink-bat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Icono de carga (Rayo) */
.bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #000;
  text-shadow: 1px 1px #fff;
}

.monitor-footer {
  margin-top: 15px;
  font-size: 8px;
  color: #999;
  text-align: center;
}


/* =========================================
   ESTILOS RESPONSIVE (Móviles y Tablets)
   ========================================= */

@media (max-width: 900px) {
  /* 1. Ajustamos el contenedor principal */
  .about-archive-container {
    max-width: 95%;
    height: auto; /* Permite que el contenedor crezca con el contenido */
    overflow-y: auto;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre ventanas */
  }

  /* 2. Convertimos ventanas ABSOLUTAS a RELATIVAS (apiladas) */
  .archive-win, 
  .win-dni-pro, 
  .win-stats-pro, 
  .win-bio-scrapbook, 
  .win-collection-pro, 
  .win-monitor {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important; /* Que ocupen todo el ancho del cel */
    margin: 0 auto;
    transform: none !important; /* Quitamos rotaciones para que se lea bien */
    box-shadow: 4px 4px 0px #f27ca5 !important;
  }

  /* 3. Ajustes específicos de contenido */
  .dni-main-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .dni-info-grid {
    grid-template-columns: 1fr; /* Una sola columna en el DNI */
  }

  .win-bio-scrapbook {
    height: auto !important;
    max-height: none;
  }

  .bio-paper {
    max-height: 400px; /* Limitamos el scroll interno en celular */
  }

  .stats-inner {
    padding: 10px !important;
  }

  .progress-bar {
    width: 100%; /* Barras de stats al ancho total */
  }

  .battery-grid {
    flex-wrap: wrap;
    gap: 15px;
  }

  /* 4. Quitamos animaciones pesadas en móvil para mejorar fluidez */
  .archive-win:hover {
    transform: none !important;
  }
  
  .washi-tape {
    left: 10%; /* Ajuste de la cinta */
  }
}

/* Ajuste para pantallas muy pequeñas (iPhone SE / mini) */
@media (max-width: 400px) {
  .user-name {
    font-size: 18px;
  }
  
  .collection-nav {
    flex-wrap: wrap;
    font-size: 8px;
  }
}

/* Definimos la animación de entrada */
@keyframes stampEntrance {
  from { 
    opacity: 0; 
    transform: translateY(10px) scale(0.9); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.stamp-frame {
  /* ... tus estilos actuales ... */
  animation: stampEntrance 0.5s ease-out backwards;
}

/* Efecto escalonado (opcional: los primeros botones aparecen antes) */
.stamp-frame:nth-child(1) { animation-delay: 0.1s; }
.stamp-frame:nth-child(2) { animation-delay: 0.2s; }
.stamp-frame:nth-child(3) { animation-delay: 0.3s; }
.stamp-frame:nth-child(4) { animation-delay: 0.4s; }
.stamp-frame:nth-child(n+5) { animation-delay: 0.5s; }