/* Connected Roots Custom Styles - Index (Red Theme) */
:root {
  /* Connected Roots Light Mode Colors - Red Theme */
  --background: #ffffff; /* Pure white */
  --foreground: #475569; /* Slate gray text */
  --card: #f1f5f9; /* Light gray card background */
  --card-foreground: #dc2626; /* Rojo intenso card text */
  --popover: rgba(255, 255, 255, 0.9); /* Popover background */
  --popover-foreground: #475569; /* Popover text */
  --primary: #dc2626; /* Rojo intenso primary */
  --primary-foreground: #ffffff; /* White text on primary */
  --secondary: #ef4444; /* Rojo accent */
  --secondary-foreground: #ffffff; /* White text on secondary */
  --muted: #f1f5f9; /* Muted background */
  --muted-foreground: #475569; /* Muted text */
  --accent: #ef4444; /* Rojo accent */
  --accent-foreground: #ffffff; /* White text on accent */
  --destructive: #dc2626; /* Red destructive */
  --destructive-foreground: #ffffff; /* White text on destructive */
  --border: #e5e7eb; /* Light border */
  --input: #f1f5f9; /* Input background */
  --ring: rgba(0, 0, 0, 0.1); /* Focus ring */
  --sidebar: #f1f5f9; /* Sidebar background */
  --sidebar-foreground: #475569; /* Sidebar text */
  --sidebar-primary: #dc2626; /* Sidebar primary rojo */
  --sidebar-primary-foreground: #ffffff; /* Sidebar primary text */
  --sidebar-accent: #ef4444; /* Sidebar accent rojo */
  --sidebar-accent-foreground: #ffffff; /* Sidebar accent text */
  --sidebar-border: #e5e7eb; /* Sidebar border */
  --sidebar-ring: rgba(0, 0, 0, 0.1); /* Sidebar focus ring */

  /* Gradient colors for spotlights - Red Theme */
  --gradient-light-1: #dc2626; /* Rojo intenso */
  --gradient-light-2: #ef4444; /* Rojo accent */
}

.light {
  /* Connected Roots Light Mode Colors - Red Theme */
  --background: #ffffff; /* Pure white */
  --foreground: #475569; /* Slate gray text */
  --card: #f1f5f9; /* Light gray card background */
  --card-foreground: #dc2626; /* Rojo intenso card text */
  --popover: rgba(255, 255, 255, 0.9); /* Popover background */
  --popover-foreground: #475569; /* Popover text */
  --primary: #dc2626; /* Rojo intenso primary */
  --primary-foreground: #ffffff; /* White text on primary */
  --secondary: #ef4444; /* Rojo accent */
  --secondary-foreground: #ffffff; /* White text on secondary */
  --muted: #f1f5f9; /* Muted background */
  --muted-foreground: #475569; /* Muted text */
  --accent: #ef4444; /* Rojo accent */
  --accent-foreground: #ffffff; /* White text on accent */
  --destructive: #dc2626; /* Red destructive */
  --destructive-foreground: #ffffff; /* White text on destructive */
  --border: #e5e7eb; /* Light border */
  --input: #f1f5f9; /* Input background */
  --ring: rgba(0, 0, 0, 0.1); /* Focus ring */
  --sidebar: #f1f5f9; /* Sidebar background */
  --sidebar-foreground: #475569; /* Sidebar text */
  --sidebar-primary: #dc2626; /* Sidebar primary rojo */
  --sidebar-primary-foreground: #ffffff; /* Sidebar primary text */
  --sidebar-accent: #ef4444; /* Sidebar accent rojo */
  --sidebar-accent-foreground: #ffffff; /* Sidebar accent text */
  --sidebar-border: #e5e7eb; /* Sidebar border */
  --sidebar-ring: rgba(0, 0, 0, 0.1); /* Sidebar focus ring */

  /* Gradient colors for spotlights - Red Theme */
  --gradient-light-1: #dc2626; /* Rojo intenso */
  --gradient-light-2: #ef4444; /* Rojo accent */
}

