/*
 * Las pantallas de lista: la hoja que las contiene, su encabezado, el buscador,
 * la barra de herramientas, la tabla y el pie.
 *
 * Reemplaza al dibujo que traían SisaPagePanel y ListPanel con tablas anidadas:
 * el título en azul de 18 px con un <hr> abajo, el buscador alineado a la
 * derecha, los criterios fijos en rojo de 10 px y las filas en dos azules con el
 * color escrito celda por celda desde el Java.
 *
 * Va como hoja aparte y no como CssResource por el mismo motivo que las otras
 * cuatro: usa grid, flex y máscaras, que el parser de CssResource de GWT no
 * entiende, y así se ajusta el dibujo sin recompilar el módulo.
 *
 * Se engancha después de Donasur.css a propósito: hay reglas viejas con
 * !important que hay que ganarles, y entre dos !important de igual peso gana la
 * última.
 *
 * Los tokens —tinta, líneas, fondos, la letra— son los de shell.css; acá no se
 * inventa ningún color.
 *
 * El diseño y la decisión de cada medida están en LISTAS.md.
 */

/* ------------------------------------------------------------------- la hoja */

/*
 * Cada pantalla de lista es una hoja blanca sobre el fondo del marco, como las
 * tarjetas del home. El aire de afuera lo pone el cuerpo del shell, así que acá
 * sólo está el borde y lo que la hoja lleva adentro.
 *
 * Mide con el borde adentro porque las piezas nuevas se dibujaron así; las
 * viejas que todavía cuelgan del cuerpo —la tabla, los popups— quedan afuera de
 * la enumeración y siguen midiendo como medían.
 */
.dsr-pag {
	background: var(--dsr-tarjeta);
	border: 1px solid var(--dsr-linea);
	border-radius: 8px;
	font-family: var(--dsr-letra);
	color: var(--dsr-tinta);
}

.dsr-pag,
.dsr-pag__cab, .dsr-pag__cab * {
	box-sizing: border-box;
}

/*
 * La letra del sistema nuevo llega hasta las filas. Va con !important porque
 * Donasur.css se la impone a todo td y a todo select, y si no la lista queda
 * escrita en dos tipografías: el encabezado de la pantalla en una y los datos
 * en la Tahoma de 2012. Los formularios no entran acá: los cambia su propia
 * etapa.
 */
.dsr-pag,
.dsr-pag td,
.dsr-pag select,
.dsr-pag input,
.dsr-pag button {
	font-family: var(--dsr-letra) !important;
}

/*
 * Una lista embebida en otra pantalla —el tablero de monitoreo, las alertas del
 * home, las certificaciones— no es una hoja: ya está adentro de una. Lo dice el
 * mismo llamado que apaga el encabezado, que es lo que todas ellas hacen.
 */
.dsr-pag--llana {
	background: none;
	border: 0;
	border-radius: 0;
}

/* --------------------------------------------------------------- encabezado */

/*
 * Título y bajada a la izquierda, la ayuda en línea a la derecha. El separador
 * es este borde y no el <hr> de antes, que cruzaba la pantalla entera y quedaba
 * suelto entre el título y el subtítulo.
 */
.dsr-pag__cab {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px 14px;
	border-bottom: 1px solid var(--dsr-linea-suave);
}

/* Lo pide el tablero para sus listas embebidas, que ya tienen su propio título. */
.dsr-pag__cab--sin-linea {
	border-bottom: 0;
}

/*
 * La imagen que manda la pantalla. Va a 40 px y no a los 48 del archivo: el
 * bloque de texto que tiene al lado mide eso entre el título y la bajada, y así
 * el encabezado no se estira para hacerle lugar.
 */
.dsr-pag__ico {
	flex: none;
	display: flex;
	align-items: center;
	padding-top: 2px;
}

.dsr-pag__ico img {
	display: block;
	width: auto;
	height: auto;
	max-width: 40px;
	max-height: 40px;
}

.dsr-pag__tit {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * 18 px y tinta, no 18 px y azul: el azul de antes competía con los links de la
 * pantalla, que son lo único que hay que buscar con el ojo.
 */
.dsr-pag__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dsr-tinta);
	text-align: left;
}

.dsr-pag__bajada {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--dsr-tinta-suave);
}

.dsr-pag__bajada:empty {
	display: none;
}

/*
 * La franja de la derecha del encabezado: el signo de pregunta de la ayuda y el
 * «volver atrás» cuando la pantalla vino de otra.
 */
