/*
 * Solapa del instrumento OPS 2026.
 *
 * Va como hoja aparte y no como CssResource por dos razones: el layout usa
 * flex/grid, que el parser de CssResource de GWT 2.9 no entiende, y así se puede
 * ajustar el diseño sin recompilar el módulo. Todas las clases arrancan con
 * "ops26-", que no existe en Donasur.css: no puede pisar nada del resto del sistema.
 *
 * Los colores son los de Donasur.css — #000099 y #4060A0 (títulos), #376092
 * (etiquetas de campo), #C13100 (acento y errores).
 */

.ops26-form {
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #26303f;
}

/* --------------------------------------------------------------- encabezado */
.ops26-estado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	padding: 12px 18px;
	background: #f1f5fc;
	border-bottom: 1px solid #e8ecf3;
}

.ops26-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
}

.ops26-pendiente {
	background: #fbe6df;
	color: #C13100;
	border: 1px solid #f0c3b5;
}

.ops26-en-curso {
	background: #fdf1d6;
	color: #8a5a00;
	border: 1px solid #efd9a3;
}

.ops26-completo {
	background: #e2f2e8;
	color: #1c7a44;
	border: 1px solid #bcdfc9;
}

.ops26-dato {
	font-size: 12px;
	color: #5d6879;
}

.ops26-dato b {
	color: #26303f;
	font-weight: 600;
}

/* La separacion entre "Ultima actualizacion:", la fecha y "por" salia de
   espacios escritos adentro del texto. Con el texto traducible eso no sirve:
   cada idioma trae los suyos y se pierden al pasar por el .properties. */
.ops26-dato-valor {
	margin: 0 4px;
}

.ops26-dato-sep {
	margin-right: 4px;
}

/* ------------------------------------------------------------------ cuerpo */
.ops26-lae {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	line-height: 1.3;
	color: #000099;
	margin: 0;
	padding: 22px 24px 10px;
}

.ops26-lae-codigo {
	display: block;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C13100;
	margin-bottom: 5px;
}

.ops26-regla {
	height: 2px;
	background: #000099;
	margin: 0 24px 4px;
}

/* Los objetivos son candidatos a salir del instrumento y siguen en pantalla para que
   los validen: el recuadro gris los muestra como un bloque aparte y no como parte del
   cuerpo de preguntas. */
.ops26-objetivo {
	margin: 16px 24px 0;
	padding: 10px 14px;
	background: #f4f5f7;
	border: 1px solid #e6e9ef;
}

.ops26-objetivo-codigo {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5d6879;
}

.ops26-objetivo-texto {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: #26303f;
	padding-top: 3px;
}

.ops26-indicador {
	border-top: 1px solid #e8ecf3;
	margin: 12px 24px 0;
	padding-top: 14px;
}

/* El borde separa un indicador del anterior. Las secciones que no cuelgan de un
   indicador —situación general y observaciones— arman igual este bloque justo
   debajo de la regla de sección, y ahí la línea no separa nada. */
.ops26-regla + .ops26-indicador {
	border-top: 0;
}

/* Debajo del recuadro del objetivo tampoco: la línea le quedaría pegada al borde. */
.ops26-objetivo + .ops26-indicador {
	border-top: 0;
}

.ops26-indicador-titulo {
	display: flex;
	gap: 9px;
	align-items: baseline;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: #000099;
}

.ops26-codigo {
	font-family: Consolas, "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	color: #4060A0;
	background: #f1f5fc;
	border: 1px solid #d7e0f2;
	padding: 1px 5px;
	white-space: nowrap;
}

/* La consigna del recuadro de verificación: qué se pide y, debajo, qué documento
   sirve de respaldo según la plantilla. */
.ops26-consigna {
	grid-column: 1 / -1;
}

.ops26-consigna-ayuda {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 12px;
	line-height: 1.45;
	color: #5d6879;
	padding-top: 2px;
}

/* En el respaldo del indicador, entre la consigna y las ayudas: que es uno solo para
   todas las preguntas de arriba. */
.ops26-consigna-alcance {
	font-size: 11px;
	line-height: 1.45;
	color: #5d6879;
	padding-top: 2px;
}

.ops26-encabezado {
	font-size: 13px;
	font-weight: 600;
	color: #26303f;
	margin: 14px 0 8px;
}

/* -------------------------------------------------------------------- ítem */
.ops26-item {
	padding: 9px 0;
	border-bottom: 1px dotted #d6dce6;
	position: relative;
}

