/*
 * mobile-nav.css — bottom tab bar + top bar móvil overrides.
 *
 * Sprint 1 del plan Mobile + PWA. Solo aplica a viewport <=720px:
 *
 *   1. Bottom tab bar fija con 5 destinos (Leads/Works/Cal/Stats/Settings).
 *      Inyectada por public/admin/mobile-nav.js en runtime para no tener
 *      que tocar 15 HTMLs con el mismo markup.
 *   2. Top bar compacto: logo "M&N" reducido, navtabs ocultos (ahora
 *      viven en la bottom-bar), lang-toggle oculto (se mueve al avatar
 *      dropdown). Bell + avatar siguen visibles.
 *   3. Body padding-bottom para que el contenido no se quede debajo de
 *      la bottom-nav.
 *
 * Decisión del usuario para la coexistencia con sticky-actions (save-bar)
 * de la ficha del lead: cuando body.is-editing está activo, ocultamos
 * la bottom-nav para que el save-bar tenga el bottom libre. Al guardar
 * o cancelar, la nav vuelve.
 *
 * Documentado en docs (mobile-pwa-sprint1).
 */

/* ============================================================
 * 1. Bottom tab bar — el componente principal del sprint
 * ============================================================ */

/* La nav vive en el DOM siempre (la inyecta mobile-nav.js si la página
   está en la lista admin app). En desktop la escondemos con CSS. */
.bottom-tab-bar {
  display: none;
}

@media (max-width: 720px) {
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    /* width: 100vw forzado en lugar de left: 0; right: 0 — para que el
       bottom-nav SIEMPRE quepa en el ancho del viewport visual, incluso
       si el documento se hizo más ancho por algún elemento que desbordó.
       En iOS Safari position:fixed se referencia al layout viewport (no
       al visual viewport) y si la página hace horizontal-scroll por
       overflow, left:0;right:0 expande el nav al ancho del documento,
       no al ancho visible. width:100vw fuerza el ancho de pantalla.
       Trade-off: si la página NO hace overflow (todo OK), funciona igual.
       Si hace overflow, el nav se queda visible en pantalla. */
    width: 100vw;
    z-index: 100;  /* encima del contenido, debajo de modales/overlays */

    /* Altura 64px + safe-area-inset-bottom para iOS notch/home indicator */
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: var(--mora-deep);
    /* Backdrop-blur sutil — el bg deep ya es bastante opaco pero ayuda
       cuando hay scroll debajo. */
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);

    /* Línea sutil arriba para separar visualmente del contenido */
    border-top: 1px solid rgba(245, 239, 231, 0.08);

    justify-content: space-around;
    align-items: stretch;
  }

  /* Cuando hay save-bar activa (body.is-editing): ocultamos la nav para
     que el save-bar pegue al bottom (decisión del usuario en Sprint 1).
     Re-aparece al hacer Save o Cancel (JS quita la clase). */
  body.is-editing .bottom-tab-bar {
    display: none;
  }
}

/* Cada tab del bottom-bar. Tap target 56×64 mínimo según brief. */
.bottom-tab-bar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-width: 56px;
  height: 64px;

  text-decoration: none;
  color: var(--mora-cream);
  /* Reset link defaults */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;

  /* Línea berry encima del tab activo */
  position: relative;
  padding-top: 2px; /* deja sitio para el 3px de línea sin saltar layout */

  -webkit-tap-highlight-color: transparent;
}

.bottom-tab-bar .tab:focus-visible {
  outline: 2px solid var(--mora-blush);
  outline-offset: -2px;
}

.bottom-tab-bar .tab svg {
  width: 28px;
  height: 28px;
  color: var(--mora-cream);
  /* Iconos del sprite usan currentColor — ver public/icons.svg */
  flex-shrink: 0;
}

.bottom-tab-bar .tab span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono, var(--font-body, monospace));
  line-height: 1;
  color: var(--mora-stone);
}

/* Tab activo: icono blush + label cream + línea berry encima */
.bottom-tab-bar .tab.tab-active {
  color: var(--mora-blush);
}

.bottom-tab-bar .tab.tab-active svg {
  color: var(--mora-blush);
}

