/*
 * Lo que WordPress necesita y el prototipo no tenia. Se carga despues de portal.css.
 *
 * Cada regla dice por que existe. Si una regla de aqui cambia como se ve algo del prototipo, es
 * un error: este archivo solo cubre lo que el prototipo no resolvia porque no le hacia falta.
 */

/* El conmutador de idioma es un <form> para que funcione sin JavaScript (header.php). En el
   prototipo es un <div>; el formulario no trae margenes en ningun navegador actual, pero se
   anulan por si acaso. */
form.lang-switch {
	margin: 0;
}

/* La barra de administracion del nucleo empuja la pagina hacia abajo y tapa la cabecera fija.
   Quien administra el portal lo hace desde su propia vista, no desde esa barra. */
html {
	margin-top: 0 !important;
}

/* Texto solo para lectores de pantalla, con la clase que usa el nucleo en sus propios
   componentes (paginacion, formularios). El prototipo usa .visually-hidden, que ya esta en
   portal.css. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* En el prototipo las vistas que no estan activas se esconden y la activa se muestra. Aqui
   cada direccion pinta una sola vista, siempre activa: esta regla garantiza que se vea aunque
   una plantilla olvide la clase active. */
main > .view:only-child {
	display: block;
}

/* El boton flotante sale con el atributo hidden hasta que hay codigo que atienda su clic
   (footer.php). La regla .mov-fab del prototipo le da display:inline-flex, que manda sobre
   el atributo; sin esta regla se veria un boton que no hace nada. */
.mov-fab[hidden] {
	display: none;
}

/* Tarjetas que en el prototipo son <button> o <div> y aqui son <a>, con su direccion real
   (inc/componentes.php). A un enlace hay que quitarle el subrayado y su color. */
a.news-lead,
a.news-card,
a.tramite-mini-row,
a.mh,
a.bc-cta,
a.attention-map,
a.af-item,
a.tramite-card {
	text-decoration: none;
	color: inherit;
}

/* De esas, las que en el prototipo son <button>: el navegador le pone a todo boton estas
   propiedades y no a un enlace. El cuerpo lleva letter-spacing .005em, que en los botones del
   prototipo no aplicaba; sin esto los textos de las tarjetas quedan mas anchos y algunos se
   parten en otra linea. Las que en el prototipo son <div> (fila de tramite, mapa de puntos de
   atencion) si heredan el espaciado, y no van aqui. */
a.news-lead,
a.news-card,
a.mh,
a.bc-cta,
a.af-item {
	letter-spacing: normal;
	word-spacing: normal;
	text-indent: 0;
	text-shadow: none;
}
a.mov-high .mh,
.mov-high a.mh {
	color: var(--text-primary);
}
a.bc-cta {
	color: #2A2200;
}
a.attention-map {
	display: block;
	cursor: pointer;
}

/* Las pestanas de Movilidad son enlaces (?pestana=), para que funcionen sin JavaScript; en el
   prototipo son <button>. Estas reglas son las de '.mov-tabs button' de portal.css, mas lo que
   el navegador le pone a un boton: centrado vertical, interlineado normal y sin espaciado de
   letras ni subrayado. */
.mov-tabs a[role="tab"] {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 10px 14px;
	font-size: 14.5px;
	color: var(--text-secondary);
	cursor: pointer;
	font-family: var(--heading);
	font-weight: 600;
	min-height: 44px;
	line-height: normal;
	letter-spacing: normal;
	text-decoration: none;
}
.mov-tabs a[role="tab"][aria-selected="true"] {
	color: var(--link);
	border-bottom-color: var(--arm-yellow);
}

/* Las pestanas Noticias | Eventos son enlaces a /noticias/ y /noticias/eventos/; en el prototipo
   son <button>. Mismas reglas que '.tabs-line button' de portal.css, mas lo propio de un boton. */
.tabs-line a {
	display: inline-block;
	background: none;
	border: none;
	padding: 12px 2px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	line-height: normal;
	letter-spacing: normal;
	text-decoration: none;
}
.tabs-line a.active {
	color: var(--link);
	border-color: var(--brand-600);
}