.dsr-pag__acciones {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	padding-top: 2px;
}

/*
 * El volver atrás. Las pseudo-clases van enumeradas por lo mismo que en
 * .dsr-ayuda: el `a:hover` del tema estándar de GWT entra después que esta hoja
 * y le empata a la clase sola.
 */
.dsr-volver,
.dsr-volver:link,
.dsr-volver:visited,
.dsr-volver:hover {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--dsr-principal);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.dsr-volver:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------- cuerpo */

.dsr-pag__cuerpo {
	padding: 14px 18px 16px;
}

.dsr-pag--llana > .dsr-pag__cuerpo {
	padding: 0;
}

/* ------------------------------------------------------------------- lista */

/*
 * La lista es una columna: el buscador, la barra de herramientas, la tabla y el
 * pie, cada uno separado del anterior. Antes era una tabla de GWT con celdas
 * alineadas a mano a la derecha y a la izquierda.
 */
.dsr-lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

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

/* --------------------------------------------------------------- buscador */

/*
 * La caja del buscador. Va tramada sobre la hoja para que se lea como una sola
 * pieza: antes los filtros estaban sueltos, alineados a la derecha, y el botón
 * de buscar quedaba arriba de todo, lejos del campo que se estaba completando.
 */
.dsr-lista__buscador {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 16px;
	padding: 12px 14px;
	background: #f4f7fb;
	border: 1px solid #dde4ef;
	border-radius: 6px;
	font-size: 12px;
}

/*
 * Los combos y el campo del valor toman la medida de los botones que tienen al
 * lado. El tamaño de letra lleva !important porque .gwt-ListBox lo fija en 13
 * para toda la aplicación, y acá conviven con texto de 12.
 *
 * El :active va enumerado y no es capricho: Donasur.css trae
 * `.gwt-ListBox:active { background-color: #FFFFC0; font-size: 13px !important }`
 * —el resaltado amarillo de 2012— y una pseudo-clase pesa como una clase, así
 * que al apretar el combo esa regla le ganaba a esta, la letra saltaba a 13 y el
 * combo crecía delante del que lo estaba usando.
 */
.dsr-filtro select,
.dsr-filtro select:active,
.dsr-filtro select:focus,
.dsr-filtro input[type="text"],
.dsr-paginador select,
.dsr-paginador select:active,
.dsr-paginador select:focus {
	height: 28px;
	max-width: 100%;
	padding: 3px 6px;
	background: var(--dsr-tarjeta);
	border: 1px solid var(--dsr-linea);
	border-radius: 4px;
	font-family: inherit;
	font-size: 12px !important;
	color: var(--dsr-tinta);
}

.dsr-filtro select:focus,
.dsr-filtro input[type="text"]:focus,
.dsr-paginador select:focus {
	outline: 2px solid var(--dsr-principal);
	outline-offset: -1px;
}

.dsr-paginador select,
.dsr-paginador select:active,
.dsr-paginador select:focus {
	height: 24px;
	padding: 1px 4px;
	font-size: 11px !important;
}

.dsr-buscador {
	display: contents;
}

