/* agenda-style.css */

:root {
  /* Paleta de Colores extraída de Tailwind */
  --color-primary: #0346f6;
  --color-secondary: #7803f6;
  --color-text-main: #000000;
  --color-text-muted: #4b5563; /* gray-600 */
  --color-bg-body-start: #eff6ff; /* blue-50 */
  --color-bg-body-mid: #ffffff;
  --color-bg-body-end: #faf5ff; /* purple-50 */

  /* Colores de Tarjetas (Tipos de evento) */
  --card-keynote-bg: #eff6ff;
  --card-keynote-border: #bfdbfe;

  --card-panel-bg: #faf5ff;
  --card-panel-border: #e9d5ff;

  --card-workshop-bg: #f0fdf4;
  --card-workshop-border: #bbf7d0;

  --card-break-bg: #f9fafb;
  --card-break-border: #e5e7eb;

  --card-networking-bg: #fff7ed;
  --card-networking-border: #fed7aa;

  /* Espaciado y Fuentes */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --container-width: 128rem; /* 80rem * 1.6 = 128rem (para base 10px) */
  --spacing-base: 1.6rem;
}

/* Reset básico y Globales */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: #ffffff;
  min-height: 100vh;
  /* El padding-top original se mantiene para el navbar fixed */
  padding-top: 9vh;
  font-size: 16px;
  color: var(--color-text-main);
}

/* Utility Class para contenedores */
.container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Tablet: 640px - 1024px */
@media (min-width: 640px) {
  .container {
    width: 85%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Desktop: 1025px+ */
@media (min-width: 1025px) {
  .container {
    width: 80%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* --- Hero Section --- */
.hero-section {
  background: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-secondary)
  );
  color: white;
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
  text-align: center;
}

/* Alias for new markup using .hero */
.hero {
  background: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-secondary)
  );
  color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
}

.hero-title {
  font-size: 3.2rem; /* Adjusted for mobile */
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 4.8rem;
  }
}

.hero-subtitle {
  font-size: 1.6rem; /* Adjusted for mobile */
  color: #dbeafe;
  margin-bottom: 3.2rem;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 2rem;
  }
}

/* --- Main Content Area --- */
.agenda-main {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

/* Alias for .main-content */
.main-content {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

/* --- Tabs --- */
.tabs-list {
  display: flex;
  gap: 0.8rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 3.2rem;
  overflow-x: auto; /* Scrollable on small devices */
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}
.tabs-list::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

.tabs-trigger {
  background: none;
  border: none;
  padding: 0.8rem 1.6rem;
  font-size: 1.8rem;
  color: var(--color-text-muted);
  border-radius: 0.8rem 0.8rem 0 0;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.tabs-trigger:hover {
  color: var(--color-text-main);
  background-color: #f9fafb;
}

/* Estado Activo de Tabs (Manteniendo la lógica original) */
.tabs-trigger[data-state="active"] {
  color: #2563eb; /* text-blue-600 */
  border-bottom: 2px solid #2563eb;
  font-weight: 600;
}

@media (min-width: 768px) {
  .tabs-trigger {
    font-size: 2.8rem;
    padding: 1.2rem 2.4rem;
  }
}

.tab-content {
  display: none;
  opacity: 0;
  animation: fadeInSmooth 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tab-content.active {
  display: block;
  opacity: 1;
  animation: fadeInSmooth 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.day-title {
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
  color: var(--color-text-main);
  font-weight: 700;
}

@media (min-width: 768px) {
  .day-title {
    font-size: 3.6rem;
  }
}

.agenda-items-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 */
}

/* Alias for .day-items used in markup */
.day-items {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* --- Agenda Card (Componente generado por JS) --- */
.agenda-card {
  border-left-width: 4px;
  border-left-style: solid;
  padding: 1.6rem; /* Reduced for mobile */
  border-radius: 0.8rem;
  transition: box-shadow 0.3s ease;
  background-color: white;
}

@media (min-width: 768px) {
  .agenda-card {
    padding: 2.4rem;
  }
}

.agenda-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Variantes de color de las tarjetas */
.agenda-card--keynote {
  background-color: var(--card-keynote-bg);
  border-left-color: var(--card-keynote-border);
}
.agenda-card--panel {
  background-color: var(--card-panel-bg);
  border-left-color: var(--card-panel-border);
}
.agenda-card--workshop {
  background-color: var(--card-workshop-bg);
  border-left-color: var(--card-workshop-border);
}
.agenda-card--break {
  background-color: var(--card-break-bg);
  border-left-color: var(--card-break-border);
}
.agenda-card--networking {
  background-color: var(--card-networking-bg);
  border-left-color: var(--card-networking-border);
}

/* Layout interno de la tarjeta */
.card-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Alias for .agenda-row */
.agenda-row {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (min-width: 768px) {
  .agenda-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .card-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
}

.card-time-column {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .card-time-column {
    width: 12.8rem; /* 8rem * 1.6 */
  }
}

.time-display {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem; /* 0.875rem * 1.6 = 1.4rem */
  font-weight: 600;
  color: #374151; /* gray-700 */
}

/* Alias for .time-inner and .time-text used in markup */
.time-inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #374151;
}
.time-text {
  line-height: 1.2;
}

@media (min-width: 768px) {
  .time-text {
    line-height: 1.1;
  }
}

/* Alias for .agenda-time and .agenda-content */
.agenda-time {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .agenda-time {
    width: 12.8rem;
  }
}
.agenda-content {
  flex: 1;
}

/* Alias for card title/description naming used in markup */
.agenda-title {
  font-size: 1.8rem;
  margin: 0 0 0.8rem 0;
  font-weight: 600;
}

@media (min-width: 768px) {
  .agenda-title {
    font-size: 2rem;
  }
}
.agenda-desc {
  color: var(--color-text-muted);
  margin: 0 0 1.2rem 0;
  line-height: 1.5;
}

.agenda-meta {
  display: flex;
  flex-direction: column; /* Stack on mobile */
  gap: 0.8rem;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  margin-top: 1.2rem;
}

@media (min-width: 640px) {
  .agenda-meta {
    flex-direction: row; /* Row on larger screens */
    flex-wrap: wrap;
    gap: 1.6rem;
  }
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Icon alias */
.icon,
.lucide {
  width: 1.6rem;
  height: 1.6rem;
}

.card-info-column {
  flex: 1;
}

.card-title {
  font-size: 2rem; /* text-xl scaled */
  margin: 0 0 0.8rem 0;
  font-weight: 600;
}

.card-description {
  color: var(--color-text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: 1.4rem;
  color: var(--color-text-muted);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Animaciones Helper */
@keyframes fadeInSmooth {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Salida suave al ocultar */
@keyframes fadeOutSmooth {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Icon size overrides for JS injected icons */
.lucide {
  width: 1.6rem;
  height: 1.6rem;
}