/*
 * Los dos homes. Va aparte de shell.css porque son cosas distintas: el marco
 * está en todas las pantallas y esto sólo en la primera.
 *
 * Consume los tokens que declara shell.css, así que va enganchada después.
 *
 * El diseño está en HOME_Y_MENU.md §3.4 y §3.5.
 */

/* El aire de afuera lo pone el cuerpo del marco, que es el mismo para toda
   pantalla; acá sólo queda el tope de ancho y el centrado. */
.dsr-home {
	box-sizing: border-box;
	max-width: var(--dsr-pagina-ancho);
	margin-inline: auto;
	font-family: var(--dsr-letra);
	font-size: 13px;
	color: var(--dsr-tinta);
}

.dsr-home * {
	box-sizing: border-box;
}

/*
 * Donasur.css le pone a todo h1 un gris y un centrado que venían de la plantilla
 * original de GWT. Los títulos de los dos homes son h1, así que se los sacan acá,
 * que es donde se ven: el tamaño y el margen ya los pone cada uno.
 */
.dsr-home h1 {
	color: inherit;
	text-align: left;
}

/*
 * El signo de pregunta de la ayuda queda afuera de las tres: es una chapita
 * redonda de medida fija que shell.css pinta blanca sobre azul, y cualquiera de
 * estas reglas —que pesan más que una clase sola— le devolvería el color y el
 * subrayado de un link.
 *
 * Y las tarjetas que son un link entero también quedan afuera: adentro tienen
 * un título, una descripción y a veces una marca, y subrayarlas al pasar
 * tacharía los cuatro renglones de una. Lo que se mueve en ellas es el borde,
 * cada una en su regla.
 */
.dsr-home a:not(.dsr-btn):not(.dsr-ayuda):not(.dsr-tarjeta) {
	color: var(--dsr-principal);
	text-decoration: none;
}

.dsr-home a:not(.dsr-btn):not(.dsr-ayuda):not(.dsr-tarjeta):hover {
	text-decoration: underline;
}

/*
 * Los links del home van con la letra de alrededor, y hay que decirlo: el
 * .gwt-Anchor de Donasur.css le pone 11 px a todo Anchor, y el nombre del
 * saludo —que es un h1 de 20— salía en letra chica al lado del «Bienvenido/a».
 */
.dsr-home a:not(.dsr-btn):not(.dsr-ayuda) {
	font-size: inherit;
}

.dsr-tarjeta {
	background: var(--dsr-tarjeta);
	border: 1px solid var(--dsr-linea);
	border-radius: 6px;
}

.dsr-home__seccion {
	margin-top: 22px;
}

.dsr-home__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
}

.dsr-home__titulo .dsr-ico {
	width: 16px;
	height: 16px;
	color: var(--dsr-tinta-suave);
}

/* --------------------------------------------------------------- identidad */

.dsr-identidad {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
}

/* La bandera es la cara de la tarjeta: el archivo ya viene redondo. */
.dsr-identidad__bandera {
	flex: none;
	width: 52px;
	height: 52px;
}

.dsr-identidad__saludo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.dsr-identidad__saludo a {
	color: var(--dsr-principal);
	cursor: pointer;
}

.dsr-identidad__datos {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--dsr-tinta-suave);
}

.dsr-identidad__punto {
	color: #a4adbb;
}

.dsr-identidad__estado {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.dsr-identidad__ultimo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--dsr-tinta-suave);
}

.dsr-identidad__ultimo .dsr-ico {
	width: 14px;
	height: 14px;
}

.dsr-identidad__vencimientos {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

/*
 * Los vencimientos. Ámbar cuando falta poco, gris cuando no vence: el color
 * dice si hay algo que hacer, no repite lo que ya dice el texto.
 */
.dsr-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid;
	font-size: 11px;
	font-weight: 600;
}

.dsr-pill .dsr-ico {
	width: 13px;
	height: 13px;
}

.dsr-pill--gris {
	background: var(--dsr-fondo);
	border-color: var(--dsr-linea);
	color: var(--dsr-tinta-suave);
}

.dsr-pill--ambar {
	background: var(--dsr-atencion-tinte);
	border-color: #eddfcd;
	color: var(--dsr-atencion);
}