/* Los filtros se apilan: uno por renglón, con su conector al final. */
.dsr-buscador__filtros {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dsr-buscador__botones {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/*
 * Un filtro: el rótulo, el campo, el operador, el valor y —si hay otro filtro
 * abajo— el «y» o el «o» que los une. Envuelve en pantalla angosta en vez de
 * empujar la caja a lo ancho.
 */
.dsr-filtro {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dsr-filtro__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.dsr-filtro__rotulo {
	color: var(--dsr-tinta-suave);
	white-space: nowrap;
}

.dsr-filtro__error {
	color: var(--dsr-peligro);
	font-size: 11px;
}

/* el campo de texto y la lupa del filtro que abre un buscador */
.dsr-filtro__lupa {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dsr-filtro__lupabtn {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
	color: var(--dsr-principal);
	cursor: pointer;
}

.dsr-filtro__lupabtn:hover {
	background: var(--dsr-principal-tinte);
}

/*
 * Los botones que son sólo un dibujo: los dos que suman y quitan filtros acá, y
 * la ruedita de las columnas en la barra de herramientas. Son cuadrados y del
 * tamaño de los combos que tienen al lado; el ícono lo pinta el color del texto.
 */
.dsr-iconobtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--dsr-tarjeta);
	border: 1px solid var(--dsr-linea);
	border-radius: 4px;
	color: var(--dsr-principal);
	cursor: pointer;
}

.dsr-iconobtn:hover {
	background: var(--dsr-principal-tinte);
	border-color: #c2cfe3;
}

.dsr-iconobtn:focus-visible {
	outline: 2px solid var(--dsr-principal);
	outline-offset: 1px;
}

/*
 * Los criterios que fija la pantalla y el usuario no puede tocar, y con qué se
 * buscó la última vez. Antes iban en rojo de 10 px pegados al borde derecho, que
 * es donde se ponen los errores; no son un error, son el estado de la búsqueda.
 */
.dsr-lista__fijos,
.dsr-lista__ultima {
	flex: 1 1 100%;
	font-size: 11px;
	color: var(--dsr-tinta-suave);
}

.dsr-lista__fijo,
.dsr-lista__ultimatexto {
	display: inline-block;
	padding: 3px 8px;
	background: var(--dsr-principal-tinte);
	border-radius: 10px;
	color: #34405a;
}

/* --------------------------------------------------------- herramientas */

/*
 * Lo que la lista deja hacer —agregar, importar— a la izquierda, y a la derecha
 * el paginador, que dice cuántos resultados hay y en qué página está, y la
 * ruedita que elige qué columnas se ven.
 *
 * Lo de la derecha se apoya contra el borde por la fila entera, y no con un
 * margen automático en cada pieza: las dos se esconden —el paginador hasta que
 * hay resultados, la ruedita cuando no hay filas o la lista va embebida— y dos
 * márgenes automáticos se reparten el hueco en vez de cederlo. Así lo que quede se
 * va igual al borde derecho, y las acciones —si la lista tiene— se quedan contra
 * el izquierdo.
 */
.dsr-lista__herramientas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 16px;
}

.dsr-lista__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-right: auto;
}

/* ---------------------------------------------------------------- el pie */

/*
 * La descarga a un archivo a la izquierda y el paginador otra vez a la derecha,
 * para no tener que subir después de leer la última fila.
 */
.dsr-lista__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-top: 2px;
}

.dsr-lista__pie > .dsr-paginador {
	margin-left: auto;
}

/* ---------------------------------------------------------- el paginador */

/*
 * Cuántos resultados hay, en qué página va y las cuatro flechas. Las flechas son
 * máscaras y ya no JPG de 20 px, así que toman el color del texto y se apagan
 * cambiando ese color en vez de con una capa de opacidad.
 */
.dsr-paginador {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	color: var(--dsr-tinta-suave);
	white-space: nowrap;
}

.dsr-paginador__tamano,
.dsr-paginador__cuenta,
.dsr-paginador__ir {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dsr-paginador__flechas {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.dsr-paginador__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: var(--dsr-principal);
	cursor: pointer;
}

.dsr-paginador__flecha:hover {
	background: var(--dsr-principal-tinte);
}

/*
 * La flecha que no lleva a ninguna parte —la primera página cuando ya se está en
 * ella— sigue apagándose con la misma clase que usaba el Java para las
 * imágenes, pero ahora se apaga el color y se corta el clic.
 */
.dsr-paginador__flecha.opacity30 {
	color: #b3bac6;
	cursor: default;
	filter: none;
	opacity: 1;
}

.dsr-paginador__flecha.opacity30:hover {
	background: none;
}

.dsr-paginador__irlink,
.dsr-paginador__irlink:link,
.dsr-paginador__irlink:visited,
.dsr-paginador__irlink:hover {
	font-size: 11px;
	color: var(--dsr-principal);
	text-decoration: none;
	cursor: pointer;
}

.dsr-paginador__irlink:hover {
	text-decoration: underline;
}

/* -------------------------------------------- bajar la lista a un archivo */

/*
 * Las dos líneas de descarga —la página y la lista entera— eran dos filas con un
 * JPG de 24 px cada una. Ahora van en una sola línea, con un ícono compartido.
 */
.dsr-lista__exportar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	font-size: 11px;
}

.dsr-lista__exportar a,
.dsr-lista__exportar a:link,
.dsr-lista__exportar a:visited,
.dsr-lista__exportar a:hover {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--dsr-principal);
	text-decoration: none;
	cursor: pointer;
}

.dsr-lista__exportar a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------- el aviso de la lista */

/*
 * El cartel que ocupa el lugar de la tabla cuando la lista no tiene qué mostrar:
 * o porque es tan grande que arranca vacía, o porque la búsqueda no encontró
 * nada. Estaba suelto arriba a la izquierda, con su JPG y nada alrededor.
 */
