li.tarea-estado.concluida, li.tarea-estado.enproceso, li.tarea-estado.sininiciar{
    list-style: none;
}

li.tarea-estado.concluida::before {
content: "";
      display: inline-block; /* or block, depending on desired layout */
      width: 20px; /* Set desired width */
      height: 20px; /* Set desired height */
      background-image: url("https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-lista-concluida_1.png");
      background-size: contain; /* or cover, or specific dimensions */
      background-repeat: no-repeat;
      background-position: center left;
      margin-right: 10px; /* Adjust spacing */
}
li.tarea-estado.enproceso::before {
content: "";
      display: inline-block; /* or block, depending on desired layout */
      width: 20px; /* Set desired width */
      height: 20px; /* Set desired height */
      background-image: url("https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-lista-proceso.png");
      background-size: contain; /* or cover, or specific dimensions */
      background-repeat: no-repeat;
      background-position: center left;
      margin-right: 10px; /* Adjust spacing */
}
li.tarea-estado.sininiciar::before {
content: "";
      display: inline-block; /* or block, depending on desired layout */
      width: 20px; /* Set desired width */
      height: 20px; /* Set desired height */
      background-image: url("https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-lista-sin-iniciar.png");
      background-size: contain; /* or cover, or specific dimensions */
      background-repeat: no-repeat;
      background-position: center left;
      margin-right: 10px; /* Adjust spacing */
}
.leyenda.gris {
    background-color: none;
background-image: url(https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-sin-iniciar.png);
    height: 32px !important;
    background-repeat: no-repeat;
    width: 32px !important;
}
.leyenda.azul {
    background-color: none;
     background-image: url(https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-etapa-en-proceso.png);
    height: 32px !important;
    background-repeat: no-repeat;
    width: 32px !important;
}
.leyenda.verde {
    background-color: none;
    background-image: url(https://ojoalafiscalia.org/wp-content/uploads/2025/08/icono-etapa-concluida.png);
    height: 32px !important;
    background-repeat: no-repeat;
    width: 32px !important;
}
li.fechaInicio, li.fechaFinal {
    padding-left: 32px;
}
li.fechaFinal {
    padding-left: 32px;
    padding-bottom: 16px;
}
.progreso-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	text-align: center;
	border-radius: 6px;
	overflow: hidden;
	font-family: Arial, sans-serif;
}

.progreso-titulo {
	background-color: #010728; /* azul fuerte */
	color: white;
	padding: 20px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
 }


 .progreso-leyendas {
	background-color: #ebedf0; /* gris fondos */
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 10px;
	font-size: 14px;
	color: #333;
}

.progreso-leyendas span {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 500;
}

.leyenda.circulo {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 8px;
}

.texto-leyenda .etapa {
	font-weight: bold;
	font-size: 16px; /* tamaño de "Etapa" del Progreso del concurso por etapas */
}

