/* ========================================================
   NATALIA STUDY - PALETA AZUL ALPINO ÓPALO & ESTILOS iOS
   ======================================================== */

:root {
  --color-alpine-primary: #3B82A6;
  --color-alpine-hover: #2F6B8A;
  --color-alpine-light: #EBF4F8;
  --color-opal-glacier: #7DB9B6;
  --color-opal-soft: #E6F4F3;
  --color-opal-accent: #4E9F9C;
  --color-bg-light: #F2F7F9;
  --color-card-light: #FFFFFF;
  --color-border-light: #E2E8F0;
  --color-text-main: #1E293B;
  --color-text-muted: #64748B;
  
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

.dark {
  --color-bg-light: #0B1323;
  --color-card-light: #152238;
  --color-border-light: #1E2E4A;
  --color-text-main: #F1F5F9;
  --color-text-muted: #94A3B8;
  --color-alpine-light: #182C44;
  --color-opal-soft: #143038;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-main);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Glassmorphism Classes */
.glass-header {
  background: rgba(242, 247, 249, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dark .glass-header {
  background: rgba(11, 19, 35, 0.88);
}

.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(59, 130, 166, 0.08);
}

.dark .glass-card {
  background: rgba(21, 34, 56, 0.92);
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 -4px 25px rgba(59, 130, 166, 0.1);
}

.dark .glass-nav {
  background: rgba(17, 29, 48, 0.92);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}

/* Safe areas */
.pt-safe {
  padding-top: max(12px, env(safe-area-inset-top));
}

.pb-safe {
  padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 68px));
}

/* 3D Flashcard Flip Effect */
.perspective-1000 {
  perspective: 1000px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.flashcard-inner.is-flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.flashcard-back {
  transform: rotateY(180deg);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 166, 0.25);
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(125, 185, 182, 0.25);
}

/* Pulsing Badge & Animations */
@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.9;
  }
}

.animate-soft-pulse {
  animation: softPulse 2.5s infinite ease-in-out;
}

/* Checkbox Animation */
.checkbox-touch {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-touch:active {
  transform: scale(0.9);
}

/* Mobile tap ripple / active scale */
.btn-press {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-press:active {
  transform: scale(0.96);
  opacity: 0.9;
}