.dsr-lista .sisa-SisaNotePanel {
	display: block;
	padding: 10px 12px;
	background: var(--dsr-principal-tinte);
	border: 1px solid #d3ddec;
	border-radius: 6px;
	font-size: 12px;
	color: #34405a;
}

.dsr-lista .sisa-SisaNotePanel img {
	vertical-align: middle;
}

/* ------------------------------------------------------------------- tabla */

/*
 * La caja de la tabla: el marco y, si la tabla es más ancha que la pantalla, el
 * scroll horizontal se lo queda ella y no la página entera.
 */
.dsr-lista__tablacaja {
	border: 1px solid var(--dsr-linea);
	border-radius: 6px;
	overflow: hidden;
}

/* El panel que escucha las flechas no dibuja nada. */
.dsr-lista__tabla {
	outline: none;
}

/* --------------------------------------------------- lo que va abajo de todo */

/*
 * Las referencias de los encabezados —qué quiere decir cada sigla de columna— y
 * el pie que a veces trae la metadata de la lista.
 */
.dsr-lista .referencePanel {
	margin: 0;
	padding: 0;
	font-size: 11px;
}

.dsr-lista .referencePanel .code {
	color: var(--dsr-tinta-suave);
	font-size: 11px;
}

.dsr-lista__plugins:empty {
	display: none;
}

/* La nota que algunas listas traen de la metadata, abajo de todo. */
.dsr-lista__nota {
	font-size: 11px;
	color: var(--dsr-tinta-suave);
}

/*
 * La tabla de datos. El dibujo entero es de acá: antes el Java le escribía a
 * cada celda el fondo —dos azules alternados— y lo volvía a escribir en cada
 * movimiento del mouse para resaltar la fila.
 *
 * Sigue siendo una FlexTable, así que la primera fila es el encabezado y va con
 * td y no con th; por eso se lo elige por posición.
 */
.dsr-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--dsr-tinta);
}

.dsr-tabla > tbody > tr > td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--dsr-linea-suave);
	vertical-align: middle;
}

/* ------------------------------------------ encabezado de columnas */

.dsr-tabla > tbody > tr:first-child > td {
	padding: 0;
	background: var(--dsr-fondo);
	border-bottom: 1px solid var(--dsr-linea);
	white-space: nowrap;
}

/*
 * El rótulo de la columna es un enlace —se hace clic para ordenar— pero no se
 * lee como uno: lo que hay que leer ahí es qué columna es. El azul de .gwt-Anchor
 * y sus 11 px se los saca este bloque.
 */
.dsr-tabla a.headerListPanel,
.dsr-tabla a.headerListPanel:link,
.dsr-tabla a.headerListPanel:visited,
.dsr-tabla a.headerListPanel:hover {
	display: inline-block;
	padding: 8px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--dsr-tinta-suave);
	text-decoration: none;
	cursor: pointer;
}

.dsr-tabla a.headerListPanel:hover {
	color: var(--dsr-principal);
}

/* la columna por la que está ordenada */
.dsr-tabla a.headerListPanel.order {
	color: var(--dsr-tinta);
}

/* el rótulo y la flecha de orden, uno al lado del otro */
.dsr-tabla__cab {
	display: flex;
	align-items: center;
}

.dsr-tabla__orden {
	display: inline-flex;
	align-items: center;
	margin-left: -4px;
	padding-right: 8px;
	color: var(--dsr-principal);
}

/* ------------------------------------------------------- filas */

/*
 * El gris alternado va en el tr y no en las celdas porque el color propio de la
 * fila —el que manda la metadata para las incompletas— también va ahí y tiene
 * que poder taparlo; como ese llega escrito en el atributo style, le gana a
 * cualquier regla de esta hoja.
 */
.dsr-tabla > tbody > tr:nth-child(even) {
	background: #fafbfd;
}

/*
 * El resaltado, en cambio, va en las celdas y con un tinte transparente: así se
 * ve encima del gris alternado y también encima del amarillo de una fila
 * incompleta, sin tener que saber cuál de los dos hay abajo.
 *
 * La fila marcada se pinta igual que la de abajo del mouse: una la mueve el
 * teclado en los buscadores y la otra el mouse, y son la misma cosa.
 */
.dsr-tabla > tbody > tr:not(:first-child):hover > td:not(.dsr-tabla__accion),
.dsr-tabla > tbody > tr.dsr-tabla__fila--marcada > td:not(.dsr-tabla__accion) {
	background: rgba(26, 79, 156, .10);
}