/* La fila entera se tiñe al pasar el mouse. Es lo que lleva el ojo desde el texto
   hasta el Sí/No, que queda contra el margen derecho: la línea de abajo separa, pero
   no acompaña la lectura. El cuadro de comentarios queda afuera: no hay respuesta a
   la derecha que buscar, así que el resaltado no acompaña nada. */
.ops26-item:not(.ops26-item-comentario):not(.ops26-item-apagado):hover {
	background: #f5f8fe;
}

/* Preguntas que otra apaga: se responden sólo si aquélla está en Sí. Quedan a la vista
   y en su lugar —esconderlas dejaría el formulario sin la 4.2.1.b, y quien lo compare
   contra la plantilla va a leer eso como un error—, pero grises y sin poder tocarse. */
.ops26-item-apagado .ops26-pregunta,
.ops26-item-apagado .ops26-campo-label {
	color: #99a3b3;
}

.ops26-item-apagado .ops26-sino {
	opacity: 0.45;
}

/* En las opciones de un encabezado la separación arranca en la sangría, para que el
   grupo se lea colgando de él. Va como pseudo-elemento porque el borde del ítem toma
   todo el ancho y no se puede recortar. */
.ops26-item-sub {
	border-bottom: 0;
}

.ops26-item-sub::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 0;
	bottom: 0;
	border-bottom: 1px dotted #d6dce6;
}

/* Dos casos en que la línea sobra y se ven dos: el último ítem del bloque —abajo ya
   viene el borde del bloque siguiente— y el que tiene la verificación abierta, que
   termina en el borde del recuadro. */
.ops26-item:last-child,
.ops26-item-abierto {
	border-bottom: 0;
}

.ops26-item:last-child::after,
.ops26-item-abierto::after {
	display: none;
}

/* El respaldo del indicador cierra el bloque y no se muestra mientras ninguna de sus
   preguntas esté en Sí. Cerrado, la pregunta de arriba pasa a ser la última del
   bloque y pierde su línea por lo mismo que la última de cualquier bloque; abierto,
   la línea queda, y separa las preguntas del recuadro. */
.ops26-respaldo-cerrado {
	display: none;
}

.ops26-item:has(+ .ops26-respaldo-cerrado) {
	border-bottom: 0;
}

.ops26-item:has(+ .ops26-respaldo-cerrado)::after {
	display: none;
}

.ops26-fila {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	justify-content: space-between;
}

.ops26-pregunta {
	flex: 1 1 auto;
	max-width: 96ch;
	min-width: 0;
}

.ops26-respuesta {
	flex: 0 0 auto;
}

/* Las opciones que cuelgan de un encabezado: la sangría es lo que las separa del
   título, que va pegado al margen. */
.ops26-item-sub .ops26-pregunta {
	padding-left: 18px;
}

/* sí/no segmentado */
.ops26-sino {
	display: inline-flex;
	border: 1px solid #c3cddd;
	background: #fff;
}

.ops26-sino-boton {
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: #5d6879;
	background: #fff;
	border: 0;
	border-right: 1px solid #c3cddd;
	padding: 5px 15px;
	min-width: 52px;
	cursor: pointer;
}

.ops26-sino-boton:last-child {
	border-right: 0;
}

.ops26-sino-boton:hover {
	background: #f2f6fd;
}

.ops26-sino-si.ops26-on {
	background: #1c7a44;
	color: #fff;
}

/* El No marcado va en rosa y no en gris: el gris es el color con que el formulario
   apaga lo que no se responde, así que un No contestado se leía como una pregunta
   deshabilitada. Un No es una respuesta y pesa lo mismo que un Sí. */
.ops26-sino-no.ops26-on {
	background: #be185d;
	color: #fff;
}

/* El botón marcado sigue respondiendo al mouse: volver a tocarlo es lo que deja
   la pregunta en blanco, y sin señal nadie lo prueba. */
.ops26-sino-rw .ops26-sino-si.ops26-on:hover {
	background: #176438;
}

.ops26-sino-rw .ops26-sino-no.ops26-on:hover {
	background: #9d174d;
}

/* En sólo lectura lo que queda es la respuesta escrita, no un control. */
.ops26-sino-ro .ops26-sino-boton {
	cursor: default;
}

/* bloque de verificación */
.ops26-verif {
	margin-top: 9px;
	padding: 11px 13px;
	background: #f8fafd;
	border: 1px solid #e8ecf3;
	border-left: 3px solid #4060A0;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 10px 16px;
}

.ops26-campo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ops26-campo-ancho {
	grid-column: 1 / -1;
}

