/* ============================================
   BookinTrade — Navegación v2: 5 pestañas
   ============================================
   Hoy · Diario · Operaciones · Comunidad · Yo. Lógica en navegacion.js.
   - Celular (< 768px): barra inferior fija; el menú hamburguesa se va.
   - Computadora: la barra lateral muestra las 5 pestañas como ítems
     principales y sus secciones debajo, con sangría.
   ============================================ */

/* ── Barra lateral: secciones debajo de su pestaña ── */
.nav-menu .nav-item:not(.nav-sub) { font-weight: 500; color: var(--color-text-primary); }
.nav-menu .nav-item.nav-sub {
  padding-left: 34px;
  font-size: 13px;
  color: var(--color-text-secondary);
  min-height: 36px;
}
.nav-menu .nav-item.nav-sub.activa { color: var(--color-accent); }
.nav-menu .nav-item:not(.nav-sub):not(:first-child) { margin-top: 10px; }

/* ── Barra inferior (sólo celular) ── */
.nav-inferior { display: none; }

@media (max-width: 767px) {
  .nav-inferior {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  .nav-inferior button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
  }
  .nav-inferior button[aria-current="page"] { color: var(--color-text-primary); font-weight: 500; }
  .nav-inferior button[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
  }

  /* Con barra inferior, el menú hamburguesa sobra */
  .btn-hamburger { display: none !important; }
  .page-header { padding-left: var(--space-lg); }
  /* Idioma y estado de la API viven ahora en "Yo": el encabezado respira */
  .page-header .selector-idioma,
  .page-header #estado-api { display: none; }

  /* El contenido y los botones flotantes no pueden quedar debajo de la barra */
  .contenido { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* Accesibilidad y ayuda viven ahora en "Yo" (Accesibilidad y modo
     daltónico · Escribinos): en el celular dejan de flotar sobre el contenido.
     Siguen existiendo (Yo los abre con .click()), sólo no se ven. */
  #bt-a11y-btn, #bt-feedback-btn { display: none !important; }
  /* La barra mide 60px + el inset de gestos: los 64px fijos no alcanzaban con
     un inset de 34px y la pastilla quedaba encima de la barra. */
  #bt-a11y-panel { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  .bt-consent-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Los avisos (toast) se armaban en bottom:20px con z-index 10000: tapaban la
     barra inferior 4 segundos. Van arriba de la barra y a lo ancho. Con
     !important porque app.js los posiciona con estilo inline.
     (Auditoría responsive, 27 sep 2026.) */
  #toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important; right: 12px !important; max-width: none !important;
  }
  .toast-pago-exitoso {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 9995;
  }

  /* Áreas táctiles (auditoría responsive, 27 sep 2026). Medían 22-32px.
     Chips y etiquetas a 40px: son nubes de ~30 (Diario → Mi semana) y a 44 la
     pantalla se alargaba sin ganar precisión. Botones de cerrar y acciones
     sueltas a 44x44. */
  .tag-error, .tag-acierto, .rg-chip, .trade-chip, .dvt-btn, .tab-lb,
  .periodo-btn, .social-bt-like, .btn-copiar {
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pwa-btn-cerrar, .diario-modal-cerrar, .edit-trade-modal .btn-cerrar-modal {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-logout { min-height: 44px; }
}

/* ── Sección "Yo" ── */
.yo {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0 32px;
}
.yo-perfil { display: flex; align-items: center; gap: 14px; }
.yo-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  flex-shrink: 0;
}
.yo-perfil-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yo-nombre { font-family: var(--font-serif); font-size: 24px; }
.yo-plan { font-size: 13px; color: var(--color-text-secondary); }
.yo-plan:empty { display: none; }

.yo-grupo { display: flex; flex-direction: column; gap: 8px; }
/* Especificidad con #pantalla-app: la regla de títulos de panel de tokens.css
   (#pantalla-app section h3, en serifa grande) no puede pisar estos rótulos. */
#pantalla-app .yo-grupo-titulo,
.yo-grupo-titulo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.yo-grupo > .yo-fila + .yo-fila,
.accesos-seccion > a + a { border-top: 1px solid var(--color-border); }
.yo-fila,
.accesos-seccion > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 15px;
}
.yo-fila:hover,
.accesos-seccion > a:hover { color: var(--color-accent); }
.yo-nota, .acceso-nota { font-size: 13px; color: var(--color-text-secondary); }
.yo-fila-suave { font-size: 13px; color: var(--color-text-secondary); min-height: 44px; }

