/* ============================================================
   MME — MTY MUSIC EXPO
   Diseño: identidad de marca, mobile-first, iOS/Android
   ============================================================ */

/* ── Variables de marca ── */
:root {
  /* Colores oficiales del evento */
  --blue:   #1A47FF;
  --pink:   #FF2A8B;
  --green:  #AAFF00;
  --purple: #7030FF;
  --cyan:   #00D4FF;

  /* Sistema de fondo oscuro */
  --bg:        #000000;
  --surface:   #111111;
  --surface-2: #1A1A1A;
  --surface-3: #242424;
  --border:    #1C1C1C;
  --border-2:  #2A2A2A;

  /* Texto */
  --text:   #FFFFFF;
  --text-2: #AAAAAA;
  --text-3: #555555;

  /* Colores y texto por zona */
  /* Un color por pasillo, igual que en el plano del recinto */
  --za-bg:   #00A8E8;  --za-fg: #FFFFFF;   /* Do  · azul    */
  --zb-bg:   #7030FF;  --zb-fg: #FFFFFF;   /* Re  · morado  */
  --zc-bg:   #AAFF00;  --zc-fg: #000000;   /* Mi  · verde   */
  --zd-bg:   #FF9F1C;  --zd-fg: #000000;   /* Fa  · naranja */
  --zf-bg:   #C1553B;  --zf-fg: #FFFFFF;   /* Sol · café    */
  --ze-bg:   #FF2A8B;  --ze-fg: #FFFFFF;   /* EAW · rosa    */

  /* Layout */
  --header-h: 80px;   /* fila logo (52px) + ticker (28px) */
  --nav-h:    72px;

  /* Tipografía */
  --display: 'Bebas Neue', Impact, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:    14px;
  --radius-sm: 8px;
  --tap:       44px;
}

/* ── Reset base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* sin zoom por doble tap: se siente app nativa */
}

/* iOS hace zoom automático al tocar campos con letra menor a 16px — se evita así */
input, textarea, select { font-size: 16px !important; }

html { font-size: 16px; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
}

/* Fila superior: logo + fecha */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
}

.header-brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.header-mme {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--text);
}

.header-full {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;   /* con el reloj al lado, no debe partirse en varias líneas */
}

/* En pantallas muy angostas (iPhone SE) se apreta un poco todo
   para que fecha, hora y nombre quepan en un solo renglón */
@media (max-width: 359px) {
  .header-full   { font-size: 0.5rem; letter-spacing: 0.8px; }
  .header-date   { font-size: 0.62rem; padding: 4px 8px; gap: 5px; }
  .header-date .header-time { padding-left: 5px; }
  /* el nombre cede espacio antes que la píldora, y nunca se le encima */
  .header-brand  { min-width: 0; margin-right: 8px; }
  .header-full   { overflow: hidden; text-overflow: ellipsis; }
}

.header-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;        /* la hora nunca se corta: cede el nombre de al lado */
}

/* Separador entre la fecha y la hora */
.header-date .header-time {
  position: relative;
  padding-left: 7px;
  font-variant-numeric: tabular-nums;   /* no "brinca" al cambiar de minuto */
  color: var(--text-1);
  font-weight: 700;
}

.header-date .header-time::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background: var(--border-2);
}

/* Ticker animado — muestra plática actual/siguiente */
.ticker-strip {
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--blue);
  padding: 0 12px;
  gap: 8px;
  overflow: hidden;
}

.ticker-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker-overflow {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  animation: tickerScroll 28s linear infinite;
}

@keyframes tickerScroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ============================================================
   MAIN
   ============================================================ */
.app-main {
  padding-top: var(--header-h);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
}

.tab-panel { animation: fadeUp 0.2s ease; }

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

/* ============================================================
   HERO BANNER
   ============================================================ */
.hero-banner {
  position: relative;
  overflow: hidden;
}

.hero-img {
  display: block;
  width: 100%;
  height: 205px;
  object-fit: contain;
  background: #000;
  padding: 14px 18px;
}

/* Pill de estado "En vivo" sobre el hero */
.hero-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #fff;
}

.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF3B30;
  animation: blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.75); }
}

