body{
	background: linear-gradient(135deg, #F8F9FB 0%, #F1F2F5 100%);
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin-left: auto;
	margin-right: auto;
	background-repeat: repeat-y;
	font-size: 13px;
	padding: 0px;
}
#leftColumn {
	width: 170px;
	float: left;
}

#bodyColumn {
	margin-right: 1.5em;
	margin-left: 197px;
}

td,select,input,li {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
}
code {
	font-size: 12px;
}

a {
	text-decoration: underline;
}

#leftColumn a {
	text-decoration: none;
}

#legend li.externalLink {
	background: url(../images/ico_external.png) left top no-repeat;
	padding-left: 18px;
}

a.externalLink,a.externalLink:link,a.externalLink:visited,a.externalLink:active,a.externalLink:hover
	{
	background: url(../images/ico_external.png) right center no-repeat;
	padding-right: 18px;
}

#legend li.newWindow {
	background: url(../images/ico_newwindow.png) left top no-repeat;
	padding-left: 18px;
}

a.newWindow,a.newWindow:link,a.newWindow:visited,a.newWindow:active,a.newWindow:hover
	{
	background: url(../images/ico_newwindow.png) right center no-repeat;
	padding-right: 18px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	color: #666;
	background: none;
	font-weight: normal;
	padding-left: 0;
	border: none;
	border-bottom: 1px dotted #ccc;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	padding: 4px 4px 4px 0;
	color: #999 !important;
	background: none;
	font-weight: none;
	font-size: 20px;
	border: none;
	border-bottom: 1px dotted #ccc;
}

p {
	line-height: 1.3em;
	font-size: 12px;
	color: #000;
}
#breadcrumbs {
	overflow: hidden;
	padding: 3px 10px 3px 20px;
	background-repeat: repeat-x;
	border: none;
	background-color: #fff !important;
}

#breadcrumbs a {
	font-weight: bold;
	color: #999;
	text-decoration: underline;
}

#leftColumn {
	margin: 10px 0 10px 0;
	border: 1px solid #ccc;
	border-top: none;
	border-left: none;
	padding-right: 0;
	padding-left: 0;
	width: 180px;
	background-color: #e2f3b8;
}

#navcolumn {
	margin: 0 !important;
	padding: 0 !important;
}

#navcolumn h5 {
	font-size: 11px;
	padding: 1px 0 1px 12px;
	color: #666;
	background-position: left 5px;
	font-variant: small-caps;
	border: none;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	background-color: #ECFEBC;
}

table.bodyTable th {
	color: white;
	background-color: #bbb;
	text-align: left;
	font-weight: bold;
	font-size: 8px;
}

table.bodyTable th,table.bodyTable td {
	font-size: 8px;
}

table.bodyTable tr.a {
	background-color: #ddd;
}

table.bodyTable tr.b {
	background-color: #eee;
}

.source {
	border: 1px solid #999;
	overflow: auto;
	background-color: #eee;
}

dt {
	padding: 4px 4px 4px 24px;
	color: #333333;
	background-color: #ccc;
	font-weight: bold;
	font-size: 14px;
}

.subsectionTitle {
	font-size: 8px;
	font-weight: bold;
	color: #666;
}

TABLE {
	FONT-SIZE: 9px
}

.xright a:link,.xright a:visited,.xright a:active {
	/*color: #666; */
	color: #FFF;
}

.xright a:hover {
	color: #003300;
}
#banner {
	height: 93px;
	background-color: #e2f3b8;
}

#banner  a#bannerRight img {
	margin: 10px 10px 0 0 !important;
}

#banner  a#bannerLeft img {
	margin: 10px 0 0 10px !important;
}

#navcolumn ul {
	margin: 3px 0 5px -0em;
}

#navcolumn ul a {
	color: #333333;
}

#navcolumn ul a:hover {
	color: red;
}

#navcolumn ul li {
	background-position: top left;
}

#navcolumn ul li.expanded {
	background-image: none;
	font-weight: bold;
	/*color: #666; */
	color: #FFF;
}

#navcolumn ul li.expanded ul {
	margin-top: 0;
	margin-bottom: 0;
}

#navcolumn ul li.expanded ul li {
	font-weight: normal;
}