/* ----------------------------------------------------------------- alertas */

/*
 * Adentro va la lista ALERTAS_HOME tal como la dibuja el motor de listas, con
 * su propia grilla. Acá sólo está la tarjeta que la contiene.
 */
.dsr-alertas {
	padding: 4px 12px 8px;
	overflow-x: auto;
}

/* ----------------------------------------- módulos y herramientas públicas */

/* Las dos salen del mismo MenuModel que pinta el menú lateral. */
.dsr-modulos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Son tres o cuatro según haya sesión, y las que haya ocupan la fila entera. */
.dsr-herramientas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.dsr-modulo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.dsr-modulo__cab {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dsr-modulo__ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	background: var(--dsr-principal-tinte);
	color: var(--dsr-principal);
}

.dsr-modulo__titulo {
	font-weight: 600;
}

.dsr-modulo__desc {
	display: block;
	font-size: 12px;
	color: var(--dsr-tinta-suave);
	line-height: 1.4;
}

.dsr-modulo__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 2px;
	font-size: 12px;
}

.dsr-modulo__links a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
}

.dsr-modulo__links .dsr-ico {
	width: 12px;
	height: 12px;
}

.dsr-herramienta {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
}

/*
 * La tarjeta entera lleva a la herramienta, así que es un <a>: el clic uno lo
 * intenta donde ve la tarjeta y no sobre los cien píxeles del título. Al pasar
 * se mueve el borde; el título va en azul, que es lo que dice que de acá se
 * sale a otro lado.
 */
.dsr-home a.dsr-herramienta {
	cursor: pointer;
}

.dsr-home a.dsr-herramienta:hover {
	border-color: var(--dsr-principal);
}

.dsr-herramienta__texto {
	min-width: 0;
}

.dsr-herramienta .dsr-modulo__titulo {
	display: block;
	color: var(--dsr-principal);
}

.dsr-herramienta .dsr-modulo__ico {
	width: 30px;
	height: 30px;
}

.dsr-herramienta .dsr-modulo__ico .dsr-ico {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------ home público */

/*
 * El home público es una página y no una pantalla de la aplicación: el fondo de
 * cada banda llega al borde de la ventana y lo de adentro entra en el mismo
 * ancho centrado que el resto, que es lo que ya hacen la cabecera y el pie
 * cuando el marco va sin menú. Para eso el tope de ancho se lo queda cada banda
 * y no el home, que a cambio se come el aire que le pone el cuerpo del marco.
 */
.dsr-home--publico {
	max-width: none;
	margin: -20px calc(-1 * var(--dsr-pagina-margen)) -32px;
}

.dsr-home__ancho {
	max-width: var(--dsr-pagina-ancho);
	margin-inline: auto;
	padding-inline: var(--dsr-pagina-margen);
}

/* el aire de abajo, que el cuerpo del marco ya no está poniendo */
.dsr-home--publico .dsr-home__ancho:last-child {
	padding-bottom: 32px;
}

/*
 * Debajo del hero, lo que hay para leer —la novedad y las seis frases— va en la
 * columna ancha y las herramientas en una angosta al costado. Así entra todo en
 * una pantalla y las herramientas dejan de estar abajo del pliegue, que es
 * donde menos sirven.
 *
 * Las tres secciones van sueltas adentro de la grilla y no metidas en dos
 * envoltorios, uno por columna. El orden del documento es el de la pantalla
 * angosta —novedad, herramientas y después las frases— y en dos columnas las
 * acomoda la grilla; con un envoltorio por columna las herramientas no tenían
 * cómo meterse entre dos hermanas que viven adentro del otro.
 */
.dsr-home__dos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas:
		"novedades publicas"
		"quees     publicas";
	gap: 0 28px;
	align-items: start;
}

.dsr-home__novedades {
	grid-area: novedades;
}

.dsr-home__quees {
	grid-area: quees;
}

.dsr-home__publicas {
	grid-area: publicas;
}

/* las dos que arrancan arriba, cada una en su columna */
.dsr-home__novedades,
.dsr-home__publicas {
	margin-top: 0;
}

