/*-----------------------------------------------*/
/**-*-*-*-*-*-*-*-*-*- SECTORES -*-*-*-*-*-*-*-*-**/
/*-----------------------------------------------*/

/*=========================================================*/
/*=========================================================*/
/*=========================================================*/
/*----======------------ FRONTAL  WEB ------------======---*/
/*=========================================================*/
/*=========================================================*/
/*=========================================================*/


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /*font-family:"Comic Sans MS", cursive;*/
	/*font-family: 'Dancing Script', cursive;*/
	width:100%;
	background:url(../imagen/web/Mapa%20fondo%20andarines-1.jpg) repeat;
	background-size: 50%;
		margin: 0px;
        /*font-size: 20px;*/
        /*line-height: 1.2;*/
        transition: font-family 0.3s ease;
}

/* ------ ADMIN ------- */
.body-articulos{
	background-color:#CCCCCC;
}


/*==================================*/
/*----------- PRINCIPAL ------------*/
/*==================================*/

.contenedor {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 15px;
}


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

.cabecera{
/*    padding: 1rem;*/
	display: grid;
	height:142px;
	margin-right:15px;
	margin-top:15px;
	margin-left:10px;
	border-style:solid 3px;
	border-radius: 10px;
	border-color:#FFFF00;
	background: url(../imagen/web/cabecera.jpg) center;
    box-shadow: 0px 5px 8px 0px rgba(1,1,1,1.2);	
}

.logo{
	min-width:350px;
}

