/* Reset + base */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Visible solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* Con el modal de detalle de actividad abierto, el contenido de fondo no
   debe poder hacer scroll (el modal ya tiene su propio scroll interno). */
body.modal-open {
  overflow: hidden;
}

/* Sin esto, un elemento con `hidden` y una clase que fija `display` (ej.
   .state-block { display: flex }) queda visible: misma especificidad que
   el `[hidden] { display: none }` del navegador, y la regla de la clase
   gana por venir después en la cascada. */
[hidden] {
  display: none !important;
}

/* ============ App shell ============
   Mobile (por defecto): header simple arriba + tab bar fija abajo (4 tabs).
   Desktop (>=900px): sidebar fija a la izquierda con la navegación, sin tab
   bar inferior. */

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Dos filas: la marca (alto fijo) y, debajo, el selector de día — ambas
   dentro del mismo header pegajoso, así el selector de día queda "al mismo
   nivel" que el logo/nombre en vez de vivir metido en el contenido de la
   vista Cronograma (donde se perdía al hacer scroll). */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.app-header-top {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}

.app-header .day-tabs-mini {
  padding: 0 var(--gutter) 12px;
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.app-header .brand img {
  height: 22px;
  width: auto;
}

.app-header .event-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Botón para overridear el tema del sistema a mano (ver
   js/theme-toggle.js). Vive pegado a la marca porque es la única fila que
   ya se repite igual en el header móvil y en el sidebar de escritorio, así
   que agregarlo ahí lo pone en los dos lugares con una sola marca en el
   HTML. `margin-left: auto` lo empuja al extremo derecho de esa fila. */
.theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle-icon-sun {
  display: none;
}

.theme-toggle.is-dark .theme-toggle-icon-sun {
  display: block;
}

.theme-toggle.is-dark .theme-toggle-icon-moon {
  display: none;
}

.main-view {
  flex: 1;
  width: 100%;
  padding-bottom: calc(var(--tabbar-height) + 16px);
}

.view {
  display: none;
  padding: 20px var(--gutter) 32px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* Cambiar de pestaña ya no es un corte seco: la vista entrante se funde en
   vez de aparecer de golpe. Es un fundido simple (no un spring) a propósito:
   cambiar de tab es una navegación que el usuario confirma con un tap, no
   un gesto en vivo que haya que poder interrumpir a medio camino. */
.view.is-active {
  display: block;
  animation: view-fade-in 180ms ease-out;
}

@keyframes view-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============ Tab bar (mobile) ============ */

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--tabbar-height);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gray-400);
  transition: color var(--dur-fast) var(--ease-out);
}

.tab-item svg {
  width: 22px;
  height: 22px;
}

.tab-item.is-active {
  color: var(--color-text);
}

/* Acento de color por sección: el ícono siempre lleva el color de marca de
   su vista (mismo trío teal/purple/orange que ya usa el resto de la app
   para Tipo/facultad), activo o no. Es la forma de meter color real y con
   intención en la navegación sin gradientes ni glows — y como son los
   colores fijos de marca (no tokens de tema), no hace falta nada especial
   para que funcionen igual en modo oscuro. */
.tab-item[data-tab-target="cronograma"] svg,
.sidebar-item[data-tab-target="cronograma"] svg {
  color: var(--ucal-teal);
}

.tab-item[data-tab-target="stands"] svg,
.sidebar-item[data-tab-target="stands"] svg {
  color: var(--ucal-orange);
}

.tab-item[data-tab-target="encuesta"] svg,
.sidebar-item[data-tab-target="encuesta"] svg {
  color: var(--ucal-purple);
}

.tab-item .tab-dot {
  position: absolute;
  transform: translate(10px, -10px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ucal-pink);
  border: 2px solid var(--color-bg);
}

/* ============ Sidebar (desktop) ============ */

.sidebar {
  display: none;
}

@media (min-width: 900px) {
  #app {
    flex-direction: row;
  }

  .app-header {
    display: none;
  }

  .tab-bar {
    display: none;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    flex-shrink: 0;
    height: 100dvh;
    position: sticky;
    top: 0;
    padding: 28px 20px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    gap: 32px;
  }

  .sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
  }

  .sidebar .brand img {
    height: 26px;
    width: auto;
  }

  .sidebar .event-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Mismo bloque que el header móvil, pero el gap normal del sidebar
     (32px) ya le da suficiente aire arriba y abajo: no necesita padding
     propio, solo alinear los bordes con el logo. */
  .sidebar .day-tabs-mini {
    padding: 0 4px;
    margin-top: -16px;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .sidebar-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .sidebar-item:hover {
    background: var(--color-surface);
  }

  .sidebar-item.is-active {
    background: var(--color-text);
    color: var(--color-bg);
  }

  .sidebar-footer {
    margin-top: auto;
    font-size: 12px;
    color: var(--gray-400);
    padding: 0 4px;
    line-height: 1.5;
  }

  .main-view {
    padding-bottom: 40px;
  }

  .view {
    padding: 40px 40px 40px;
    max-width: 880px;
  }
}