/* ========================================
   MOBILE BOTTOM NAVIGATION — Manni
   Barra de tabs inferior con efecto vidrio + hoja de perfil.

   Todo vive dentro de @media (max-width: 768px): en desktop el sidebar
   sigue mandando y nada de esto se renderiza.
   ======================================== */

:root {
  --mnav-ink: #0A2540;
  --mnav-ink-mute: #8792A2;
  --mnav-violet: #5B4FE9;
  --mnav-violet-deep: #453BC7;
  --mnav-violet-tint: #EFEDFD;
  --mnav-border: #E7E9F1;
  --mnav-height: 62px;
}

/* Fuera de mobile no existe. */
.mobile-tabbar,
.mobile-sheet,
.mobile-sheet-overlay {
  display: none;
}

@media (max-width: 768px) {

  /* ---------- El sidebar deja de ser navegación en mobile ----------
     Hoy se convierte en una tira horizontal scrolleable arriba; la
     reemplazamos por completo con la tabbar inferior. */
  #app-sidebar.sidebar,
  #app-sidebar.sidebar.collapsed {
    display: none !important;
  }

  .main-content,
  body.sidebar-collapsed .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    /* Espacio para que la isla nunca tape el final del contenido
       (alto + separación inferior + aire). */
    padding-bottom: calc(var(--mnav-height) + env(safe-area-inset-bottom) + 2rem) !important;
  }

  /* ---------- TABBAR (isla flotante) ----------
     No toca los bordes: flota separada del fondo, centrada y con esquinas
     completamente redondeadas. */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    transform: translateX(-50%);
    z-index: 1200;

    width: calc(100% - 32px);
    max-width: 420px;
    align-items: stretch;
    justify-content: space-around;
    height: var(--mnav-height);
    padding: 0 4px;
    border-radius: 999px;

    /* Vidrio esmerilado */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
      0 8px 32px rgba(10, 37, 64, 0.16),
      0 2px 8px rgba(10, 37, 64, 0.08);

    /* Se esconde deslizando hacia abajo al scrollear. */
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
  }

  /* .hidden lo baja fuera de pantalla; el translateX debe repetirse porque
     transform es una sola propiedad. */
  .mobile-tabbar.tabbar-hidden {
    transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom) + 20px));
    opacity: 0;
    pointer-events: none;
  }

  /* Fallback: sin backdrop-filter el translúcido se ve sucio. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-tabbar {
      background: rgba(255, 255, 255, 0.97);
    }
  }

  .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 999px;

    background: none;
    border: none;
    text-decoration: none;
    color: var(--mnav-ink-mute);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
  }

  .mobile-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: transform .18s ease;
  }

  .mobile-tab-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tab.active {
    color: var(--mnav-violet-deep);
  }

  .mobile-tab.active .mobile-tab-icon {
    transform: translateY(-1px);
  }

  .mobile-tab:active .mobile-tab-icon {
    transform: scale(0.92);
  }

  /* Avatar del tab de perfil */
  .mobile-tab-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A79BFF, var(--mnav-violet));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(91, 79, 233, 0);
    transition: box-shadow .18s ease;
  }

  .mobile-tab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-tab-profile.active .mobile-tab-avatar {
    box-shadow: 0 0 0 2px var(--mnav-violet-tint), 0 0 0 3.5px var(--mnav-violet);
  }

  /* ---------- HOJA DE PERFIL ---------- */
  .mobile-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(10, 37, 64, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .mobile-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;

    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;

    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 -8px 40px rgba(10, 37, 64, 0.18);

    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-sheet {
      background: #fff;
    }
  }

  .mobile-sheet.active {
    transform: translateY(0);
  }

  .mobile-sheet-grabber {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #D5D9E4;
    margin: 4px auto 14px;
  }

  .mobile-sheet-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 14px;
  }

  .mobile-sheet-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A79BFF, var(--mnav-violet));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .mobile-sheet-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-sheet-user-info {
    min-width: 0;
  }

  .mobile-sheet-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mnav-ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-sheet-email {
    font-size: 12.5px;
    color: var(--mnav-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-sheet-currency {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(246, 247, 251, 0.8);
    border: 1px solid var(--mnav-border);
  }

  .mobile-sheet-currency-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mnav-ink);
  }

  .mobile-sheet-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
  }

  .mobile-sheet-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--mnav-ink);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease;
  }

  .mobile-sheet-link svg {
    stroke: var(--mnav-ink-mute);
    flex-shrink: 0;
  }

  .mobile-sheet-link:active {
    background: rgba(246, 247, 251, 0.95);
  }

  .mobile-sheet-link.active {
    background: var(--mnav-violet-tint);
    color: var(--mnav-violet-deep);
    font-weight: 600;
  }

  .mobile-sheet-link.active svg {
    stroke: var(--mnav-violet-deep);
  }

  .mobile-sheet-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: 12px;
    border: 1px solid #FBD7D7;
    background: #FEF2F2;
    color: #C0392B;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-sheet-logout:active {
    background: #FDE5E5;
  }

  /* El panel de detalle derecho debe quedar por encima de la tabbar. */
  .right-sidebar {
    z-index: 1400;
  }

  /* ---------- Ajustes de contenido en mobile ----------
     El dashboard v2 se sangra con `margin: -1rem -1.5rem` y compensa con
     `width: calc(100% + 3rem)` para pegarse a los bordes del main-content.
     En mobile el main-content ya no tiene padding lateral, así que ese
     ancho extra de 3rem se convertía en 48px de desborde horizontal.
     Hay que anular las tres cosas juntas: margin, width y max-width. */
  .mv2 {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px 24px !important;
    overflow-x: hidden;
  }

  /* ---------- Aire lateral para las secciones "clásicas" ----------
     .main-content va sin padding en mobile para que el dashboard v2 pueda
     sangrarse hasta los bordes, pero el resto de las secciones quedaban
     pegadas a los costados. Se lo devolvemos sección por sección. */
  #section-conexiones,
  #section-ajustes,
  #section-archivos,
  #section-transacciones,
  #section-dashboards {
    padding: 16px 16px 0;
  }

  /* Los filtros del topbar no entraban en 390px. */
  .mv2-topbar-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .mv2-topbar-actions > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Nada debe generar scroll horizontal en la app. */
  body {
    overflow-x: hidden;
  }

  /* ---------- TARJETAS DE CONEXIONES ----------
     Pensadas para desktop: icono de 64px, padding de 1.5rem y botones en
     fila. En el teléfono eso deja los textos muy apretados. */
  .connections-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .connection-card {
    padding: 16px;
    border-radius: 14px;
    gap: 12px;
  }

  /* El hover con translateY no aplica en touch y sólo genera saltos. */
  .connection-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
  }

  .connection-header {
    gap: 12px;
    align-items: flex-start;
  }

  .connection-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }

  .connection-info {
    min-width: 0; /* deja que el texto largo se corte en vez de estirar */
  }

  .connection-info h3 {
    font-size: 1rem;
    line-height: 1.3;
  }

  .connection-status,
  .connection-last-sync {
    font-size: 0.8125rem;
  }

  /* El mail del usuario conectado desbordaba la tarjeta. */
  .connection-user-info,
  .connection-user-info * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .connection-description {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  /* Botones: full width y apilados, con buen área de toque. */
  .connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .connection-actions > button,
  .connection-actions > a {
    flex: 1 1 140px;
    min-height: 42px;
    justify-content: center;
  }

  .connections-subsection-title {
    font-size: 0.9375rem;
    margin-bottom: 10px;
  }

  /* ---------- MODALES EN MOBILE ----------
     Con 2rem de padding y botones alineados a la derecha, los modales
     largos (como el instructivo del atajo) quedaban apretados y con los
     botones fuera de alcance. En mobile se comportan como hoja: ocupan
     el ancho útil, scrollean adentro y los botones van full-width. */
  /* .custom-modal-overlay.active centra el modal; para anclarlo abajo hay
     que igualar esa especificidad, si no gana el `align-items: center`. */
  .custom-modal-overlay,
  .custom-modal-overlay.active {
    align-items: flex-end;
    padding: 0;
  }

  .custom-modal {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;

    /* Entra deslizando desde abajo, como una hoja de iOS. */
    animation: mnavSheetUp .3s cubic-bezier(.32, .72, 0, 1);
  }

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

  /* Barrita para agarrar y bajar la hoja. */
  .custom-modal.sheet-draggable::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: -6px auto 14px;
    border-radius: 999px;
    background: #D5D9E4;
  }

  /* Mientras el dedo arrastra no queremos transición peleando. */
  .custom-modal.sheet-dragging {
    animation: none;
    transition: none;
  }

  /* Al soltar debajo del umbral, vuelve a su lugar. */
  .custom-modal.sheet-settling {
    animation: none;
    transition: transform .25s cubic-bezier(.32, .72, 0, 1);
  }

  /* column-reverse deja la acción principal (último botón del HTML, ej.
     "Aceptar") arriba, que es lo esperado en un modal de confirmación. */
  .custom-modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  /* En el modal del atajo el orden del HTML ya es el correcto: primero el
     link de instalar y después "Cerrar". Sin esto quedaba al revés. */
  #shortcut-setup-modal .custom-modal-actions {
    flex-direction: column;
  }

  .custom-modal-actions .custom-modal-btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
  }

  /* El link de instalar es un <a>: sin esto no centra como los botones. */
  .custom-modal-actions a.custom-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  /* ---------- Código del atajo ----------
     En una fila flex el <code> se comprimía casi a cero y, con
     `overflow-wrap: anywhere`, terminaba partiéndose letra por letra.
     En mobile apilamos código y botón para que el código use todo el ancho. */
  .shortcut-code-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .shortcut-code-row code {
    width: 100%;
    text-align: center;
    overflow-wrap: normal;
    word-break: keep-all;
    /* Si no entra, que scrollee en lugar de romper la palabra. */
    overflow-x: auto;
    white-space: nowrap;
  }

  .shortcut-code-row .btn-secondary {
    width: 100%;
    padding: 11px 16px;
  }
}

/* Respeta "reducir movimiento". */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-sheet,
  .mobile-sheet-overlay,
  .mobile-tab,
  .mobile-tab-icon {
    transition: none;
  }
}