/* ============================================================
   PRÓXIMA PLÁTICA (card bajo el hero)
   ============================================================ */
#nextTalkCard {
  margin: 0 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.next-talk-inner {
  background: linear-gradient(125deg, #1A47FF 0%, #7030FF 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.next-talk-inner:active { opacity: 0.85; }

.next-talk-left { flex: 1; min-width: 0; }

.next-talk-eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2px;
}

.next-talk-time {
  font-family: var(--display);
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
}

.next-talk-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.next-talk-speaker {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
}

.next-talk-arrow {
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* ============================================================
   SEARCH STICKY + ZONE CHIPS
   ============================================================ */
.search-sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--bg);
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 0 12px;
  height: 44px;
  transition: border-color 0.2s;
}

.search-bar:focus-within { border-color: var(--blue); }

.search-bar svg {
  width: 16px; height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--text);
  caret-color: var(--blue);
}

#searchInput::placeholder { color: var(--text-3); }

.search-clear {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.82rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.search-clear.visible { opacity: 1; }

/* Chips de zona — scroll horizontal */
.zone-chips {
  display: flex;
  gap: 6px;
  padding: 10px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.zone-chips::-webkit-scrollbar { display: none; }

.zone-chip {
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 16px;
  height: var(--tap);
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

/* Estado activo según zona */
.zone-chip[data-zone=""].active  { background: var(--surface-3); border-color: var(--text-3); color: var(--text); }
.zone-chip[data-zone="Do"].active  { background: var(--za-bg); border-color: var(--za-bg); color: var(--za-fg); }
.zone-chip[data-zone="Re"].active  { background: var(--zb-bg); border-color: var(--zb-bg); color: var(--zb-fg); }
.zone-chip[data-zone="Mi"].active  { background: var(--zc-bg); border-color: var(--zc-bg); color: var(--zc-fg); }
.zone-chip[data-zone="Fa"].active  { background: var(--zd-bg); border-color: var(--zd-bg); color: var(--zd-fg); }
.zone-chip[data-zone="Sol"].active { background: var(--zf-bg); border-color: var(--zf-bg); color: var(--zf-fg); }
.zone-chip[data-zone="EAW"].active { background: var(--ze-bg); border-color: var(--ze-bg); color: var(--ze-fg); }
.zone-chip[data-zone="talk"].active { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ============================================================
   STAND CARDS
   ============================================================ */
#standsContainer { padding: 12px 16px 4px; }

/* Separador de grupo/zona */
.stands-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--text-3);
  margin: 16px 0 8px;
}

.stands-group-label:first-child { margin-top: 4px; }

.group-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stands-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Colores del dot por zona */
.stands-group-label[data-zone="Do"]  .group-dot { background: var(--za-bg); }
.stands-group-label[data-zone="Re"]  .group-dot { background: var(--zb-bg); }
.stands-group-label[data-zone="Mi"]  .group-dot { background: var(--zc-bg); }
.stands-group-label[data-zone="Fa"]  .group-dot { background: var(--zd-bg); }
.stands-group-label[data-zone="Sol"] .group-dot { background: var(--zf-bg); }
.stands-group-label[data-zone="EAW"] .group-dot { background: var(--ze-bg); }

/* Tarjeta de stand — stripe izquierdo via CSS vars del data-zone */
.stand-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: inset 4px 0 0 var(--zone-color, var(--border-2));
  min-height: 72px;
  -webkit-user-select: none;
  user-select: none;
}

.stand-card:active { background: var(--surface-2); transform: scale(0.985); }

/* Hereda color y texto de la zona */
.stand-card[data-zone="Do"]  { --zone-color: var(--za-bg); --zone-fg: var(--za-fg); }
.stand-card[data-zone="Re"]  { --zone-color: var(--zb-bg); --zone-fg: var(--zb-fg); }
.stand-card[data-zone="Mi"]  { --zone-color: var(--zc-bg); --zone-fg: var(--zc-fg); }
.stand-card[data-zone="Fa"]  { --zone-color: var(--zd-bg); --zone-fg: var(--zd-fg); }
.stand-card[data-zone="Sol"] { --zone-color: var(--zf-bg); --zone-fg: var(--zf-fg); }
.stand-card[data-zone="EAW"] { --zone-color: var(--ze-bg); --zone-fg: var(--ze-fg); }

/* Número de stand (grande, en color de zona) */
.stand-num {
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--zone-color, var(--text-3));
  line-height: 1;
  min-width: 50px;
  text-align: center;
}

