/* ============================================
   MEDIA QUERIES - Adaptado al estilo de main.css
   Estética macOS/Apple: Glass, blur, bordes suaves
   Variables: --glass-bg, --glass-border, --shadow,
              --accent, --text-main, --color-contrasted-elements
   ============================================ */

/* #### Mobile Phones Portrait #### */
@media screen and (device-width <= 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (device-width <= 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (device-width <= 480px){
  #search-query{
    width: 85px;
  }

  #search-query{
    padding-left: 8px;
    padding-right: 8px;
    transition: all .5s;
    /* Estilo input coherente con el sistema */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-main, #1d1d1f);
    font-family: inherit;
  }

  #search-query:focus{
    width: 206px;
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 1px;
    border-color: var(--accent, #007AFF);
  }

  /* Adapt form */
  #dock .form-horizontal .controls, div.modal .form-horizontal .controls {
    margin-left: 10px;
  }

  #edition #edition-point-coord-form-group.jforms-table-group {
    padding-left: 5px;
  }

  #edition-point-coord-form-group .control-group label.control-label{
    width: 80px;
    display: inline-block;
  }

  #edition-point-coord-form-group .control-group div {
    display: inline-block;
    text-align: right;
  }

  #edition-point-coord-form-group .control-group input.jforms-ctrl-input{
    width: 85px;
  }

  #edition-point-coord-form-group .control-group select {
    width: auto;
  }

  lizmap-geolocation-survey .control-group > div:first-child{
    width: 80px;
  }

  lizmap-geolocation-survey input.input-mini{
    width: 40px;
  }

  /* snap panel */
  #edition-point-coord-form-group .control-group div.snap-panel-controls {
    display: flex;
    flex-direction: column;
    margin: 10px;
    text-align: left;
  }

  #edition-point-coord-form-group .control-group div.snap-layers-list {
    overflow: auto;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  #edition-point-coord-form-group .control-group div.snap-layer {
    text-align: left;
    display: flex;
  }
}

@media screen and (device-width <= 640px){
  #attributeLayers-tabs > li > a {
    padding: 2px;
  }

  /* Hide text for login links */
  #headermenu.mobile #auth ul.nav a span.text {
    display: none;
  }
}

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (        min-device-pixel-ratio: 2),
only screen and (                resolution >= 192dpi),
only screen and (                resolution >= 2dppx),
only screen and (                   height <= 640px) ,
only screen and (                   device-height <= 640px) {
  /* Retina-specific stuff here */
  body{
    padding-top: 60px;
  }

  /* Header retina: más compacto, mantiene estilo glass de main.css */
  #header {
    height: 30px;
    /* El glass y border-radius se heredan de main.css,
       aquí solo ajustamos la altura */
  }

  .jacl2-list.jacl2-list-sticky-heads thead,
  .jacl2-list-user.jacl2-list-sticky-heads thead {
    top: 35px;
  }

  #logo {
    height: 30px;
    margin: 0 5px;
    min-width: 30px;
  }

  #logo h1 {
    font-size: 1.5em;
    margin: 5px;
    line-height: 20px;
    /* Hereda color y font-weight de main.css */
  }

  #title{
    height: 30px;
    margin: 0 5px;
    padding-right: 5px;
  }

  #title h1 {
    margin: 0 5px;
    font-size: 1.5em;
    line-height: 30px;
    /* Hereda color: var(--text-main) de main.css */
  }

  #headermenu{
    height: 30px;
    position: fixed;
    top: 0;
    padding-right: 20px;
  }

  #headermenu.mobile #auth form#nominatim-search {
    position: absolute;
    right: 50px;
    top: 30px;
  }

  #headermenu.mobile #auth ul.nav {
    position: absolute;
    left: auto;
    right: 0;
  }

  #headermenu.mobile .btn-locate-clear.icon {
    background-color: transparent;
    background-position: -926px 0;
    margin-top: 3px;
    /* Filtro coherente con map.css */
    filter: grayscale(0.3) opacity(0.9);
    transition: filter 0.2s ease;
  }

  #headermenu.mobile .btn-locate-clear.icon {
    background-position: -925px 0;    
    }
    
  .navbar-inner {
    min-height: 30px;
    padding: 0 10px;
  }

  #search{
    top: 30px;
  }

  /* for ie */
  .navbar-inner ul li{
    display: inline\9;
  }

  #overview-box {
    right: 0px;
    bottom: 40px;
  }

  #bottom-dock {
    opacity: 1;
  }
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (device-width >= 768px) and (device-width <= 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (width >= 1024px){
  /* some CSS here */
}

@media screen and (width <= 900px), screen and (height <= 400px){
  #navbar .slider{
    display: none;
  }
}

