/* ==========================================================
   SAMOS ARQUEOLÓXICO
   VISOR PÚBLICO

   Hoja de estilos principal
   - Reset
   - Variables
   - Layout general
   - Cabecera
   - Responsive

========================================================== */


/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    /* Colores */

    --color-fondo:#f5f5f5;
    --color-cabecera:#ffffff;
    --color-texto:#222222;
    --color-borde:#dddddd;

    /* Tamaños */

    --alto-cabecera:70px;

    --ancho-panel:400px;
	
	--alto-footer:70px;

    /* Tipografía */

    --fuente:Arial, Helvetica, sans-serif;

}


/* ==========================================================
   HTML / BODY
========================================================== */

html,
body{

    width:100%;

    height:100%;

    overflow:hidden;

    font-family:var(--fuente);

    background:var(--color-fondo);

    color:var(--color-texto);

}


/* ==========================================================
   CABECERA
========================================================== */

#cabecera{

    
	width:100%;

    height:var(--alto-cabecera);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:0 20px;

    background:#ffffff;

    border-bottom:1px solid var(--color-borde);

}


/* ==========================================================
   ZONA IZQUIERDA
========================================================== */

#cabeceraIzquierda{

    display:flex;

    align-items:center;
	
	

}


/* ==========================================================
   LOGO
========================================================== */

#logo{

    display:flex;

    align-items:center;

    height:100%;

}

#logo img{

    display:block;

    height:66px;

    width:auto;

}


/* ==========================================================
   ZONA DERECHA
========================================================== */

#cabeceraDerecha{

    display:flex;

    align-items:center;

    gap:15px;

    flex:1;

}


/* ==========================================================
   BUSCADOR
========================================================== */

#buscador{

    flex:1;

}

#txtBuscar{

    width:100%;

    height:42px;

    padding:0 15px;

    border:1px solid var(--color-borde);

    border-radius:6px;

    font-size:15px;

}


/* ==========================================================
   BOTÓN FILTROS
========================================================== */

#btnFiltros{

    height:42px;

    min-width:90px;

    padding:0 18px;

    border:none;

    border-radius:6px;

    cursor:pointer;

}


/* ==========================================================
   SELECTOR DE IDIOMA
========================================================== */

#idioma{

    width:60px;

    height:42px;

    border-radius:6px;

    padding:0 8px;

}


/* ==========================================================
   CONTENEDOR PRINCIPAL
========================================================== */

#contenedor{

    position:relative;

    width:100%;

    height:calc(100vh - var(--alto-cabecera));

}

/* ==========================================================
   OVERLAY
========================================================== */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:opacity .30s ease;

    z-index:1900;

}




/* ==========================================================
   PANEL FICHA

   El estilo se definirá en panel.css
========================================================== */

#panelFicha{

    width:var(--ancho-panel);

}


/* ==========================================================
   MAPA
========================================================== */

#mapa{

    width:100%;

    height:100%;

    background:#dcdcdc;

}

/* ==========================================================
   SELECTOR DE CAPAS
========================================================== */

#selectorCapas{

    position:absolute;

    top:10px;

    right:20px;

    z-index:1200;

}


/* ------------------------------------------
   BOTÓN
------------------------------------------ */

#btnCapas{

    height:30px;

    padding:0 16px;

    border:none;

    border-radius:6px;

    background:#ffffff;

    cursor:pointer;

    box-shadow:0 2px 8px rgba(0,0,0,.20);

}


/* ------------------------------------------
   MENÚ
------------------------------------------ */

#menuCapas{

    position:absolute;

    top:48px;

    right:0;

    min-width:100px;

    background:#ffffff;

    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,.20);

    opacity:0;

    visibility:hidden;

    transform:translateY(-8px);

    transition:.25s;

}

#menuCapas.abierto{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#menuCapas button{

    display:block;

    width:100%;

    padding:12px 16px;

    border:none;

    background:#ffffff;

    cursor:pointer;

    text-align:left;

}


#menuCapas button:hover{

    background:#f0f0f0;

}


#menuCapas button.activo{

    background:#2d6cdf;

    color:#ffffff;

}


/* ==========================================================
   BUSCADOR
========================================================== */

#buscador{

    position:relative;

    flex:1;

}


/* ------------------------------------------
   CAMPO DE BÚSQUEDA
------------------------------------------ */

#txtBuscar{

    width:100%;

    height:42px;

    padding:0 15px;

    border:1px solid var(--color-borde);

    border-radius:6px;

    font-size:15px;

    background:#ffffff;

}


/* ------------------------------------------
   LISTA DE RESULTADOS
------------------------------------------ */

#listaResultados{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    margin-top:4px;

    background:#ffffff;

    border-radius:6px;

    box-shadow:0 4px 12px rgba(0,0,0,.20);

    max-height:300px;

    overflow-y:auto;

    z-index:5000;

}


/* ------------------------------------------
   CADA RESULTADO
------------------------------------------ */

.resultado{

    padding:10px 14px;

    cursor:pointer;

    border-bottom:1px solid #e5e5e5;

    transition:background .15s;

}


.resultado:last-child{

    border-bottom:none;

}


.resultado:hover{

    background:#f3f3f3;

}


.resultado strong{

    display:block;

    margin-bottom:2px;

}
/* ==================================================
   PIE DE FINANCIACIÓN
================================================== */

