/* ============================================
   PAPER-EFFECT.CSS
   

/* Detectar que estamos en una página de reflexión */
body:has(.reflexion-completa),
body:has(.texto-reflexion) {
  /* Fondo más cálido para dar sensación de papel */
  background: linear-gradient(-45deg, 
    #1a1612, 
    #0f0e0c, 
    #1c1a16, 
    #12100e
  ) !important;
}

/* ==========================================
   CONTENEDOR PRINCIPAL - PERGAMINO ANTIGUO
   ========================================== */

.reflexion-completa,
.texto-reflexion,
.contenido-reflexion {
  position: relative;
  background: 
    /* Textura de papel tejido */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(20,18,15,0.03) 1px,
      rgba(20,18,15,0.03) 2px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 1px,
      rgba(20,18,15,0.03) 1px,
      rgba(20,18,15,0.03) 2px
    ),
    /* Manchas de envejecimiento */
    radial-gradient(ellipse at 20% 30%, rgba(25,22,18,0.4) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 70%, rgba(25,22,18,0.3) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 90%, rgba(20,18,15,0.2) 0%, transparent 20%),
    /* Base de pergamino envejecido */
    linear-gradient(
      135deg,
      #1e1c18 0%,
      #1a1815 20%,
      #1c1a16 40%,
      #181714 60%,
      #1b1916 80%,
      #1d1b17 100%
    ) !important;
  
  /* Bordes desgastados y opacos */
  border: none !important;
  border-top: 2px solid rgba(80,70,55,0.3) !important;
  border-bottom: 2px solid rgba(50,45,35,0.4) !important;
  
  /* Sombras mate, sin brillo */
  box-shadow: 
    /* Sombra suave del papel sobre superficie */
    0 10px 30px rgba(0,0,0,0.7),
    0 5px 15px rgba(0,0,0,0.5),
    /* Sombra interior mate */
    inset 0 2px 0 rgba(40,35,28,0.3),
    inset 0 -2px 0 rgba(10,8,6,0.5),
    /* Bordes desgastados */
    inset 0 0 20px rgba(0,0,0,0.2) !important;
  
  /* Sin redondeo, bordes rectos como pergamino */
  border-radius: 0 !important;
  
  /* Padding generoso */
  padding: 3.5rem 3rem !important;
  
  /* Márgenes */
  max-width: 850px !important;
  margin: 2rem auto !important;
  
  /* Apariencia mate */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* ==========================================
   EFECTO DE BORDES DESGASTADOS
   ========================================== */

.reflexion-completa::before,
.texto-reflexion::before,
.contenido-reflexion::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  /* Esquina rasgada, no doblada */
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent rgba(30,27,22,0.6) transparent transparent;
  pointer-events: none;
  filter: blur(0.5px);
  opacity: 0.8;
}



/* ==========================================
   RESPONSIVE - PAPEL SE ADAPTA
   ========================================== */

@media (max-width: 768px) {
  .reflexion-completa,
  .texto-reflexion,
  .contenido-reflexion {
    padding: 2rem 1.5rem !important;
    margin: 1rem 0.5rem !important;
    
    /* Sombras más sutiles en móvil */
    box-shadow: 
      0 4px 16px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(212,175,55,0.05) !important;
  }
  
  /* Primera letra más pequeña en móvil */
  .texto-reflexion > p:first-of-type::first-letter,
  .contenido-reflexion > p:first-of-type::first-letter {
    font-size: 3em !important;
  }
  
  /* Citas menos prominentes */
  .texto-reflexion blockquote,
  .contenido-reflexion blockquote,
  .texto-reflexion .cita,
  .contenido-reflexion .cita {
    margin: 1.5rem -0.5rem !important;
    padding: 1rem 1.5rem !important;
  }
}

/* ==========================================
   MODO CLARO - PAPEL MÁS REALISTA
   ========================================== */

body[data-theme="light"]:has(.reflexion-completa),
body[data-theme="light"]:has(.texto-reflexion) {
  /* Fondo más claro y cálido */
  background: linear-gradient(-45deg, 
    #f5f1eb, 
    #faf7f2, 
    #f0ebe3, 
    #f8f4ee
  ) !important;
}

body[data-theme="light"] .reflexion-completa,
body[data-theme="light"] .texto-reflexion,
body[data-theme="light"] .contenido-reflexion {
  /* Papel más claro, tipo pergamino */
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(139,115,85,0.02) 2px,
      rgba(139,115,85,0.02) 4px
    ),
    linear-gradient(
      135deg,
      rgba(250,247,240,0.95) 0%,
      rgba(245,242,235,0.97) 50%,
      rgba(248,245,238,0.95) 100%
    ) !important;
  
  /* Bordes más oscuros */
  border-color: rgba(139,115,85,0.3) !important;
  
  /* Sombras más suaves */
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 1px rgba(139,115,85,0.2) !important;
}

body[data-theme="light"] .texto-reflexion p,
body[data-theme="light"] .contenido-reflexion p {
  /* Texto oscuro tipo tinta */
  color: #2a2520 !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5) !important;
}

body[data-theme="light"] .texto-reflexion > p:first-of-type::first-letter,
body[data-theme="light"] .contenido-reflexion > p:first-of-type::first-letter {
  color: #8b7355 !important;
  background: linear-gradient(135deg, #8b7355, #a68968, #8b7355);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-color: rgba(139,115,85,0.4);
  background-color: rgba(139,115,85,0.08);
}

/* ==========================================
   ANIMACIÓN SUTIL AL CARGAR
   ========================================== */

@keyframes paperAppear {
  from {
    opacity: 0;
    transform: translateY(20px) rotateX(5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.reflexion-completa,
.texto-reflexion,
.contenido-reflexion {
  animation: paperAppear 0.8s ease-out;
}