/* Estilos de Dirección de Arte - Jatolog (Jardín Digital Cozy RPG) */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@700&family=Outfit:wght@300;400;500;600;700&family=MedievalSharp&display=swap');

:root {
  --color-stone-900: #1c1917;
  --color-stone-850: #24211f;
  --color-stone-800: #292524;
  --color-stone-700: #44403c;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-turquoise-900: #042f2e;
  --color-turquoise-800: #115e59;
  --color-turquoise-700: #0f766e;
  --color-turquoise-600: #0d9488;
  --color-turquoise-400: #2dd4bf;
  
  /* Curvas de Easing de Ingeniería de Diseño (Emil Kowalski / Taste) */
  --ease-out-snappy: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-smooth: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--color-stone-900);
  color: var(--color-amber-100);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(13, 148, 136, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(217, 119, 6, 0.06) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noiseFilter'%3e%3cturbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3e%3c/svg%3e");
  overflow-x: hidden;
}

/* Tipografías Temáticas */
.font-rpg-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
}

.font-rpg-sub {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
}

.font-medieval {
  font-family: 'MedievalSharp', cursive, serif;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-stone-900);
  border-left: 1px solid var(--color-stone-800);
}

::-webkit-scrollbar-thumb {
  background: var(--color-stone-700);
  border: 2px solid var(--color-stone-900);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-turquoise-750);
  background-color: var(--color-turquoise-700);
}

/* Estilos de Pergamino y Madera */
.wood-panel {
  background: linear-gradient(135deg, var(--color-stone-850) 0%, var(--color-stone-800) 100%);
  border: 1px solid rgba(217, 119, 6, 0.18);
  box-shadow: 
    0 10px 30px -10px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wood-panel-glow {
  box-shadow: 
    0 0 20px rgba(13, 148, 136, 0.15),
    0 10px 30px -10px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(13, 148, 136, 0.3);
}

.wood-panel-glow:hover {
  border-color: rgba(13, 148, 136, 0.6);
  box-shadow: 
    0 0 25px rgba(13, 148, 136, 0.3),
    0 15px 35px -10px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.parchment {
  background-color: #f3eae1;
  color: #2b2621;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noiseFilter'%3e%3cturbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3e%3c/svg%3e");
  box-shadow: 
    0 10px 25px -5px rgba(0,0,0,0.3),
    inset 0 0 40px rgba(139, 92, 26, 0.15);
  border: 1px solid #d9c3b0;
}

/* Sello de Aprobación Jato (Turquesa y Dorado, sin rojo) */
.seal-stamp {
  position: relative;
  width: 65px;
  height: 65px;
  background: radial-gradient(circle, #0d9488 60%, #0f766e 100%);
  border-radius: 50%;
  border: 2px solid var(--color-amber-200);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
  transition: transform 220ms var(--ease-out-snappy);
}

.seal-stamp::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px dashed rgba(254, 243, 199, 0.35);
  border-radius: 50%;
}

.seal-stamp-inner {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.5rem;
  color: var(--color-amber-200);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

/* Animación del Visualizador de Audio */
.visualizer-container {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.visualizer-bar {
  width: 4px;
  background-color: var(--color-turquoise-400);
  height: 3px;
  border-radius: 2px;
  transition: height 0.1s ease;
}

.playing .visualizer-bar {
  animation: bounce 1.2s ease-in-out infinite alternate;
}

.playing .visualizer-bar:nth-child(2) { animation-delay: 0.15s; }
.playing .visualizer-bar:nth-child(3) { animation-delay: 0.3s; }
.playing .visualizer-bar:nth-child(4) { animation-delay: 0.05s; }
.playing .visualizer-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes bounce {
  0% { height: 3px; }
  100% { height: 24px; }
}

/* Estilos de Corcho (Pinboard) */
.pinboard {
  background-color: #3e2723;
  background-image: 
    radial-gradient(rgba(0,0,0,0.3) 15%, transparent 16%),
    radial-gradient(rgba(0,0,0,0.3) 15%, transparent 16%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='cork'%3e%3cturbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23cork)' opacity='0.25'/%3e%3c/svg%3e");
  background-size: 8px 8px, 8px 8px, auto;
  background-position: 0 0, 4px 4px, 0 0;
  border: 12px solid #271510;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 15px 30px rgba(0,0,0,0.5);
}

.pinboard-note {
  transform: rotate(var(--rotation, 0deg));
  transition: transform 220ms var(--ease-out-snappy), box-shadow 220ms var(--ease-out-snappy), z-index 220ms var(--ease-out-snappy);
  z-index: 10;
}

/* Pin (Chincheta de Gema Turquesa, sin rojo) */
.pin {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #2dd4bf 20%, #0d9488 60%, #0f766e 100%);
  border-radius: 50%;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.4),
    inset -1px -1px 3px rgba(0,0,0,0.6),
    inset 1px 1px 3px rgba(255,255,255,0.8);
  z-index: 20;
}

.pin::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 5px;
  width: 4px;
  height: 6px;
  background-color: #9ca3af;
  transform: rotate(15deg);
}

/* Luz de ambiente en la Radio */
.glow-effect {
  position: relative;
}
.glow-effect::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px var(--color-turquoise-400);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}
.radio-active .glow-effect::after {
  opacity: 0.15;
}

/* Transición de Opacidad de Sonido de Ambiente */
.sound-toggle-btn.active {
  background-color: var(--color-turquoise-700);
  box-shadow: 0 0 10px var(--color-turquoise-400);
}

/* Efectos de Hover con Resplandor */
.hover-gold-glow:hover {
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.masonry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  justify-content: center;
}

@media (min-width: 640px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.masonry-item {
  width: 100%;
}

/* Partículas del fuego (Mágicas de Brasas Turquesas y Doradas) */
.fire-particle {
  position: absolute;
  background: radial-gradient(circle, var(--color-turquoise-400) 20%, rgba(251, 191, 36, 0.6) 50%, rgba(13, 148, 136, 0) 80%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatUp 2s linear infinite;
  box-shadow: 0 0 8px var(--color-turquoise-400);
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-80px) scale(0.2) rotate(180deg);
    opacity: 0;
  }
}

/* Recorte de texto a 3 líneas (Clamping) para evitar notas sobredimensionadas */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Enlace/Indicador de Leer más de estilo acogedor */
.read-more-link {
  color: #0d9488; /* turquoise-600 */
  font-size: 11px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  margin-top: 4px;
  display: inline-block;
  transition: color 0.2s;
}
.read-more-link:hover {
  color: #0f766e; /* turquoise-700 */
  text-decoration: underline;
}

/* --- ANIMACIONES Y EFECTOS ADICIONALES --- */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes campfire-flicker {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.16; }
  25%, 75% { opacity: 0.08; }
  12%, 88% { opacity: 0.12; }
}