.stand-info { flex: 1; min-width: 0; }

/* Logo de la marca en la tarjeta (opcional). Va en blanco y directo sobre el
   fondo oscuro, sin placa: así todas las marcas se ven parejas. */
.stand-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.stand-logo {
  width: 72px;
  height: 44px;
  object-fit: contain;
}

/* Cuando el stand lo comparten dos marcas, los dos logos se reparten el hueco */
.stand-logos img + img,
.stand-logos:has(img + img) img { width: 46px; }

.stand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stand-cat {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 2px;
}

.stand-tags {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-zone {
  background: var(--zone-color, var(--surface-3));
  color: var(--zone-fg, var(--text-2));
}

.tag-talk {
  background: rgba(112, 48, 255, 0.2);
  color: #B388FF;
  border: 1px solid rgba(112, 48, 255, 0.3);
}

.stand-arrow { color: var(--text-3); flex-shrink: 0; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-3);
}

.empty-state svg {
  width: 44px; height: 44px;
  display: block;
  margin: 0 auto 12px;
  opacity: 0.3;
}

.empty-state p { font-size: 0.9rem; line-height: 1.65; }
.empty-state strong { color: var(--text-2); }

/* ============================================================
   SECCIÓN HEROES (Pláticas y Mapa)
   ============================================================ */
.section-hero {
  padding: 28px 16px 20px;
  border-bottom: 1px solid var(--border);
}

.section-hero-title {
  font-family: var(--display);
  font-size: 4rem;
  line-height: 0.9;
  letter-spacing: 2px;
}

.section-hero-sub {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 6px;
}

.platicas-hero .section-hero-title { color: var(--pink); }
.mapa-hero    .section-hero-title { color: var(--green); }

/* ============================================================
   FILTROS (Pláticas)
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 18px;
  height: var(--tap);
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* Color por escenario: GBA rosa (default), EAW cian */
.filter-btn[data-filter="EAW"].active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #000;
}

/* ============================================================
   TALK CARDS (Pláticas)
   ============================================================ */
#platicasContainer { padding: 10px 16px 24px; }

/* El programa como línea de tiempo: un riel continuo con un punto por
   actividad. Antes era una tarjeta con la hora en su propia columna, que se
   leía como tabla en vez de como el hilo del día. */
.talk-item {
  position: relative;
  padding: 0 0 18px 30px;
}

/* El riel. Cada actividad pinta su tramo y juntos forman una línea seguida;
   la primera empieza en su punto y la última termina en el suyo, para que la
   línea no sobresalga por arriba ni por abajo. */
.talk-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-2);
}

.talk-item:first-child::before { top: 16px; }
.talk-item:last-child::before  { bottom: auto; height: 16px; }

/* El punto, en el color de su escenario */
.talk-dot {
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--pink);
}

.talk-item[data-esc="EAW"] .talk-dot { border-color: var(--cyan); }

.talk-body {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.3s, background 0.3s;
}

.talk-item.highlighted .talk-body {
  border-color: var(--blue);
  background: rgba(26, 71, 255, 0.07);
}

.talk-time {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 5px;
}

.talk-item[data-esc="EAW"] .talk-time { color: var(--cyan); }

/* Inauguración y cierre. Siguen sin contar como actividad en el contador del
   encabezado, pero se ven igual que las demás: atenuarlas se leía como si la
   tarjeta estuviera fallando. */
.talk-item.talk-bloque .talk-title { font-weight: 600; }

.talk-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.talk-speaker {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 3px;
}

.talk-where {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-3);
  background: var(--surface-3);
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 7px;
}

.talk-where svg { width: 10px; height: 10px; flex-shrink: 0; }

/* ============================================================
   MAPA TAB
   ============================================================ */
/* Plano del recinto: fondo blanco porque el plano es sobre blanco */
.map-card {
  position: relative;
  margin: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-2);
  cursor: pointer;
}