#intro {
	border: solid #ccc 1px;
	margin: 6px 0px 0px 0px;
	padding: 10px 40px 10px 40px;
}

.subsection {
	margin-left: 3px;
	color: #333333;
}

.subsection p {
	font-size: 8px;
}

#footer {
	padding: 10px;
	margin: 20px 0px 20px 0px;
	border-top: solid #ccc 1px;
	color: #333333;
}

dl {
	border: 1px dotted #ccc;
	background-color: transparent;
}

dt {
	background-color: transparent;
	font-family: Arial, Helvetica, sans-serif;
	color: #999 !important;
	font-weight: bold;
	font-size: 16px;
}

hr {
	border: none;
	border-bottom: 1px solid #ccc;
	background-color: transparent;
	height: 1px;
}

#breadcrumbs,#footer,#navcolumn li {
	font-size: 10px;
}
TD.itemList {
 Font-weight: normal; 
 Font-size: 8px; 
 FONT-FAMILY: arial, sans-serif	
}
TD.reportHeader {
	 BACKGROUND: #eff7ff; 
	 PADDING: 5px; 
	 FONT-WEIGHT: bold; 
	 FONT-SIZE: 12px; 
	 BORDER: #dcdcdc 1px solid;
}
TD.titleText {
	 BACKGROUND: #eff7ff; 
	 PADDING-left: 5px;
}
TD.headerStats {
	BORDER-LEFT: #dcdcdc 1px solid;
}
TD.chart {
  padding: 4px; 
  BORDER: #dcdcdc 1px solid;
}
TD.chartHeader {
  padding: 4px; 
  BORDER: #dcdcdc 1px solid; 
  BACKGROUND: #eff7ff;  
  FONT-WEIGHT: bold; 
  FONT-SIZE: 12px;
}
TD.graphHeaderLeft {
         BACKGROUND: #eff7ff; 
         BORDER: #dcdcdc 1px solid;
}

TD.graphHeader {
         BACKGROUND: #eff7ff; 
         BORDER-BOTTOM: #dcdcdc 1px solid; 
         BORDER-TOP: #dcdcdc 1px solid;
         BORDER-RIGHT: #dcdcdc 1px solid;
}

TD.graphItem {
         BACKGROUND: #ffffff; 
         BORDER-BOTTOM: #dcdcdc 1px solid; 
         BORDER-LEFT: #dcdcdc 1px solid; 
         BORDER-RIGHT: #dcdcdc 1px solid; 
         PADDING-LEFT: 15px; 
         PADDING-RIGHT: 15px; 
         FONT-WEIGHT: bold; 
         FONT-SIZE: 12px; 
}

TD.graphPercent {
         BACKGROUND: #ffffff; 
         BORDER-BOTTOM: #dcdcdc 1px solid; 
         BORDER-RIGHT: #dcdcdc 1px solid;
}
TD.graphBarLeft {
	BACKGROUND: #ffffff; 
	BORDER-BOTTOM: #dcdcdc 1px solid;  
} 
TD.graphBar {
	BACKGROUND: #ffffff; 
	BORDER-BOTTOM: #dcdcdc 1px solid; 
	BORDER-RIGHT: #dcdcdc 1px solid; 
	WIDTH: 50%;
} 

TD.hspacer {
	BORDER-BOTTOM:#dcdcdc 1px solid; 
	BORDER-TOP:#dcdcdc 1px solid;
}

TD.mover {
	BORDER:#dcdcdc 1px solid;
}

TABLE.barGraph {
	WIDTH: 100%;
}
TD.empty {
	FONT-SIZE: 2px; 
	BACKGROUND: #c0c0c0; 
	BORDER:#9c9c9c 1px solid;
}
TD.fullcover {
	FONT-SIZE: 2px; 
	BACKGROUND: #00df00; 
	BORDER:#9c9c9c 1px solid;
}
TD.covered {
	FONT-SIZE: 2px; 
	BACKGROUND: #00df00; 
	BORDER-LEFT:#9c9c9c 1px solid;
	BORDER-TOP:#9c9c9c 1px solid;
	BORDER-BOTTOM:#9c9c9c 1px solid;
}
TD.uncovered {
	FONT-SIZE: 2px; 
	BACKGROUND: #df0000; 
	BORDER:#9c9c9c 1px solid;
}
TD.tabText {
	PADDING-RIGHT: 12px; 
}
TABLE.srcView {
	FONT-SIZE: 8px; 
	BORDER-LEFT:#dcdcdc 1px solid;
	BORDER-RIGHT:#dcdcdc 1px solid; 
	BORDER-BOTTOM:#dcdcdc 1px solid;
}