.card {
	background: white; 
	padding: 20px; 
	border-radius: 8px; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/*===================================*/
/*---------CULUMNA  IZQUIERDA--------*/
/*===================================*/

.columna-izquierda {
    overflow: hidden;
	margin-left:10px;
	width: 20%;
	max-width:350px;
	min-width:300px;
	border-radius: 8px; 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /*font-size: 0.85em;*/
    /*width: 90%;  Que ocupen casi todo el ancho del lateral */
}

.columna-izquierda ul {
    margin-bottom: 5px;
}


/*=====================================*/
/*---------- CENTRO  DERECHA ----------*/
/*=====================================*/

.columna-centro {
    overflow: hidden;
	width: 100%;
    /*font-family:"Comic Sans MS", cursive;*/
	/*font-family: 'EB Garamond',serif;*/
    /*line-height: 1.6;*/
}

/*.seccion-contenido {
    max-width: 100%;
    font-family:"Comic Sans MS", cursive;
    line-height: 1.6;
}*/

/*==================================*/
/*---------- NAVEGACIÓN ------------*/
/*==================================*/

.nav-links {
    box-sizing: border-box;
    width: calc(100% - 20px); /* 10px + 10px */
    margin: 15px 10px 20px 10px;
    display: grid;
    background-image: url(../imagen/web/marmol-verde.jpg);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0px 5px 8px rgba(1,1,1,0.4);
	/*font-size:18px;
	display: grid;
	margin-left:-30px;
	margin-right:30px;
	margin-bottom: 20px;
	margin-top:20px;*/
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
}

.nav-links a {
	text-decoration: none; 
	color: #007bff; 
	font-weight: bold; 
	margin-right: 5px; 
}

.div-nav-links {
}

.strong-nav-links {
    /*background-image: url(../imagen/web/marmol-verde.jpg);
    margin: 10px 10px 5px 10px;
	width: calc(100% - 10px);
    display: grid;
    background-size: cover;
    border-radius: 8px;
    box-shadow: 0px 5px 8px rgba(1,1,1,0.4);*/
	/*border-radius: 5px;*/ 
}


/*=====================================*/
/*------------ARTICULOS----------------*/
/*=====================================*/

.lista-articulos {
    list-style: none;
    padding: 0;
}

.articulo-espacio {
    padding: 0;
}


.fondo-articulo {
    box-sizing: border-box;
    width: calc(100% - 20px); /* 10px + 10px */
    margin: 15px 10px 20px 10px;
    display: grid;
    background-image: url(../imagen/web/marmol-verde.jpg);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0px 5px 8px rgba(1,1,1,0.4);
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;
}

.articulo-fondo {
	/*display: grid;
	padding: 15px;
	margin-right: 15px;
	margin-top:15px;
	margin-left:10px;
	margin-bottom:20px;
	height:auto;
	background-size: 50%;
	background-image:url(../imagen/web/marmol-verde.jpg);
	border-radius: 8px;
	border:2px;
	border-style:solid 3px;
	border-radius: 10px;
	border-color:#FFFF00;
	min-width:350px;
    box-shadow: 0px 5px 8px 0px rgba(1,1,1,1.2);*/
}


.articulo-fondo-2 {
    box-sizing: border-box;
    width: calc(100% - 20px);  10px + 10px 
    margin: 15px 10px 20px 10px;
    display: grid;
    background-image: url(../imagen/web/marmol-verde.jpg);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0px 5px 8px rgba(1,1,1,0.4);
}


/*=====================================*/
/*------- INFORMACIÓN TÉCNICA ---------*/
/*=====================================*/
.aviso {
    /*display: flex;*/
    box-sizing: border-box;
    margin: 15px 10px 20px 10px;
    /*display: grid;*/
	background-color:transparent;
    background-size: cover;
	justify-content: space-between;
	/*flex-wrap: wrap;*/
	font-family:"Comic Sans MS", cursive;
}

.datos-tecnicos-bar-uno {
    box-sizing: border-box;
    width: calc(100% - 10px); /* 10px + 10px */
    display: grid;
	margin-top:-20px;
	margin-bottom:30px;
	margin-left:30px;
	margin-right:30px;
	flex-wrap: wrap;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	line-height:1.6;
}

.datos-tecnicos-bar-uno span {
	white-space: nowrap;
}

.datos-tecnicos-bar-dos {
    box-sizing: border-box;
    width: calc(100% - 10px); /* 10px + 10px */
    margin: 5px 5px 5px 5px;
    display: grid;
	margin-left:30px;
	margin-right:30px;
	flex-wrap: wrap;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	line-height:1.6;
}

.datos-tecnicos-bar-dos span {
	white-space: nowrap;
}



/*.ficha-articulo, .body-articulos {*/
.articulo-contenido {
	/*line-height: 1.6em;*/ 
	margin: auto;
	margin-top:15px;
	margin-left:35px;
    max-width: 900px;
}

.info-categoria-base{
	margin-top:0px; 
	padding-top: 0px;
}

.div-fondo_1 {
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	padding-top:5px;
    box-sizing: border-box;
    width: calc(100% - 10px); /* 10px + 10px */
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:5px;
    /*display: grid;*/
    background-image: url("../imagen/web/pergamino.png");
	background-size: cover;
}

.div-fondo_1 img{
	object-fit: contain;
}

.div-fondo_2 {
	display: grid;
	object-fit: fill;
	margin-right: 20px;
	margin-top:20px;
	margin-left:20px;
	margin-bottom:20px;
	height:auto;
	background-size: 100% 100%;
	background-image:url(../imagen/web/pergamino.png);
	background-repeat:no-repeat;
	border-radius: 8px;
	border:2px;
	border-style:solid 3px;
	border-radius: 10px;
	border-color:#FFFF00;
    /*box-shadow: 0px 5px 8px 0px rgba(1,1,1,1.2);*/
	-webkit-box-shadow: 1px 0px 8px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 0px 8px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 0px 8px 2px rgba(0,0,0,0.6);
}


/*===========================================*/
/*--------------- COMPLEMENTOS --------------*/
/*===========================================*/

.div-cuadro_lista {
border:hiden;
display:inline-block;
background-color:rgb(200,255,255);
display:inline-block;
border-radius:8px;
/*box-shadow: 1px 1px 8px #000;*/
margin-left:25px;
margin-right:25px;
margin-top: 0px; 
margin-bottom: 0px; 
padding: 15px; 
background-image: url(../imagen/web/Fondo-madera-01-2.png);
}

.div-cuadro_transp_20 {
    box-sizing: border-box;
    width: calc(100% - 40px); /* 10px + 10px */
    margin: 20px 20px 20px 20px;
    display: grid;
    /*background-image: url(../imagen/web/marmol-verde.jpg);*/
    background-size: cover;
    border-radius: 10px;
    /*box-shadow: 0px 5px 8px rgba(1,1,1,0.4);*/

	/*margin-left:20px;
	margin-right:20px;
	padding-left:20px;
	padding-right:20px;
	width: calc(100% - 20px);  10px + 10px	width:500px;*/
}

.strong-cuadro_transp_20 {
	/*margin-left:20px;
	margin-right:20px;
	padding-left:20px;
	padding-right:20px;*/
}

.span-cuadro_transp_5 {
}

.font-cuadro_transp_5 {
}


/*==================================*/
/*--------------- PIE --------------*/
/*==================================*/
.pie-pagina {
    background: #222;
    color: #fff;
    padding: 1rem;
    text-align: center;
}


@media (max-width: 1100px) {
    .contenedor {
		/*flex-direction: column;*/
        grid-template-columns: 1fr;   /* 👈 elimina la columna fantasma */
    }
    .columna-izquierda, .columna-centro {
		width: 100%; 
	}
	/* Para pantallas menores o iguales a 660px */

    .fondo-articulos {
        min-width: auto; /* eliminar mínimo fijo */
        width: 100%;     /* ocupar todo el ancho disponible */
        padding: 20px;   /* ajustar padding si hace falta */
        background-size: cover; /* o 100% 100% para ajustar */
    }
	
	.div-fondo_1 {
        min-width: auto;
        width: 100%;
        padding: 20px;
        background-size: cover;
		width: calc(100% - 40px); /* 10px + 10px */	}

}

/* Para pantallas menores o iguales a 660px */
@media (max-width: 660px) {
    .fondo-articulo {
        min-width: auto; /* eliminar mínimo fijo */
        width: 100%;     /* ocupar todo el ancho disponible */
        padding: 20px;   /* ajustar padding si hace falta */
        background-size: cover; /* o 100% 100% para ajustar */
    }
}

/* Para pantallas menores o iguales a 515px */
@media (max-width: 515px) {
    .barra-navegacion {
        width: 100%;
        overflow-x: auto; /* permitir scroll horizontal si hay muchos items */
        /* o esconder elementos y mostrar menú hamburguesa */
    }

    /* Si tienes menú, oculta elementos y muestra icono hamburguesa */
    .menu-item {
        display: none;
    }

    .menu-hamburguesa {
        display: block;
    }
		.div-fondo_1 {
        min-width: auto;
        width: 100%;
        padding: 20px;
        background-size: cover;
		width: calc(100% - 40px); /* 10px + 10px */	
	}

}








/*=========================================================*/
/*=========================================================*/
/*=========================================================*/
/*----======----------- ADMINISTRACIÓN -----------======---*/
/*=========================================================*/
/*=========================================================*/
/*=========================================================*/


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

.cabecera-articulos{
/*    padding: 1rem;*/
	display: grid;
	height:142px;
	margin-right:15px;
	margin-top:15px;
	margin-left:10px;
	border-style:solid 3px;
	border-radius: 10px;
	border-color:#FFFF00;
	background: url(../imagen/web/cabecera.jpg) center;
    box-shadow: 0px 5px 8px 0px rgba(1,1,1,1.2);
	alignment-adjust:middle;	
}


/*=============================================*/
/*------------------TABLAS  DIV----------------*/
/*=============================================*/

#contenedor {
    display: table;
    border: 1px solid #060;
    width: 100%;
    text-align: center;
    margin: 0 auto;
	background-color:#CCC;
	margin-top:10px;
}

