/* ── Login overlay ───────────────────────────────────────────────────────── */

.login-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b3a5c 60%, #1a6b8a 100%) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card: target by its own class, no > combinator needed */
.login-card {
  position: relative !important;
  left:   auto !important;
  top:    auto !important;
  width:  430px !important;
  width:  min(430px, calc(100vw - 32px)) !important;
  margin: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Controls inside the card: keep TMS top values, stretch horizontally */
.login-card > * {
  left:       20px !important;
  right:      20px !important;
  width:      auto !important;
  height:     auto !important;
  min-height: 0 !important;
}

/* Push the logo label down a bit from the card top edge */
#WebLabel1 {
  top: 20px !important;
}

/* Error panel: anchored to card bottom, always fully visible */
#view\.login\.message {
  height: auto !important;
  bottom: 20px !important;
}

/* Error panel: anchored to card bottom, always fully visible
#view\.login\.message\.button {
  right: auto !important;
  top: auto !important;
}
   */

/* hidden attribute must win over Bootstrap's display rules */
[hidden] { display: none !important; }

/* ── Sidebar tab strip (PageControl: Flota / Tracks / AIS) ──────────────────
   TWebPageControl renders its Bootstrap nav-pills <ul> (id ends in "_UL")
   as a plain in-flow element (position: static, the CSS default), while its
   TWebTabSheet content panels are position: absolute. A position:absolute
   sibling ALWAYS paints over a position:static one regardless of DOM order,
   so the active tab's content (which also starts at top:0) was completely
   covering the tab strip -- the pills existed in the DOM the whole time,
   just rendered underneath, invisible and unclickable. Promoting the <ul>
   to a positioned element (it's the last child in DOM order, so once
   "positioned" it naturally paints last/on top) fixes this. */
[id$="_PageControl15_UL"] {
  position: relative !important;
  z-index: 20 !important;
  background: #f8f9fa !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* ── Herramientas: modales de Rio/Km y Boyas ─────────────────────────────────
   NO son bootstrap.Modal reales -- se probo esa via (data-bs-toggle,
   backdrop, bootstrap.Modal.getInstance/new) y terminaba en un estado
   donde TODA la pagina quedaba sin poder interactuar (clickeable en
   ninguna parte, no solo el modal) -- un conflicto de stacking context
   entre el backdrop de Bootstrap (creado aparte, directo sobre <body>) y
   el position:absolute que TMS Web Core pone inline en cada componente.
   En vez de pelear mas con eso, esto es el mismo mecanismo ya probado en
   este archivo (ElementHandle.hidden, ver [hidden] mas arriba) + esta
   regla que centra el panel con position:fixed cuando no esta hidden.
   Sin clases de Bootstrap .modal/.modal-dialog en el .dfm -- solo
   .modal-content quedo (estilo estatico, sin comportamiento JS propio). */
#tracker\.modal\.riokm:not([hidden]),
#tracker\.modal\.boyas:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  /* por encima de la barra superior y del panel movil (ver MOBILEBARZINDEX
     en TrackerMapsForm.pas) */
  z-index: 4000000 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* El wrapper del medio (ModalRioKmDialog/ModalBoyasDialog, entre el panel
   fixed de arriba y .modal-content) segui­a con position:absolute inline
   de TMS Web Core -- un hijo absolute sale del flujo del flex del padre,
   asi que el align-items/justify-content:center de arriba no lo afectaba
   y quedaba pegado en su propio top:0;left:0 (el bug real de "pegado a la
   esquina"). Sacarlo de absolute lo vuelve a poner como item de flex
   normal, que si se centra. */
.tracker-modal-dialog {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

#tracker\.modal\.riokm .modal-content,
#tracker\.modal\.boyas .modal-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

#tracker\.modal\.riokm .modal-content {
  width: 360px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  height: 232px !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
}

#tracker\.modal\.boyas .modal-content {
  width: 360px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  height: 510px !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
}