TD.lineCount {
  BACKGROUND: #F0F0F0; 
  BORDER-RIGHT:#dcdcdc 1px solid;  
  PADDING-RIGHT: 3px;
}
TD.lineCountHilight {
  BACKGROUND: #C8C8F0; 
  BORDER-RIGHT:#dcdcdc 1px solid; 
  PADDING-RIGHT: 3px;
}
TD.coverageCount {
  BACKGROUND: #F0F0F0; BORDER-RIGHT:#dcdcdc 1px solid; PADDING-RIGHT: 3px;
}

TD.coverageCountHilight {
  BACKGROUND: #F0C8C8; BORDER-RIGHT:#dcdcdc 1px solid; PADDING-RIGHT: 3px;
}

TD.srcLineClassStart {
   WIDTH: 100%; BORDER-TOP:#dcdcdc 1px solid; FONT-WEIGHT: bold;	
}

.srcCell
{
    background: #ffffff;
    padding-right: 8px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Courier New, Monospace;
}

.srcLine
{
    display: inline;
    white-space: pre;
    padding-left: 10px;
}
TD.lineWarning {
  BACKGROUND: #FFFFA0; BORDER-RIGHT:#dcdcdc 1px solid;  PADDING-RIGHT: 3px;
}


.keyword {
    color: #2020BF;
}

.string {
    color: #BC8F8F;
}

TD.footer {
  BORDER-TOP:#dcdcdc 1px solid;	 FONT-SIZE: 9px
}

.titulox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	color: #666;
	background: none;
	font-weight: normal;
	padding-left: 0;
	border: none;
	border-bottom: 1px dotted #ccc;
}

.textos {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
	text-align:left;

}

.textosB {
	font-weight: Bold; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
	text-align:left;

}

.textotabla {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
	text-align:left;

}

.botones{
}

.titulo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: normal;
	letter-spacing: 0.3px;
	color: #4A4F58;
	background: none;
	border: none;
	border-bottom: 2px solid #D5D8DE;
	padding: 2px 4px 8px 4px;
	text-align: center;
}

/* Banda de mensajes bajo la cabecera.
   Barra de acento a la izquierda, tinte suave y radio de 6px para que hable
   el mismo idioma que los botones y los filetes del resto de las paginas. */
.messenger-wrap{
	margin				: 4px auto 2px auto;
}
.messenger{
	height				: 28px;
	box-sizing			: border-box;
	padding				: 0 14px 0 11px;
	vertical-align		: middle;
	background-color	: #FCEFEF;
	border				: 1px solid #EBD2D2;
	border-left			: 4px solid #B3261E;
	border-radius		: 6px;
	color				: #B3261E;
	font-size			: 12px;
	font-weight			: bold;
	line-height			: 1.2;
	text-align			: left;
}

/* Variante para confirmaciones. La clase la decide MensajeSeveridad segun la
   clave del MessageResources; si no se puede clasificar queda en rojo. */
.messenger-ok{
	background-color	: #EEF6EE;
	border-color		: #CFE3CF;
	border-left-color	: #2E7D32;
	color				: #256029;
}

.formError{
	color				: red; 
}

.controlError{
	background-color	: yellow; 
}

.subCell{
	padding-left: 8px;
}

.headCell{
	font-weight: bold;
}

/*odd, estilo usuado por la lib "Display Tag" para filas impares */
.odd{
	background-color: #E2E4E8;
	font-size			: 12px;
}

/*even, filas pares. Solo iguala el tamano de fuente: sin esta regla las filas
  pares no heredaban los 12px y la grilla alternaba de tamano */
.even{
	font-size			: 12px;
}

/*Realce de la fila bajo el cursor, para seguir la linea en grillas anchas.
  Usa el gris fuerte que antes tenian las filas impares */
