/*
  modal.css
  ------------------
  Propósito: estilos del modal de advertencia NSFW.
  - `.nsfw-modal`: capa oscura de fondo que cubre la pantalla.
  - `.nsfw-modal-content`: caja central con botón de confirmación y checkbox.

  Nota: el modal se muestra/oculta por JS añadiendo o quitando la clase `open`.
*/
.nsfw-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;        /* <--- IMPORTANTE (SIEMPRE FLEX) */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;           /* <--- oculto por opacidad */
  pointer-events: none; /* <--- deshabilita clics cuando está cerrado */
  transition: opacity 0.25s ease;
  animation: animodal 9s ease-in-out infinite alternate;
}
.nsfw-modal.open {
  opacity: 1;
  pointer-events: all;
}



@keyframes animodal {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.01);
  }
}


/* Mostrar modal cuando se añade la clase `open` desde JS */
.nsfw-modal.open {
  display: flex;
}

.nsfw-modal-content {
  background-color: #1F102B;
  color: #F4DFFF;
  border: 2.5px solid #C897FF;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 8px #C897FF;
  max-width: 400px;
  width: 90%;
  text-align: center;
  font-family: 'Caveat';
}

.nsfw-modal-content h2 {
  font-size: 1.8rem;
}

.nsfw-modal-content p {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.no-show {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.nsfw-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.nsfw-buttons button {
   background-color: #2C1740;
    color: #F4DFFF;
  font-weight: bold;
  border: 2px solid #C897FF;
  box-shadow: 0 0 5px #C897FF;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  font-family: 'Caveat';
  cursor: url('../cursors/cursor.cur'), pointer;
  transition: all 0.3s ease;
}

.nsfw-buttons button:hover {
  cursor: url('../cursors/cursorHover.cur'), pointer;
   background-color: #D319A4;
  color: rgb(0, 0, 0);
  border: 2px solid #F24BD3;
  box-shadow: 0 0 10px #F24BD3;
}