/* ── Movil (Ai_Boats_WebTracker_Movil) ───────────────────────────────────────
   Etapa 1. Reglas globales (no cambian el aspecto de escritorio) + bloque
   @media para pantallas angostas. bootstrap.min.css se carga DESPUES de este
   archivo, asi que a igual especificidad gana Bootstrap: todos los
   selectores de aca abajo llevan una clase extra (.tk-*, .vh-100.login-page)
   para ganarle sin depender del orden. Cada elemento que TMS Web Core deja
   con position:absolute inline y que hay que meter en un flujo flex necesita
   su propia regla (ver memoria feedback_tmsweb_absolute_positioning_vs_custom_css). */

/* Sin zoom por doble toque ni retardo de 300 ms en controles. */
button, .btn, a, select, input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Login: vh-100 de Bootstrap (!important, mismo peso que .login-page) le
   ganaba por orden de carga -- en el movil 100vh incluye la barra de
   direcciones y el boton Ingresar quedaba tapado. dvh sigue a la barra. Si
   la tarjeta es mas alta que la pantalla (movil apaisado) el panel scrollea
   en vez de cortarla arriba (align-items:flex-start + margin:auto de la
   tarjeta la centra cuando hay lugar). */
.vh-100.login-page {
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  align-items: flex-start !important;
}

/* Opciones solo-movil dentro de menus (p. ej. Salir en Herramientas). */
.tk-only-mobile {
  display: none !important;
}

@media (max-width: 767.98px) {

  /* Barra superior: una sola fila de 56 px (BandaMenu.Height se ajusta en
     Pascal, ApplyViewportLayout). Los hijos directos dejan de ser absolute
     y pasan a ser items flex: [Lista] [Empresa ........] [Iniciar] [Herram.] */
  .navbar.tk-nav.px-3 {
    flex-wrap: nowrap !important;
    gap: 8px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .tk-nav > .tk-nav-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  .tk-nav > .tk-nav-item.tk-nav-grow {
    flex: 1 1 0;
    min-width: 0 !important;
  }

  .tk-nav > .tk-nav-panel { order: 1; }
  .tk-nav > .tk-nav-grow  { order: 2; }
  .tk-nav > .tk-nav-run   { order: 3; }
  .tk-nav > .tk-nav-tools { order: 4; }

  /* Nombre de usuario + Salir: en el movil Salir va dentro de Herramientas
     (itmSalir) para no gastar ancho de la barra. */
  .tk-nav > .tk-nav-user {
    display: none !important;
  }

  /* Iniciar/Detener: en el movil la actualizacion arranca sola y se pausa desde
     Herramientas (itmPausar). Se oculta por CSS porque TMS cambia su display
     inline segun Visible. */
  .tk-nav > .tk-nav-run {
    display: none !important;
  }

  .tk-nav .btn,
  .tk-nav .form-select {
    min-height: 44px;
  }

  /* 16 px evita el zoom automatico de iOS al enfocar el combo. */
  .tk-nav .form-select {
    font-size: 16px;
  }

  /* Herramientas: el contenedor .dropdown tiene que seguir siendo el
     ancestro posicionado del menu; el boton y los items vuelven al flujo. */
  .tk-nav > .tk-nav-item.tk-nav-tools {
    position: relative !important;
  }

  .tk-nav-tools > .btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  .tk-nav-tools > .dropdown-menu {
    width: auto !important;
    height: auto !important;
    min-width: 230px !important;
    padding: 4px 0 !important;
  }

  .tk-nav-tools .dropdown-menu .dropdown-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    font-size: 16px;
  }
}

/* ── Movil, etapa 2: barra inferior Mapa | Flota | Tracks | AIS ───────────────
   BarraInferior (TWebHTMLDiv, alBottom, Visible=false en el .dfm) solo se
   muestra en el movil (ApplyViewportLayout). Sus botones son TWebButton con
   position:absolute inline -> vuelven al flujo flex (misma regla que la barra
   superior). El selector lleva .btn de mas (0,3,0) para ganarle a los
   .btn:hover/:active de Bootstrap, que en pantalla tactil dejaban el ultimo
   boton tocado "pegado" en su color de hover. */