tr.odd:hover td, tr.even:hover td{
	background-color: #C0C0C0;
}

/*Cabeceras de tablas, es usuado por la lib "Display Tag".
  El gris se fue suavizando de #666 a #737373 y de ahi a #7A7A7A para que la
  cabecera pese menos. Ojo: cada aclarado baja el contraste de la letra blanca
  (aqui queda en 4.29:1, apenas bajo el minimo AA de 4.5:1) y sube el de la linea
  azul del link ordenable. Es un intercambio asumido a proposito; no aclarar mas
  sin volver a mirarlo. */
thead{
	background-color: #7A7A7A;
	color			: white;
}

/*Cabeceras ordenables de "Display Tag".

  Las reglas anteriores eran "sortable.a:link", que en CSS significa "un elemento
  <sortable> con clase a" -- un selector que no existe --, asi que nunca se
  aplicaban y el link tomaba el azul por defecto del navegador. El selector
  correcto es la clase en el <th> (displaytag la agrega solo, ver
  css.th.sortable/css.th.sorted en displaytag.properties) y el <a> adentro.

  La letra mantiene el blanco de la cabecera; lo unico azul es la linea. Se usa
  border-bottom en vez de text-decoration-color porque funciona en cualquier
  navegador.

  El azul de esta linea es #AFD3FF y NO es el mismo "blue" (#0000FF) de los links
  de paginacion y de exportar a Excel (ver la regla a:link mas abajo). Se separo a
  proposito: aquel va sobre fondo blanco, donde el azul puro contrasta 8.59:1;
  este va sobre el gris de la cabecera, donde da apenas 2.00:1.

  El detalle contraintuitivo: aclarar el azul NO mejora el contraste de inmediato,
  lo empeora. El gris #7A7A7A tiene luminancia 0.1946 y el azul puro 0.0722, asi
  que al aclararlo su luminancia sube HACIA la del gris y pasa por un valle de
  ~1.09:1 (#3366FF) antes de recuperarse. Medidos sobre este gris:

      #0000FF 2.00:1   #3366FF 1.09:1   #6FA8FF 1.78:1
      #AFD3FF 2.78:1   #BFDDFF 3.07:1   blanco  4.29:1

  #AFD3FF da 2.78:1, un 39% mas que el azul puro, y todavia se lee como azul. Se
  descarto #BFDDFF (3.07:1, el primero que cumple el minimo AA de 3:1 para
  elementos graficos) porque a esa altura ya es un azul hielo que se confunde con
  el blanco de la columna activa, y esa distincion importa mas que el numero.

  El grosor se fue ajustando aparte: 3px se leia como borde de celda y no como
  link a 13px de fuente; 2px compensaba el poco contraste del azul puro; quedo en
  1px por preferencia visual, y por eso se subio el contraste por el lado del
  color en vez del grosor. Si alguna vez se cambia la cabecera a un fondo oscuro
  (p.ej. el azul institucional #1F4788), conviene volver a un azul claro tipo
  #7FB3E8, que ahi si contrasta. */
th.sortable a:link,
th.sortable a:visited,
th.sortable a:active,
th.sortable a:hover,
th.sorted a:link,
th.sorted a:visited,
th.sorted a:active,
th.sorted a:hover{
	color			: white;
	text-decoration	: none;
	border-bottom	: 1px solid #AFD3FF;
}

/*Columna por la que se esta ordenando: linea blanca. Sobre el gris contrasta
  mucho mas que el azul (4.29:1 contra 2.00:1), asi que ademas de indicar cual es
  la columna activa, es la que de verdad se ve. */
th.sorted a:link,
th.sorted a:visited,
th.sorted a:active,
th.sorted a:hover{
	border-bottom-color: white;
}

/*El cursor de mano deja claro que la cabecera es cliqueable */
th.sortable, th.sorted{
	cursor: pointer;
}


.dataTableColumn{
	font-size: 8px;
}

.readOnly{
	background-color: #999;
	color:FFF;
}

.lockTransparente{
	position:absolute;
	background-color:black;
	width:100%;
	height:300px;
	opacity: 0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
}

