nav/*  Definicion CSS del layout ZN y base de notas*/
/* Layout general */
body{
	color: 555;
	background-color: #ffffff;
	line-height: 1.25;
}

.noticias{
    font-family: Roboto, Arial, serif;
    font-weight: 400;
    font-size: 8;
    fill: gray;
}

h1{  /* nota A cabeza*/
	font-size: 55px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -1px;
	font-family: Noto Serif, Times, serif;
	text-align: left;
	margin-bottom: 4px;
	color: #333;
	line-height: 110%;
}
h2{
	font-size: 35px;
	font-weight: 700;
	font-family: Noto Serif, Helvetica, Arial, sans-serif;
	text-align: left;
	letter-spacing: -1px;
	margin-bottom: 0.5em;
	margin-top: 1em;
	color: #333;

}

h5, h6, label{
	text-align: left;
    font-family: Open Sans, Verdana, Geneva, sans-serif;
	padding:0px;
	margin:0px;
	color: #555;
}

h4 {
    line-height: 175%;
    width: 35%;
    font-size: 1.1em;
    color: #cc6600;
    margin-block-start: -.5em;
    margin-block-end: unset;
    float: left;
    margin: .5em;
    border: 1px;
    background: #ddd;
    padding: .8em;
}

h3{
	font-size: 1.35em;
    margin-top: 2em;
    font-family: Noto Serif, Times, serif;
    margin-block-end: .5em;
    text-align: left;
    line-height: 1.25;
    font-weight: 800;
}
	
h3.favoritas{
	font-family: "roboto",Geneva,sans-serif,sans-serif;
	letter-spacing: .03em;
	margin-top: 20px;
	color: #808080;
  margin-block-end: .5em;
  line-height: 120%;
}
h3.secc_h{
	font-family: "roboto",Geneva,sans-serif,sans-serif;
	display:none;
}

h5{
	text-transform: uppercase;
}

.mark{
	width: 100%;
    background-color: #fff;
    font-size: .95rem;
    font-style: normal;
    font-weight: bold;
    font-family: Verdana, Arial;
    text-align: left;
    color: #333;
    margin-top: 1em;
}	

.acreditacion {
    font-size: .825rem;
    text-transform: uppercase;
    /* font-size: 11px; */
    letter-spacing: -0.2px;
    padding-left: 0em;
    color: #cc6600;
    line-height: 0.9rem;
    font-style: normal;
    font-family: Arial, Verdana;
    text-align: left;
}

p{
	font-size: 1.0625rem;
	font-weight: 500;
	font-style: normal;
	font-family: Noto Serif, serif, times;
	text-align: left;
	line-height: 1.4;
	color: #555;
}

p.caption {
    font-family: Noto Serif, Times, serif;
    color: black;
    font-style: italic;
    font-size: 0.875rem;
    text-align: left;	
    padding-left: 4px;
    margin-top: .25rem;
}

p.ayuda{
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    padding: 2em 2em 4em;
}

p.cls_fotonota {
    font-size: 1.25rem;
    font-weight: normal;
    font-style: normal;
    font-family: Noto Serif, serif, times;
    text-align: justify;
    line-height: 1.1;
    color: #555;
}

hr{
	background-color:#d5d5d5;
	height: 0.0625rem;
	border: none;
}
img{
	border: none;
}

.img_responsive80{
	width: 100%;
	height: auto;
}

br {
  line-height:2em;
}

p.cls_recuadro{
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    padding: 2em;
}

div.cls_recuadro{
    width: 58%;
    background: #eee;
    float: left;
    font-size: 15px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-right: 1.5em;
}

div.cls_recuadro_full{
    width: 100%;
    background: #eee;
    float: left;
    font-size: 15px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-right: 1.5em;
}

h3.cls_recuadro{
    font-family: "roboto",Geneva,sans-serif,sans-serif;
	letter-spacing: .03em;
	color: #666;
    margin-block-end: .5em;
    line-height: 120%;
    font-size: 1.25em;
}

a{
    color: #333333;
    text-decoration: none;
    background-color: transparent;
}

a[href*="cabeza"] {
  color: #cc6600;
}

a.cuerpo{
	text-decoration: underline;
}

a:link, a:visited, a:active{
	text-decoration: none;
	color: #333333;
}
a:hover {
	opacity: 0.6;
	transition: 0.3s;
}
a.favoritas:link, a.favoritas:visited{
	color: #333;
	text-decoration: none;
}
a.favoritas:hover,a.favoritas:active{
	text-decoration: none;
    color: #cc6600;
}