.yo-segmento {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.yo-segmento button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
}
.yo-segmento button[aria-pressed="true"],
.yo-idioma .lang-btn.activo { background: var(--color-action); color: var(--color-on-action); }
.yo-legal { margin: 8px 0 0; font-size: 12px; color: var(--color-text-tertiary); }
.yo-legal a { color: var(--color-text-secondary); }

/* ── Accesos al pie de Operaciones y arriba de Insights ── */
.accesos-seccion {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.accesos-seccion.accesos-arriba { margin: 0 0 var(--space-xl); }

/* ============================================
   Operaciones en el celular: lista por día (operaciones-lista.js)
   ============================================ */
.ops-lista, .filtro-chips { display: none; }

@media (max-width: 767px) {
  #tabla-trades .trades-tabla { display: none; }
  #tabla-trades { overflow: visible; }
  .ops-lista { display: flex; flex-direction: column; gap: 8px; }

  /* Filtros: chips en lugar del select de resultado */
  #sec-operaciones #filtro-resultado { display: none; }
  #sec-operaciones .panel-header { flex-direction: column; align-items: stretch; gap: 12px; }
  #sec-operaciones .filtros { display: flex; flex-direction: column; gap: 10px; }
  .filtro-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .filtro-chips button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
  }
  .filtro-chips button[aria-pressed="true"] {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-on-action);
    font-weight: 500;
  }
}

.ops-dia-titulo {
  margin: 12px 0 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}
#pantalla-app .ops-dia-titulo { font-family: var(--font-sans); font-size: 12px; font-weight: 400; }

.op-item { border-bottom: 1px solid var(--color-border); }
.ops-dia .op-item:last-child { border-bottom: 0; }
.op-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}
.op-fila::-webkit-details-marker { display: none; }
.op-fila::marker { content: ""; }
.op-principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-par { font-size: 15px; color: var(--color-text-primary); }
.op-tipo { font-size: 12px; color: var(--color-text-secondary); }
.op-detalle { font-size: 12px; color: var(--color-text-tertiary); }
.op-falta { font-size: 12px; color: var(--color-warning); }
.op-res {
  font-family: var(--font-serif);
  font-size: 17px;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.op-res.es-abierta { font-family: var(--font-sans); font-size: 13px; }
.op-item[open] > .op-fila .op-par { font-weight: 500; }

.op-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.op-acciones button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.op-acciones .op-accion-destacada {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
}
.op-acciones .op-accion-suave { border-color: transparent; color: var(--color-text-secondary); }

/* Selectores de filtro de Operaciones: sin el estilo nativo (fondo blanco) */
#sec-operaciones .filtros select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
}

/* Acciones de la tabla de operaciones (computadora): palabras, no emoji ni cajas */
.tabla-accion {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.tabla-accion:hover { background: var(--color-surface-3); text-decoration: underline; text-underline-offset: 3px; }
.tabla-accion-suave { color: var(--color-text-secondary); }

/* ── Tour de bienvenida (Driver.js) con la voz del sabio ── */
.driver-popover.bookintrade-tour-popover {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
.driver-popover.bookintrade-tour-popover .driver-popover-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: -0.005em;
  color: var(--color-text-primary) !important;
}
.driver-popover.bookintrade-tour-popover .driver-popover-description {
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.driver-popover.bookintrade-tour-popover .driver-popover-next-btn {
  background: var(--color-action) !important;
  color: var(--color-on-action) !important;
  border: 0 !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
}
.driver-popover.bookintrade-tour-popover .driver-popover-prev-btn {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: 0 !important;
  text-shadow: none !important;
}
.driver-popover.bookintrade-tour-popover .driver-popover-progress-text { color: var(--color-text-tertiary) !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-close-btn { color: var(--color-text-secondary) !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-arrow { border-color: var(--color-surface) !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-arrow-side-top { border-left-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-arrow-side-bottom { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-arrow-side-left { border-top-color: transparent !important; border-bottom-color: transparent !important; border-right-color: transparent !important; }
.driver-popover.bookintrade-tour-popover .driver-popover-arrow-side-right { border-top-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }

/* Mientras dura el tour, la pastilla de Privacidad no tapa el globo */
body.driver-active .bt-consent-fab { display: none !important; }