.ops26-campo-label {
	font-size: 11px;
	font-weight: 600;
	color: #376092;
	letter-spacing: .02em;
}

.ops26-requerido {
	color: #C13100;
	font-weight: 700;
}

.ops26-aviso {
	grid-column: 1 / -1;
	font-size: 11px;
	color: #C13100;
}

.ops26-error .ops26-verif {
	border-left-color: #C13100;
	background: #fdf7f5;
}

.ops26-error-item {
	font-size: 11px;
	color: #C13100;
	padding-top: 4px;
}

/* cómo se escribe el número en los campos que admiten decimales */
.ops26-formato-item {
	font-size: 11px;
	color: #6B7280;
	padding-top: 4px;
}

/* de dónde salió un número que el país no escribió */
.ops26-origen-item {
	font-size: 11px;
	color: #6B7280;
	font-style: italic;
	padding-top: 4px;
}

/* numéricos y textos */
.ops26-numero .ops26-respuesta {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Cantidad y periodicidad, como dos campos rotulados uno debajo del otro: el enunciado
   se queda con el renglón entero, que es largo, y la periodicidad va abajo con su
   etiqueta. */
.ops26-numero-periodicidad {
	display: grid;
	gap: 10px;
}

.ops26-numero-periodicidad .ops26-pregunta {
	max-width: none;
}

.ops26-texto-largo {
	padding: 6px 0 2px;
}

/* --------------------------------------------------------------------- pie */
/* El pie queda a la vista mientras se baja por el cuestionario: son ciento tres
   items y el pais lo carga por partes, asi que el guardado no puede estar solo
   al final. Es sticky y no fixed a proposito: asi toma el ancho y el margen del
   formulario sin repetirlos, y si algun contenedor lo impide vuelve a quedar al
   pie del todo —que es lo que habia— en lugar de aparecer corrido sobre el
   menu. Se despega solo al llegar al ultimo item, donde ya no tapa nada. */

/* Y habia uno que lo impedia: el tema estandar de GWT recorta el mazo de solapas
   (.gwt-TabPanelBottom { overflow: hidden }), y contra un ancestro recortado el
   sticky se queda quieto sin decir nada. Se destapa solo el mazo que tiene esta
   solapa adentro, asi los otros formularios con solapas quedan como estaban. */
.gwt-TabPanelBottom:has(.ops26-form) {
	overflow: visible;
}

.ops26-pie {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 12px 24px;
	margin-top: 18px;
	border-top: 1px solid #e8ecf3;
	background: #fafbfd;
	box-shadow: 0 -2px 6px rgba(38, 48, 63, .08);
}

/* Lo que falta, con una barra que lo dice de un vistazo: amarilla mientras falte
   algo y verde al completar, como el estado del encabezado. El texto lleva al
   primer pendiente, y el tooltip del conjunto da la cuenta exacta. */
.ops26-avance {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: #5d6879;
}

.ops26-barra {
	width: 160px;
	height: 8px;
	background: #e8ecf3;
	border-radius: 4px;
	overflow: hidden;
}

.ops26-barra-relleno {
	width: 0;
	height: 100%;
	background: #e0a526;
	transition: width .2s;
}

.ops26-avance-completo .ops26-barra-relleno {
	background: #2e9e5b;
}

.ops26-faltan,
.ops26-faltan:visited {
	color: #8a5a00;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ops26-faltan:hover {
	text-decoration: underline;
}

.ops26-avance-completo .ops26-faltan {
	color: #1c7a44;
	cursor: default;
	text-decoration: none;
}

/* De una sola respuesta a revisar el mensaje trae el texto entero del item, que
   estirado agranda la barra y le come la pantalla al formulario: se corta en una
   linea y el texto completo queda en el tooltip. */
.ops26-barra-error {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 11px;
	background: #fdf0ec;
	border: 1px solid #f0c3b5;
	color: #C13100;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ops26-pie-botones {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

/* ------------------------------------------------------- ajuste a pantallas */
@media ( max-width : 900px) {
	.ops26-verif {
		grid-template-columns: 1fr;
	}
	.ops26-fila {
		flex-direction: column;
		gap: 8px;
	}
}

/* ------------------------------------------- matriz de monitoreo 2026
 * El estilo es el de la matriz anterior: el marco blanco con sombra, el ancho
 * tope, el encabezado oscuro, el cebrado gris y el rosa de los paises que
 * todavia no cerraron. La pantalla reemplaza a aquella, asi que se lee igual.
 * Por eso los colores de este bloque no son los de la solapa.
 */

/* El tope de ancho no es decoracion: adentro del SectionPanel la matriz vive en
   una celda de tabla, que se estira hasta lo que mida su contenido. Sin el tope,
   las ciento una columnas empujan la pagina entera y el que scrollea termina
   siendo el navegador; con el, la celda se planta y scrollea el marco. */
.ops26-matriz-pagina {
	max-width: 1480px;
	margin-left: auto;
	margin-right: auto;
}

.ops26-matriz-filtro {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 4px;
	font-size: 12px;
	color: #6B7280;
}

/* El boton se va al otro extremo de la barra: el selector abre la matriz y el
   export se lleva lo que quedo abierto. */
.ops26-matriz-exportar {
	margin-left: auto;
}

/* Ciento una columnas no entran en ninguna pantalla: la tabla scrollea dentro
   de su marco y el resto de la pagina se queda quieta.

   El marco es contexto de apilamiento aparte para que los z-index de la columna
   fija no se le escapen a la pagina. El velo gris del cartel de espera es un div
   que cuelga del body sin z-index propio, asi que cualquier numero suelto en la
   pagina le gana: la columna de los paises quedaba nitida atras del velo mientras
   el resto de la matriz se oscurecia. Aislado, los numeros de abajo se comparan
   entre ellos y la matriz entera se va atras del velo de una pieza. */
.ops26-matriz-scroll {
	overflow-x: auto;
	isolation: isolate;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ops26-matriz {
	min-width: 100%;
	border-collapse: collapse;
	color: #111827;
}

/* Cada regla de celda nombra la tabla ademas de la celda. No es prolijidad: en
   Donasur.css hay un `.donasur td { padding: 0 }` y el shell mete toda la aplicacion
   adentro de un <table class="donasur">, asi que esa regla —clase mas elemento— le
   gana a la clase sola y deja las columnas pegadas. Con dos clases pesa mas y el
   relleno llega. Todas las de abajo quedan igual de pesadas, asi que entre ellas
   sigue decidiendo el orden, que es como estan pensadas.

   El alto va escrito y no sale del contenido, como pasaba en la matriz anterior:
   alla la fila la estiraba el Si/No de 1.2rem, y una seccion sin ninguna marca
   —numeros, textos— quedaba mas apretada que las demas. En un td el alto es un
   minimo, asi que la fila con marca llega al mismo numero por su cuenta.

   El tamaño de letra no se declara porque no llegaria: Donasur.css fija
   "body, table td" en 12px con !important, y eso le gana a lo que diga la tabla.
   Es la misma razon por la que la marca va en un span y no suelta en la celda. */
.ops26-matriz .ops26-matriz-pais,
.ops26-matriz .ops26-matriz-celda,
.ops26-matriz .ops26-matriz-estado {
	height: 2.1rem;
	padding: 0.3rem 0.8rem;
	line-height: 1.25;
	text-align: center;
	border-bottom: 1px solid #E5E7EB;
	white-space: nowrap;
}

/* --------------------------------------------------------------- encabezado */
/* Las tres filas del header —seccion, indicador e item— van del mismo oscuro:
   en la matriz anterior el grupo y el subgrupo tampoco se distinguian por color
   sino por el tamaño de la letra. */
/* El texto del encabezado se parte en varias lineas y de ahi sale el alto de la fila,
   como en la matriz anterior: con ciento una columnas la tabla no entra ni cerca en el
   ancho del marco, asi que cada columna termina midiendo su palabra mas larga y la
   etiqueta se acomoda abajo. El alto escrito es un piso, para que una seccion de puros
   codigos de una letra no deje un encabezado finito. */
.ops26-matriz .ops26-matriz-esquina,
.ops26-matriz .ops26-matriz-seccion {
	height: 2.5rem;
	background: #1F2937;
	color: #fff;
	padding: 0.6rem 1rem;
	font-weight: 600;
	text-align: center;
	border: 1px solid #4B5563;
	vertical-align: middle;
}

/* Solo la esquina de Pais: la de Estado esta al otro extremo y fijarla la traeria
   encima de la primera columna. */
.ops26-matriz-fija {
	position: sticky;
	left: 0;
	z-index: 6;
}

.ops26-matriz .ops26-matriz-indicador,
.ops26-matriz .ops26-matriz-item {
	height: 2.5rem;
	background: #1F2937;
	color: #fff;
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	text-align: center;
	border: 1px solid #4B5563;
	vertical-align: middle;
}

/* La fila del medio dejo de mostrar el codigo del indicador para mostrar su nombre,
   asi que la monoespaciada que alineaba los "1.1.1" ya no viene al caso. */
.ops26-matriz .ops26-matriz-indicador {
	font-weight: 600;
}

/* -------------------------------------------------------------------- filas */
/* Todo el lateral de la tabla va en 1rem. El nombre del pais es lo unico que arranca
   pegado al borde del marco —el resto de la fila va centrado—, asi que se lleva un
   escalon mas. */
.ops26-matriz .ops26-matriz-pais {
	background: #fff;
	text-align: left;
	padding-left: 1rem;
	font-weight: 500;
	position: sticky;
	left: 0;
	z-index: 5;
}

.ops26-matriz .ops26-matriz-celda {
	min-width: 28px;
}

/* El Si/No y los numeros se leen mas grandes que el resto de la celda: es lo que
   se busca al barrer la matriz con la vista. */
.ops26-matriz-marca {
	display: inline-block;
	font-size: 1.2rem;
}

.ops26-matriz-numero {
	font-weight: 700;
}

.ops26-matriz .ops26-matriz-celda-texto {
	text-align: left;
}

/* El comentario de observaciones: una celda ancha y recortada, con el texto completo
   en el tooltip (el Excel tambien lo lleva entero). En la matriz completa una linea
   alcanza para saber que hay algo escrito; con la seccion elegida hay lugar para dos.
   El tope de lineas es lo que evita que un parrafo largo estire la fila de los
   veintisiete paises y desarme el alto parejo de la matriz. */
.ops26-matriz .ops26-matriz-celda-parrafo {
	text-align: left;
	vertical-align: middle;
}

.ops26-matriz-parrafo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	width: 420px;
	max-width: 420px;
	max-height: 1.25em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	text-align: left;
}

/* Con la seccion elegida el mismo recorte, mas ancho y con una linea mas. */
.ops26-matriz-por-seccion .ops26-matriz-parrafo {
	-webkit-line-clamp: 2;
	width: 60vw;
	max-width: 780px;
	max-height: 2.5em;
}

/* El tope de ancho va en el span y no en la celda: en una tabla de layout automatico
   la columna mide lo que mida su contenido, asi que un max-width en el td no recorta
   nada. Un inline-block si lo respeta, y lo que queda afuera lo dice el tooltip. */
.ops26-matriz-texto {
	display: inline-block;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.ops26-matriz-referencia {
	cursor: pointer;
}

.ops26-matriz-referencia .ops26-matriz-marca {
	transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.ops26-matriz-referencia:hover .ops26-matriz-marca {
	transform: scale(1.1);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.ops26-matriz .ops26-matriz-estado {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ops26-matriz-completo {
	color: #059669;
}

.ops26-matriz-en-curso {
	color: #B45309;
}

.ops26-matriz-pendiente {
	color: #DC2626;
}

/* El fondo de la columna fija sale de estas reglas y no de la fila, que no
   pinta debajo de una celda sticky. Van en este orden a proposito: comparten
   especificidad, asi que en una celda con varias gana la ultima, y una fila a
   la que le falta algo se tiñe aunque sea par. Rosa el pais que no cargo nada y
   ambar el que va por la mitad: el que termino queda sin teñir. */
.ops26-matriz .ops26-matriz-par {
	background: #F9FAFB;
}

.ops26-matriz .ops26-matriz-fila-en-curso {
	background: #FEF3C7;
}

.ops26-matriz .ops26-matriz-fila-pendiente {
	background: #FCE7F3;
}

/* La fila entera se tiñe al pasar el mouse. Nombra las celdas de datos una por
   una en lugar de tomar el td porque las tres filas del encabezado viven en el
   mismo tbody que los paises —FlexTable no arma thead—, y si no se las deja
   afuera se tiñen tambien. */
.ops26-matriz tbody tr:hover .ops26-matriz-pais,
.ops26-matriz tbody tr:hover .ops26-matriz-celda,
.ops26-matriz tbody tr:hover .ops26-matriz-estado {
	background: #E5E7EB;
}

.ops26-matriz tbody tr:hover .ops26-matriz-fila-en-curso {
	background: #FDE68A;
}

.ops26-matriz tbody tr:hover .ops26-matriz-fila-pendiente {
	background: #F9A8D4;
}

/* ----------------------------------------------------------------- leyenda */
.ops26-matriz-leyenda {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1rem;
	padding: 0 4px;
	font-size: 0.75rem;
	color: #6B7280;
}