.bottom-tab-bar .tab.tab-active span {
  color: var(--mora-cream);
}

.bottom-tab-bar .tab.tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--mora-berry);
  border-radius: 0 0 2px 2px;
}

/* ============================================================
 * 2. Top bar móvil — logo compacto, navtabs ocultos
 * ============================================================ */

@media (max-width: 720px) {
  /* Topbar reducido — el del admin actual tiene padding 0.85rem 1rem
     en móvil ya. Mantenemos lateral + añadimos safe-area-inset-top
     para que en PWA standalone (iOS Add to Home Screen) la status bar
     con Dynamic Island NO se solape con el logo/bell/avatar.

     En modo browser, env(safe-area-inset-top) = 0 → topbar normal.
     En modo standalone con notch, env(safe-area-inset-top) = ~50px
     en iPhone 14+ Pro/Pro Max — el topbar empuja su contenido hacia
     abajo y la status bar queda visible sobre el background deep. */
  .topbar {
    padding-left: max(1rem, env(safe-area-inset-left, 0));
    padding-right: max(1rem, env(safe-area-inset-right, 0));
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
  }

  /* Logo compacto: ocultamos el wordmark largo y mostramos M&N reducido.
     El elemento .wordmark-mobile-compact lo inyecta mobile-nav.js si no
     existe ya (algunos pages no usan .wordmark-link). */
  .topbar .wordmark .wordmark-1,
  .topbar .wordmark .wordmark-2 {
    /* Mantenemos M y N visibles pero reducimos los textos completos */
    /* La transformación a M&N la hacemos via JS (sustitución de
       textContent) para no romper el layout. Aquí solo reducimos el size. */
  }
  .topbar .wordmark {
    font-size: 1.15rem;  /* ~18px Fraunces */
    letter-spacing: var(--letter-display-tight, -0.01em);
  }

  /* Las navtabs (links Leads/Works/Calendar/Stats/Settings) viven en
     la bottom-tab-bar en móvil. Ocultar del topbar.
     OJO: dentro de .navtabs hay también .lang-toggle y otros elementos.
     Ocultamos solo los <a> (los links) — el resto sigue. */
  .navtabs > a {
    display: none;
  }

  /* lang-toggle en topbar también se oculta — se mueve al user-menu
     dropdown (decisión del brief). user-menu.js ya tiene el item, solo
     hay que asegurarnos de hidear el del topbar. */
  .navtabs .lang-toggle {
    display: none;
  }
}

/* PWA standalone con notch — fix bulletproof.
 *
 * Por qué este bloque adicional: en algunos contextos (iOS bug, PWA instalado
 * antes de añadir los meta tags, env() no resolviendo en tiempo) el calc()
 * de arriba devuelve 0 y la status bar se solapa con el logo. Para esos
 * casos, en standalone mode forzamos un mínimo de 44px (altura típica de
 * la status bar iPhone X/11/12/13/14/15/16/17 sin contar Dynamic Island).
 *
 * max(env(safe-area-inset-top, 0px), 44px) =
 *   - Si env() funciona (~50px): max(50, 44) = 50 → correcto
 *   - Si env() devuelve 0 (bug): max(0, 44) = 44 → fallback seguro
 *
 * El media query display-mode:standalone asegura que SOLO aplica al PWA
 * instalado — en browser normal no añadimos padding innecesario.
 *
 * Además, ::before fija una franja deep sobre la status area por si
 * el padding-top falla por especificidad: visualmente nunca verá la
 * status bar sobre cream o blanco. */
@media all and (display-mode: standalone) and (max-width: 720px) {
  .topbar {
    padding-top: calc(0.85rem + max(env(safe-area-inset-top, 0px), 44px));
  }

  /* Status-bar guard: franja deep fija en la parte superior que cubre
     el área de la status bar. Si por cualquier motivo el padding del
     topbar no empuja el contenido, al menos el ojo NO verá texto sobre
     un fondo extraño — verá texto sobre deep, que ya es nuestro brand. */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: max(env(safe-area-inset-top, 0px), 44px);
    background: var(--mora-deep);
    z-index: 99; /* justo debajo del topbar (z-index: 100) para no taparlo */
    pointer-events: none;
  }
}