.map-img {
  display: block;
  width: 100%;
  height: auto;
}

.map-card:active { opacity: 0.9; }

/* Pista de "toca para ampliar" sobre el plano */
.map-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Visor del plano a pantalla completa ── */
.map-viewer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #fff;
  display: flex;
}

.map-viewer.hidden { display: none !important; }

/* El plano es muy ancho: se deja hacer scroll y zoom con los dedos */
.map-viewer-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.map-viewer-scroll img {
  /* más ancho que la pantalla para que el detalle se lea al hacer scroll */
  width: auto;
  height: auto;
  min-width: 190%;
  max-width: none;
  margin: auto;
}

.map-viewer-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-section-label {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 2.5px;
  color: var(--text-3);
  padding: 0 16px 8px;
}

/* ============================================================
   ZONE CARDS (Mapa)
   ============================================================ */
#zonesContainer { padding: 0 16px 16px; }

.zone-card {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
  cursor: pointer;
  min-height: 68px;
  transition: background 0.15s;
}
.zone-card:active { background: var(--surface-2); }

/* Bloque de color izquierdo con la letra de la zona */
.zone-color-block {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  /* "PASILLO" es más largo que la "A" de antes: se achica para que quepa */
  font-size: 0.88rem;
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* La nota (Do, Re…) sí va grande */
.zone-color-block .zone-nota {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.5px;
}

.zone-card[data-zone="Do"]  .zone-color-block { background: var(--za-bg); color: var(--za-fg); }
.zone-card[data-zone="Re"]  .zone-color-block { background: var(--zb-bg); color: var(--zb-fg); }
.zone-card[data-zone="Mi"]  .zone-color-block { background: var(--zc-bg); color: var(--zc-fg); }
.zone-card[data-zone="Fa"]  .zone-color-block { background: var(--zd-bg); color: var(--zd-fg); }
.zone-card[data-zone="Sol"] .zone-color-block { background: var(--zf-bg); color: var(--zf-fg); }
.zone-card[data-zone="EAW"] .zone-color-block { background: var(--ze-bg); color: var(--ze-fg); }

.zone-card-info {
  flex: 1;
  padding: 0 14px;
}

.zone-card-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.zone-card-count {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 2px;
}

.zone-card-arrow { color: var(--text-3); padding-right: 14px; }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-3);
  font-family: var(--body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding-top: 4px;
  position: relative;
  transition: color 0.15s;
}

.nav-btn svg { width: 22px; height: 22px; }

/* Indicador activo: línea arriba + color azul */
.nav-btn.active {
  color: var(--text);
}

.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--blue);
  border-radius: 0 0 3px 3px;
}

/* ============================================================
   OVERLAY + BOTTOM SHEET
   ============================================================ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 200;
  animation: overlayIn 0.22s ease;
}

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 201;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet-handle-wrap {
  padding: 10px 0 0;
  display: flex;
  justify-content: center;
}

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-2);
  border-radius: 2px;
}

/* El círculo se ve de 36px pero el área que responde al dedo es de 44px
   (el mínimo recomendado): antes fallaba el tap por ser muy chico. */
.sheet-close {
  position: absolute;
  top: 8px; right: 10px;
  z-index: 3;                    /* siempre encima del header de color */
  background: transparent;
  border: none;
  padding: 0;
  width: var(--tap); height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* El círculo visible va dentro, sin achicar el área táctil */
.sheet-close::before {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.15s;
}

.sheet-close svg {
  width: 16px; height: 16px;
  position: relative;            /* sobre el círculo del ::before */
}

.sheet-close:active::before { background: rgba(0, 0, 0, 0.7); }

/* Header del sheet: bloque de color pleno según zona */
.sheet-zone-header {
  padding: 24px 20px 20px;
}

/* Placas con los logos de la marca, arriba del texto de la ficha.
   Van de ancho completo y no en un cuadrito porque casi todos los logos son
   horizontales: dentro de un cuadro quedarían diminutos. Cuando dos marcas
   comparten stand, cada logo lleva su propia placa y se reparten el ancho:
   así una puede ir sobre blanco y la otra sobre negro. */
.sheet-logos {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.sheet-logo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-height: 84px;
}

.sheet-logo img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

/* Otras marcas presentes en el mismo stand */
.sheet-marcas-extra {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 14px;
}

.sheet-marcas-extra strong {
  color: var(--text);
  font-weight: 700;
}

.sheet-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0.65;
  margin-bottom: 8px;
}