.campfire-glow-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.08) 50%, transparent 80%);
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
}

.campfire-active .campfire-glow-overlay {
  opacity: 1;
  animation: campfire-flicker 2.5s infinite alternate;
}

/* --- VARIABLES Y ANULACIONES DE TEMA CLARO (☀️ MODO DÍA) --- */
.theme-light body {
  background-color: #fbf9f4 !important;
  color: #2e2924 !important;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(13, 148, 136, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(217, 119, 6, 0.03) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noiseFilter'%3e%3cturbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3e%3c/svg%3e") !important;
}

/* Paneles del Tema Claro */
.theme-light .wood-panel {
  background: linear-gradient(135deg, #f7f1e6 0%, #ecdcb9 100%) !important;
  border-color: rgba(139, 92, 26, 0.25) !important;
  box-shadow: 
    0 10px 30px -10px rgba(139, 92, 26, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  color: #3e2d1c !important;
}

.theme-light .wood-panel-glow {
  border-color: rgba(13, 148, 136, 0.25) !important;
  box-shadow: 
    0 0 20px rgba(13, 148, 136, 0.06),
    0 10px 30px -10px rgba(139, 92, 26, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.theme-light .wood-panel-glow:hover {
  border-color: rgba(13, 148, 136, 0.45) !important;
  box-shadow: 
    0 0 25px rgba(13, 148, 136, 0.12),
    0 15px 35px -10px rgba(139, 92, 26, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.theme-light .pinboard {
  background-color: #5c4238 !important;
  border-color: #3e2820 !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 15px 30px rgba(139, 92, 26, 0.18) !important;
}

/* Anulaciones de textos de Tailwind */
.theme-light .text-stone-300 { color: #4a453f !important; }
.theme-light .text-stone-400 { color: #5c554e !important; }
.theme-light .text-stone-500 { color: #7c7267 !important; }
.theme-light .text-gold-100 { color: #451a03 !important; }
.theme-light .text-gold-200 { color: #78350f !important; }
.theme-light .text-gold-400 { color: #b45309 !important; }
.theme-light .text-turquoiseAccent-400 { color: #0d766e !important; }
.theme-light .text-turquoiseAccent-300 { color: #115e59 !important; }

/* Anulaciones de fondos de tarjetas */
.theme-light .bg-stone-900 { background-color: #f7eed8 !important; color: #473824 !important; }
.theme-light .bg-stone-900\/60 { background-color: rgba(247, 238, 216, 0.8) !important; }
.theme-light .bg-stone-950 { background-color: #eddcb9 !important; border-color: rgba(139, 92, 26, 0.18) !important; }
.theme-light .bg-stone-950\/80 { background-color: rgba(237, 220, 185, 0.85) !important; }
.theme-light .bg-stone-850 { background-color: #f1e3c5 !important; }
.theme-light .bg-stone-800 { background-color: #ecdab0 !important; color: #534027 !important; }
.theme-light .bg-stone-800\/20 { background-color: rgba(236, 218, 176, 0.25) !important; }

/* Anulaciones de bordes */
.theme-light .border-stone-800 { border-color: #eddcb9 !important; }
.theme-light .border-stone-850 { border-color: #ebd7a8 !important; }
.theme-light .border-stone-700 { border-color: #dfcd9f !important; }
.theme-light .border-gold-600\/30 { border-color: rgba(180, 83, 9, 0.2) !important; }
.theme-light .border-gold-600\/20 { border-color: rgba(180, 83, 9, 0.12) !important; }
.theme-light .border-gold-600\/10 { border-color: rgba(180, 83, 9, 0.08) !important; }
.theme-light .border-turquoiseAccent-700\/30 { border-color: rgba(13, 148, 136, 0.15) !important; }
.theme-light .border-turquoiseAccent-800\/30 { border-color: rgba(13, 148, 136, 0.12) !important; }

/* Anulaciones de hovers y estados activos */
.theme-light .hover\:bg-stone-700:hover { background-color: #ecd29b !important; }
.theme-light .hover\:text-gold-100:hover { color: #451a03 !important; }
.theme-light .hover-gold-glow:hover { text-shadow: 0 0 8px rgba(180, 83, 9, 0.25); }

/* Anulación del pie de página */
.theme-light footer { background-color: #eeddbb !important; border-top-color: rgba(139, 92, 26, 0.15) !important; }
.theme-light footer div, .theme-light footer a { color: #5a4b37 !important; }
.theme-light footer a:hover { color: #0d9488 !important; }

/* Anulaciones para el modal de detalles (pergamino sobre claro) */
.theme-light #note-modal .parchment, .theme-light #rpg-dialog .parchment {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), inset 0 0 40px rgba(139, 92, 26, 0.1) !important;
}

/* --- PREMIUM UI/UX IMPROVEMENTS --- */

/* Tactile Active Scaling Feedback */
.sound-toggle-btn, .filter-btn, #radio-play-btn, #radio-prev-btn, #radio-next-btn, 
#theme-toggle-btn, #lang-toggle-btn, #btn-open-misiva, .mercadillo-link, 
#misiva-send-btn, #admin-save-note-btn, #admin-save-ls-btn, #admin-export-html-btn, 
#admin-exit-btn, #rpg-dialog-ok, #rpg-dialog-confirm, #rpg-dialog-cancel, 
#modal-close, #misiva-close, #admin-note-modal-close, .admin-note-controls button,
.tactile-btn {
  transition: transform 160ms var(--ease-out-snappy), background-color 160ms var(--ease-out-snappy), border-color 160ms var(--ease-out-snappy), box-shadow 160ms var(--ease-out-snappy) !important;
}

.sound-toggle-btn:active, .filter-btn:active, #radio-play-btn:active, #radio-prev-btn:active, 
#radio-next-btn:active, #theme-toggle-btn:active, #lang-toggle-btn:active, #btn-open-misiva:active, 
.mercadillo-link:active, #misiva-send-btn:active, #admin-save-note-btn:active, #admin-save-ls-btn:active, 
#admin-export-html-btn:active, #admin-exit-btn:active, #rpg-dialog-ok:active, #rpg-dialog-confirm:active, 
#rpg-dialog-cancel:active, #modal-close:active, #misiva-close:active, #admin-note-modal-close:active,
.admin-note-controls button:active,
.tactile-btn:active {
  transform: scale(0.96) !important;
}

/* Modal Smooth Fade & Scale Entry */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.animate-modal-in {
  animation: modalFadeIn 220ms var(--ease-out-snappy) forwards;
}

/* Scoped Hover Effects for Fine Pointers (Prevent sticky hover on touch devices) */
@media (hover: hover) and (pointer: fine) {
  .pinboard-note:hover {
    transform: scale(1.03) rotate(0deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    z-index: 50;
  }
  .seal-stamp:hover {
    transform: rotate(5deg) scale(1.08);
  }
}

/* Accessibility / Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
    transform: none !important;
    filter: none !important;
  }
}