/* en la columna angosta las tres no entran una al lado de la otra */
.dsr-home__publicas .dsr-herramientas {
	grid-template-columns: minmax(0, 1fr);
}

.dsr-hero {
	padding: 36px 36px 24px;
}

/*
 * El hero no es una tarjeta más: es la banda de entrada, y es lo único de la
 * pantalla que lleva color. Sobre el azul las banderas recién se ven, que en
 * 32 px sobre blanco eran una fila de manchas.
 */
.dsr-hero--banda {
	padding: 44px 0 28px;
	margin-bottom: 22px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(150deg, var(--dsr-menu-fondo) 0%, #1d4a86 100%);
	color: #fff;
}

.dsr-hero--banda .dsr-hero__titulo {
	font-size: 30px;
}

.dsr-hero--banda .dsr-hero__frase {
	color: rgba(255, 255, 255, .82);
}

/* Sobre el color el botón principal se da vuelta: el azul sobre azul no se ve. */
.dsr-hero--banda .dsr-btn--principal {
	background: #fff;
	border-color: #fff;
	color: var(--dsr-menu-fondo);
}

.dsr-hero--banda .dsr-btn--principal:hover {
	background: var(--dsr-principal-tinte);
	border-color: var(--dsr-principal-tinte);
	color: var(--dsr-menu-fondo);
}

.dsr-hero--banda .dsr-btn--neutro {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.dsr-hero--banda .dsr-btn--neutro:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.dsr-hero__titulo {
	margin: 0 0 8px;
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.dsr-hero__frase {
	margin: 0 0 20px;
	max-width: 760px;
	font-size: 15px;
	color: var(--dsr-tinta-suave);
}

.dsr-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Los botones son los de botones.css, un punto más grandes: acá son la acción
 * principal de la pantalla y no un botón de barra. Va como regla del hero y no
 * como un tamaño nuevo de la familia, que sólo usaría este lugar.
 */
.dsr-hero__acciones .dsr-btn {
	padding: 10px 18px;
	font-size: 13px;
}

/*
 * La banda de países, que estaba en la cabecera de todas las pantallas. El
 * nombre se reserva su lugar debajo de la bandera y aparece al pasar.
 */
.dsr-banderas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--dsr-linea-suave);
}

.dsr-bandera {
	position: relative;
	width: 32px;
	height: 32px;
}

.dsr-bandera img {
	display: block;
	width: 32px;
	height: 32px;
}

.dsr-bandera__nombre {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	margin-top: 5px;
	padding: 2px 7px;
	border-radius: 3px;
	background: var(--dsr-tinta);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	visibility: hidden;
}

.dsr-bandera:hover .dsr-bandera__nombre {
	visibility: visible;
}

/* Sobre la banda entintada la línea es más clara y las chapas, un poco mayores. */
.dsr-hero--banda .dsr-banderas {
	gap: 12px 10px;
	border-top-color: rgba(255, 255, 255, .22);
}

.dsr-hero--banda .dsr-bandera,
.dsr-hero--banda .dsr-bandera img {
	width: 34px;
	height: 34px;
}

/* ------------------------------------------------------ qué es y novedades */

/*
 * Las seis frases no son una lista de cosas iguales: cada una dice algo
 * distinto, así que cada una lleva su propio glifo y no seis veces el mismo
 * tilde, que no agregaba nada. Y no van en tarjeta —seis cajas más en una
 * pantalla que ya es toda cajas—: el aire alcanza para separarlas.
 *
 * El tinte las agrupa de a dos, que es como están escritas: qué es y quién lo
 * hace, qué guarda y cómo se carga, qué garantiza y qué no.
 */
.dsr-que {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 32px;
}

.dsr-que__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	line-height: 1.45;
}