.sheet-big-num {
  font-family: var(--display);
  font-size: 5.5rem;
  line-height: 0.85;
  margin-bottom: 8px;
}

.sheet-brand-name {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.sheet-brand-cat {
  font-size: 0.82rem;
  opacity: 0.72;
  margin-top: 3px;
}

/* Cuerpo del sheet */
.sheet-body { padding: 16px 20px; }

.sheet-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.sheet-desc {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* Enlaces del expositor (sitio web / Instagram) */
.sheet-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sheet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--tap);
  max-width: 100%;
}

.sheet-link:active { background: var(--surface-3); }

.sheet-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* El usuario de la marca (@marca) junto al logo */
.sheet-link-user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etiqueta cuando una marca tiene varias cuentas (Escuela, Records…) */
.sheet-link-tag {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  border-left: 1px solid var(--border-2);
  padding-left: 8px;
}

/* Instagram y Facebook con su color de marca */
.sheet-link.ig .sheet-link-icon { color: #E1306C; }
.sheet-link.fb .sheet-link-icon { color: #1877F2; }

/* Aviso de acceso (zona EAW: se entra por otra puerta) */
.sheet-nota {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Bloque de plática dentro del detalle del stand */
.sheet-talk-block {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 10px;
}

.sheet-talk-eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--purple);
  margin-bottom: 5px;
}

.sheet-talk-time {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1;
}

.sheet-talk-title-text {
  font-size: 0.83rem;
  color: var(--text-2);
  margin-top: 3px;
}

/* Botón principal */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: var(--blue);
  color: #fff;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  min-height: var(--tap);
  margin-bottom: 8px;
}
.btn-primary:active { opacity: 0.85; transform: scale(0.99); }

/* Padding extra inferior para safe area en iPhone */
.sheet-safe { height: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   · Hasta 767px  → diseño móvil original (celular)
   · 768–1099px   → iPad: columna de 760px y tarjetas a 2 columnas
   · 1100px+      → laptop: columna de 980px, fondo de marca,
                    stands a 3 columnas y efectos hover
   ============================================================ */

/* ── Teléfonos grandes / landscape: centra la columna ── */
@media (min-width: 480px) {
  .app-header,
  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .app-main {
    max-width: 480px;
    margin: 0 auto;
  }

  .bottom-sheet {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
  }

  .sheet-overlay {
    background: rgba(0,0,0,0.8);
  }
}

/* ── iPad y tablets (768px+) ── */
@media (min-width: 768px) {
  .app-header,
  .bottom-nav {
    width: 760px;
  }

  .app-main {
    max-width: 760px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .hero-img { height: 260px; }

  /* El detalle de stand no necesita ser tan ancho */
  .bottom-sheet {
    width: 540px;
    border-radius: 22px 22px 0 0;
  }

  /* Stands a 2 columnas; el título de zona cruza todo el ancho */
  #standsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 20px 8px;
  }
  .stands-group-label { grid-column: 1 / -1; margin: 12px 0 0; }
  .stand-card { margin-bottom: 0; }

  /* Las conferencias NO van en rejilla: la línea de tiempo se lee de corrido
     hacia abajo. En pantalla ancha solo se limita el ancho de lectura. */
  #platicasContainer {
    max-width: 620px;
    margin: 0 auto;
    padding: 10px 20px 24px;
  }

  /* Zonas del mapa a 2 columnas */
  #zonesContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px 20px;
  }
  .zone-card { margin-bottom: 0; }

  .map-card { margin: 20px; }

  /* Vistas del staff centradas en una columna cómoda de leer */
  .staff-wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 20px;
  }

}

/* ── Laptop / desktop (1100px+): menú lateral + contenido a lo ancho ── */
.nav-side-brand { display: none; }

