body {

  font-family: Arial, sans-serif;

  margin: 0;

}



nav {

  background: #1f2937;

  padding: 10px;

}



nav button {

  margin-right: 10px;

  padding: 8px 12px;

  background: #3b82f6;

  border: none;

  color: white;

  cursor: pointer;

}



nav button:hover {

  background: #2563eb;

}



main {

  padding: 20px;

}



form {

  margin-bottom: 20px;

}



input, select, button {

  padding: 8px;

  margin: 5px 0;

}



table {

  width: 100%;

  border-collapse: collapse;

}



th, td {

  border: 1px solid #ddd;

  padding: 8px;

}



.timeline {

  width: 100%;

  height: 14px;

  background: #e5e7eb;

  border-radius: 7px;

  position: relative;

}



.timeline-fill {

  height: 100%;

  border-radius: 7px;

}



.estado-activo {

  color: green;

  font-weight: bold;

}



.estado-por_vencer {

  color: orange;

  font-weight: bold;

}



.estado-vencido {

  color: red;

  font-weight: bold;

}