/* Las filas que hacen algo al hacerles clic lo dicen con el cursor. */
.dsr-tabla > tbody > tr:not(:first-child) > td[title] {
	cursor: pointer;
}

/*
 * Las celdas de acciones son íconos de ancho fijo: van juntas al borde derecho y
 * no se llevan el aire que necesitan las de datos.
 *
 * Y no se tiñen: ni con el gris alternado, ni con el color propio de la fila, ni
 * con el resaltado del mouse. Los íconos van siempre sobre blanco, que es como
 * se veían antes —el pintado a mano salteaba estas celdas a propósito— y es lo
 * que los deja leerse: el amarillo de una fila incompleta atrás de una cruz roja
 * las ensucia a las dos.
 */
.dsr-tabla > tbody > tr > td.dsr-tabla__accion {
	width: 1%;
	padding: 4px 3px;
	text-align: center;
	white-space: nowrap;
	background: var(--dsr-tarjeta);
}

/*
 * El ícono de una acción de fila. El dibujo lo trae otra clase al lado: un verbo
 * de Lucide (`dsr-ico`, en shell.css), una silueta de órgano (`dsr-organo`, en
 * organos.css) o la píldora de acá abajo. Esta clase pone sólo lo que las tres
 * comparten: que se les puede hacer clic.
 */
.dsr-tabla__accion .dsr-accion {
	cursor: pointer;
	vertical-align: middle;
}

/*
 * Los verbos van en tinta suave y no en el azul de los enlaces: son hasta tres
 * por fila y veinticinco filas, y todos en azul tapan los datos. El azul aparece
 * al pasar por encima, que es cuando hace falta.
 */
.dsr-tabla__accion .dsr-ico {
	color: var(--dsr-tinta-suave);
}

.dsr-tabla__accion .dsr-ico:hover {
	color: var(--dsr-principal);
}

/*
 * Llevan color las que ya lo tenían en 2012, porque el color es parte de cómo se
 * las reconoce: la cruz roja del eliminar, el disco verde del entrar y la
 * carpeta amarilla de los documentos. Se le suma el deshabilitar, en el ámbar
 * del diálogo que abre, porque es la otra que puede salir cara. El resto va en
 * tinta: un renglón donde todos los íconos tienen color no dice cuál importa.
 */
.dsr-tabla__accion .dsr-accion--peligro,
.dsr-tabla__accion .dsr-accion--peligro:hover {
	color: var(--dsr-peligro);
}

.dsr-tabla__accion .dsr-accion--atencion,
.dsr-tabla__accion .dsr-accion--atencion:hover {
	color: var(--dsr-atencion);
}

/*
 * El verde y el amarillo son los únicos dos colores que esta hoja no saca de los
 * tokens, y están citados de aquellos JPG: el mismo matiz, bajado hasta que se
 * lee sobre blanco. El amarillo original no servía —#f0e090 tiene 1,3 de
 * contraste y el trazo desaparecía—; el verde tampoco llegaba con la flecha
 * blanca encima.
 */
.dsr-tabla__accion .dsr-accion--carpeta,
.dsr-tabla__accion .dsr-accion--carpeta:hover {
	color: #b8860b;
}

/*
 * El entrar no es el dibujo pintado, como los otros: es el disco lleno con la
 * flecha calada en blanco, que es como se ve desde siempre. Por eso la máscara
 * va en el pseudo-elemento y no en el elemento, que acá es el disco.
 */
.dsr-tabla__accion .dsr-accion--entrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #4e8b21;
}

.dsr-tabla__accion .dsr-accion--entrar::before {
	content: "";
	width: 13px;
	height: 13px;
	background-color: #fff;
	-webkit-mask-image: var(--dsr-ico);
	mask-image: var(--dsr-ico);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Todo lo que trae su propio color —esas cuatro, el órgano y la píldora, donde el
 * color es la leyenda y no la voz de quien lo rodea— no lo cambia al pasar el
 * mouse: contesta aclarándose.
 */
.dsr-tabla__accion .dsr-accion--peligro:hover,
.dsr-tabla__accion .dsr-accion--atencion:hover,
.dsr-tabla__accion .dsr-accion--carpeta:hover,
.dsr-tabla__accion .dsr-accion--entrar:hover,
.dsr-tabla__accion .dsr-organo:hover,
.dsr-tabla__accion .dsr-pildora:hover {
	opacity: .75;
}

/*
 * Las tres píldoras de las alertas y del reporte de donantes. No son un ícono:
 * son las letras del registro —DF, DV, TX—, que es justamente lo que la fila
 * necesita decir, así que siguen siendo texto y no un dibujo. Los JPG de 2012
 * tenían estos mismos tres colores; acá son los de la hoja, que llegan al
 * contraste que el blanco de adentro pide.
 */
.dsr-pildora {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--dsr-tinta-suave);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: .04em;
	text-align: center;
}