table.ab50{
  border-collapse: collapse;
  background-color: #eee;
  table-layout: fixed;
  width: 25%;
}

th,td {
  padding : 8px;
}

strong {
    color: #666;
}

li {
	text-align: left;
	margin-bottom: 0.45em;
	line-height: 1.3;
	font-weight: 400;
}

form{
	margin: 0.5em;
}

input[type=search] {
  padding: 6px 6px;
  box-sizing: border-box;
  border: 2px solid lightgray;
  border-radius:4px;
}

.form-group {
    margin-bottom: 1rem;
    margin-left: 5rem;
}

.hace{
	font-family: Verdana, Arial;
	background-color: #808080;
	color: #ffffff;
	font-size: 12px;
	font-family: Verdana, Arial;
	text-transform: uppercase;
	padding: 4px;
}
ol.favoritas{
  	font-size: 13px;
	font-style: normal;
	font-family: Verdana, Arial;
	line-height: 1.7em;
	font-weight: bold;
	padding: 4px;
	color: #555;
  	margin-block-start: .3em;
  	margin-block-end: 1em;
  	margin-inline-start: 0px;
  	margin-inline-end: 0px;
  	padding-inline-start: 40px;

}
div.favoritas{
	background-color: #d5d5d5
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #eee;
  padding: 10px;
}

.grid-container > div {
  background-color: #eee;
  padding: 0px 20px;
}

.item1 {
  grid-column: 1 / span 1;
}
.item4 {
    grid-column:1 / span 3;
}
.item6 {
    grid-column:1 / span 1;
    text-align: center;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: .3em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.menu_nfoot{
	
}

div.ico img {
    margin: 3px;
    border: none;
    float: left;
    width: 18px;
    height: 18px;
}

div.icoshare img {
    margin: 0.15em;
    padding: 0.25em;
    border: none;
    float: left;
    width: 1.75rem;
    height:1.75rem;
    float: right;
}

.cls_etiq_texto{
	font-size: 11px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-weight: bold;
	color: #555;
	text-align: right;
	padding: 1em;
	text-transform: uppercase;
    float: right;
}

.div_datos_autor{
    width:100%;
    margin: 0.25rem;
    border: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cls_fecha_registro{
	font-size: .625rem;
    font-weight: bold;
    font-style: normal;
    font-family: Verdana, Arial;
    text-transform: uppercase;
    text-align: center;
    padding: .25em;
    margin: .25em;
    width: 11rem;
    background-color: #555;
    color: #ffffff;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.1s ease;
}
/* el credito(autor de la foto) es siempre el mism para todas las notas*/
.cls_credito{
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	padding-left: 0em;
	color: #cc6600;
	font-style: normal;
	font-family: Verdana, Arial;
	text-align: left;
	line-height: 1.5;
    float: left;
}

.cls_datos{
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    font-weight: normal;
    color: black;
    font-size: .875em;
    padding-top: 2px;
    text-align: left;
}

.cls_c_cabeza {
    font-size: 30px;
    font-weight: bold;
    font-family: Noto Serif, Times, serif;
    text-align: center;
    margin-bottom: .5em;
    margin-top: 1em;
    letter-spacing: -1px;
    color: #333;
}

/**********************************************/
/************** Header Section ****************/
/**********************************************/
#div_id_header{
	width:100%;
	float:left;
}
#div_id_header_cnt{
	max-width:1200px;
	float:none;
	margin:0px auto 0px auto;
}
#div_id_logo{
	width:auto;
	float:left;
	/*height:34px;*/
	text-align:center;
	margin-bottom:15px;
}
#div_id_logo a, #div_id_logo a:visited{
	display: inline;
	padding: 4px 4px 4px 4px;
	/* border: 1px solid #d5d5d5; */
	background-color: transparent;
	font-family: 'BebasNeueRegular',Arial, Helvetica, sans-serif;
	color: #da620b;
	font-size: 34pt;
	font-weight: bold;
	text-decoration: none;
}
#xdiv_id_logo a:hover{
	border: 1px solid #d5d5d5;
	background-color:#da620b;
	color:white;
	text-decoration:none;
}
#div_id_usuario{
	float: right;
    width: 100px;
    text-align: center;
}

#div_id_login{
	padding:10px;
	width: 300px;
	float: right;
  margin-right: 4em;
}

#div_id_formsigning{
	background-color:#e9ecef;
	margin-top: 5em;
	padding: 0.5em;

}