@media (max-width: 767.98px) {

  .tk-bottom-nav {
    display: flex !important;
    background: #212529;
    border-top: 1px solid #343a40;
  }

  /* TMS oculta con display:none inline (Visible=false); el !important de
     arriba lo pisaba y la barra se veia siempre, sin alinear. */
  .tk-bottom-nav[style*="display: none"] {
    display: none !important;
  }

  .tk-bottom-nav > .btn.tk-bn-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    border: 0;
    border-top: 3px solid transparent;
    border-radius: 0;
    background: transparent !important;
    color: #adb5bd !important;
    font-size: 15px;
    box-shadow: none !important;
  }

  .tk-bottom-nav > .btn.tk-bn-item.active {
    background: #2b3035 !important;
    color: #fff !important;
    border-top-color: #0d6efd;
    font-weight: 600;
  }
}

/* ── Movil, etapa 3: formulario de la pestaña Tracks ─────────────────────────
   Combo, fecha, hora, horas y boton de Generar track: alto tactil minimo y
   16 px de letra (iOS no hace zoom al enfocar). Valen tambien en escritorio:
   LayoutTracksForm (TrackerMapsForm.pas) ya los ubica con alto 44. */
.tk-track-field,
.tk-field {
  min-height: 44px;
  font-size: 16px;
}

/* El icono del reloj/calendario del input nativo tapaba el ultimo digito de
   la hora: menos relleno lateral en los inputs de fecha y hora. */
input.tk-track-field[type="time"],
input.tk-track-field[type="date"],
input.tk-field[type="time"],
input.tk-field[type="date"] {
  padding-left: 0.5rem;
  padding-right: 0.25rem;
}

/* Cartel de estado de Tracks (lbTrackEstado): info = buscando, ok, warn = sin
   datos / error. Lo muestra TrackStatus en TrackerMapsForm.pas. */
.tk-track-status {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.3;
  background: #e7f1ff;
  color: #084298;
}

.tk-track-status.ok {
  background: #d1e7dd;
  color: #0f5132;
}

.tk-track-status.warn {
  background: #fff3cd;
  color: #664d03;
}

/* ── Movil, etapa 3: modales (Rio/Km, Boyas) y aviso breve ──────────────────
   Los modales ya eran paneles position:fixed centrados (ver arriba); ahora
   tienen ancho min(360px, pantalla - 24px) y sus controles se reparten en
   Pascal (LayoutModals). El aviso (ToastBox) reemplaza al Showmessage de
   Notification_Show: abajo, centrado, encima de todo, y no tapa los toques. */
.tk-toast:not([hidden]) {
  position: fixed !important;
  left: 50% !important;
  top: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%);
  width: auto !important;
  height: auto !important;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 16px;
  border-radius: 8px;
  background: #212529;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 4000001 !important;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .tk-toast:not([hidden]) {
    bottom: 72px !important; /* por encima de la barra inferior (56 px) */
  }
}

/* ── Movil: boton flotante "Seguir" ──────────────────────────────────────────
   btSeguir (TWebButton a nivel del form) alterna el seguimiento del barco
   (EditSiguiendo). Solo se ve en el movil. Arriba a la izquierda, debajo del
   selector Mapa/Satelite de Google (abajo estan los controles de zoom, la
   barra inferior y los avisos). z-index: encima de lo interno de Google Maps
   (hasta 1000000) y debajo del panel a pantalla completa (2000000), asi el
   panel lo tapa. La visibilidad la maneja el CSS y no Visible de TMS, porque
   el display:inline-flex !important pisaria el display:none inline de TMS. */
.tk-fab {
  display: none !important;
}

@media (max-width: 767.98px) {
  .btn.tk-fab,
  .btn.tk-fab:hover,
  .btn.tk-fab:focus,
  .btn.tk-fab:active {
    display: inline-flex !important;
    align-items: center;
    position: fixed !important;
    left: 12px !important;
    top: 124px !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 22px;
    background: #fff !important;
    color: #212529 !important;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    z-index: 1500000 !important;
  }

  .btn.tk-fab.on,
  .btn.tk-fab.on:hover,
  .btn.tk-fab.on:focus,
  .btn.tk-fab.on:active {
    background: #0d6efd !important;
    border-color: #0d6efd;
    color: #fff !important;
  }
}