@media (min-width: 1100px) {
  /* La barra inferior se convierte en MENÚ LATERAL IZQUIERDO */
  .bottom-nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 240px;
    transform: none;
    background: var(--bg);
    border: none;
    border-right: 1px solid var(--border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 22px 14px;
  }

  .nav-inner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding-bottom: 0;
    gap: 4px;
  }

  .nav-side-brand {
    display: block;
    padding: 4px 12px 26px;
  }

  .nav-side-mme {
    display: block;
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--text);
  }

  .nav-side-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-3);
    margin-top: 4px;
  }

  /* Fecha + hora del menú lateral (en laptop sustituye a la del header) */
  .nav-side-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }

  .nav-side-date .nav-side-time {
    position: relative;
    padding-left: 7px;
    color: var(--text-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .nav-side-date .nav-side-time::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: var(--border-2);
  }

  .nav-btn {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    height: 46px;
    border-radius: 10px;
    font-size: 0.88rem;
  }

  .nav-btn svg { width: 19px; height: 19px; }

  .nav-btn.active { background: var(--surface-2); }

  /* Indicador activo: barrita vertical a la izquierda */
  .nav-btn.active::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
  }

  /* Header: solo queda el ticker EN VIVO, a lo ancho del contenido */
  .app-header {
    left: 240px;
    right: 0;
    width: auto;
    transform: none;
    border: none;
  }

  .header-row { display: none; }

  /* Contenido: TODO el ancho restante de la pantalla */
  .app-main {
    margin-left: 240px;
    max-width: none;
    border: none;
    background: var(--bg);
    padding-top: 28px;   /* solo el ticker arriba */
    padding-bottom: 48px;
  }

  .search-sticky { top: 28px; padding: 14px 32px 0; }

  /* El logotipo grande y centrado */
  .hero-img {
    height: 330px;
    padding: 28px 0;
  }

  #nextTalkCard { margin: 0 32px; border-radius: var(--radius); }

  .section-hero { padding: 34px 32px 22px; }
  .section-hero-title { font-size: 5rem; }
  .filter-bar { padding: 14px 32px; }
  .list-section-label { padding: 0 32px 8px; }
  .map-card { margin: 24px 32px; }

  /* Cuadrículas fluidas: el número de columnas se adapta al ancho */
  #standsContainer {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    padding: 16px 32px 12px;
  }

  #platicasContainer {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    padding: 10px 32px 28px;
  }

  #zonesContainer {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 0 32px 28px;
  }

  .staff-wrap { max-width: 680px; margin: 0 auto; padding: 24px 32px; }
  .demo-creds { max-width: 680px; }

  /* Detalle de stand: ventana centrada sobre el área de contenido */
  .bottom-sheet {
    top: 50%;
    left: calc(50% + 120px);
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 580px;
    max-height: 82vh;
    border-radius: 22px;
    animation: modalIn 0.22s ease;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -47%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }

  .sheet-handle-wrap { display: none; }
}

/* ── Hover solo donde hay mouse (laptop), sin afectar táctil ── */
@media (hover: hover) and (pointer: fine) {
  .stand-card:hover,
  .zone-card:hover,
  .talk-body:hover,
  .staff-big-btn:hover { background: var(--surface-2); }

  .stand-card:hover,
  .zone-card:hover,
  .staff-big-btn:hover { border-color: var(--text-3); }

  .nav-btn:hover { color: var(--text-2); }
  .nav-btn.active:hover { color: var(--text); }

  .zone-chip:hover:not(.active),
  .filter-btn:hover:not(.active) { border-color: var(--text-3); color: var(--text); }

  .btn-primary:hover,
  .aviso-publicar:hover { filter: brightness(1.12); }

  .next-talk-inner:hover { opacity: 0.92; }
  .staff-reset-link:hover { color: #FF3355; }
}

/* ============================================================
   TAB STAFF — login, menú y vistas
   ============================================================ */
.staff-hero .section-hero-title { color: var(--purple); }

/* Contenedor con padding de cada vista del tab Staff */
.staff-wrap { padding: 16px; }

/* ── Login usuario/contraseña ── */
.staff-login-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 24px 20px;
  max-width: 360px;
  margin: 8px auto 0;
}

.staff-login-title {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.staff-field-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 12px 0 6px;
}