a:active,a:hover,a:link,a:visited {
	color: blue;
}

/* ---- Ordenamiento de formularios de filtro ---- */
table.edot-filtro { border-collapse: separate; border-spacing: 0; }
table.edot-filtro td { padding: 3px 6px; vertical-align: middle; }
/* Solo las celdas que hacen de columna de etiquetas se alinean a la derecha.
   Una celda con colspan abarca la fila entera: es un bloque de contenido, no
   una etiqueta, y debe quedar alineada a la izquierda. */
table.edot-filtro td.textos:not([colspan]) {
	width: 170px;
	text-align: right;
	padding-right: 12px;
	white-space: nowrap;
}
table.edot-filtro td.textosB {
	padding-top: 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid #D5D8DE;
}
table.edot-filtro input[type="text"],
table.edot-filtro input[type="password"],
table.edot-filtro select,
table.edot-filtro textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	padding: 3px 4px;
	border: 1px solid #B5B5B5;
	background-color: #FFFFFF;
}
table.edot-filtro select { min-width: 190px; }
/* El campo de archivo queda con la apariencia nativa del navegador */
table.edot-filtro input[type="file"] {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}
table.edot-filtro img.calendario { vertical-align: middle; }
table.edot-filtro td.formError { font-size: 8pt; }
table.edot-filtro td.botones { padding-top: 14px; }

/* Botones de toda la aplicacion (Volver / Limpiar / Guardar / Buscar / acciones
   al pie de las grillas): mismo aspecto en cualquier pagina */
input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #333333;
	padding: 6px 22px;
	margin: 0 4px;
	border: 1px solid #E2E4E8;
	border-radius: 6px;
	background-color: #FFFFFF;
	background: linear-gradient(to bottom, #FFFFFF 5%, #F4F5F7 100%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: linear-gradient(to bottom, #F0F2F5 5%, #E6E8EB 100%);
	border-color: #D0D3D9;
}
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	position: relative;
	top: 1px;
}
input[type="button"][disabled],
input[type="submit"][disabled] {
	color: #999999;
	background: #EFEFEF;
	box-shadow: none;
	cursor: default;
}


/* Grillas de Display Tag: aire alrededor del texto de cada celda */
tr.odd td, tr.even td {
	padding: 6px 6px;
	line-height: 1.4;
}
thead th {
	padding: 7px 6px;
}

/* Ficha de datos del documento (Detalle emitido / recibido). La tabla se
   escribio con cellpadding="0", asi que la etiqueta queda pegada al valor de
   la celda vecina. El aire se da por CSS y no por el atributo, porque
   cellpadding empuja tambien en vertical y estiraria la ficha de mas. */
table.edot-ficha td {
	padding: 3px 8px;
}
table.edot-ficha td.textosb {
	padding-right: 12px;
	white-space: nowrap;
}

/* Grillas de Display Tag chicas (p.ej. Certificados Vigentes): sin un ancho
   propio quedan del tamano exacto de su texto y se ven como un fragmento
   perdido en medio de una celda mucho mas ancha que el resto de la pagina. */
table.tbl-chica {
	width: 340px;
}
table.tbl-chica th, table.tbl-chica td {
	padding: 6px 14px;
}

/* Columna Acciones. Los iconos miden entre 13 y 25 px y el espaciador 17,
   asi que sin una casilla de ancho fijo cada fila arranca en un punto
   distinto. Se le da el ancho al enlace, no a la imagen, para no deformarla;
   el espaciador si se estira porque es transparente. */
td.acciones{
	white-space			: nowrap;
}
td.acciones a{
	display				: inline-block;
	width				: 24px;
	text-align			: center;
	vertical-align		: middle;
}
td.acciones a img{
	max-width			: 24px;
	vertical-align		: middle;
}
td.acciones > img{
	width				: 24px;
	height				: 17px;
	vertical-align		: middle;
}