#div_id_buscar{
	font-family: 'BebasNeueRegular',Arial, Helvetica, sans-serif;
	font-weight: bold;
	float: left;
	align-content:  center;
	color:#999;
}

#div_id_buscar_footer{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding-top: 20px;
	color:#555;
	background-color: #eee;
	padding-bottom: 5px;
}

#txt_id_search_footer{
	width:230px;
	font-size: 18px;
}

/**********************************************/
/*************** Main Section *****************/
/**********************************************/
#div_id_main{
	width:100%;
	float:left;
	min-height:100px;
	margin-top:0px;
}
#main-wrap{
	max-width:1380px;
	float:none;
	margin:0px auto;
	/*background: linear-gradient( #ffffff, #000000);*/
}
.boxes-full{
	background-color:white;
	width:100%;
	height:auto;
	float:left;
	margin:15px 4px;
	text-align:center;
	position:relative;
}
.cls_Mozaico{
	width:100%;
	overflow: visible;
}

.col_Mozaico_Col_Izq{
	float: left;
	width:50%;
	margin-right: 8px;
	overflow: visible;
}

.col_Mozaico_D{
	float: left;
	width:48%;
	margin-right: 8px;
	overflow: visible;
}

.col_Mozaico_Col_Ctr{
	float: left;
	width:24%;
	overflow: visible;
}

.col_Mozaico_Col_Der{
	float: left;
	width:24%;
	overflow: visible;
}

#footer{
	width:100%;
	float:left;
	background-color:#eee;
	color:white;
	text-decoration:none;
	height: auto;
}

#footer-wrap{
	max-width:1300px;
	float:none;
	margin:0px auto;
}

.footboxes-full{
	background-color:#d5d5d5;
	width:100%;
	height:auto;
	float:left;
	margin:15px 4px;
	text-align:center;
	position:relative;
}
.cls_Foot_Mozaico{
	width:100%;
	overflow: visible;
}

.col_footer_Izq{
	float: left;
	width:49%;
	overflow: visible;
	background-color: #d5d5d5;
}

.col_footer_Der{
	float: left;
	width:49%;
	overflow: visible;
	background-color: #d5d5d5;
}
/* Barra de navegacion de pies */
.navbar {
  max-width: 1350px;
  margin: 0px auto;
  font-family: MarcinAnt, Helvetica, sans-serif;
  overflow: hidden;
  background-color: #797573;
  position: relative;
  vertical-align: bottom;
  bottom: 5px;
	border-top: 1px solid black;
  border-bottom: 1px solid gray;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 6px;
  text-decoration: none;
  font-size: 12px;
}

.navbar a:hover {
	opacity: 0.6;
  transition: 0.3s;
}

.nav-item{
  font-family: MarcinAnt, sans-serif;
  font-size: .6875rem;
  line-height: .8125rem;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.0875rem 0.1875rem;
  letter-spacing: .00625rem;
  text-decoration: none;
}
.nav-link{
	font-weight: bold;
}

.clear { clear:both; }

/**********************************************/
/*************** Notas Section *****************/
/**********************************************/

/* Estilos comunes */
.nota{
	background: none repeat scroll 0% 0% #FFF;
/*	border-radius: 4px;
	box-shadow: 0px 1px 5px #8A9BA8;*/
	text-align: center;
	float: left;
	overflow: visible;
}

.letracapitular
{
   float:left;
   color:black;
   background:#eeeeee;
   border:1px solid #999999;
   font-size:70px;
   line-height:50px;
   padding:2px;
   font-family:times;
   margin-right: 5px;
}

.cls_balazo{
	font-size: 17px;
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	text-align: left;
	margin-bottom: .5em;
	color: #000000;
}

.cls_cierre_nota{
	font-size: 11px;
	text-transform: uppercase;
	border: 1px solid #a1a1a1;
	padding: .5em;
	margin-top: 10px;
	background: #dddddd;
}

/* botones magicos para todas las notas */
.div_id_bm{
	padding: .5em;
	font-size: 14;
	color: #000000;
	font-weight: bold;
	float:left;
	cursor: pointer;

}

.div_id_bm_credito{
	color: #000000;
	font-weight: bold;
	background: none repeat scroll 0% 0% #DDD;
	border-radius: 4px;
	box-shadow: 0px 1px 5px #8A9BA8;
	text-align: center;
	float: left;
	overflow: visible;
}
.cls_tx_pie{
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	color: #555;
	font-size: 0.8em;
	padding-left: 4px;
}