.dsr-que__glifo {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.dsr-que__glifo .dsr-ico {
	width: 18px;
	height: 18px;
}

.dsr-que__glifo--registro {
	background: var(--dsr-principal-tinte);
	color: var(--dsr-principal);
}

.dsr-que__glifo--datos {
	background: var(--dsr-acento-tinte);
	color: var(--dsr-acento);
}

.dsr-que__glifo--garantia {
	background: var(--dsr-ok-tinte);
	color: var(--dsr-ok);
}

.dsr-que__mas {
	margin: 10px 0 0;
	font-size: 12.5px;
}

/* Aviso OPS compartido: las marcas mantienen el espacio libre de los PDF. */
.dsr-anuncio-ops {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
}

.dsr-anuncio-ops__marca {
	flex: 0 0 180px;
}

.dsr-anuncio-ops__logo {
	display: block;
	width: 100%;
	height: auto;
}

.dsr-anuncio-ops__logo--horizontal {
	display: none;
}

.dsr-anuncio-ops__texto {
	min-width: 0;
}

.dsr-anuncio-ops__titulo {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.dsr-anuncio-ops__cuerpo {
	margin: 0 0 12px;
	line-height: 1.5;
}

.dsr-anuncio-ops__enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	line-height: 1.5;
}

.dsr-home__novedades .dsr-anuncio-ops {
	margin-bottom: 12px;
}

.dsr-novedad {
	display: flex;
	gap: 20px;
	padding: 18px 20px;
}

/*
 * La tarjeta entera es el link a REDO: hereda la letra de la tarjeta en lugar
 * del azul que el home le pone a todo link, y lo que se mueve al pasar es el
 * borde y no un subrayado, que le tacharía los cuatro renglones al cuerpo.
 */
.dsr-home a.dsr-novedad {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.dsr-home a.dsr-novedad:hover {
	text-decoration: none;
	border-color: var(--dsr-principal);
}

.dsr-home a.dsr-novedad:hover .dsr-novedad__url {
	text-decoration: underline;
}

.dsr-novedad__url {
	color: var(--dsr-principal);
}

/*
 * La marca de REDO escrita, en lugar del JPG de producción, que venía con el
 * fondo negro. Los dos colores salen medidos del archivo —el azul de «redo» y
 * el naranja del «v5»—, y por eso van literales: son de esa marca y no del
 * tema.
 */
.dsr-novedad__marca {
	flex: none;
	align-self: flex-start;
	font-size: 34px;
	line-height: 1;
	letter-spacing: -1px;
	white-space: nowrap;
}

.dsr-novedad__marca-redo {
	font-weight: 700;
	color: #36498d;
}

.dsr-novedad__marca-v5 {
	color: #faaa55;
}

.dsr-novedad__texto {
	min-width: 0;
}

.dsr-novedad__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.dsr-novedad__fecha {
	margin: 2px 0 8px;
	font-size: 12px;
	color: var(--dsr-tinta-suave);
}

.dsr-novedad__cuerpo {
	margin: 0 0 8px;
	line-height: 1.5;
}

@media (max-width: 1099px) {
	.dsr-modulos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Apiladas, las herramientas quedan arriba de «Qué es DONASUR»: son tres
	 * accesos cortos y el otro es el texto largo de la pantalla.
	 */
	.dsr-home__dos {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"novedades"
			"publicas"
			"quees";
	}

	/* y vuelven a necesitar el aire que separa una sección de la anterior */
	.dsr-home__publicas {
		margin-top: 22px;
	}
}

@media (max-width: 700px) {
	.dsr-home {
		padding: 14px var(--dsr-pagina-margen) 24px;
	}

	/* menos el público, donde el aire lo pone cada banda */
	.dsr-home--publico {
		padding: 0;
	}

	.dsr-identidad {
		flex-wrap: wrap;
	}

	.dsr-identidad__estado {
		margin-left: 0;
		align-items: flex-start;
	}

	.dsr-modulos,
	.dsr-que {
		grid-template-columns: minmax(0, 1fr);
	}

	.dsr-hero {
		padding: 24px 18px 18px;
	}

	/* va después de .dsr-hero, que pesa lo mismo y le ganaría por venir última */
	.dsr-hero--banda {
		padding: 28px 0 20px;
	}

	.dsr-hero__titulo {
		font-size: 22px;
	}

	.dsr-novedad {
		flex-wrap: wrap;
	}

	.dsr-anuncio-ops {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.dsr-anuncio-ops__marca {
		flex: none;
		width: 260px;
		max-width: 100%;
	}

	.dsr-anuncio-ops__logo {
		display: none;
	}

	.dsr-anuncio-ops__logo--horizontal {
		display: block;
	}
}