#staffUserInput,
#staffPassInput {
  width: 100%;
  padding: 13px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--body);
}
#staffUserInput:focus,
#staffPassInput:focus { outline: 2px solid var(--blue); }

.staff-login-error {
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 600;
  margin: 10px 0 0;
}

.staff-login-card .btn-primary { margin-top: 18px; margin-bottom: 0; }

.staff-link {
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--body);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px;
}

/* ── Menú del staff (hub) ── */
.staff-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-2);
  margin-bottom: 14px;
}

.staff-session-row .staff-link { color: var(--pink); padding: 8px 0; }

.staff-big-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.1s;
}
.staff-big-btn:active { background: var(--surface-2); transform: scale(0.985); }

.staff-big-btn[data-accent="purple"] { --acc: var(--purple); }
.staff-big-btn[data-accent="blue"]   { --acc: var(--blue); }

.staff-big-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--acc, var(--surface-3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.staff-big-icon svg { width: 22px; height: 22px; color: #fff; }

.staff-big-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.staff-big-text b {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.staff-big-text span {
  font-size: 0.76rem;
  color: var(--text-2);
}

.staff-big-arrow { color: var(--text-3); flex-shrink: 0; }

/* ── Botón volver dentro de las vistas ── */
.staff-back {
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 14px;
  display: block;
}
.staff-back:active { color: var(--text); }

/* ── Stats ── */
.staff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.staff-stat {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px 6px 10px;
  text-align: center;
}

.staff-stat b {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--text);
}
.staff-stat.used b { color: var(--pink); }
.staff-stat.free b { color: var(--green); }

.staff-stat span {
  display: block;
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Cámara ── */
.staff-video-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--border-2);
  margin-bottom: 10px;
}

#staffVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-frame {
  position: absolute;
  inset: 14%;
  border: 2px solid var(--green);
  border-radius: 14px;
  opacity: 0.85;
  pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.25);
}

.staff-cam-error {
  color: var(--pink);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: -2px 2px 10px;
}

/* ── Resultado del escaneo ── */
.staff-result {
  border-radius: var(--radius);
  padding: 16px 14px;
  margin-bottom: 12px;
  text-align: center;
  animation: staffPop 0.18s ease;
}

@keyframes staffPop {
  from { transform: scale(0.96); opacity: 0.4; }
  to   { transform: scale(1);    opacity: 1; }
}