/* ============================================
   SMARTPHONES Y PANTALLAS TÁCTILES
   pointer: coarse = dispositivos táctiles
   ============================================ */
@media (pointer: coarse) {

  /* Botones de navegación del mapa: más grandes para táctil */
  #navbar button.btn{
    height: 40px;
    width: 40px;
    margin-bottom: 0.3em;
    /* Hereda border-radius: 8px y colores de map.css */
  }

  #navbar .btn.pan {
    background-position: 5px -25px;
  }

  #navbar .btn.zoom {
    background-position: -25px -25px;
  }

  #navbar .btn.zoom-extent {
    background-position: -25px -55px;
  }

  #navbar .btn.zoom-out {
    background-position: -25px 5px;
  }

  #navbar .btn.zoom-in {
    background-position: 5px 5px;
  }

  #navbar div.slider{
    margin-left: 18px;
  }

  #navbar .history button.btn{
    width: 20px;
  }

  #navbar .btn.previous, #navbar .btn.next{
    background-position-y: -87px;
  }

  #navbar .btn.previous.disabled{
    background-position-y: -117px;
  }

  #navbar .btn.next.disabled{
    background-position-y: -116px;
  }

  #navbar .btn.next, #navbar .btn.next.disabled{
    background-position-x: -39px;
  }

  #headermenu.mobile #auth form#nominatim-search{
    right: 65px;
  }

  /* ----------------------------------------
     MENÚ LATERAL MÓVIL (slide-in)
     Estilo glass coherente con map.css y embed.css
     ---------------------------------------- */
  #mapmenu{
    z-index: 5001;
    width: max-content;
    min-width: 250px;
    max-width: 400px;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    /* Glass effect coherente con embed.css */
    background: var(--glass-bg, rgba(255, 255, 255, 0.92)) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
    border-radius: 0 14px 14px 0; /* Solo esquinas derechas redondeadas al deslizar */
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.1));
  }

  #mapmenu > div{
    width: unset;
    display: flex;
    top: 45px;
  }

  #mapmenu > div > ul{
    margin: 0 7px;
    width: 100%;
    /* Fondo sutil coherente con el sistema */
    background-color: rgba(245, 245, 247, 0.6);
    border-radius: 10px;
  }

  /* Cada ítem del menú: estilo card suave */
  #mapmenu > div > ul li{
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 15px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  /* Ítem activo: azul Apple */
  #mapmenu > div > ul li.active{
    background-color: var(--accent, #007AFF);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
  }

  #mapmenu > div > ul li:last-child{
    margin-bottom: 15px;
  }

  /* Texto de los enlaces: oscuro sobre fondo claro */
  #mapmenu .nav-list > li > a{
    width: unset;
    text-align: left;
    font-size: 1.2em;
    color: var(--text-main, #1d1d1f);
    padding: .5em;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  /* Texto blanco cuando el ítem está activo */
  #mapmenu > div > ul li.active #mapmenu .nav-list > li > a,
  #mapmenu .nav-list > li.active > a{
    background-color: initial;
    color: white;
  }

  #mapmenu .menu-title{
    display: inline-block;
    margin-left: 10px;
    text-transform: capitalize;
    color: var(--text-main, #1d1d1f);
    font-weight: 500;
  }

  /* El ítem activo tiene el título en blanco */
  #mapmenu > div > ul li.active .menu-title {
    color: white;
  }

  #map-content{
    margin-left: 0;
  }

  /* Dock móvil: glass coherente con map.css */
  #content #dock{
    background: var(--glass-bg, rgba(255, 255, 255, 0.92)) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    color: var(--text-main, #1d1d1f);
  }

  #docks-wrapper{
    left: -1px;
    width: 100%;
    box-sizing: border-box;
  }

  #bottom-dock{
    border-left: 0;
  }

  /* Estado abierto del menú lateral */
  #menuToggle.opened ~ #mapmenu{
    transform: translateX(0);
  }

  /* ----------------------------------------
     BOTÓN HAMBURGER / MENU TOGGLE
     Estilo glass coherente con main.css
     ---------------------------------------- */
  #menuToggle{
    display: block;
    position: absolute;
    top: 12%;
    left: 4px;
    z-index: 9000;
    user-select: none;
    padding: 7px;
    border-radius: 10px;
    /* Glass oscuro coherente con map.css */
    background: var(--color-contrasted-elements);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: padding 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                background-color 0.2s ease;
  }

  #menuToggle:hover {
    background: var(--color-contrasted-elements);
  }

  /* Líneas del hamburger */
  #menuToggle span{
    display: block;
    width: 20px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: white;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0;
    transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                opacity 0.2s ease;
  }

  #menuToggle span:first-child{
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2){
    transform-origin: 0% 100%;
  }

  #menuToggle span:last-child{
    margin-bottom: 0;
  }

  /* Estado abierto: padding ajustado */
  #menuToggle.opened{
    padding-right: 2px;
    /* Azul Apple cuando está abierto */
    background: var(--accent, rgba(0, 122, 255, 0.85));
    border-color: rgba(0, 122, 255, 0.3);
  }

  /* Transformar hamburger en X */
  #menuToggle.opened span{
    opacity: 1;
    transform: rotate(45deg) translate(2px, 1px);
  }

  /* Ocultar línea central */
  #menuToggle.opened span:nth-child(2){
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /* Línea inferior en dirección contraria */
  #menuToggle.opened span:nth-child(3){
    transform: rotate(-45deg) translate(0, -1px);
  }

  #content.mobile #mini-dock{
    left: 0;
  }

  /* ----------------------------------------
     OVERLOAD DOCK ICONS EN MÓVIL
     Se mantienen las coordenadas del sprite
     ---------------------------------------- */

  /* Los íconos activos en móvil usan la variante oscura del sprite
     porque el fondo es ahora claro (glass), no oscuro */
  #mapmenu .nav-list > li.home.active .icon {
    background-position: -25px 0;
    filter: none; /* Sin filtro sobre fondo claro */
  }

  #mapmenu .nav-list > li.projects.active .icon {
    background-position: -925px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.metadata.active .icon {
    background-position: -125px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.switcher.active .icon {
    background-position: -75px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.legend.active .icon {
    background-position: -75px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.locate.active .icon {
    background-position: -165px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.print.active .icon {
    background-position: -375px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.measure.active .icon {
    background-position: -275px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.edition.active .icon {
    background-position: -475px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.geolocation.active .icon {
    background-position: -325px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.attributeLayers.active .icon {
    background-position: -525px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.permaLink.active .icon {
    background-position: -675px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.tooltip-layer.active .icon {
    background-position: -775px 0;
    filter: none;
  }

  #mapmenu .nav-list > li.timemanager.active .icon {
    background-position: -625px 0;
    filter: none;
  }

  /* Iconos blancos en menú activo (se mantiene para compatibilidad) */
  .nav .active > a .icon-white,
  .nav li > a:hover .icon-white,
  .nav li > a:focus .icon-white {
    background-image: url("images/glyphicons-halflings-white.png");
  }

  /* Dock con margen superior para evitar solapamiento con hamburger */
  #dock{
    margin-top: 45px;
    max-height: calc(100vh - 45px);
    overflow-y: auto;
  }

  /* Botones de digitalización más grandes para táctil */
  .digitizing .btn {
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    padding: 12px;
    /* Hereda border-radius: 8px de main.css */
  }

  /* Icono de info siempre visible en táctil (no depende de hover) */
  lizmap-treeview .icon-info-sign {
    display: block;
  }

  .tooltip-layer {
    display: none;
  }
}

/* ============================================
   MÓVIL EN ORIENTACIÓN PORTRAIT
   ============================================ */
@media (pointer: coarse) and (orientation: portrait){
  #docks-wrapper{
    flex-direction: column;
  }

  #sub-dock{
    width: 100%;
    /* Hereda el glass de map.css, sin borde izquierdo en portrait */
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
    border-left: none !important;
    border-radius: 0 0 14px 14px;
  }
}