.dsr-pildora--df {
	background: var(--dsr-ok);
}

.dsr-pildora--dv {
	background: var(--dsr-atencion);
}

.dsr-pildora--tx {
	background: var(--dsr-principal);
}

/* --------------------------------------------------------- ícono de una celda */

/*
 * La columna de la izquierda de algunas listas no es un dato: es un dibujo, y
 * sale del nombre de archivo que guarda la base. Quién dibuja qué lo decide
 * IconoDeCelda.java, que es el único lugar donde ese mapa vive; acá está cómo se
 * ve, que es lo único que las cuatro familias comparten.
 *
 * Las cuatro son la bandera —un <img>, porque una bandera trae sus colores y no
 * es un trazo—, el órgano de organos.css, el glifo de Lucide de shell.css y la
 * tarjeta del repositorio, que dibuja el mismo tipo de archivo que la celda.
 * Todas llevan `dsr-celda-imagen`, que además es por lo que PagePanel reconoce
 * el clic que no tiene que correr la acción default de la fila.
 */
.dsr-celda-imagen {
	vertical-align: middle;
}

/*
 * El glifo va en tinta suave y el color es la excepción: sólo lo lleva lo que se
 * reconoce por el color tanto como por el dibujo, que es la misma regla que las
 * acciones de fila. Los cuatro del paquete Office están citados de aquellos JPG
 * —el mismo matiz, bajado hasta que se lee sobre blanco— y por eso no salen de
 * los tokens; los otros cinco sí, porque son los acentos que ya usan los
 * diálogos y el resto del marco.
 */
.dsr-celda-ico {
	color: var(--dsr-tinta-suave);
}

.dsr-celda-ico--info { color: var(--dsr-principal); }
.dsr-celda-ico--ok { color: var(--dsr-ok); }
.dsr-celda-ico--atencion { color: var(--dsr-atencion); }
.dsr-celda-ico--peligro { color: var(--dsr-peligro); }
.dsr-celda-ico--link { color: var(--dsr-principal); }

.dsr-celda-ico--pdf { color: #c0392b; }
.dsr-celda-ico--xls { color: #1e7145; }
.dsr-celda-ico--doc { color: #2b579a; }
.dsr-celda-ico--ppt { color: #d24726; }
.dsr-celda-ico--premio { color: #b8860b; }

/* ------------------------------------------------------------ pantalla chica */

/*
 * Abajo de 700 px el marco ya bajó su margen; acá lo acompañan los de la hoja,
 * que si no se llevan un cuarto del ancho. Lo que se apila —el buscador, las
 * herramientas, el pie— lo hace solo, porque las tres barras envuelven.
 */
@media (max-width: 700px) {
	.dsr-pag__cab {
		padding: 12px 12px 10px;
	}

	.dsr-pag__cuerpo {
		padding: 12px;
	}

	.dsr-pag__titulo {
		font-size: 16px;
	}

	.dsr-lista__buscador {
		padding: 10px;
	}

	.dsr-buscador__botones {
		margin-left: 0;
	}

	.dsr-tabla > tbody > tr > td {
		padding: 6px 8px;
	}
}

/* Diccionario de variables de «Acerca de DONASUR»: una tabla simple, sin el marco de las listas. */
.dsr-variables { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.dsr-variables td { padding: 5px 8px; border-bottom: 1px solid var(--dsr-linea, #e3e7ef); vertical-align: top; text-align: left; }
.dsr-variables-encabezado td { font-weight: 600; color: var(--dsr-tinta-suave, #5b6477); border-bottom: 2px solid var(--dsr-linea, #e3e7ef); }
.dsr-variables-enlace { cursor: pointer; }
.dsr-variables-enlace:hover td { background: var(--dsr-fondo, #f4f6fb); }
.dsr-variables-codigos { margin: 4px 0 0; padding: 0; list-style: none; }
.dsr-variables-codigo { display: inline-block; min-width: 1.5em; margin-right: 6px; font-weight: 600; }