#contenidos {
    display: table-row;
}

#columna1 {
    display: table-cell;
    border: 1px solid #060;
    vertical-align: middle;
    padding: 10px;
	width:25%;
}

#columna2 {
    display: table-cell;
    border: 1px solid #060;
    vertical-align: middle;
    padding: 10px;
	width:25%;
}

#columna3 {
    display: table-cell;
    border: 1px solid #060;
    vertical-align: middle;
    padding: 10px;
	width:15%;
}

#columna4 {
    display: table-cell;
    border: 1px solid #060;
    vertical-align: middle;
    padding: 10px;
	width:15%;
}

#columna5 {
    display: table-cell;
    border: 1px solid #060;
    vertical-align: middle;
    padding: 10px;
	width:20%;
}

table {
	width: 100%; 
	border-collapse: collapse;
	background-color:#CCC;
}
        
th, td {
	padding: 12px; 
	border: 1px solid #ddd; 
	text-align: left; 
}
        
th {
	background-color: #f4f4f4; 
}
        
/*.badge {
	padding: 4px 8px; 
	border-radius: 4px; 
	font-size: 1.2em; 
	background: #eee; 
}*/

.derecha{
	float:right;
	padding-right:5px;
	padding-top:5px;
}

.izquierda{
	float:inherit;
	padding-left:5px;
	padding-top:5px;
}

/* Contenedor de los campos */
.contenedor-flex-campos {
    display: flex;
    flex-wrap: wrap; /* Permite que los campos salten de línea */
    gap: 15px;      /* Espacio entre campos */
    width: 100%;
}

/* El grupo de cada campo */
.form-group-dinamico {
    display: flex;
    flex-direction: column;
    min-width: 200px; /* Para que en móviles no se vean minúsculos */
    box-sizing: border-box;
}