.dark {
  /* Connected Roots Dark Mode Colors - Red Theme */
  --background: #0f172a; /* Dark slate background */
  --foreground: #f1f5f9; /* Light text */
  --card: rgba(30, 41, 59, 0.8); /* Dark glassmorphic card */
  --card-foreground: #f1f5f9; /* Light card text */
  --popover: rgba(30, 41, 59, 0.9); /* Dark popover */
  --popover-foreground: #f1f5f9; /* Light popover text */
  --primary: #dc2626; /* Rojo intenso primary */
  --primary-foreground: #ffffff; /* White text on primary */
  --secondary: #1e293b; /* Dark secondary */
  --secondary-foreground: #f1f5f9; /* Light text on secondary */
  --muted: #334155; /* Dark muted */
  --muted-foreground: #94a3b8; /* Light muted text */
  --accent: #ef4444; /* Rojo accent */
  --accent-foreground: #ffffff; /* White text on accent */
  --destructive: #dc2626; /* Red destructive */
  --destructive-foreground: #f1f5f9; /* Light text on destructive */
  --border: rgba(71, 85, 105, 0.3); /* Dark border */
  --input: #334155; /* Dark input */
  --ring: rgba(239, 68, 68, 0.3); /* Rojo focus ring */
  --sidebar: rgba(30, 41, 59, 0.8); /* Dark sidebar */
  --sidebar-foreground: #f1f5f9; /* Light sidebar text */
  --sidebar-primary: #dc2626; /* Rojo intenso sidebar primary */
  --sidebar-primary-foreground: #ffffff; /* White sidebar primary text */
  --sidebar-accent: #ef4444; /* Rojo sidebar accent */
  --sidebar-accent-foreground: #ffffff; /* White sidebar accent text */
  --sidebar-border: rgba(71, 85, 105, 0.3); /* Dark sidebar border */
  --sidebar-ring: rgba(239, 68, 68, 0.3); /* Rojo sidebar focus ring */

  /* Gradient colors for spotlights - Red Theme */
  --gradient-dark-1: #dc2626; /* Rojo intenso */
  --gradient-dark-2: #ef4444; /* Rojo accent */
}

/* NUEVO: Tema Blanco y Negro */
.theme-bw {
  /* Tema Blanco y Negro */
  --background: #ffffff;
  --foreground: #000000;
  --card: #f8f9fa;
  --card-foreground: #000000;
  --popover: rgba(255, 255, 255, 0.95);
  --popover-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #6c757d;
  --secondary-foreground: #ffffff;
  --muted: #f8f9fa;
  --muted-foreground: #6c757d;
  --accent: #000000;
  --accent-foreground: #ffffff;
  --destructive: #000000;
  --destructive-foreground: #ffffff;
  --border: #dee2e6;
  --input: #f8f9fa;
  --ring: rgba(0, 0, 0, 0.2);
  --sidebar: #f8f9fa;
  --sidebar-foreground: #000000;
  --sidebar-primary: #000000;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #000000;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #dee2e6;
  --sidebar-ring: rgba(0, 0, 0, 0.2);
  --gradient-light-1: #000000;
  --gradient-light-2: #6c757d;
}

/* NUEVO: Tema Blanco y Negro Invertido */
.theme-bw-inverted {
  /* Tema Negro y Blanco */
  --background: #000000;
  --foreground: #ffffff;
  --card: #212529;
  --card-foreground: #ffffff;
  --popover: rgba(33, 37, 41, 0.95);
  --popover-foreground: #ffffff;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #6c757d;
  --secondary-foreground: #ffffff;
  --muted: #212529;
  --muted-foreground: #adb5bd;
  --accent: #ffffff;
  --accent-foreground: #000000;
  --destructive: #ffffff;
  --destructive-foreground: #000000;
  --border: #495057;
  --input: #212529;
  --ring: rgba(255, 255, 255, 0.2);
  --sidebar: #212529;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #ffffff;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #495057;
  --sidebar-ring: rgba(255, 255, 255, 0.2);
  --gradient-light-1: #ffffff;
  --gradient-light-2: #adb5bd;
}