/* ============================================================
 * 3. Body padding-bottom para no quedar bajo la nav
 * ============================================================ */

@media (max-width: 720px) {
  body {
    /* 64 (nav height) + safe-area-inset-bottom. NO sumamos pre-existing
       padding del body — el reset es global. */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));

    /* Safety net: si algún hijo (chart, grid, tabla, lo que sea) intenta
       hacer overflow horizontal, lo cortamos a nivel body. */
    overflow-x: hidden;
    /* Reforzar: ancho máximo = ancho de viewport. Sin esto, ciertos
       elementos hijos pueden expandir el body (min-content de tablas,
       texto larguísimo, etc.) y overflow-x: hidden por sí solo no
       previene el layout viewport del navegador de expanderse en iOS. */
    max-width: 100vw;
    /* Importante para iOS: position relative para que sea contenedor
       de referencia del bottom-nav fixed (no del documento ancho). */
    position: relative;
  }
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Al editar (save-bar abierto), no hay bottom-nav, así que el padding
     puede ser solo el necesario para la save-bar (ya lo gestiona ella). */
  body.is-editing {
    padding-bottom: 0;
  }
}

/* ============================================================
 * 4. Sprint 3 — Tablas como cards en mobile (leads, works).
 *
 * Patrón "dual render": el JS renderiza AMBAS estructuras (table-wrap
 * + card-list) y el CSS oculta una según el viewport.
 *
 *   Desktop: .table-wrap visible · .card-list oculta
 *   Mobile:  .table-wrap oculta  · .card-list visible
 *
 * Clases genéricas (.list-card-*) para que leads y works reutilicen los
 * mismos estilos. Sub-elementos opcionales — cada página decide qué
 * incluir (leads: head+date+email; works: head+meta+tags).
 * ============================================================ */

/* Default desktop: tabla visible, cards ocultas */
.card-list {
  display: none;
}

@media (max-width: 720px) {
  /* Mobile: tabla oculta, cards visibles. .table-wrap es el wrapper
     ya existente en leads.html y works.html (tiene overflow-x:auto). */
  .table-wrap {
    display: none;
  }

  .card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
}

/* Card base — usa los tokens del admin (radius, border, bg). */
.list-card {
  background: var(--color-bg-card, var(--mora-bone));
  border: 1px solid var(--color-border, var(--mora-line));
  border-radius: var(--radius-md, 8px);
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.list-card:hover {
  border-color: var(--mora-stone, #8a7d75);
}

/* Active state visual feedback al tap */
.list-card:active {
  background: var(--color-bg-faint, rgba(0, 0, 0, 0.03));
}

.list-card:focus-visible {
  outline: 2px solid var(--mora-blush);
  outline-offset: 2px;
}

/* Head — primera fila con nombre + status/badge a la derecha */
.list-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.list-card-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: var(--letter-display-tight, -0.01em);
  color: var(--mora-deep, #3D1421);
  line-height: 1.3;
  /* break-word: nombres muy largos en doble (Augusto & Maria del Carmen)
     no deben empujar el status pill fuera. */
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

/* Status pill / badge dentro del head — no comprimir si el nombre es largo */
.list-card-head .status-pill,
.list-card-head .badge {
  flex-shrink: 0;
}

/* Meta row — info secundaria estilo mono compacto (fecha, presupuesto, etc.) */
.list-card-meta {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--mora-stone, #8a7d75);
  text-transform: uppercase;
}

/* Sub-elementos opcionales destacables */
.list-card-meta strong {
  color: var(--mora-deep, #3D1421);
  font-weight: 500;
}

/* Email link como elemento secundario completo */
.list-card-email {
  font-size: 0.82rem;
  color: var(--mora-stone, #8a7d75);
  text-decoration: none;
  /* Truncar emails largos para no romper la card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card-email:hover {
  color: var(--mora-deep, #3D1421);
  text-decoration: underline;
}

/* Tags row al final, wrap si hay muchos */
.list-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.1rem;
}