/* Contenedores e identificadores de publicidad */
#pub_8_container_4c{
	width: 100%;
	height: 280px;
	border: none;
	background: none repeat scroll 0% 0% #FFF;
	background-color: #eee;
	padding: none;
    overflow: hidden;
    font-size: 1.25em;
}

#pub_container_4cx2{
	width: 100%;
	height: 100px;
	border: none;
	background: none repeat scroll 0% 0% #FFF;
	background-color: #eee;
	padding: none;
    overflow: hidden;
    font-size: 1.25em;
}

/* texto horizontal identificador de anuncio */
#pub_anuncio_hrz{
	text-align: center;
  	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	color: #333;
	margin-top: 1.8em;
	font-size: 10px;
}

.notepreview input{
	~webkit-appearance: none;
	appearance: none;
    border: none;
}

body p a { text-decoration: underline !important; }

/* ====== Estilos tablas del clima ====== */
.meteo-wrapper {
  font-family: Arial, "Helvetica Neue", sans-serif;
  max-width: 640px;
  margin: 1rem auto;
  padding: .5rem;
}

.meteo-wrapper figcaption {
  font-weight: 700;
  margin: .5rem 0 1rem 0;
}

.table-container {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0px;
}

.meteo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 420px;
}

.meteo-table th,
.meteo-table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid #eef0f3;
  text-align: center;
  white-space: nowrap;
}

.meteo-table thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  text-align: center;
  font-size: .9rem;
}

.meteo-table th:first-child,
.meteo-table td:first-child {
  text-align: left;
}

.meteo-table tr:last-child td {
  border-bottom: none;
}

.meteo-table .day {
  font-weight: 600;
  background: #fff;
}

/* Escala de color */
.meteo-table .temp {
  --hue: calc(var(--h-cold) - ((var(--t) - var(--tmin)) * (var(--h-cold) - var(--h-hot)) / (var(--tmax) - var(--tmin))));
  background: hsl(var(--hue), 85%, 88%);
  color: #111;
  border-left: 1px solid rgba(0,0,0,.04);
  border-right: 1px solid rgba(0,0,0,.04);
  border-radius: 8px;
}

/* Responsivo */
@media (max-width: 480px) {
  .table-container { border: none }
  .meteo-table thead { display: none }
  .meteo-table, .meteo-table tbody, .meteo-table tr, .meteo-table td {
    display: block;
    width: 100%;
  }
  .meteo-table tr {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 0 0 .8rem 0;
    overflow: hidden;
    background: #fff;
  }
  .meteo-table td {
    border: none;
    border-bottom: 1px solid #f1f3f5;
  }
  .meteo-table td:last-child { border-bottom: none }
  .meteo-table .day {
    padding: .85rem .95rem;
    font-size: 1rem;
    background: #f9fafb;
  }
  .meteo-table td.temp {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    align-items: center;
    justify-items: end;
    padding: .7rem .95rem;
  }
  .meteo-table td.temp::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    padding-left: .95rem;
  }
}

.legend {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
  margin: .5rem .25rem 0;
}

.legend .bar {
  display: inline-block;
  height: .6rem;
  width: 160px;
  border-radius: 999px;
  background: linear-gradient(to right, hsl(220,85%,88%), hsl(20,85%,88%));
  border: 1px solid #e5e7eb;
}

.legend span {
  font-size: .8rem;
  color: #555;
}

#footer {
    background: #111; /* Negro profundo */
 }
#footer .search-box {
    border-radius: 30px;
    border: 1px solid #555;
    padding-left: 15px;
  }
#footer .btn-search {
    background-color: #ff6600;
    border-radius: 30px;
    border: none;
    color: white;
    transition: 0.3s;
  }
#footer .btn-search:hover {
    background-color: #e65c00;
  }
#footer .footer-link {
    color: #ccc;
    text-decoration: none;
    margin: 0 10px;
    transition: 0.3s;
}
#footer .footer-link:hover {
    color: #ff6600;
    opacity: unset;
}

#footer p {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
	"Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";	
  	margin-bottom: 6px;
  	font-size: 0.825rem;
 	text-align: center;
  	color: #ccc;
}

#footer .social-icons a {
    font-size: 1.4rem;
    margin: 0 8px;
    color: #ccc;
    transition: 0.3s;
}
#footer .social-icons a:hover {
    color: #ff6600;
    opacity: unset;
}

@media (max-width: 576px) {
    .footer .search-box {
      width: 70% !important;
		}
		.list-inline-item {
      display: block;
      margin: 5px 0;
		}
}