.staff-result.ok      { background: var(--green); color: #000; }
.staff-result.dup     { background: #FFB020;      color: #000; }
.staff-result.invalid { background: #FF3355;      color: #fff; }

.staff-result-title {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: 1.5px;
  line-height: 1;
}

.staff-result-detail {
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 5px;
  opacity: 0.85;
}

/* ── Aviso a pantalla completa del escaneo ──
   Va fijo sobre todo lo demás para que el resultado se vea aunque la
   página esté scrolleada; en la puerta no hay tiempo de buscarlo. */
.staff-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  animation: staffFlashIn 0.14s ease-out;
  cursor: pointer;
  /* cubre también el área bajo la barra del navegador en celular */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.staff-flash.hidden { display: none; }

.staff-flash.ok      { background: #12B76A; color: #fff; }
.staff-flash.dup     { background: #FFB020; color: #1a1a1a; }
.staff-flash.invalid { background: #FF3355; color: #fff; }

.staff-flash-icon {
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 900;
}

.staff-flash-title {
  font-family: var(--display);
  font-size: 3rem;
  letter-spacing: 2px;
  line-height: 0.95;
}

.staff-flash-detail {
  font-size: 1.05rem;
  font-weight: 800;
  opacity: 0.92;
  max-width: 22ch;
  word-break: break-word;
}

@keyframes staffFlashIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.staff-flash.saliendo { animation: staffFlashOut 0.18s ease-in forwards; }

@keyframes staffFlashOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Pantallas chicas: que nunca se corte el texto */
@media (max-height: 560px) {
  .staff-flash-icon  { font-size: 3.5rem; }
  .staff-flash-title { font-size: 2rem; }
}

/* Respeta a quien pidió menos animación en el sistema */
@media (prefers-reduced-motion: reduce) {
  .staff-flash, .staff-flash.saliendo { animation: none; }
}

/* ── Entrada manual ── */
.staff-manual {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.staff-manual input {
  flex: 1;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.8rem;
}
.staff-manual input:focus { outline: 2px solid var(--blue); }
.staff-manual input::placeholder { font-family: var(--body); color: var(--text-3); }

.staff-manual button {
  padding: 0 18px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
}

/* ── Registro de escaneos ── */
.staff-log { margin-bottom: 18px; }

.staff-log-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 0.82rem;
  padding: 22px 0;
}

.staff-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
}

.staff-log-folio {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.staff-log-time {
  font-size: 0.72rem;
  color: var(--text-2);
}

.staff-log-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 20px;
  padding: 3px 9px;
}

/* ── Acciones ── */
.staff-actions {
  display: flex;
  gap: 8px;
}

.staff-actions button {
  flex: 1;
  padding: 13px;
  border-radius: var(--radius-sm);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  min-height: var(--tap);
}

/* Reinicio del conteo: link chiquito y discreto (solo lo ven admins) */
.staff-reset-link {
  display: block;
  margin: 6px auto 0;
  background: none;
  border: none;
  color: var(--text-3);
  font-family: var(--body);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}
.staff-reset-link:active { color: #FF3355; }

/* ============================================================
   MODO STAFF — Anuncios
   ============================================================ */
.aviso-form {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 8px;
}

#avisoInput {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 10px 12px;
  resize: none;
}
#avisoInput:focus { outline: 2px solid var(--blue); }
#avisoInput::placeholder { color: var(--text-3); }

.aviso-form-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.aviso-urgente-toggle {
  padding: 0 14px;
  background: none;
  border: 1px solid rgba(255, 176, 32, 0.5);
  border-radius: var(--radius-sm);
  color: #FFB020;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
}

.aviso-urgente-toggle.active {
  background: #FFB020;
  border-color: #FFB020;
  color: #000;
}

.aviso-publicar {
  flex: 1;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
}
.aviso-publicar:active { opacity: 0.85; }

.staff-note {
  font-size: 0.68rem;
  color: var(--text-3);
  line-height: 1.45;
  margin: 0 2px 16px;
}

.aviso-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.aviso-card.urgente {
  border-color: rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.07);
}

.aviso-card.fijo { border-style: dashed; }

.aviso-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.aviso-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 20px;
  padding: 2.5px 9px;
}

.aviso-card.urgente .aviso-badge {
  color: #FFB020;
  border-color: #FFB020;
}

.aviso-card.fijo .aviso-badge {
  color: var(--text-2);
  border-color: var(--border-2);
}

.aviso-hora {
  flex: 1;
  font-size: 0.68rem;
  color: var(--text-3);
}

.aviso-del {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
.aviso-del:active { color: var(--pink); }

.aviso-texto {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Interruptor de versión del plano (marcas / números) */
.map-switch {
  display: flex;
  gap: 6px;
  margin: 0 16px 10px;
}

.map-switch-btn {
  flex: 1;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.map-switch-btn.is-on {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* ── Vista «Lado a lado»: una línea de tiempo por escenario ──
   Sirve para ver qué está pasando en el otro escenario a la misma hora. */
.talks-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.talks-col { min-width: 0; }

/* El nombre del escenario se queda pegado arriba al ir bajando, para no
   perder de vista de cuál columna es cada cosa */
.talks-col-head {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  background: var(--bg);
  padding: 6px 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pink);
}

.talks-col[data-esc="EAW"] .talks-col-head { color: var(--cyan); }

/* En dos columnas el espacio es la mitad: se aprieta un poco todo */
.talks-split .talk-item  { padding: 0 0 12px 20px; }
.talks-split .talk-item::before { left: 4px; }
.talks-split .talk-dot   { width: 11px; height: 11px; border-width: 2px; top: 8px; }
.talks-split .talk-body  { padding: 10px 11px; }
.talks-split .talk-time  { font-size: 1.05rem; }
.talks-split .talk-title { font-size: 0.82rem; }
.talks-split .talk-desc  { display: none; }

/* Descripción de la conferencia */
.talk-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-2);
  margin-top: 6px;
}