/* ------------------------------------------------------------------ */
/* Panel de inicio (welcome.jsp)                                       */
/*                                                                     */
/* Tarjetas. Todo esta acotado con .edot-panel para no alterar el resto */
/* de las pantallas, que siguen con las tablas de siempre. La paleta es */
/* la misma que ya usa la aplicacion -gris #7A7A7A, fila #E2E4E8- para  */
/* que no parezca una pantalla traida de otro sistema.                  */
/* ------------------------------------------------------------------ */
.edot-panel{
	width				: 96%;
	max-width			: 1180px;
	margin				: 14px auto;
	font-family			: Arial, Helvetica, sans-serif;
}
.edot-panel-cab{
	display				: flex;
	align-items			: baseline;
	justify-content		: space-between;
	flex-wrap			: wrap;
	gap					: 8px;
	padding-bottom		: 8px;
	border-bottom		: 1px solid #E2E4E8;
	margin-bottom		: 16px;
}
.edot-panel .titulo{
	border-bottom		: none;
	padding-bottom		: 0;
}
.edot-panel-fecha{
	font-size			: 11px;
	color				: #6B6B6B;
}
/* El enlace se define aparte porque la hoja pinta TODOS los <a> de azul. */
.edot-panel a.edot-link-refrescar:link,
.edot-panel a.edot-link-refrescar:visited,
.edot-panel a.edot-link-refrescar:hover,
.edot-panel a.edot-link-refrescar:active{
	color				: #4A4A4A;
	text-decoration		: none;
	border				: 1px solid #C8CDD4;
	border-radius		: 3px;
	padding				: 1px 7px;
	margin-left			: 4px;
}
.edot-panel a.edot-link-refrescar:hover{
	background-color	: #E2E4E8;
}

/* --- secciones ---------------------------------------------------- */
.edot-seccion{
	margin-bottom		: 20px;
}
.edot-seccion-titulo{
	font-size			: 11px;
	font-weight			: bold;
	letter-spacing		: 0.6px;
	text-transform		: uppercase;
	color				: #5A5A5A;
	margin-bottom		: 8px;
}
.edot-seccion-sub{
	font-weight			: normal;
	text-transform		: none;
	letter-spacing		: 0;
	color				: #8A8A8A;
}

/* Documentos y certificado, uno al lado del otro. flex-wrap los apila
   solos cuando no hay ancho; min-width:0 evita que un contenido largo
   estire su columna y desbalancee la fila. */
.edot-panel-fila{
	display				: flex;
	flex-wrap			: wrap;
	gap					: 20px;
	align-items			: flex-start;
}
.edot-columna{
	flex				: 1 1 340px;
	min-width			: 0;
}

/* --- tarjetas ----------------------------------------------------- */
.edot-cards{
	display				: flex;
	flex-wrap			: wrap;
	gap					: 12px;
}
.edot-card{
	background-color	: #FFFFFF;
	border				: 1px solid #DDE1E6;
	border-top			: 3px solid #7A7A7A;
	border-radius		: 5px;
	box-shadow			: 0 1px 2px rgba(0,0,0,0.07);
	padding				: 10px 12px 11px 12px;
	font-size			: 12px;
	color				: #333333;
}
/* El borde superior es lo unico que cambia de color: tenir la tarjeta entera
   la vuelve ilegible y grita mas de lo necesario. Tres estados de consumo:
   azul = sin usar, verde = en uso, rojo = por agotarse. El color NUNCA es el
   unico portador del dato -el porcentaje esta escrito al lado-, asi que la
   tarjeta se sigue entendiendo en blanco y negro o con daltonismo. */
.edot-card.sinuso{
	border-top-color	: #1F5FA8;
}
.edot-card.enuso{
	border-top-color	: #2E7D32;
}
.edot-card.alerta{
	border-top-color	: #B00020;
}
.edot-card-vacia{
	border-top-color	: #DDE1E6;
	color				: #6B6B6B;
	width				: 100%;
	box-sizing			: border-box;
}
.edot-card-tipo{
	font-weight			: bold;
	font-size			: 12px;
	color				: #2F2F2F;
	margin-bottom		: 6px;
	white-space			: nowrap;
	overflow			: hidden;
	text-overflow		: ellipsis;
}
.edot-card-cifra{
	display				: flex;
	align-items			: baseline;
	gap					: 6px;
	margin-bottom		: 7px;
}
.edot-card-numero{
	font-size			: 24px;
	font-weight			: bold;
	line-height			: 1;
	color				: #2F2F2F;
}
.edot-card-unidad{
	font-size			: 11px;
	color				: #6B6B6B;
}
.edot-card-pie{
	font-size			: 11px;
	color				: #5A5A5A;
	margin-top			: 5px;
}
.edot-card-meta{
	font-size			: 10px;
	color				: #8A8A8A;
	margin-top			: 7px;
	padding-top			: 6px;
	border-top			: 1px solid #EDEFF2;
	line-height			: 1.5;
}

