/**
 * Theme CSS - Tema oscuro y glassmorphism base
 * Define estilos de tema, efectos de vidrio y estados visuales
 * Requisitos: 8.1, 8.2, 8.6
 */

/* ==================== BODY & BACKGROUND ==================== */
body {
  background-color: #0a0b10;
  color: var(--tx);
  font-family: var(--font-primary);
  line-height: var(--line-height-normal);
}

#app,
.app {
  background-color: #0a0b10;
}

/* ==================== GLASSMORPHISM ELEMENTS ==================== */
.glass {
  background: rgba(10, 10, 12, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Apply glassmorphism to major UI elements */
.topbar,
.sidebar-container,
.topbar.glass,
.sidebar-container.glass {
  background: rgba(10, 10, 12, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: var(--r-sm);
  transition: background var(--ease);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ==================== TEXT SELECTION ==================== */
::selection {
  background: var(--theme);
  color: var(--surface);
}

::-moz-selection {
  background: var(--theme);
  color: var(--surface);
}

/* ==================== FOCUS STATES ==================== */
:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}

/* ==================== ANIMATION & TRANSITION DEFAULTS ==================== */
* {
  transition-duration: var(--ease);
  transition-timing-function: ease-in-out;
}

*:not(svg),
*:not(img) {
  transition-property: background-color, border-color, color, box-shadow, opacity;
}

/* ==================== INTERACTIVE ELEMENTS HOVER ==================== */
button,
a,
[role='button'] {
  transition-duration: var(--ease);
}

button:hover,
a:hover,
[role='button']:hover {
  color: var(--theme);
  text-shadow: 0 0 8px var(--theme-glow);
}

/* ==================== GLOW EFFECT UTILITY ==================== */
.glow {
  text-shadow: 0 0 8px var(--theme-glow);
}

.glow-secondary {
  text-shadow: 0 0 8px var(--theme-glow2);
}

.glow-box {
  box-shadow: 0 0 16px var(--theme-glow);
}

.glow-box-secondary {
  box-shadow: 0 0 16px var(--theme-glow2);
}

/* ==================== GRADIENT BACKGROUNDS ==================== */
.gradient-primary {
  background: linear-gradient(135deg, var(--theme), var(--theme-pk));
}

.gradient-surface {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
}

/* ==================== COLOR UTILITY CLASSES ==================== */
.text-primary {
  color: var(--tx);
}

.text-secondary {
  color: var(--tx2);
}

.text-tertiary {
  color: var(--tx3);
}

.text-theme {
  color: var(--theme);
}

.text-theme-secondary {
  color: var(--theme-pk);
}

.bg-surface {
  background-color: var(--surface);
}

.bg-surface2 {
  background-color: var(--surface2);
}

.bg-surface3 {
  background-color: var(--surface3);
}

.bg-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
}

/* ==================== BORDER UTILITY CLASSES ==================== */
.border-default {
  border: 1px solid var(--border);
}

.border-emphasis {
  border: 1px solid var(--border2);
}

.border-theme {
  border: 1px solid var(--theme);
}

.border-top {
  border-top: 1px solid var(--border);
}

.border-bottom {
  border-bottom: 1px solid var(--border);
}

/* ==================== SHADOW UTILITY CLASSES ==================== */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* ==================== ELEVATION & DEPTH ==================== */
.elevation-1 {
  box-shadow: var(--shadow-md);
  background: var(--surface2);
}

.elevation-2 {
  box-shadow: var(--shadow-lg);
  background: var(--surface3);
}

.elevation-3 {
  box-shadow: var(--shadow-xl);
  background: rgba(255, 255, 255, 0.08);
}

/* Elevation hover effects with translateY and shadow */
.character-card,
.card-hover,
[class*='card']:not(.character-grid) {
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease);
}

.character-card:hover,
.card-hover:hover,
[class*='card']:not(.character-grid):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ==================== DISABLED STATES ==================== */
:disabled,
[disabled],
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==================== OPACITY UTILITIES ==================== */
.opacity-75 {
  opacity: 0.75;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-25 {
  opacity: 0.25;
}

/* ==================== TRUNCATE UTILITIES ==================== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}