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

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

* {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    /*display: block;*/
}

.imagen-articulo {
    width: 100%; /*----   NO  TOCAR   ------*/
    max-width: 100%; /*----   NO  TOCAR   ------*/
    height: auto; /*----   NO  TOCAR   ------*/
}
 
body {
    margin: 0;
	width:100%;
	background:url(../imagen/web/Mapa%20fondo%20andarines-1.jpg) repeat;
	background-size: 50%;
		margin: 0px;
        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{
	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);
}

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


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

.columna-centro {
    overflow: hidden;
	width: 100%;
}

/*==================================*/
/*---------- 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);
	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 {
}


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

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

.mesa {
    background-image:url('../imagen/web/marmol-verde.jpg');
    background-size: cover;
    background-repeat: no-repeat;

    padding: 10px 10px;   /* margen general de la mesa */
	margin:10px;
	border-radius:10px;
}

.papel * {
    max-width: 100%;
}

.papel {
    position:relative;
    background-image: url('../imagen/web/pergamino.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
	margin-left:5px;
	margin-right:5px;
	padding-left:30px;
	padding-right:30px;       /* bordes más pequeños */

    box-sizing: border-box;
}

@media (max-width: 660px) {

    .mesa {
        padding: 20px 10px;
    }

    .papel {
        width: 100% !important;   /* ignora el JS */
        /*margin: 15px auto;*/
		padding-left:20px;
		padding-right:20px;       /* bordes más pequeños */
        background-size: 100% 100%;
    }

    .papel h2 {
        font-size: 1.3em;
    }

    .papel p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {

    .papel {
 		padding-left:22px;
		padding-right:18px;
   }

    .papel h2 {
        font-size: 1.15em;
    }
}



/*=====================================*/
/*------- INFORMACIÓN TÉCNICA ---------*/
/*=====================================*/
.aviso {
    box-sizing: border-box;
    margin: 15px 10px 20px 10px;
	background-color:transparent;
    background-size: cover;
	justify-content: space-between;
	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:10px;
	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 {
	margin: auto;
	margin-top:15px;
	margin-left:35px;
    max-width: 900px;
}

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

/*=========================================*/
/*---------------   BARRAS   --------------*/
/*=========================================*/

.barra {
	margin-left:10px;
	width: calc(100% - 20px);  /*10px + 10px*/ 
	text-align: center;
	padding-bottom:-20px;
	margin-bottom:-20px;
}

.barra img {
	max-width: 100%;
}


/*
.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;
    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;
	-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;
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% - 10px);
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
    display: grid;
    background-size: cover;
    border-radius: 10px;
}

.div-cuadro_transp_50 {
    box-sizing: border-box;
    width: calc(100% - 100px);
	margin-top:5px;
	margin-bottom:5px;
	margin-left:50px;
	margin-right:50px;
    display: grid;
    background-size: cover;
    border-radius: 10px;
}

.strong-cuadro_transp_20 {
}

.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{
	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; 
}
        
.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;
}