/**
 * styles.css - Estilos custom para HDC Málaga SPA
 * 
 * CONTEXT: Complementa Tailwind CSS con estilos que no se pueden
 * hacer inline o que requieren pseudo-elements/animations.
 * El design system base es "machina_dark" (DESIGN.md).
 */

/* ============================================================
   BASE
   ============================================================ */
body {
  background-color: #0e0e0e;
  color: #ffffff;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Strong tags inside variant-colored text should stand out */
.text-on-surface-variant strong {
  color: #ffffff;
}

/* ============================================================
   SCROLLBAR (minimal dark)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0e0e0e;
}
::-webkit-scrollbar-thumb {
  background: #484847;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #767575;
}

/* ============================================================
   NO SCROLLBAR (horizontal carousels)
   ============================================================ */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================================
   GLASS EFFECT (navbar, dropdowns)
   ============================================================ */
.glass-effect {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background-color: rgba(14, 14, 14, 0.7);
}

/* ============================================================
   GHOST BORDER (design system requirement)
   ============================================================ */
.ghost-border {
  border: 1px solid rgba(72, 72, 71, 0.15);
}

/* ============================================================
   TIMELINE GRADIENT LINE
   ============================================================ */
.timeline-gradient {
  background: linear-gradient(to bottom, transparent, #FF6600, #FF6600, transparent);
}

/* ============================================================
   VIEW TRANSITIONS
   ============================================================ */
.view-active {
  animation: viewFadeIn 0.3s ease-out;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   GOOGLE TRANSLATE OVERRIDE (hide default widget)
   ============================================================ */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-te-gadget {
  font-size: 0 !important;
}

/* ============================================================
   CONNECTION BANNER
   ============================================================ */
#connection-banner {
  background: linear-gradient(90deg, rgba(249, 100, 0, 0.15), rgba(249, 100, 0, 0.05));
  border-bottom: 1px solid rgba(249, 100, 0, 0.2);
  color: #ff915d;
}

/* ============================================================
   HERO IMAGE OVERLAY
   ============================================================ */
.hero-overlay {
  background: linear-gradient(to top, #0e0e0e, rgba(14, 14, 14, 0.4), transparent);
}

/* ============================================================
   BOTTOM NAV SAFE AREA (iOS)
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
.events-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

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

/* ============================================================
   LANGUAGE DROPDOWN
   ============================================================ */
.lang-dropdown-enter {
  animation: dropdownIn 0.2s ease-out;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background-color: #ff915d;
  color: #541d00;
}

/* ============================================================
   CRUD MODAL — date/select inputs dark theme
   ============================================================ */
#crud-form input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#crud-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

#crud-form select {
  appearance: auto;
}