.leyenda.verde { background-color: #39b44a; }
.leyenda.azul { background-color:  #5c72eb; }
.leyenda.gris { background-color: #808080; }

/* Colores del texto */
.texto-verde { color: #39b44a; }
.texto-azul { color:  #5c72eb; }
.texto-gris { color: #808080; }

/* fin header */


.tareas-grid {
	display: grid;
	grid-template-columns: 2fr 1fr; /* dos columnas: tareas más anchas */
	gap: 30px; /* espacio entre columnas */
	margin-top: 20px;
	align-items: start;
}

#tiempo-limite-panel ul {
    background-color: #ebedf0;
    padding: 16px;
    padding-left: 0px;
    list-style-type: none;
}
.tareas-grid a {
    background-color: #5c72eb;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 16px;
    border-radius: 12px;
}
.timeline-container {
	width: 100%;
	max-width: 1000px;
	margin: 40px auto;
	font-family: Arial, sans-serif;
	position: relative;
	text-align: center;
}

/* Línea azul conectando los círculos (centrada) */
.linea-timeline {
	position: absolute;
	top: 75%; /* centrado vertical dentro del contenedor */
	left: calc(80px / 2); /* empieza en el centro del primer círculo */
	right: calc(80px / 2); /* termina en el centro del último círculo */
	height: 6px;
	background-color: #001f4d;
	z-index: 1;
	transform: translateY(-50%); /* ajusta exactamente al centro de los círculos */
}

.etapas-nombres {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
	padding: 0 60px;
}

.etapa-nombre {
	flex: 1;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	max-width: 224px;
	word-break: break-word;
	font-weight: bold;
}

.etapa-nombre.sininiciar {
	color: #808080;   /*gray*/
}
.etapa-nombre.enproceso {
	color: #5c72eb;    /*azul*/
}
.etapa-nombre.concluida {
	color: #39b44a; /*verde*/
}


.etapas-circulos {
	display: flex;
	/*justify-content: space-between;*/
	position: relative; /* necesario para posicionar la línea en relación con los círculos */
	width: 100%;
	margin-top: 20px;
	margin: 0;
	padding: 0;
	gap: 0; /* elimina cualquier separación entre columnas */
}

.etapa-circulo {
	/*flex: 1;*/ /* hace que cada círculo ocupe el mismo ancho */
	width: 100px; /* tamaño máximo del círculo */
	height: 100px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.2s;
	border: 10px dashed gray;
	position: relative;
	z-index: 2;
	margin: 0 auto; /* centra el círculo dentro de su columna */
	margin-top: 20px;
	background-color: #e5e5e5;
}


.etapa-circulo-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	text-align: center;
	width: auto;
}

.etapa-circulo img.icono-etapa {
	max-width: 70%;   /* el icono será 20% menor que el círculo */
	max-height: 70%;
	object-fit: contain;
}

/* Bordes según estado */
.etapa-circulo.sininiciar { border-color: #808080; }
.etapa-circulo.enproceso { border-color: #5c72eb;  }
.etapa-circulo.concluida { border-color: #39b44a; }

.etapa-circulo:hover {
	transform: scale(1.1);
}

.tareas-por-etapa { display: none; }
.tareas-por-etapa.activa { display: block; }
.etapa-circulo.activa {
	border: 10px solid #010728;
	transform: scale(1.1);
}


 /* Barra de progreso */
.barra-progreso-container {
	width: 100%;
	background-color: #ebedf0; /*gris*/
	border-radius: 8px;
	margin: 20px 0;
	height: 25px;
	overflow: hidden;
	position: relative;
}

.barra-progreso {
	height: 100%;
	background-color: #5c72eb;
	position: relative;
	display: flex;
	justify-content: flex-end; /* alinea el contenido a la derecha */
	align-items: center;
	padding-right: 10px; /* separa el número del borde derecho */
	border-radius: 15px;
}

.barra-progreso .progreso-texto {
	font-size: 90%; /* 10% menor que la barra */
	color: white;
	font-weight: bold;
}

.titulo-avance {
	font-size: 28px;
	font-weight: 500;
	color: #010728;
	margin-bottom: 8px;
	text-align: left;
}

.tareas-por-etapa ul {
    background-color: #ebedf0;
    padding: 24px !important;
    padding-left: 52px !important;
    margin-top: 0 !important;
    min-height: 300px;
}

/* Tareas estado */
.tarea-estado.sininiciar span {
	color: #808080;
}
.tarea-estado.enproceso span {
	color: #5c72eb;
}
.tarea-estado.concluida span {
	color: #39b44a;
}
.tarea-estado a {
	font-weight: bold;
}

/*Rectángulo con las esquinas dobladas  este */
/*sirve para poner las leyendas de "Tiempo límite para esta etapa"*/
.rectangulo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 125px;              /* 100px * 1.25 */
	height: 50px;              /* 40px * 1.25 */
	background-color: #5c72eb; /* Azul */
	color: white;
	font-size: 20px;           /* 16px * 1.25 */
	font-weight: bold;
	border-top-right-radius: 25px;   /* 20px * 1.25 */
	border-bottom-right-radius: 25px;/* 20px * 1.25 */
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	text-align: center;
}
.contenedor-etapa {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #010728;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: bold;
}
.espaciado {  /*espaciado del li */
	margin-bottom: 10px;
}
/*************************** */
/* para poner el díahora y minuto limite */
.progreso-contenedor {
	display: flex;
	align-items: stretch; /* Alinea los cuadros a la misma altura que el título */
	gap: 5px; /* Espacio reducido entre título y cuadros */
}

.progreso-titulo {
	background-color: #010728;
	color: white;
	padding: 20px;
	font-size: 20px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: left;
}

.tareas-container .progreso-titulo, .progreso-contenedor .progreso-titulo{
	color: white;
	padding: 20px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: left;
}

.progreso-tiempo {
	display: flex;
	gap: 3px; /* Espacio mínimo entre cuadros */
}

.rectangulo-azul {
	background-color: #5c72eb;
	color: white;
	text-align: center;
	width: 70px; /* Ancho fijo */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 0; /* Bordes rectos */
}

.rectangulo-azul .valor {
	font-size: 22px; /* 25% más grande */
	font-weight: bold;
	line-height: 1;
}

.rectangulo-azul .etiqueta {
	font-size: 11px;
	font-weight: normal;
	margin-top: 2px;
}
/************************************ */