/* CSS Document */

body{
margin-left: 0px;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 2px;
text-align: center;
background-color:#CCCCCC;


}

#contenedor {
	width: 890px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	padding:5px;
	margin-left: auto;
	text-align: left;
	position: relative;
	border:1px solid #000000;
	background-color:#FFFFFF;

}

.cabecera
{
	clear:both;
	width:100%;
	background-repeat:no-repeat;
}



/* 
---------------------------------------
PANEL DE LA IZQUIERDA
---------------------------------------
*/


#izquierda
{
	width:150px;
	float:left;

	/*border: 1px dotted #999999;
	padding: .2em;
	border-right: 2px dashed #FFCC99;
	border-left: 2px dashed #FFCC99;*/


}


	
	#menu14 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#menu14 {
	width: 200px;
	margin: 10px;
	}
	
#menu14 li a {
	height:32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu14 li a:link, #menu14 li a:visited {
	color: #333;
	display: block;
	background:  url(imagenes/menu14.gif);
	padding: 8px 0 0 10px;
	}
	
#menu14 li a:hover {
	color: #FFF;
	background:  url(imagenes/menu14.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}




.preload16 {background: url(pro16/pro16_2.gif);}
.preload16a {background: url(pro16/pro16_2a.gif);}

.pro16 {padding:0 0 0 1em; margin:0; list-style:none; height:43px; position:relative; background:transparent url(pro16/pro16_back.gif) repeat-x left top; font-size:11px;}
.pro16 li {float:left; height:43px;}
.pro16 li a {display:block; float:left; height:40px; line-height:35px; color:#888; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(pro16/pro16_0a.gif) no-repeat;}
.pro16 li a b {float:left; display:block; padding:0 60px 0 0; background:url(pro16/pro16_0.gif) no-repeat right top;}
.pro16 li.current a {color:#000; background:url(pro16/pro16_2a.gif) no-repeat;}
.pro16 li.current a b {color:#000; background:url(pro16/pro16_2.gif) no-repeat right top;}
.pro16 li a:hover {color:#000; background: url(pro16/pro16_2a.gif) no-repeat;}
.pro16 li a:hover b {color:#000; background:url(pro16/pro16_2.gif) no-repeat right top;}
.pro16 li.current a:hover {color:#000; cursor:default;}



#menuh a#primero {
	border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
	background:#FFCC99;
}



/* 
---------------------------------------
PANEL DE LA DERECHA
---------------------------------------
*/


#contenedor #contenido
{
	float: left;
	width:880px;
	margin:.2em;
	min-height:350px;

}


#contenedor #contenido #principal {
	float: right;
	width: 670px;
	margin:.2em;
	padding: 15px;
/*	background-color:#FFddbb;
background-image:url(imagenes/fondoprinci.jpg);
background-position:right;
background-repeat:repeat-y;
	border:1px dashed  #F9B32D;*/
	min-height: 400px;

	
}


#contenedor  #contenido #secundario {
	float: right;
	width: 162px;
	margin:.1em;
/*	background-color:#FFddbb;
background-image:url(imagenes/fondoprinci.jpg);
background-position:right;
background-repeat:repeat-y;*/

	
}


#piepagina
{
	height:65px;
	clear:both;
	background-color:#FFC041;
	padding:25px;
}

#piepagina .texto { 
	list-style: none;
	margin: 0;
	padding-left: .5em;
	margin-top: .5em;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	padding-right: .50em; margin-right: .5em;

}

#piepagina ul.menu li, #piepagina ul.menu li a{

	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	padding-right: .50em; margin-right: .5em;
	font-weight:bold;
	color:#333333;
	text-decoration:none;
			display:inline;

}

#piepagina  ul.menu li a:hover{

	text-decoration:underline;
	color:#FF8000;
	}

.guion
{
	color: #CC6600;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;

}

.titulo
{
	color:#FF6600;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	/*background-color:#F29A14;*/
	
}

.titulo2
{
	color:#FF6600;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	/*background-color:#F29A14;*/
	
}


.texto
{

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#381D1D
}


.error
{
color:#CCCC00;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
}


.quienessomos
{
width:200px;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:15px;
text-align:justify
}

.enlacepermiso {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #4C302D;
	font-style: italic;
	font-weight: bold;
	text-decoration:none;
}


/* ====== Responsive patch (añadir al FINAL de estilo.css) ====== */

/* 1) Caja principal */
#contenedor{
  max-width: 1100px;   /* ajusta si quieres */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
}

/* 2) Evitar desbordes */
*{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; }

/* 3) Tablas “layout” a responsive */
@media (max-width: 768px){

  /* La tabla principal se vuelve "bloque" para apilar columnas */
  table[width="90%"], table[width="95%"], table[width="100%"]{
    width: 100% !important;
  }

  table, tbody, tr, td{
    display: block;
    width: 100% !important;
  }

  td{
    padding: 8px 0 !important;
  }

  /* Si el menú lateral (listapermisos.php) es la primera columna, queda arriba */
  /* Si lo prefieres abajo, lo ajustamos con order usando flex, pero esto ya funciona */

  /* 4) Imágenes flotadas (las de lightbox) mejor centradas en móvil */
  .texto img[style*="float:left"],
  .texto img[style*="float:right"]{
    float: none !important;
    display: block;
    margin: 10px auto !important;
  }

  /* 5) Organigrama centrado */
  img[alt="organigrama"]{
    display: block;
    margin: 0 auto;
  }

  /* 6) Si hay divs con width fijo (mapa) */
  #map{
    width: 100% !important;
    max-width: 100%;
    height: 260px !important; /* ajustable */
  }
}

/* 4) Un pelín de legibilidad en pantallas medianas */
@media (max-width: 480px){
  .texto{
    font-size: 15px;
    line-height: 1.45;
  }
  .Estilo3{
    font-size: 17px;
  }
}