/* Font families */
.font-sans {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.font-serif {
  font-family: "Source Serif Pro", ui-serif, Georgia, serif;
}

/* Color utilities */
.bg-background {
  background-color: var(--background);
}
.bg-foreground {
  background-color: var(--foreground);
}
.bg-card {
  background-color: var(--card);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-muted {
  background-color: var(--muted);
}
.bg-accent {
  background-color: var(--accent);
}
.bg-sidebar-accent {
  background-color: var(--sidebar-accent);
}

.text-background {
  color: var(--background);
}
.text-foreground {
  color: var(--foreground);
}
.text-card-foreground {
  color: var(--card-foreground);
}
.text-primary-foreground {
  color: var(--primary-foreground);
}
.text-secondary-foreground {
  color: var(--secondary-foreground);
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-accent {
  color: var(--accent);
}
.text-accent-foreground {
  color: var(--accent-foreground);
}
.text-sidebar-accent {
  color: var(--sidebar-accent);
}

.border-border {
  border-color: var(--border);
}

/* Enhanced glassmorphism with better backdrop effects and shadows */
.glass {
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Gradient spotlight effects - Red Theme */
.gradient-spotlight-light {
  background: linear-gradient(135deg, var(--gradient-light-1) 0%, var(--gradient-light-2) 100%);
  opacity: 0.15;
}

.gradient-spotlight-dark {
  background: linear-gradient(135deg, var(--gradient-dark-1) 0%, var(--gradient-dark-2) 100%);
  opacity: 0.15;
}

/* Smooth transitions */
.transition-theme {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Enhanced animation utilities with more sophisticated effects */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-700 {
  animation-delay: 0.7s;
}

.delay-1000 {
  animation-delay: 1s;
}

/* Enhanced hover effects with more sophisticated transforms and shadows */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:bg-accent\/90:hover {
  background-color: color-mix(in srgb, var(--accent) 90%, transparent);
}

.hover\:bg-muted:hover {
  background-color: var(--muted);
}

.hover-lift {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px
    rgba(255, 255, 255, 0.05);
}

/* Enhanced group hover effects for better interactivity */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:text-accent {
  color: var(--accent);
}

.group:hover .group-hover\:text-sidebar-accent {
  color: var(--sidebar-accent);
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

/* Enhanced responsive utilities for better mobile experience */
@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
  .md\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
  .lg\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }
  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* Enhanced category filter styles with better visual feedback - Red Theme */
.category-filter {
  @apply px-6 py-3 rounded-full text-sm font-serif font-medium transition-all duration-300;
  background-color: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.category-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.category-filter:hover::before {
  left: 100%;
}

.category-filter:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}

.category-filter.active {
  background-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

/* Additional utility classes for modern design */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.drop-shadow-lg {
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}

.leading-tight {
  line-height: 1.25;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.uppercase {
  text-transform: uppercase;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

/* Form input styles */
.input-base {
  background-color: var(--input);
  border-color: var(--border);
  color: var(--foreground);
}

.input-base::placeholder {
  color: var(--muted-foreground);
}

.input-base:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

.input-base:hover {
  border-color: var(--accent);
}

/* Clase para checkboxes */
.checkbox-base {
  background-color: var(--input);
  border-color: var(--border);
  color: var(--accent);
}

.checkbox-base:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.checkbox-base:focus {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

/* Clase para selects */
.select-base {
  background-color: var(--input);
  border-color: var(--border);
  color: var(--foreground);
}

.select-base:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Clase para textareas */
.textarea-base {
  background-color: var(--input);
  border-color: var(--border);
  color: var(--foreground);
  resize: vertical;
}

.textarea-base::placeholder {
  color: var(--muted-foreground);
}

.textarea-base:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

.tags-container {
    min-height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    margin-top: 5px;
    background: #f9f9f9;
}

.tag {
    display: inline-block;
    background: #dc2626;
    color: white;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    font-size: 12px;
}

.remove-tag {
    background: none;
    border: none;
    color: white;
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
}

.remove-tag:hover {
    color: #ffcccc;
}

.image-input-group {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

.btn-remove-image {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

.btn-remove-image:hover {
    background: #c82333;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.image-gallery img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.main-image {
    border-color: #dc2626 !important;
    box-shadow: 0 0 10px rgba(220,38,38,0.3);
}

.btn-purple {
    background: #dc2626;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-purple:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* NUEVO: Estilos para el selector de tema */
.theme-selector {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.theme-button {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  padding: 8px 16px;
  margin: 0 2px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.theme-button.active {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Mejoras responsive para el calendario */
@media (max-width: 640px) {
    .calendar-day {
        font-size: 0.75rem;
    }
    
    .calendar-day .text-xs {
        font-size: 0.625rem;
    }
    
    /* Para eventos en el calendario */
    .calendar-day .bg-gradient-to-r {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }
    
    .theme-selector {
        position: relative;
        top: auto;
        right: auto;
        margin: 10px 0;
        text-align: center;
    }
    
    .theme-button {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    #calendarGrid {
        gap: 1px;
    }
    
    .calendar-day {
        min-height: 3rem;
        padding: 0.25rem;
    }
}

/* Estilos para los filtros */
.filter-container {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.filter-active {
    box-shadow: 0 0 0 2px rgba(var(--accent), 0.3);
    background: rgba(var(--accent), 0.05);
}

/* Animaciones para los filtros */
select {
    transition: all 0.3s ease;
}

select:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Indicador de filtro activo */
.filter-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--background);
}