#footerFinanciacion{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    height:var(--alto-footer);

    display:flex;
    justify-content:space-evenly;
    align-items:center;

    padding:4px 20px 22px;

    background:#fff;
    border-top:1px solid #d9d9d9;
    box-shadow:0 -2px 8px rgba(0,0,0,.08);

    z-index:5000;
}

#enlacesLegais{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:18px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    background:#fff;
}

#enlacesLegais button{

    border:none;

    background:none;

    padding:0;

    color:rgb(140,106,24);

    font-family:inherit;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

}

#enlacesLegais button:hover{

    text-decoration:underline;

}

#enlacesLegais span{

    color:#aaa;

    font-size:11px;

}

#footerFinanciacion img{

    display:block;

    width:auto;

    object-fit:contain;

}

/* Ajuste individual */

.logoConcello{
    max-height:38px;
    width:auto;
}

#footerFinanciacion img:nth-child(1){      /* Xunta */
    max-height:38px;
}

#footerFinanciacion img:nth-child(2){      /* UE */
    max-height:33px;
}

#footerFinanciacion img:nth-child(3){      /* Ministerio */
    max-height:31px;
}

#footerFinanciacion img:nth-child(4){      /* Leader */
    max-height:35px;
}

#footerFinanciacion img:nth-child(5){      /* Concello */
    max-height:40px;
}



/* ==================================================
   MÓVILES
================================================== */

@media (max-width:768px){

    #footerFinanciacion{

        height:70px;

        display:flex;

        justify-content:space-between;

        align-items:center;

        gap:8px;

        padding:3px 8px 21px;

    }

    #footerFinanciacion img{

        display:block;

        vertical-align:middle;

        margin:0;

        width:auto;

        flex-shrink:1;

        min-width:0;

    }

    .logoXunta{

        max-width:34%;
        max-height:36px;

    }

    .logoUE{

        max-width:23%;
        max-height:30px;

    }

    .logoMinisterio{

        max-width:22%;
        max-height:29px;

    }

    .logoLeader{

        max-width:30%;
        max-height:33px;

    }
	
	.logoConcello{
		max-width:20%;
		max-height:29px;
	}
	
    #enlacesLegais{

        height:18px;

        gap:8px;

        padding:0 4px;

    }

    #enlacesLegais button{

        font-size:9px;

    }

    #enlacesLegais span{

        font-size:9px;

    }


	
    .creditoFooter{
		display:none;
	}
}
/* ==========================================================
   RESPONSIVE

   Pantallas menores de 900 px
========================================================== */

@media (max-width:900px){

    /* ------------------------------------------
       CABECERA
    ------------------------------------------ */

    #cabecera{

        flex-direction:column;

        align-items:stretch;

        gap:4px;

        height:auto;

        padding:4px 10px;

    }


    /* ------------------------------------------
       ZONA IZQUIERDA
    ------------------------------------------ */

    #cabeceraIzquierda{

        justify-content:center;
        padding-top:0px;

    }


    /* ------------------------------------------
       LOGO
    ------------------------------------------ */

	#logo img{

		height:42px;

	}


    /* ------------------------------------------
       ZONA DERECHA
    ------------------------------------------ */

    #cabeceraDerecha{

        display:grid;

        grid-template-columns:1fr auto;

        grid-template-areas:

            "buscar buscar"

            "filtros idioma";

        gap:8px;

    }


    /* ------------------------------------------
       BUSCADOR
    ------------------------------------------ */

    #buscador{

        grid-area:buscar;

    }

    #txtBuscar{

        height:30px;

        font-size:14px;

    }


    /* ------------------------------------------
       BOTÓN FILTROS
    ------------------------------------------ */

    #btnFiltros{

        grid-area:filtros;

        width:100%;

        height:30px;

        font-size:14px;

    }


    /* ------------------------------------------
       IDIOMA
    ------------------------------------------ */

    #idioma{

        grid-area:idioma;

        justify-self:end;

        height:30px;

        font-size:14px;

    }


    /* ------------------------------------------
       CONTENEDOR
    ------------------------------------------ */

    #contenedor{

        height:calc(100dvh - 130px);

    }


    /* ------------------------------------------
       PANEL FICHA
    ------------------------------------------ */

    #panelFicha{

        width:100%;

    }


    /* ------------------------------------------
       PANEL DE FILTROS
    ------------------------------------------ */

    #panelFiltros{

        left:0;

        right:0;

        bottom:0;

        top:auto;

        width:100%;

        max-width:none;

        max-height:65vh;

        padding:16px;

        border-radius:18px 18px 0 0;

        overflow-y:auto;

    }


    /* ------------------------------------------
       SELECTOR CAPAS
    ------------------------------------------ */

    #selectorCapas{

        top:12px;

        right:12px;

    }

}

/* Fundido Relieve */
.leaflet-relieve-pane {
    opacity: 0;
    transition: opacity 2s ease;
}

.leaflet-relieve-pane.visible {
    opacity: 1;
}

/* ==================================================
   DISPOSITIVOS TÁCTILES EN HORIZONTAL
================================================== */

@media (orientation:landscape) and (pointer:coarse){

    #contenedor{
        height:calc(100dvh - var(--alto-cabecera));
    }

}