/* Tarjeta de folios: ancho fijo para que la grilla quede pareja. */
.edot-card-folio{
	flex				: 0 1 232px;
	box-sizing			: border-box;
}

/* Tarjeta de certificado. */
.edot-card-cert{
	flex				: 0 1 240px;
	box-sizing			: border-box;
}

/* Contador de documentos: solo numero y etiqueta. */
.edot-card-kpi{
	flex				: 0 1 120px;
	box-sizing			: border-box;
	text-align			: center;
	padding				: 12px 10px;
}
.edot-card-kpi .edot-card-numero{
	display				: block;
	margin-bottom		: 4px;
}
.edot-card-etiqueta{
	display				: block;
	font-size			: 10px;
	color				: #6B6B6B;
	text-transform		: uppercase;
	letter-spacing		: 0.4px;
	line-height			: 1.3;
}
.edot-card-kpi.total{
	background-color	: #F2F4F7;
	border-top-color	: #4A4A4A;
}

/* --- barra de consumo --------------------------------------------- */
/* CSS puro: el ambiente no tiene salida a Internet, asi que no se puede
   depender de ninguna libreria de graficos. */
.edot-barra{
	height				: 7px;
	/* templateDefault.jsp envuelve el cuerpo de la pagina en <div align="center">.
	   Ese atributo no se traduce a text-align:center sino a -webkit-center, que
	   ademas de centrar el texto centra los bloques hijos con ancho definido. El
	   relleno de la barra es justamente eso -un bloque con width en porcentaje-, asi
	   que quedaba centrado dentro del canal, con el mismo hueco a cada lado en vez de
	   arrancar pegado al borde. Se corta la herencia aca y no en .edot-panel: puesto
	   arriba alinea a la izquierda todo el contenido de las tarjetas, que se venia
	   mostrando centrado. */
	text-align			: left;
	background-color	: #E9ECF0;
	/* Sin redondeo, a proposito. El relleno arranca pegado al borde izquierdo -se
	   midio: cero pixeles de separacion-, pero 'overflow:hidden' lo recorta contra
	   la curva del canal, y con 4px de radio sobre 7px de alto la curva se come
	   casi todo el arranque: los primeros pixeles quedan a media altura y mezclados
	   con el gris del fondo, asi que el color parece empezar mas adentro. Con las
	   esquinas cuadradas el relleno arranca de altura completa en el pixel cero. */
	border-radius		: 0;
	overflow			: hidden;
}
.edot-barra-relleno{
	height				: 100%;
	background-color	: #7A7A7A;
}
/* Un consumo bajo pero real -medio punto porcentual- redondea a una barra de
   ancho cero y se ve igual que un timbraje sin estrenar. El minimo solo se le
   pone a los estados que SI tienen consumo; 'sinuso' se queda en cero, que es
   lo que corresponde. */
.edot-barra-relleno.enuso,
.edot-barra-relleno.alerta{
	min-width			: 3px;
}
.edot-barra-relleno.sinuso{
	background-color	: #1F5FA8;
}
.edot-barra-relleno.enuso{
	background-color	: #2E7D32;
}
.edot-barra-relleno.alerta{
	background-color	: #B00020;
}

/* --- distintivo de estado ----------------------------------------- */
.edot-badge{
	display				: inline-block;
	font-size			: 10px;
	font-weight			: bold;
	letter-spacing		: 0.4px;
	padding				: 2px 7px;
	border-radius		: 9px;
	background-color	: #E9ECF0;
	color				: #4A4A4A;
}
.edot-badge.alerta{
	background-color	: #FCE8EA;
	color				: #B00020;
}
.edot-badge-nota{
	font-size			: 10px;
	color				: #6B6B6B;
	margin-left			: 5px;
}